[Tutorial] Mini Game 05 -- Game Design, Tween Animation and Sounds

Hi everyone!

For the past few weeks we have been building this mini game, and finally we have reached the last chapter of it! Woohoo!

Check out our past tutorials here:

[Tutorial] Mini Game 01 -- Infinite Instantiation, Timer, and Randomization

[Tutorial] Mini Game 02 -- Duplicate & Recycle Textures and Materials

[Tutorial] Mini Game 03 -- Game States, UI Scores, and Persistent Storage

[Tutorial] Mini Game 04 -- Game Structure and Game States

Today we will be focusing on the art style of this mini game, making it more polished looking, attractive and overall engaging. Let’s get started!

 

Creating a Cohesive Style

Let’s first take a look at what we have now. This is our Start screen and gameplay screen:

Then after having missed 5 cookies we’ll have a ‘game over’ screen:

We’ll notice that we have a very bright and cartoony color palette now, we can emphasize on that and ‘upgrade’ it to a more established comic art style with a ‘sticker pop art’ aesthetic to it.

For example, we can try to experiment with different food items instead of cookies. Nothing wrong with using cookies, but let’s try something new just for fun. Such as… donuts! Here’re a few donuts I’ve made:

 

Would be great to drop these in a random order. To do so we’ll need to add a little tweak in our code.

On top of our Manager script where we input our prefab, we’ll just change that into an array:

//@input Asset.ObjectPrefab[] objectPrefab

And in SpawnObject(), just create a random index number then apply that to the prefab array:

var randomIndex = Math.floor(Math.random()*script.objectPrefab.length);
var newObj = script.objectPrefab[randomIndex].instantiate(script.getSceneObject().getParent());

Then we’ll create 2 more new prefabs and replace the texture, then input all the prefabs into our prefab array.

We’ll also change the color palette a bit to match with our donuts. We’ll also create new visuals for the failing hint. Instead of cookies we can be adventurous and use smiley and ‘shocked’ faces.

We’ll replace textures in our cookie-sad-face materials. We’ll also need to make a small tweak in our code. Instead of changing the color of our missedScoreCountObject materials, we’ll replace its main texture with the ‘shocked’ face. So this is what we’ll add to the manager script:

//@input Asset.Texture shockedFace
//@input Asset.Texture smileyFace

And we’ll replace the line that changes colors in onGameStart():

script.missedScoreCountObject[i].getComponent("Component.Image").mainPass.baseTex = script.smileyFace;

And in onMissed():

script.missedScoreCountObject[missedScore].getComponent("Component.Image").mainPass.baseTex = script.shockedFace;

We can also borrow some other styles from the referenced ‘pop art’ style, such as dot mesh, bold font, black and white frame, etc... 

After spending some time changing our art style, here’s what our game looks like now: 

Very vibrant!

Setting UI Layers

We also don’t want donuts to be in front of our UI. This can be solved by having 2 separate orthographic cameras with different layers. 

*The segmented background bg-overlay which belongs to the Score Screen object should also be staying in Back Ortho Cam. So we’ll have to create a variable for that in Manager and toggle it in setState() function.

//@input SceneObject SegmentedBackground

function setState(gameStateInt){

    ……

    //this means SegmentedBackground is only enabled when gameStateInt is not equal to 2 

    script.SegmentedBackground.enabled = (gameStateInt != 2);
}

 

Adding Tweens

Our game now looks so much more polished than where we left off last chapter! But if we look at the video of our gameplay, there are still a few things to be improved.

For example, our scene switch feels quite ‘stiff’ in general, things appear and disappear without any easing in between. A good way to smooth the transition is by adding Tween elements to it. Thankfully, Lens Studio has its own built-in Tween Manager system. Check out the Tween Manager guide page to learn more about it!

The best way to set up Tween logic without over-complicating our script is combining Behavior script with Tween.

For the tweens in Start Screen, we can have them on Play Automatically because they are only showing once.

For our Score Screen we can add a bounce tween to our score number every time the score refreshes, so we’ll add it in the updateScores() function:

   if(currentScore > 0)
       global.tweenManager.startTween(script.currentScoreNumber.getSceneObject(), "BOUNCE");

Then on the score number object we’ll add a Tween script with the name BOUNCE:

We’ll do the same for our failed score indicator (aka the yellow faces), and add a line in the onMissed() function:

function onMissed(){
   if(startgame){
       if(missedScore < script.missedScoreCountObject.length){
           ...
           global.tweenManager.startTween( script.missedScoreCountObject[missedScore], "BOUNCE");           
           ...
       }
   }
}

For the Game Over Screen, we’ll set up an object with Behavior scripts and set all of the Triggers  to be On Custom Trigger and the custom trigger to be ‘SHOW_END_SCREEN’. Then set Run Tween as its response, and input Target Object accordingly.

 

For each Target Object we’ll have a tween with the Tween Name SHOW attached to it. Then in our Manager script, we’ll just send out a Behavior trigger when Game Over Screen is enabled:

function setState(gameStateInt){
   switch(gameStateInt){
       …...
       case 2://after game ended
           global.behaviorSystem.sendCustomTrigger("SHOW_END_SCREEN");
       …...
       break;
   }
}

That’s it, let’s take a look at our game:

Much better and bouncier!!

 

Final Touch -- Adding an Outline

Our mini game has quite a ‘sticker’ vibe to it. It would be amazing if we can have an outline to our segmentation background. The easiest way is to create a graph material and use the step node on a feathered segmentation mask therefore ‘expand’ the segmentation, then create another screen image with normal segmentation in front of it. 

 

Here’s the setup for the segmentation outline:

And we also have to put an image with just a simple segmentation in front of our outlined effect:

And ta-daa~ Here we have a segmented outline around our person, now the whole game looks very much more cohesive:

Check out a more detailed description of this method here.

 

Adding Sounds

Without some fun sound effects to play at some crucial moments this game still doesn’t feel that complete.

We’ve prepared several sound effects, you can find them in the asset zip file at the bottom of this tutorial. We’ll create one SceneObject for each sound and create reference for them in Manager:

//@input Component.AudioComponent Sound_BGM
//@input Component.AudioComponent Sound_ERROR
//@input Component.AudioComponent Sound_SUCCESS

And in our SetState() function, we’ll play/stop Sound_BGM and Sound_SUCCESS:

function setState(gameStateInt){
   switch(gameStateInt){
       case 0://before game starts
           ...
           script.Sound_SUCCESS.stop(false);
           script.Sound_BGM.stop(false);
           ...
       break;
       case 1://during game
           ...
           script.Sound_BGM.play(-1);
           ...
       break;
       case 2://after game ended
           ...
           script.Sound_BGM.stop(false);
           script.Sound_SUCCESS.play(1);
           ...
       break;
   }
   script.SegmentedBackground.enabled = !(gameStateInt == 2)
}

Last but not least, we’ll play Sound_ERROR in OnMissed().

function onMissed(){
   if(startgame){
       if(missedScore < script.missedScoreCountObject.length){
           …...
           script.Sound_ERROR.play(1);
       }
   }
}

 

Let’s play!

Scan the snapcode, and try out this lens!

 

 

------

Thank you all for following along this tutorial, please leave any feedback and questions in the comment.

✨Here are some awesome lenses created from this tutorial:

 

Puzzle Game by Mohamed Ouahbi

 

Eating Game by Kavin Kumar

 

Candy Themed Catcher by Wolf

 

Ice Cream Catcher by Maha

 

I look forward to seeing your creations, please do not hesitate to post and share your lenses here! ^_^

------

Download the finished project here.

Download assets here.