Hi, I’m developing my first game with Phaser. Currently, I’m looking for different ideas to achieve an effect like this (the letter in the background not the front “This is” text):
It would be a little simpler: a small bunch of letters that fall slowly from top to bottom with a certain interval of time. Ideally, each letter is nearer or more far from the first plane, this is, I’d like to apply a camera depth field.
Options that I have thought:
Create a text object and move it along the Y axis with myText.y += 1 in the update function.
Create a sprite with each letter and apply physics to it (but I’m not sure about the performance of this).
An important issue is the camera depth field. Searching in Google I haven’t found anything related in Phaser… I don’t know even if this is possible.
My final alternative is to create a .gif in After Effects (or some program) and use it in my game.
Note: It comes to my mind that once I saw an example of “matrix” like text rain in Phaser Labs but now I can’t find it to put it here as an example (maybe I saw that in other resource).
If you could give me some hint and shed some light on this, I would appreciate it so much. Thanks!
I think you can use a particle emitter for this. You don’t need a special emit zone (like the digital rain example), but you may want to use a custom Particle class so you can apply the depth consistently.
Is there a simple way to make the particles be just letters?
I tried making a spritesheet made up of letters and used it like in the example of the digital rain. But I can not manage to draw each letter separately in each particle, instead each particle draws a “square block” containing parts of different letters, like if the program was ignoring the different tiles of the spritesheet. See obtained result image:
Finally, I could achieve what I wanted, but now I have time to post here my solution (though maybe a bit late).
import lettersTexture from "../assets/letters.png";
import lettersDescription from "../assets/letters.json";
class Main extends Phaser.Scene {
constructor() {
super({
key: "main"
});
}
preload() {
this.load.atlas('letters', lettersTexture, lettersDescription);
}
create() {
// Set the backgrond color to white
this.cameras.main.setBackgroundColor("#ffffff");
// Define the zone where we want the particles to be emitted from
let emitZone = new Phaser.Geom.Rectangle(0, -10, 540, 20);
// Create a numbered array just to access the letters texture atlas by index
let letterIndices = Phaser.Utils.Array.NumberArray(1, 25).map(String);
// Create the particle emitter with the previous created objects
this.utils.createParticles(this, "letters", emitZone, letterIndices);
}
}
The letters.png and letters.json assets were generated with TexturePacker tool following the instructions in their page. Then, I preloaded them with load.atlas() and finally used it with a particle emitter as you can see in the code.