Digital Book

in a world of Maths and Pirates !

Engine & Tools
Unity 5.1, Visual Studio 2013, Adobe CC 2014, SourceTree, GIT, DOTween

(Just have a look further for more explanations)

Programming Language
C#
Customer
Kiupe Company
Supported platforms
Android 4.4 and later

Math Mathews

Follow Math Mathews official website for more information

Math Mathews
Turned into an octopus by a terrible curse, Captain Mathews will look for parts of Sylla’s magical necklace to become himself again. He will cross the seas and explore many islands with Carl and Celia, two brave children that will help him overcome the curse.

The Math Mathews stories gave birth on iOS to 2 games where children (and adults!) can train themselves to mental calculation and multiplications.
The world of Mathews is full of pirates, monsters and magic and very immersive on a narrative point of view ! 
That’s why Kiupe company decided to extend this licence with a multimedia strategy.
They worked on a web fiction to tell the adventures of Mathews for children on FranceTV (expected early 2017) and they decided to think about other medias too…
Thus, the Digital Book project was born !
Agile
When you want to make a sort of “Choose Your Own Adventure” digital book for the first time, it’s not foolish to try all sorts of things that you would like to find in it… Then you test things to keep or abandon them : Choices in the story, gameplay mechanics, user interface animations, sound effects and so on…
That’s exactly what we’ve done after we defined some global objectives about the book.
Math Mathews
Captain Math Mathews

Chest

The Story (a single chapter)

In the cabin of his ship, Math Mathews is trying to open a chest. This hard-won booty turns out to be nearly empty and the captain must prepare to face a mutiny !
From the beginning, the reader will have to decide about Mathews’choices and behavior in front of the other pirates :
Will he succeed in getting back the trust of his crew ?
Maybe he will have to fight them, to deceive them or to use whatever resources in his possession) !
mml_proto01

Working with Kiupe staff, we tried a few stuff with the 3 versions of the prototype. We were aiming at adding some gamification when navigating between the branches of the tree-shaped scenario.
The reader had to think about the scope of his choices and the short-terms consequences of using the resources needed for realizing them.
Basically, a drag and drop operation was always needed in order to validate a selection between 2 or more choices… but we tried a few variations of these mechanics :

  • Placing cards from a deck in empty slots : Each card having a type (e.g Bravery, Thinking, Eloquence,…) with a numeric value and slots having their own type and value threshold
  • MML Slots mechanics

  • Placing gems from a pouch in barrels with slots : Each barrel having a minimum number of gems to be filled before validating the associated choice
  • Mix between placing gems from a pouch and cards from a deck : This time, the reader may need special cards that can replace gems
  • In the end, we added some time-limited choices : The time remaining was shown by a sprite gradually disappearing, and a default choice was selected when the time has elapsed


Navigating from one page to the other was done through a swipe touch input and we implemented several UI animations to make all of this a little more enjoyable :

  • Deck and pouch folding away when not needed
  • Slots and barrels sliding in and away
  • Tips fading in and out
  • Text letters appearing one after the other to simulate a typing machine effect
  • All features were tested in an iterative process to provide a feedback on its own value
I’m hearing right now a few Unity programmer voices :
“Well… fun ! But… hey dude ! How are you doing that ?”
Okay, I’m going to detail a few things and, by the way, I like when you call me “dude”…
Some tools are just great, and if I like it, I just…

dotweenpro_hotweenv2

“Tell it like it is”

DOTween is a free plugin for Unity : It provides a lot of features to animate objects with transition effects, it is very well documented and kept up to date with Unity evolution !
Setup is quite simple : You just have to download the plugin, launch it via the Tools option in the top bar menu and click Setup DOTween…

“Don’t be ashamed to let your conscience be your guide”

Once this is done, just ensure :

  • that you make a proper call to Dotween.Init() function at runtime (in the Awake method of your Game Manager instance for example)
  • that you don’t forget to use the correct namespace in your classes in order to access Dotween methods (using DG.Tweening can help a lot in this matter…)

“But I know deep down inside of me”

Okay, I think that you need an example from there :
using UnityEngine;
using UnityEngine.UI;
using DG.Tweening;

public class MyAnimatedObject : MonoBehaviour {

public Image ImageComponent;// Use this for initializing DOTween and the reference to Image component
void Awake () {

DOTween.Init();
ImageComponent = GetComponent();

}

// Defining a simple input in the Update loop in order to test the feature
void Update () {

// Call DoFade method when you press the Space bar
if (Input.GetKeyDown(KeyCode.Space)) {

DoFade();

}

}

void DoFade() {

// Of course, you need to place the script on a UI gameobject that has an Image component
if (ImageComponent == null) {

Debug.Log(“There’s no Image component on the GameObject containing this script !”);
return;

}

float alphaEndValue = 0.0f;
float timeToFade = 1.0f;

// The sprite will fade with a bouncing effect. It’s funny… and you can replace Ease.OutBounce by another option
ImageComponent.DOFade(alphaEndValue, timeToFade).SetEase(Ease.OutBounce);

}

}

There you go ! You can place this script on a Game Object with an Image component (not just a 2D sprite, we are talking about UI rendered by a Canvas) and press Space bar to watch it disappear progressively !

“I believe you love me, forget your foolish pride !”

This is how animations are managed in Math Mathews Digital Book : Pages sliding after a swipe input, characters sliding or fading in or out, animation of the deck, scaling effects and so on… All of this is done thanks to DOTween and that’s why I love it ! 
You can “tween” nearly everything with this plugin : Transform, rectTransform, position, rotation, scale, color, text, and so on… you can create sequences and play with effects (loops, Yoyo, Easing mode) !
And one last point : I’m not paid to say that. I’ve earned nothing at all, even in nature… and that’s a shame ^^

MML Deck Animation

an example of what you can achieve with simple DOTween commands

Let’s talk about customizing the Inspector

MML Editor example

You can have multiple reasons to customize the Inspector panel in Unity, but I see mainly 2 of them :

  • You want to let Game Designers and Artists make their own tweaks during game development : It’s easier for them when they have a clear access to the variables with a formatted view
  • You want to make your own tweaks in an iterative process (maybe cause you don’t have your own GD slaves to do it for you ^^) : It’s easier for you too when you have a clear access to the variables with a formatted view…
    … and it is simply cool !

Coin Stack

Actually, there are other reasons why I like to make a custom inspector.
First of all, this leads me to think clearly of what properties should be adjusted to enhance the game experience.
By default, the other properties should be private and hidden (although you can very well display private variable, even without a custom inspector, and simply serializing them with the tag [SerializeField]…)
Last but not least, you can use a custom inspector to add buttons that will be used, for example, to populate a list with objects ! This can be very useful when used with Scriptable Objects
I hope you enjoyed this general introduction the Math Mathews Digital Book !

Quick book overview (Accelerated)
Most of all, I hope you are curious to learn more about this world of Pirates and mathematics (It’s weird to say it like that…) and you can surely have a look to the games of Kiupe Company