Looking for some tips/best practices on texture layers before I get too involved in my game.

My game is a 3D arcade/puzzle game aimed for mobile.

In my game, I have 75 platforms in each level. Each platform can have one of 16 different icons on it, as well as a colored ring around the icon. The ring can be just one of 2 colors.

Early on, my initial thought was: Give the platform a base diffuse material, and layer 2 transparent textures on top of it. Well, after I finished writing my script to generate the 75 platforms, I realized it was really taxing on mobile and came to the conclusion the transparent textures are just too much (150 of them total in the scene).

I got about 10-13 FPS doing this, on a fairly high performance android tablet.

This is what a typical platform can look like:

This is how I made them:

What is the best way to approach this. Should I just go and make all 32 possible combinations and store them each as its own texture?

Icon1+RingColor1
Icon1+RingColor2
Icon2+RingColor1
Icon2+RingColor2
…
…
Icon16+RingColor2

Of is there a more clever method to achieve this. In the future, it may be possible I might want to add more icons, more ring colors for different purposes.

This totally changed the game logic on how these platforms are created, and I don’t want to have to re-create this for a third time if I make another mistake.

Any tips appreciated. Thanks

Transparent cutout textures are terrible on mobile, not sure why. Your best bet is to make each individual texture, and make them sprites, and put them in an atlas. If you really need to composite them on the fly, you should do it all in a single shader, and avoid the multiple draws (pass all three textures in the shader, and draw it all at once).

1 Like

Thanks. I’ll look into the sprite atlas. I’ve never written a shader and honestly would have no clue where to begin.

In my game, the textures will change quite often.

The yellow ring is there to indicate that the platform is “available”, otherwise the ring will share the color of the icon. So, in a way they get “composited on the fly”, but really it’s just a matter of switching to a different texture periodically.

One feature originally on my wish list was to make the ring self-illuminating, and glow a bit… but it seems this might be out of the cards. At least on mobile