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:
That’s all there is to it! Now let’s add the sprite to our canvas within our
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:
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