In phaser the world is where all game display objects are. It is a 2d, well, world in which these display objects can move around by way of player input, or some kind of ai script. In this post I will be writing about some examples in which I am just creating one or more display objects, and then moving around in this world. There are some basic things one should know about such as how to have the camera follow a sprite, which is often desirable for most projects. So this should be a fun post.
For an example of this I will want a phaser project that involves one sprite that is under player control, and a whole bunch of other sprites littered all over the screen as a way to know that the player object is moving around. So one way or another I will need to make some display objects. I will want to make the world bigger than the native size, and pan around in this world. I might want to set some boundaries, and have it so the camera follows the player sprite.
In this demo I am using my sheet from canvas method. This is a quick little method I worked out for making a sprite sheet with a canvas element. I get into this method, and subject in greater detail in my post on this subject. It’s not that involved so I will copy and post the source code here.
This allows for me to make both static sprites, and animations with just the canvas 2d context. If you prefer to use an external sheet you will want to look into my post on using the sprite loader, or find some other way to make some display objects.
Here I am just creating a single state, with a single create, and update method. When making the phaser game instance, the first two arguments that I pass to the constructor is the width and height of the camera. By default the size of the world will be the same as the camera, for many projects this is fine, however for the same of this post I will want to set it higher than that with game.world.resize in the create method.
So the following
Will result in a camera having a width, and height of 320,240. However the size of the actual world will be twice that, so this will result in a world that is bigger than the screen, and I can move around in it. However I will of course want the camera to follow a sprite, typically on that is under player control. One quick way to do this is to use the target property of the phaser camera.
The full source code of an example of having a sprite move around in a phaser world is as follows.
If you get this example up and running you can move the player object by moving the player keyboard arrow keys. In this example I am also using the clamp math method to make sure that certain values to not exceed a certain range.
I was happy that I was able to figure this one out in a flash. I have worked out vanilla js solutions for this is the past, but they proved to be a bit more time consuming. It goes to show that using a game framework like phaser can save a whole lot of time when making a game, allowing me to focus more on what really matters with this.