Dynamic Textures / Tiles

Help & Support
#1

Is there any way to script a texture?

Essentially, I’d like to have a plane with a highly pixelated textures on it (maybe 32x32, no aliasing or anything). That texture could be updated via a script. Maybe the “cell” at 5,9 went from green to red?

Or is there a better way to do a tile-based game in PlayCavas?

#2

There sure is. :slight_smile:

You’ll be needing the pc.Texture API.

To create do (probably in a script’s initialize function):

this.texture = new pc.Texture(this.app.graphicsDevice, {
    width: 32,
    height: 32,
    format: pc.FORMAT_R8_G8_B8
};
this.texture.minFilter = pc.FILTER_NEAREST;
this.texture.magFilter = pc.FILTER_NEAREST;

To update do:

var pixels = this.texture.lock();
var index = 0;
for (var x = 0; x < 32; x++) {
    for (var y = 0; y < 32; y++) {
        // Set pixel to some color as you like...
        pixels[index] = x;
        pixels[index+1] = y;
        pixels[index+2] = 255;
        index += 3;
    }
}
this.texture.unlock();

Hope that helps!

1 Like
#3

Oooooo that looks good!

So far I have been playing with the code from the Procedural Levels tutorial (https://playcanvas.com/project/405864/overview/tutorial-procedural-levels) which clones template objects.

This has left me with something like this:

Pasted image1112×1098 700 KB

I think your approach will be more suited to my needs. Thanks!