For this post on phaser ce I will be writing about ways to go about making a sprite sheet from a canvas element, rather than loading an external asset. This can be done a number of ways, but in this post I will be using the 2d canvas drawing context in a canvas element and pass that element to a method that can be used in the phaser cache to create a sprite sheet from a canvas element.
So for a very quick, and easy getting started example of making a sprite sheet with canvas in phaser ce, I often use a single method to make a basic sheet when making one of my many examples for these posts of mine. The basic idea is to generate a canvas, and draw to it like normal, and then pass a reference to the canvas element as one of the arguments to a method in the cache called game.cache.addSpriteSheet.
What I end up with in many projects might look something like this.
When calling the game.cache.addSpriteSheet method the first argument is the key that I want to use to refer to the sheet when making sprites, and the second argument is what would be a url to an asset, but because I am using canvas I leave this at null. The third argument is the sprite sheet data, and for this one of the options for the data is a plain old canvas element. The next arguments are to set the frame width, and frame height, as well as the number of frames, and the spacing between frames.
For a basic example I will create a method that will create a canvas element, and set its native size depending on the frame width, and height, and the number of frames I want the animation to be. Once I have that worked out it will draw each frame using the canvas 2d drawing context. For this basic example it will just be a sprite sheet of a box with a line drawn from it’s center outward that rotates. Once the canvas is rendered it then creates a sprite sheet by calling a method in the phaser cache object.
This method will be used with call to set the value of this to what it should be inside the body of a create method in the state object for this example which is as follows.
So now that I have my method that can be used to create a sprite sheet with canvas in phaser, it is now time to have a phaser project that makes use of that method. I start out my making my instance of a phaser game object with the Phaser.Game constructor, then create just a single state object with a single create method.
In the create method I call the mkCanvas method with call setting the value of this to the state object which is the same as it is in the body of the create method. This will generate the canvas element, and make the sprite sheet with the key ‘sheet-1’. Once I have the sheet I can then create a sprite using that sheet, as well as an animation that uses all the frames in that sheet.
Once that is all done I then start the state.
If you reproduce this on you end, and all goes well you should see a rotating box with a line drawing outward from the center.
So there is much lacking with this basic example, but to make a better solution I just need to expand on this as much would remain the same. The process would always be to make a canvas element, render one or more set of frames, and then pass the canvas element as the propper argument to game.cache.addSpriteSheet. Then I can make sprites, and animations using this sheet.