In this post I am using phaser community edition 2.11.1 of phaser. If you run into problems reproducing the code examples here be sure to start with the version number first. As of this writing phaser ce 2.x is not the latest major release of phaser and the code here might break on newer major release of phaser.
For starters here is a very basic example that uses a sprite sheet that is generated using the canvas 2d drawing api. Once I have a sprite sheet to work with in phasers cache, I can then use it to create a sprite sheet using that sheet.
I have a post that I wrote a while back in which I get into using canvas to make sprite sheets in detail, So I will not be getting into detail with this. However the basic idea is to just create a canvas, draw to it with the 2d canvas drawing api, and then pass the canvas to the addSpriteSheet method as extra data, after passing null for what would be a url sense I am not loading an external sprite sheet.
Once I have my sprite sheet I can now use it my passing the key of the sprite sheet as the third argument, after pasing the starting x, and y position. In phaser there is game.add.sprite, and game.make.sprite. In this example I am using game.add.sprite which results in the sprite being created, and being stored in the phaser cache.
So now that we have worked out how to just place a sprite on a screen it might be nice to get it to do something. It is possible to just manually move a sprite around by stepping the x and y properties of the sprite object manually, and for some projects that might be the way to do it. However phaser does come with a fairly impressive physics engine built in, and it is enabled by default. I will not be covering every little detail about the physics engine here of course, this post is going to be long enough to begin with. However I have a getting started with physics in phaser ce post that would be a good starting point.
To physics enable a sprite I just need to call game.physics.eanble and pass a reference to the sprite to which I want to enable physics for. Once That is done there is then a physics body for the sprite that i can then set values for things like gravity, bounce, and velocity.
Another feature of Sprites to be aware of is the data object of a sprite. This is the standard object to use when it comes to parking any kind of data with a single sprite instance. In this simple example I am just using the data object to store a per pixel rate that the sprite is to move by.
in a real example I might use the data object to store an instance of some kind of class that contains all kinds of properties and methods that have to do with that sprite. The data Object is just a plain old object that is not used by phaser internally, if I really wanted to I could just append some other object to the sprite as well as long as I do not overwrite anything. So this is just the standard way of setting any kind of data that should be associated with the sprite.