Setting sprite transparency in phaser with Sprite.alpha
Setting sprite transparency in Phaser ce is pretty simple, I just need to set the Sprite.alpha value to a number value between 0, an 1. There is also playing around with the alpha values in canvas when making sheets that way, but why bother with that when Sprite.alpha works just fine. Never the less I thought I would make a quick post on this, and some other sprite related topics just for the fun of it.
1 - what to know
1.1 - This is a phaser ce (2.x) post
When I wrote this post I was using phaser ce 2.11.0, and not the later 3.x versions of phaser.
2 - An example involving blocks
For an example of using Sprite.alpha to set sprite transparency I made a quick project that involves some simple solid color sprites moving around the canvas. The Sprites will become less transparent the further away they are from the center of the canvas. The sprites will also go threw a transparency effect before they are destroyed when clicked.
2.1 - Starting off the Blocks module, and setup method.
So to start things off I made a Blocks module that will contain everything that I will be using to set up this example when making my state objects later on. For many of these examples I just go with a simple object literal module design because it works okay, and it is also okay that everything is public, for this example at least.
The Blocks.setup method will set up my game.data object which is the typical way I go about storing things that I will want to use across states.
2.2 - Setting Sprite.alpha with the Sprite.data object
I made a Blocks.setSpriteDataObject helper that will attach properties and method to the Sprite.data object. When this helper is used two methods are added to the data object of the sprite given that both help manage alpha transparency effects. One of them is meant to be called on each frame tick and will help with the effect where the transparency will change depending on the distance to the center of the canvas. The other sets up a death animation that will also be caries out by the method that is called on each frame tick.
2.3 - The spawn method
The spawn method will be used with a timer event to create a new sprite every so often up until a certain limit is reached. In this method I also attach some events including one that calls my Sprite.data onDeath method that will begin the death alpha transparency effect. This is pulled off with the Sprite.events.onKilled event for handing what happens when the Sprite is killed when Sprite.damage is called enough times when the player clicks a sprite.
2.4 - The Phaser.Game instance, and boot state
Now that I have a module together it is time to use all of this stuff by making a Phaser.Game instance, and at least a few state objects. In many of these examples I like to at least separate things into a boot state, and another state that runs the actual example. In the boot state I make a sprite sheet with canvas, and the game.cache.addSpriteSheet method. The boot state is also the place where I often set the scroll, and scale properties and anything else to that effect.
Once all that is set up the game will then progress to the actual demo state.
2.5 - The demo state.
In the demo state I set up my game.data object by calling the Blocks.setup method that I outline above, and then also start the loop that will call my spawn method every second. In the update loop I loop over every block that is currently in a group, and step the blocks by there current delta values that I set in the method that sets up my Sprite.data objects.
The result if all goes well is a simple Sprite.alpha example where sprites move across the canvas, and when clicking on them they undergo a death process as well.
3 - Conclusion
So the Sprite.alpha property is there to help with any kind of transparency effects that I might want to implement in a project. These kinds of effects can be used with things like partial like sprites when doing something with Sprite.lifespan, or any other kind of situation where transparency effects are desired. Hope you enjoyed reading this post, make sure to let me know if you have any questions or concerns in the comment section.