The purpose of a State in Kiwi.js is to allow the developer an easy way to manage loading assets to a game and also manage the logic of a game. A state has three main parts that we will cover in the tutorial. These parts are the preloading/loading of a state, the creating of the assets for the state, and also the updating of the state. This allows for you to organize your State in a way that makes it run in an intuitive and fluent manner.

All the methods that we talk about in this tutorial have already written in the State. All we need to do is ‘hook into’ these methods and assign them the tasks that we want them to do!

 

High Level State Flow Diagram:

This is an overview of flow of a Kiwi.State. We will go into depth for each step later in the tutorial.

What happens during preload?

The preload step of the State is focused on what happens before the game logic starts. When the State is inside the preload step the game will continuously run the loadUpdate() method instead of the normal update() method.

This step happens as soon as the Kiwi.State has been switched to. The first thing that happens when switching to a state is the game checks to see if the state has been initialized previously. If it has not it means that the state has not be accessed before and therefore needs to run the init() method. This will only run the first time a state is entered.

Once you have passed initialization step of the state the state will then run the preload() method. This method is designed to add all of the assets that you need for the current state into the loader. The loader will then start after the preload method has finished. It is quite common for games to have a loading state, which loads the assets to the game all at once, but it is fine having the assets be loaded in the preload of a playable state.

After the preload method has been defined the game will start loading the assets. This can take time depending on how large the assets are. While the assets are loading the loadUpdate method will still be running. The loadProgress method will trigger every time a single file has been loaded. This allows you to track the progress of the loading of the state.

Once all of the file have finished loading the loadComplete() method will run. This will only happen once. Once this has happened the game will start creating itself.

For an example to see how this loading is done take a look at the LoadingAssets example in the Kiwi.js examples repo inside core/states/ here https://github.com/gamelab/examples

What is the create method?

The create method is the part of the state where you create assets that will be needed in order for your games logic to work. Things such as a player, enemy manager, camera manager, etc. These things will only need to be created once. Once the create method has finished the Update Loop of the state will automatically start.

For an example to see how the Create method is used take a look at the LoadingAssets example in the Kiwi.js examples repo inside core/states/ here https://github.com/gamelab/examples

What is the update method?

The Update Loop is the driving force behind your game, and very few game architectures leave this out. The update loop is a simple architectural pattern for organizing your games code, splitting apart when different events should occur. The primary feature of the update loop is a cycle of updating your game’s state, rendering your state, then starting again. Below is a diagram of how the update loop would cycle normally starting at the preUpdate method.

For an example to see how the Update method is used take a look at the LoadingAssets example in the Kiwi.js examples repo inside core/states/ here https://github.com/gamelab/examples

 

How to use a specific State method

To find out more about the state methods we have talked about here take a look at the Kiwi.js API. The API briefly describes the purpose of each method and what it can and can not do.

http://www.api.kiwijs.org/classes/Kiwi.State.html