Adding a Sprite - RPG Tutorial 4
This blog post is going to speak on adding a sprite to our Phaser game and how easy it really is.
First, let’s look at the sprite that we want to load in. I am going to use this Super Saiyan Goku 32px by 32px block (remember our blocks within our map are 32px by 32px, see tutorial 2 for more information).
Again, dealing with an asset, we want to preload that in our preload() function, like so:
// load in a new sprite
game.load.image('goku-single', 'img/sprite-goku-single.png');That’s all there is to it! Now let’s add the sprite to our canvas within our create() function:
// paint the sprite to the canvas (centered)
sprite = game.add.sprite(game.camera.width / 2, game.camera.height / 2, 'goku-single');What this does is wherever the camera is set on the painted map, we want to paint the sprite to the exact middle of said camera center. View the demo below and use the keyboard arrows to move around. As you can see, the sprite stays in place…
Also note, our global variables are now as follows:
// global vars
var map, layer, cursors, sprite;Our next tutorial will switch focus from moving the camera only, to following our sprite as it moves along the map!
Demo the thing…
Download Source Files
If you would like the source files for this tutorial: Download source files