- Published on
Textures for precipitation and clouds
- Authors
-
-
- Name
- Roman Prokofyev
-
This is a technical performance update that introduces textures and spritesheet used for clouds and precipitation.
Previously, clouds, rain and snow were generated using PIXI.Graphics
elements, such that each part of the graphic
could be unique with randomized parts.
This, however, was very inefficient and in reality true randomization is not necessary, when we can have 10-20
different textures for clouds, and snow and rain elements (circles and lines) can be scaled as textures.
Now instead of this:
export function makeRain(renderer, is_severe) {
let lineLength = is_severe ? 20 : 14;
let strokeColor = is_severe ? 0x7d91a1 : 0x86a3f9;
// Draw the line
let gr = new PIXI.Graphics();
gr.lineStyle({width: 2, color: strokeColor, alpha: 0.9, cap: "round"});
// Draw line
gr.moveTo(0, 0);
gr.lineTo(0, lineLength);
return renderer.generateTexture(gr);
}
I simply use this:
export function makeRainTextureSprite() {
return spritesheet.textures["rain.png"];
}
let line = makeRainTextureSprite();
line.tint = this.#isSevere() ? 0x7d91a1 : 0x86a3f9;
line.scale.set(H, W);