Switching States Tutorial

Note: This tutorial was written using Javascript, Sublime Text 2, Windows 7 and Google Chrome, and therefore images and source code will be in this format.

In this tutorial we will be learning how to create multiple states for our games and switching between them. Shown below is the final output from this tutorial. You can move the main character left and right using the A and D keys and also get him to crouch using the S. Also you can enter and exit the tavern using the ENTER key.

Download or view the code for this tutorial in the Kiwi.js example repo here inside of the /tutorials/website_examlpes folder.

Note: This tutorial will only focus on the states and state switching aspect of the game. You can read a basic tutorial about how to create a simple Kiwi.js game with images, sprites, animations and keyboard input HERE.

Using Multiple Javascript Files

When dealing with large Kiwi.js games, especially when using multiple states, it is usually better to split the code into easy to manage javascript files. By not having to deal with one super large file, which is hard to read, it is easier to write, read and debug. Our game requires three states: One for loading our assets (LoadingState), one for the outside of the tavern (OutsideState), and one for the interior of the tavern (InteriorState). In this tutorial each state will be defined in a new javascript file. Therefore we will need a total of five javascript files, one for each of the three states, the main file and the Kiwi.js library. One thing to note is that the files must be called in the correct order in the html file, always declare the library first, followed by your states and then lastly the main file:

Defining the Loading State

Loading states are very important in large games, where loading the assets can be done upfront and allow for seamless transitions between states. This allows for improved performance in game and reduces mid game loading time. Therefore we will define a state which, at the very start of the game, loads in all the assets. As soon as the assets have finished loading we will switch to the first game state using the switchState method, in our case the first state is OutsideState. First create a new javascript file called loadingState.js.

In the Create a Basic Kiwi.js Game tutorial we learnt how to use the preload state function to load in images and spritesheets. We can use the same technique to load our assets in using the loading state. The only difference is that our state does nothing else. As soon as it finishes the preload function it will switch the current state of the state manager to the OutsideState.

The Outside and Interior States

The OutsideState and InteriorState are based off the GameState class we defined in the GETTING STARTED TUTORIAL with a few new additions. Create two javascript files named outsideState.js and interiorState.js and make the following adjustments. Firstly we need to change the name of our states to either outsideState or interiorState. Remember to update all of the instances of this variable.

 

 

Secondly we can completely remove the preload function from both states. Since we are loading our assets in using the loading state we no longer need to call preload anymore.

We now have an additional SPACEBAR key which will be used to enter and exit doors in our world. In our update loop, before checking the down key, we need to add the following lines:

for the OutsideState and:

for the InteriorState.

These if statements check if the SPACEBAR isDown, and our character is in the correct location, being in front of a door. If true we can switch to the other state using the switchState function.

However, we also want our character to walk on the ground, which differs in height between the states, so change the x and y positions of the character depending  on the state.

For the OutsideState:

For the InteriorState:

Lastly we want the character to be looking left by default in the OutsideState and right by default in the InteriorState.

Change the following lines to allow for this:

For the OutsideState:

For the InteriorState:

Now we have our three states set up correctly.

The Main Javascript File

The main javascript file, called SwitchingStates.js, is used to create the Kiwi.js game and add our three states to it.

We can create the states when we add them to the game’s state manager.

We want to begin the game by switching to the loading state, explained below.

That is the end of the switching states tutorial. We now have a game which utilizes different javascript files for defining and switching between loading states and more than one game state.

Share the joy

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">