A State in Kiwi.JS is the main class that developers use when wanting to create a Game. States in Kiwi are used to keep different sections of a game separated. So a single game maybe comprised of many different States. Such as one for the menu, in-game, leaderboard, e.t.c. There can only ever be a single State active at a given time. When using Kiwi.js it is recommended to have different states for different purposes. It is quite common to use a loading state to add all of your assets at the beginning of the game then switching to the play state afterwards. In this tutorial we will go through all of the different types of assets you can load and the ways of loading these assets to your Kiwi.js game.
Adding Images to your Kiwi.js game
To add an image to your Kiwi.js game all it takes is calling the addImage method of the state. The only place that you can load images is in the preloader method of a state. This is usually done in a ‘loading state’, which is a state dedicated to loading assets, or in the preload method of the current state you are in.
|
1 2 3 4 |
LoadingState.preload = function () { this.addImage( ‘myImage’, 'assets/img/myImage.png' ); }; |
The addImage method has many properties that can change how and what you load from an image.
|
1 |
addImage( key , url , [storeAsGlobal=true] , [width] , [height] , [offsetX] , [offsetY] ) |
Parameters:
- key – String
A key for this image so that you can access it when the loading has finished.
- url – String
The location of the image.
- [storeAsGlobal=true] – Boolean
If the image should be deleted when switching to another state or if the other states should still be able to access this image.
- [width] – Number
The width of the image. If not passed the width will be automatically calculated.
- [height] – Number
The height of the image. If not passed the height will be automatically calculated.
- [offsetX] – Number
The offset of the image when rendering on the x axis.
- [offsetY] – Number
The offset of the image when rendering on the y axis.
Using an Image that has been loading to a Kiwi.js game
Once you have added an image to your game it is very easy to access it. To do this you will access it through your state. But don’t forget, if you do not save the image in the global cache you must have loaded it in the preloader method of the state you are currently in.
|
1 2 3 |
PlayState.create = function () { this.mySprite = new Kiwi.GameObjects.sprite( this, this.game.textures.myImage, 0, 0 ); }; |
|
1 2 3 4 |
PlayState.create = function () { this.mySprite = new Kiwi.GameObjects.sprite( this, this.game.textures[‘myImage’], 0, 0 ); }; |
Adding SpriteSheets to you Kiwi.js game
To add an sprite sheet to your Kiwi.js game all it takes is calling the addSpriteSheets method of the state. The only place that you can load sprite sheets is in the preloader method of a state. This is usually done in a ‘loading state’, which is a state dedicated to loading assets, or in the preload method of the current state you are in.
|
1 2 3 4 |
LoadingState.preload = function () { this.addSpriteSheet(‘mySpriteSheet’, 'assets/img/mySpriteSheet.png', x_tile_width, y_tile_height); }; |
The addSpriteSheet method has many properties that can change how and what you load from an image.
|
1 2 3 4 |
LoadingState.preload = function () { this.addSpriteSheet( ‘mySpriteSheet’, 'assets/img/mySpriteSheet.png', x_tile_width, y_tile_height ); }; |
Adds a new spritesheet image file that is be loaded when the state gets up to the loading all of the assets. Parameters:
- key – String
A key for this image so that you can access it when the loading has finished.
- url – String
The location of the image.
- frameWidth – Number
The width of a single frame in the spritesheet
- frameHeight – Number
The height of a single frame in the spritesheet
- [storeAsGlobal=true] – Boolean
If the image should be deleted when switching to another state or if the other states should still be able to access this image.
- [numCells] – Number
The number of cells/frames that are in the spritesheet. If not specified will calculate this based of the width/height of the image.
- [rows] – Number
The number of cells that are in a row. If not specified will calculate this based of the width/height of the image.
- [cols] – Number
The number of cells that are in a column. If not specified will calculate this based of the width/height of the image.
- [sheetOffsetX=0] – Number
The offset of the whole spritesheet on the x axis.
- [sheetOffsetY=0] – Number
The offset of the whole spritesheet on the y axis.
- [cellOffsetX=0] – Number
The spacing between cells on the x axis.
- [cellOffsetY=0] – Number
The spacing between cells on the y axis.
Using a SpriteSheet that has been loading to a Kiwi.js game
Once you have added an image to your game it is very easy to access it. To do this you will access it through your state. But don’t forget, if you do not save the image in the global cache you must have loaded it in the preloader method of the state you are currently in.
|
1 2 3 |
PlayState.create = function () { this.mySprite = new Kiwi.GameObjects.sprite( this, this.game.textures.mySpriteSheet, 0, 0 ); }; |
|
1 2 3 4 |
PlayState.create = function () { this.mySprite = new Kiwi.GameObjects.sprite( this, this.game.textures[‘mySpriteSheet’], 0, 0 ); }; |
Adding Sounds/Audio to you Kiwi.js game
To add audio to your Kiwi.js game all it takes is calling the addAudio method of the state. The only place that you can load audio is in the preloader method of a state. This is usually done in a ‘loading state’, which is a state dedicated to loading assets, or in the preload method of the current state you are in.
|
1 2 3 4 5 |
LoadingState.preload = function () { this.addAudio( 'myMp3', 'assets/sound/myMp3.mp3' ); this.addAudio( ‘myWav’, 'assets/sound/myWav.wav' ); }; |
The addAudio method has many properties that can change how and what you load from an image.
|
1 |
addAudio( key ,url , [storeAsGlobal=true] ) |
Adds a new audio file that is to be loaded when the state gets up to the stage of loading the assets. Parameters:
- key – String
A key for this audio so that you can access it when the loading has finished
- url – String
The location of the audio file. You can pass an array of urls, in which case the first supported filetype will be used.
- [storeAsGlobal=true] – Boolean
If the audio should be deleted when switching to another state or if the other states should still be able to access this audio.
Using Sounds/Audio that has been loading to a Kiwi.js game
In Kiwi.js using audio is much more difficult than images. We would recommend looking at the Kiwi.js tutorial that has been written here. http://www.kiwijs.org/documentation/tutorials/using-sound-in-kiwi-js/
Recent Comments