Week 8 (04/03/19 – 10/03/19)

Testing how to catch the butterflies

  • On tap on one
  • Slipping the finger/mouse from one to another
  • Both

Slipping the finger/mouse from one to another:

Drag a line following the mouse: https://answers.unity.com/questions/184442/drawing-lines-from-mouse-position.html 

To change from this script:

  • Add a collision with the butterflies
  • Limit the line (in length or in time)
  • (Having the android input instead of the mouse)

Side note:

Added a script to see where the mouse is: Mouse.cs:

public class Mouse : MonoBehaviour {
   Camera thisCamera;
   // Use this for initialization
   void Start () {
      thisCamera = Camera.main;

   // Update is called once per frame
   void Update () {
      Vector3 mousePos = Input.mousePosition;
      mousePos.z = thisCamera.nearClipPlane;
      Vector3 mouseWorld = thisCamera.ScreenToWorldPoint(mousePos);
      transform.position = mouseWorld;


How to catch and how the butterflies fly – video


Week 7 – (25/02/19 – 3/03/19)

Test on how the butterflies appear and move in the game (to catch butterfly)

  • Changed ButterflyFlyUp.cs and Butterflies_Manager.cs to have 3 modes. (0) butterfies scale from 0 to 1, then 1 to 0. (1) butterflies start from the left or the right and goes in the opposite side. (2) butterflies start from the bottom and fly to the top.


  • The mode 2, with the butterflies going from bottom to top, is slower, calmer. It fits more with the mood of the game. The mode 0 (scale up and down) could be more stressing and need a player who acts fast. The mode 1 (right/left) is slow too but less natural. The movement of the mode 2 represents better the behaviour of a real butterfly.

Week 6 – Prototype video


  • Each button should be identified as a button (all have the same appearance and color) so the player knows they can click on it.
  • Because the game is for kids and adults who are not used to play games, they are not expected to know how to play and what to so. The instructions should be easy to understand. A tutorial showing what to do could be helpful.


  • The wings of the butterflies were done in photoshop. The 3d model in Maya (the UV mapping need a minor fix)


  • The flowers were made in Maya, textured in Photoshop and rendered as images.


Week 6 – (18/02/19 – 24/02/19)


Food scene


Scene with the number of foodstuff available, the daily bonus and button to get more (which load food game).


  • FoodAmount‘: show the amount of foodstuff available
  • GetMoreButton‘: start the game ‘Food Game’ to collect more foodstuff
  • TimeBeforeMore‘ hourglass showing the time before the player get a daily bonus.
  • Pop_ups/DailyBonus‘: pop up indicating the player got more food as a daily bonus.




  • (On ‘ButtonGetMore‘)
  • OnClickForMore(), load the FoodGameScene to play the food game.


  • (On ‘FoodAmount/Back/Text_amount‘)
  • IEnumerator Start(), get the text, save the original text and call UpdateAmount()
  • UpdateAmount(), replace the ‘/’ in the text by the amount of foodstuff.


  • (On ‘TimeBeforeMore/hourglassMask/Color‘)
  • Start(), make sure the daily food popup is hiden, get its text, get the amount of food. Get the time that has already been waited, get the new time, is there enough time spent to give a daily bonus? If yes then call GiveMoreFood(), else update the gauge of the hourglass and call UpdateGauge().
  • HourglassReinitialisation(), put the time waited to 0 and the gauge to 0 too.
  • IEnumerator UpdateGauge(), while the time waited is inferior to the time needed for a daily bonus, this code calculate the new time waited and update the hourglass gauge.
  • GiveMoreFood(), put back the time waited to 0 and give the daily food amount then show the popup daily bonus.

Food Game


3 differents modes to collect food (flowers) to feed the creatures.


  • Modes‘: selection of game mode
    • Button_EnoughToFeedAll‘: game plays until the player has enough foodstuff to feed all the creatures.
    • Button_Infinite‘: game can be stopped whenever when the player click on the stop button or when the gauge is empty (decrease with time and increase when the player does chain of colors)
    • Button_30sec‘: stop after 30 secondes.
  • Game‘: bejewelled game
    • header‘: contains the score
    • BodyCandies‘: contains the elements of the bejewelled
    • Bottom‘: contains the timer (or button stop in infinite mode) and the bag where the flowers are going into when a chain is made
    • ShapeManager‘: Game manager controlling the bejewelled logic.
  • EndGame‘: Appear once the game is over
    • Button_BackBackAppear‘: Transparent button to make the Button_BackToCollection appear.
    • Bottom‘: contains the score which increase when the flower falls on it.
    • Button_BackToCollection‘: Button to go back to the collection (by loading loadingScene)

In Unity_FoodGameScene.PNG



  • (On ‘Canvas’)
  • Awake(), hide ‘Game’ and ‘EndGame‘ and show ‘DifficultySelection‘.
  • GoToGame(), hide ‘DifficultySelection‘ and show ‘Game‘.
  • GoToEnd(), hide ‘Game‘ and show ‘EndGame


  • (On ‘Canvas’)
  • Awake(), create an instance of GameManager.
  • StartGame(), if the mode is 1 (Enough to feed all), calculate how much food is needed.
  • ShowScore(int score), if the mode is 1 (Enough) change the text as score/needed and update the gauge. If the mode is 2 (Infinite) write score: x and update the gauge. If the mode is 3, write score: x


  • (On ‘Modes‘)
  • Start(), disable all the animations of the butterflies (so they don’t flies away)
  • ClickOnEnough(), activate the gauge, mode is 1 and put the timer as plus 1 every second. Call the coroutine ButterflyFlies()
  • ClickOnInfinite(), activate the gauge, mode is 2 and put the timer as a stop button. Call the coroutine ButterflyFlies()
  • ClickOn30sec(), mode is 3 and put the timer as minus every second. Call the coroutine ButterflyFlies()
  • IEnumerator ButterflyFlies(Animator B), make the butterfly flies, wait a bit and call GoToGame from FoodGameStart.Cs.


  • (On ‘EndGame‘)
  • Start(), add the collected foodstuff to the general amount. Get the bag and call the coroutine ScoreAnim() and ReturnBagAnim().
  • IEnumerator ScoreAnim(), move the score anim from it’s position (under screen) to top.
  • IEnumerator ReturnBagAnim(), activate the animator of the bag to move it from bottom to top and then return it. It then loop and the shake animation and call ShowFlower() to give the impression the bag is being emptied.
  • StopAnimOfBag(), disable the animator so the bag stop moving
  • IEnumerator ShowFlower(), for each point of the score, create a flower and call FlowerFall(). At the end, stop the animation of the bag and make the button_getBackCollection appear.
  • IEnumerator FlowerFall(Transform flower, float speed), move the flower from its position to endpoint, then add one to the score and destroy the flower.


  • (On ‘Game/header/CenterPanel/Score‘)
  • Start(), get the text and change it for the score (0 for the moment
  • UpdateScore(int points), add the the current score the points and give it the the textScore.


  • (On ‘Game/Bottom/Left_Panel‘)
  • Awake(), disable itself
  • Start(), According to the Difficulty choosen, get the points lost per second and the maximum seconds. Enable the button stop and change the color to red. Then start the timer with TimerMinus1SecStop().
  • OnClickStop(), stop the game by calling GoToEnd from FoodGameStart.cs
  • TimerMinus1SecStop(), while the gauge is superior to 0, remove x points every seconds. When the gauge is inferior to 0, stop the game by calling GoToEnd from FoodGameStart.cs


  • (On ‘Game/Bottom/Left_Panel‘)
  • Awake(), disable itself
  • Start(), disable the button stop and start the coroutine TimerPlus1Sec().
  • IEnumerator TimerPlus1Sec(), Count the number of seconds by adding one every second.


  • (On ‘Game/Bottom/Left_Panel‘)
  • Awake(), disable itself
  • Start(), disable the button stop and start the coroutine TimerMinus1Sec().
  • IEnumerator TimerMinus1Sec(), Count the number of seconds by removing one every second. If the number is inferior to 0 then stop the game by calling GoToEnd from FoodGameStart.cs



  • (On ‘Game/ShapeManager‘)
  • Modified to make it fit in the screen and resize according to screen size.
  • Added: IEnumerator MoveTo(GameObject obj, Vector3 GoTo, float speed), to move from position A to B.
  • Added: IEnumerator MoveCandyInBag(GameObject Flower, float speed), move the flower from its position to target1, then start the coroutine AnimateEffectBag(), move the flower from target1 to target2, start the coroutine AnimateBag() and destroy the flower.
  • Added: IEnumerator AnimateBag(), Change the blendshape of the bag to correspond to the score.
  • Added: IEnumerator AnimateEffectBag(), change the blendshape of the bag to make it from small to big then big to small (when flower goes in)
  • Modified IncreaseScore(int amount), get the instance of the GameManager to show the new score.

Week 5 – Aesthetics Impact on Gameplay

How can the aesthetics effect gameplay?

Mechanics, Dynamics, Aesthetics

  • Aesthetics: What feelings the player should experience?
    • relax, calm
    • sense of ‘collection’, wish to catch them all
    • Care for the creature caught (trying to keep them alive)
  • Dynamics play: What will the player experience/do that will engender those aesthetic feelings?
    • Relax, calm: calm music and slow animation/transition, nothing too challenging but relaxing.
    • Sense of ‘collection’ is first engender by the view of the empty jars. Then by collecting more and more butterflies until all the jars contain a butterfly.
    • Care for the creature caught: the hunger gauge and the death of the butterfly. It gives a sense of reality, as these butterflies are real and need to be fed.
  • Mechanics: Rules of the game that will lead to these dynamics
    • Relax: simple mechanics (for instance, touch to catch a butterfly)
    • Sense of collection: the jars start empty, the player plays the butterfly game to catch one, the butterfly is then in the jar.
    • Care for the creature caught: hunger decreasing and death after x hours.

The Elemental Tetrad

Sans titre-1.png

Final Thoughts:

Why using aesthetics:

  • Help to understand how to play: The audience of this game is children and adults with few experiences with games. The mechanics and rules have to be simple to be easily understood. The aesthetics have to be designed to help the players to understand how to play. However, a tutorial showing what to do (for instance, a finger touching a button) will first introduce the mechanics to the player.
  • Enhance the story and engagement: the assets are 3D models rendered into sprites. The purpose is to have a semi-realistic look. The collection scene, for instance, represents shelves that can be compared to the shelves in the room of the little boy (where he kept his butterflies).
  • Calm and relax: the colors and contrast between assets are chosen to make the visual simpler. The animations are slow and there is little movement on the screen.

The main effect is for the player to feel relax, have a break after a stressful day and enjoy the game for a few minutes.

Week 5 (11/02/2018 – 17/02/2018)

Butterfly Game:


Game to catch the butterfly by collecting several time the same one.


  • Top
    • Center_panel‘: name and picture of the butterfly to catch
    • Gauge‘: show the progress, win if full loose if empty
  • ButterflyContainer‘: manage the creation of the butterflies and the game logic
  • ButterflyToCatchExemple‘: instance of the butterflies that will be duplicated




  • (On ‘Body/ButterflyContainer‘)
  • Awake(), create an instance of the script and hide the butterfly example
  • Start(), get the difficulty (Novice, apprentice or expert) and change the nb maximum and minimum on screen, the scale of the butterfly, the points gained and lost. Then, get the ID of the wanted butterfly and start the coroutine CreateUpdate().
  • IEnumerator CreateUpdate(), create a butterfly by starting coroutine CreateButterfies() and wait more or less according to minimum butterfly on screen.
  • IEnumerator CreateButterflies(),  create a butterfly, put it in one of the four lines, decide if the butterfly is a correct one or a random one and change its wings texture.
  • ButterflyDeleted(int currentID, bool catched), update the number of butterfly on screen and points (plus if catched is true, else minus), check if the game is won or lost.
  • CorrectButterflyCreated(), add one to ActualCorrrectButterflyOnScreen.
  • LoseGame(), load GameButterflyEndScene as lost.
  • WinGame(), load GameButterflyEndScene as won and update settings of the butterfly to catched.


  • OnTapButterfly(), if the butterfly is correct then green effect, else red effect (by calling the coroutine Catched(IsCorrect, papillon) in EffectCatch).
  • DestroyItself(), destoy this game Object (called in EffectCatch at the end of the coroutine Catched()).


  • Start(), set the border of the line according to difficulty (as it changes the scale of the butterfly). Decide if the butterfly is quick, medium or fast (still according to difficulty as there is no fast butterfly when novice)
  • Update(), make sure the butterfly doesn’t go out of the screen by checking the border and making it go in the opposite direction if does it. Else, goes right or left while moving up. If the butterfly as reached the top, it is destroyed.


  • Awake(), save this instance and make it not destroyed on load to save the ID of the butterfly to catch through collection to Game


  • Awake(), hide the effect
  • IEnumerator Catched(bool IsCorrect, GameObject Butterfly), show the effect, make it red if !IsCorrect, else green. Change its scale to 0 to 1 then destroy the butterfly and change the scale back to 0 while decreasing the alpha. At the end, get ButterflyButtonCatch and call DestroyItSelf to destroy the entire butterfly.


  • Similar to ID_butterfly without the hunger and gauge control. Contains just the ID and the name of the butterfly


  • Awake(), update the name of the butterfly and its picture in the center_panel

Mechanics to test

  • How the butterflies appear
    • Scale from 0 to 1 then wait x seconds then scale from 1 to 0
    • Right to left
    • Bottom to top

ButterflyGame-scale.png      ButterflyGame-LeftRight.png     ButterflyGame-Top.png

  • How to catch butterflies
    • Click on one
    • Drag from one to another without touching the others
    • Both

ButterflyGame-tap.png       ButterflyGame-slipe.png

  • Difference of difficulties (novice for young children, expert for adults)

Coming soon

  • Video of all the implemented mechanics (: navigation through the game)

Week 4

Task 2:


Collection Scene


Main menu containing the collection of butterfly.


  • ButterflyManager
  • Top‘: header
    • Parameters‘ button to open parameter scene
    • Center_panel‘: Display the number of creature catched / number of creature to catch
    • Right_panel‘: display the amount of food and nets available
  • Body
    • Scroll View‘: contains all the shelves
      • shelf_left‘: example of a shelf, contains the background, the jar and the butterfly and their hunger gauge
    • ScrollPanel‘: Panel to scroll giving access to three buttons, they load the food scene, the net scene or feed all creatures.
    • Panel_Info‘: Display a specific butterfly (the one in the shelf clicked). Contain a button to feed the butterfly and their hunger gauge (if catched) and the button catch which load the butterfly Game.
    • Pop_ups‘: contains all the pop ups: NotEnoughFood; NotenoughNets; FeedAll_noHungry; FeedAll_notEnoughFood; FeedAll_confirmation.

In Unity_Collectio,.PNG



  • (On Top/Parameters)
  • OnClickParameter(), load the scene parameter as additive (so the collection scene stayed loading in the background).


  • (On each Shelf)
  • ClickToOpenInfoPannel(), set the panel_info active and call its function activate(ID of the butterfly).


  • (On Top/Center_panel/NumberCollected)
  • Start(), Get the number of creature to catch, then get the number of catched butterfly and call UpdateNbCreature(nbOfCreatureCatched)
  • UpdateNbCreature(int nbOfCreatureCatched), change the next to nbOfCreatureCatched / nbOfCreatureToCatch


  • (On each container of a butterfly)
  • Contains variables with properties: Bname, Bhunger, Bcatched
  • Awake(), get the gauge
  • Start(), get time spent since last play. If the butterfly is catched then get the new hunger according to time spent. If the hunger is inferior to 0, the butterfly is dead, else, continue to decrease time with the coroutine UpdateGauge()
  • IEnumerator UpdateGauge(), every x seconds, reduce hunger of the butterfly and update the gauge.
  • TurnDead(): replace the butterfly by a skull


  • (On ‘ButterflyManager‘)
  • Start(), start coroutine ShelfsCreation()
  • IEnumerator ShelfsCreation(), wait for the ButterflyIDManager to be ready (so it can read the file containing all the butterfly information). Then, it create a row with 3 shelves, from this row, it creates (nb of creature to catch /3) rows. For each shelf created, call InitiateButterfly(shelf)
  • InitiateButterfly(GameObject shelf), set the butterfly to be, not catched, dead or catched.

IsRendered.cs & RendererExtension.cs


  • (On ‘ButterflyManager‘)
  • Contains variable related to Food and nets (such as the current number, the text, the daily bonus amount, etc)
  • Start(), if the active scene is CollectionScene then get text to display food and net number.

Butterfly ID Manager (following LocalizationManager)


  • class containing IDkey, WingName (name of the file containing the wings texture), XYZSup and XYZInf (position of the wings superior and inferior)


  • (On ‘ButterflyManager‘)
  • Awake(), create an instance of ButterflyIDManager and call LoadWingsNameText(NameOfFileContainingInfos)
  • LoadWingsNameText(string NameOfFileContainingInfos), put the contents of the file into string and then create a liste containing 4 information, the IDKey, WingName, XYZSup and XYZInf).
  • GetWingName(int IDKey), return the correct name of texture of wings
  • GetButterflyName(int IDKey), return the correct Name of Butterfly
  • GetXYZInf(int IDKey), return a Vector3 containing the position of wing inferior.
  • GetXYZSup(int IDKey), return a Vector3 containing the position of wing superior.
  • GetIsReady(), return if the file has be read and other scripts can call the functions Get


  • (On each Butterfly)
  • Start(), wait for ButterflyIDManager to be ready then UpdateWings(IDKey) to change the texture of the wings for the correct wings.
  • UpdateWings(int ID), get the name of the wings file, create new materials (one for superior wings, one for inferior wings) and give them a new texture which is the correct wings. Change the position of the wings and update the name of the butterfly


  • (On ‘ButterflyManager‘)
  • Awake(), if this is the first load for this game, get the seconds that have passed since last time by calling CalculateNewTime().
  • CalculateNewTime(), calculate the difference between this time and the last time in seconds.
  • OnApplicationQuit() (or OnApplicationPause() if Android), save the time.



  • (On ‘Panel_Info‘)
  • Awake(), get all the component of the panel
  • activate(int ID), check if the butterfly has been catched, if it is dead and set the panel according to this state.


  • (On ‘Panel_Info/Butterfly/papillon‘)
  • Activate(int ID), enable or not the animator (yes if catched else no) and put the right texture on wings by calling ButterflyIDread.UpdateWings(ID).


  • (On ‘Panel_Info/Butterfly/Button_catch‘)
  • Start(), Get the popup ‘NoEnoughNet’ and hide it
  • activated(int ID), get the ID of the butterfly shown on panel info
  • OnClickCatch(), if there is at least on net then load the game butterfly else show the ‘NoEnoughNet’ popup.


  • (On ‘Panel_Info/Butterfly/Button_feed‘)
  • Start(), Get the popup ‘NoEnoughFood’ and ID of the butterfly and the hunger and then call ButtonInitisalisation(ID, hunger)
  • ButtonInitialisation(int ID, float hunger), get the button feed, if the butterfly is not hungry or there are no foods then make it look grey and lock it else look purple and can be used.
  • OnClickFeed(), if there is at least one food then update the hunger of the butterfly and call FlowerAnim() else show the popup ‘NoEnoughFood’.
  • FlowerAnim(), create a flower and call the coroutine FlowerGoTo(flower, speed, destination)
  • FlowerGoTo(GameObject flower, float speed, Transform destination), move the flower to the Gauge then update the gauge and the hunger of the butterfly


  • OnClickAfterDeath(), turn a dead butterfly into a not catched butterfly.



  • (On ‘Body/ScrollPanel‘)
  • Start(), get the ScrollPanel
  • ClosePanel(float speed), close the Panel by calling coroutine MoveScroll(scroll, VerticalNormalizedPosition, speed)
  • OnDrag(PointerEventData data), set the white background active (button to close the panel) and get position of drag.
  • OnEndDrag(PointerEvent data), open or close the panel according to how the player is dragging the panel. Call coroutine MoveScroll(scroll, VerticalNormoalizedPosition, speed) to finish the opening or closing.
  • IEnumerator MoveScroll(ScrollRect rect, float VNPto, float speed), move the scrollrect until its VerticalNormalizedPosition reached VNPto.


  • (On ‘Body/ScrollPanel/…/Panel_picture/Button_FeedAll‘)
  • Start(), hide all the popups and get the text where there is a variable to change
  • OnClickFeedAll(), close the panel and block it for a bit, calculate how many flowers are needed. If no butterfly are hungry, it shows the popup ‘NoHungry’, else if there is not enough food, show the popup ‘NotEnoughFood’, else ask confirmation to use x food to feed them all.
  • OnClickConfirm(), start the coroutine FlowerAnimAll() to feed them all.
  • FlowerAnimAll(), for each catched and hungry butterfly, create a flower and StartCoroutine FlowerGoTo(ID, flower, speed, target, gauge).
  • IEnumerator FlowerGoTo(int ID, GameObject flower, float speed,Transform target, Gauge_Manager gauge), move the flower to the Gauge, update the gauge and destroy the flower.


  • (On ‘Body/ScrollPanel/…/Panel_picture‘)
  • ClickOnFoodC(), close the dragPanel and load the scene Food as additive
  • ClickOnNetC(), close the dragPanel and load the scene Net as additive

Mechanics to test:

  • Scroll Panel: how to open it
    • one click on it to open/ one click to close
    • drag it down
  • Scroll View: Navigate through collection
    • drag down/up Elastic or clamped
    • drag down/up Intertia or not

Updated production plan: