Published on

Textures for precipitation and clouds

Authors

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);