Devlog

By Jorge

 In this section, the developer of "Saving The Michi AR" will post the challenges he faced during the development of this game, what tools were used and how he coped with those bugs, configurations and the sources used to reach the optimal state to have a basic and complete game.

The devlog will have links to the pages to show the process of how the game was built. 

Assets used

 As already stated in the About Author section, Saving The Michi AR was made with Unity3D, which counts with an asset store where multiple tools can be found, for free and for sale. In this section, we'll describe the details of the selected asset and how it was modified to have different types of cats.

You can find more about the assets used in the game, in the following link: Devlog: Assets Used .

Assets modified

 In this section, it will be explained how the texture of the original asset was modified in order to create new ones and implement them in other cat models. More of this can be found in this link: Devlog: Modification of Assets .

 

 This section will constantly be updated to show how the most important mechanics of Saving The Michi AR were designed, coded and completed.

 

Scenes configuration

 We will focus on the number of scenes where the game will be developed. Remember that this flow of scenes can be found in the Game Design Document. It was decided that 5 scenes would be used in the game "Saving the Michi! AR":

1. MainMenuScene: This is where the Main Menu will be located. With 3 buttons: New Game, Continue (in case the player has a saved game) and Gallery (which takes you to the Gallery Scene to see the pictures of the discovered michis). Here's the MainMenuScene image:

 

Main Menu Game Scene

 

2. LoadingScene: This scene is located in the middle point between the GameScene and the AdvertisersInterstitialScene. It will display a random picture of a michi when it is on screen and that picture will be saved in the memory to later be admired in the Gallery of pictures. If the phone has internet connection, the flow will be: GameScene (level cleared) -> LoadingScene -> InterstitialScene -> LoadingScene -> GameScene (new level unlocked). 

If the phone has no internet connection, then the flow will skip the InterstitialScene. At any case, 2 pictures will always be discovered for every level cleared. Here's a sample of the LoadingScene:

 

Loading Scene between levels

 

3. GameScene: This is the main scene of the game where all the action takes place. If the phone has internet, it will display a banner advertisement on the top of the screen, else the banner won't be shown.

 

Game Scene in action with a phone without internet connection (no banner ad is shown)

 

4. AdvertisersInterstitialScene: This scene will show the interstitial advertisement (skippable after a few seconds) before going to the next cleared leved, as described above. It's not shown if the phone is not connected to internet.

 

Advertisers Interstitial Scene showing a test advertisement

 

5. GameOverScene: This is the last scene shown in the game. It has a secret unlocked image but IT'S NOT shown in the gallery. Do you want to know which image is it? You must finish the game first ;)

Once the GameOverScene finishes, the Player will be redirected to the MainMenuScene. If the player decides to continue the game, the Player will replay the last level of the game (level 14). 

Location of Scenes

 The game's scenes will be located in the Project window inside a new folder called "Scenes". As shown in the following image:

 

Creation of the Scenes folder with the game's scenes 

 

Loading the Scenes into the game

 The game's scenes can't be displayed in the game unless Unity knows what scenes to load and in which order. For this, we will call the "Build Settings" (File -> Build Settings, or cmd+shift+B in Mac):

 

 

Build Settings in the menu bar

 This will open the window "Build Settings", where you must drag all the desired scenes into the "Scenes In Build" section. Please pay attention in the order that you drag the scenes created in your MaiMenuSce, since this affects the order in which the scenes are shown in the game:

 

Scenes placed in order. The numbers from 0 to 4 represent the index of the scenes in the game

 With these configurations, the scenes will be loaded in the game. Of course that other configurations need to be done in order to make the transitions between scenes, but that will be covered later.

  

Main Menu Scene

 As many games, it is in the Main Menu Scene where we will decide what we want to do with our game. This scene will count with a GameObject called MainMenuUI, which contains a "MainMenu" script compoenent. This can be shown in the following images:

 

MainMenuUI game object in the Hierarchy window of the MainMenuScene scene

 

Component "MainMenuUI", which is a C# script

 

MainMenuUI script

 It is here where we call the transition to the LoadingScene to go to the GameScene. The button calls the Load method in the Loader with the GameScene as the target scene, the Loader.targetScene is set to the target scene in the method and the SceneManager calls the LoadingScene scene, here, the LoadingScene will call the Loader.Callback() function which finally will call the GameScene by using the variable "targetScene" that stores the scene to navigate to. Basically, the transition goes as follows:
 

MainMenuScene (will call) -> LoadingScene (which will call) -> GameScene

 The static Loader class, is static, this means that you cannot create an instance of a static class using new Loader(). All of its members are accessed through the class name itself:

 Loader.Load(Loader.Scene.GameScene); -> Correct

Loader loader = new Loader(); -> Won't compile

Being a static class also implies that it persists while the app runs.

The Loader class goes as follows:

 

Loader class to load the needed scene

 That transition will be described in the next topic.

 

Transition Between Scenes

 The mechanics of the transition between game scenes will be hereby described.

Loader Callback class

 This class controls the transition of the LoadingScene between one level and another. It's called from the "LoaderCallback" GameObject that is in the scene "LoadingScene". The first call of this class, is made from the MainMenuScene when pressing on the "New Game" or "Continue Game" buttons, as described     in the previous section.
 LoaderCallback also manages which image of a cat will be displayed randomly from a list of picures of cats. The next image shows the game object mentioned before:

 

LoaderCallbackManager in the Hierarchy window in the "LoadingScene" scene

 

 

The Inspector window showing the LoaderCallbackManager's components

  The following images depict the code of this class:

 

 

  

Shooter Controller

 Here, we'll explain the behaivour of the shooter, what will be used as the projectile and the code implemented to make it work. 

 Due to the characteristics of the game, the shooter controller is only present in the "GameScene" scene, therefore, everything related to the shoter controller will take place in this scene.

3D Model used for the Projectile

 The projectile that will be used to feed the stray michis, will be a herring:

 

Herring used as the feeding projectile for the Michis 

 As stated in the Gameplay section, the model was downloaded from a free asset at the Unity's Asset Store (here). No big changes to the model were made, only the Level Of Detail (LOD) was increased to 95% in order to show the herring during its lifespan on screen. Because if we used the LOD default values, the herring disappeared from the screen before its onscreen-lifespan was reached. In other words: the herring was supposed to be 2 seconds onscreen once it was launched, but it disappeared before this time was reached, so it was increased to 95%. To know more about the LOD, go here.

 The next image shows the LOD distribution of the herring:

 

LOD characteristics of the herring used as a projectile

 

How the shooter works

 The herron will be shot from the center of the screen, always pointing forwards to where the Player is facing the camera. To throw/shoot the fish, we'll use a button called "Feed the Michi" that will contain a "Button" component, which has a "OnClick()" function that will trigger the script containing the function to shoot the herron. The next image describes how it works:

 

Image showing the elements that compose the shooting mechanics of the game

 The next image shows the components of the FoodShooterManager GameObject that contains the "ShootFood" script that makes the shooting of the herron possible in the game.

 

 

 In the hierarchy window is highlighted the FoodShooterManager game object. The "Project" window shows the folder (ShootingAndProjectileScripts) containing the "ShootFood" script. The "Inspector" window shows the components used in the FoodShooterManager

 

 

How the shooter script (ShootFood.cs) works

 This section will describe the code used to make the herron shoot:

 

The code uses a prefab game object (Herron) that will be used as the projectile. As well as the audio source used for the sound effects. Everything can be seen configured in the previous image