So I finally got around to making my first phaser ce plug in, and now I am wishing that I look into how to go about doing this sooner. Although I have not been writing about it yet, I have bean working on a few prototypes for actual games, rather than simple little examples that just show how to work with one little thing in phaser ce. As such I am ruing into issues when it comes to how to go about keeping things well organized as a project grows in size. So far it looks like making plug-ins might be a better way of keeping things well structured compared to other options. So in this post I will me writing about how to make a basic plug-in, and also some slightly more complex examples as well.
In this post I am using phaser community edition 2.11.0 of phaser
In this section I will be covering just a basic simple plug in design pattern. What needs to happen in any case is just the passing of an instance of Phaser.Plugin to game.plugins.add. The Plugin object can contain both an init, and update methods, and as such they are similar to state objects.
One way or another a plain object, or better yet an instance of Phaser.Plugin needs to be passed to game.plugins.add, and this needs to be done in the create method of a state object. One way to design a plugin is to have a method that accepts the Phaser.game instance, and some options. Then I can create the plugin object by calling Phaser.plugin with the new keyword, and then pass the Phaser.game instance, and a reference to the plugin manager via game.plugins.
I can then add init, and update methods just like that of a state object and then add the plugin to the plugin manger via game.plugins.add.
I can then use the plugin by calling it in the create method of the state object in which I want to use it.
In this section I will be writing about a simple paddle plug-in. When this plug-in is used in the create method of a new state object it should result in a paddle that will move from right to left depending on input from the keyboard.
Here I have a method that will be called by the onCollide method of the paddle sprite. This is so that when this plug-in is used in conjunction with another plugging that will provide everything that has to do with a ball it will change the angle and speed of that ball based on where it hits the surface of the paddle.
Here I have a simple helper that will create a sprite sheet with canvas for the paddle sprite. I just need to create a canvas element, and then get the 2d drawing context. Once I have a reference to the drawing context I can use the to draw a rectangle that will function as the image for the paddle. I can then pass the canvas element to game.cache.addSpriteSheet to add the sprite sheet to the games cache.
Then I have a helper method for creating the paddle sprite. Here I create the sprite, and use the sheet that will be created with my createPaddleSheet helper. I also enable physics for this sprite, and make sure to make the paddle immovable. making the paddle sprite immovable does not mean it can not be moved, it just means that if something hits it it will not move. Here I also attach the onPaddleCollide handler as well.
Now to tie everything together into a plug in.
Plug-ins are a great way to keep things well organized, pulling everything that has to do with one little mechanic away into a nice neat little package. I will be writing a lot more of these in the near future, and at some point I will want to update the content of this post at least a few times.