Using textures from /sys/pics/textures

Mini Micro contains a large number of stock resources on the /sys disk, to make it easier for you to prototype your apps, and to make little games and demos that can be shared as simple program listings, while still making use of images and sounds. Among these are some tiling textures, in the /sys/pics/textures folder.

These can be used for a game background, or as faces on a pseudo-3D object (a topic for another day!), or assembled into a tile set for a tile display. But browsing these may raise a couple of questions in your mind:

1. Many of these textures are gray, and I want them in color. What to do? ...And,
2. Some of them come in A/B pairs. What is that all about?

Let's dig into each of those questions in turn.

Tinting the Textures

Pretty much any way you can draw an image in Mini Micro, also allows you to apply a tint color. That includes PixelDisplay.drawImage, Sprite.tint, and TileDisplay.setCellTint.

As an example, let's suppose you want a leather background for a card game. You can easily load the leather texture and draw it in a loop, but without tint, it will be a light gray, and look more like a sidewalk than leather. But by using the last parameter of drawImage to tint as you draw, you can get a nice brown leather instead.

img = file.loadImage("/sys/pics/textures/Leather.png")
w = img.width; h = img.height
tintColor = "#C28C00"
for x in range(0, 960, w)
    for y in range(0, 640, h)
        gfx.drawImage img, x,y,w,h, 0,0,w,h, tintColor
    end for
end for

Here's a second example that loads the "Marble" texture, and uses it to make a checkerboard by tinting in two different colors. (It also randomly rotates the image before drawing each time, which helps break up the repetition.)

clear
img = file.loadImage("/sys/pics/textures/Marble.png")
w = img.width; h = img.height
for i in range(0,7)
    for j in range(0,7)
        x = 225 + i*64; y = 64 + j*64
        img.rotate 90 * floor(rnd*4)
        tint = "#39B978"
        if i%2 == j%2 then tint = "#627CAD"
        gfx.drawImage img, x,y,64,64, 0,0,w,h, tint
    end for
end for

For our last example, let's use a sprite. In fact here are two sprites made from the same "Wood" texture; the one on the right is tinted, but the one on the left is not.

clear
sp = new Sprite
sp.image = file.loadImage("/sys/pics/textures/Wood.png")
sp.x = 280; sp.y = 320
sp2 = new Sprite
sp2.image = sp.image
sp2.tint = "#C4982DFF"
sp2.x = 680; sp2.y = 320
display(4).sprites = [sp, sp2]

As you can imagine, these grayscale textures are a lot more versatile than pre-colored textures, because they allow you to generate a wide variety of different tones to suit your need.

So what's with the A/B textures?

There are six pairs of "toon" textures which come in "A" and "B" variants; for example, "ToonBrickA" and "ToonBrickB". (The others are Carpet, Dirt, Grass, Rock, and Wood.) Each of these were prepared by an artist so that they tile together.

The point of all this is to allow you to tile a big area, without the repeated texture becoming apparent. Just alternating randomly between two versions of a texture breaks up the cycles that are otherwise so obvious.

To illustrate, let's use the screen-filling code from our first example, but with ToonWoodA (and without tinting, since these toon textures are already tinted).

img = file.loadImage("/sys/pics/textures/ToonWoodA.png")
w = img.width; h = img.height
for x in range(0, 960, w)
    for y in range(0, 640, h)
        gfx.drawImage img, x,y,w,h, 0,0,w,h
    end for
end for

It's not terrible. But the repeated pattern is clearly visible; your eye can trace the zig-zag up and down the screen and quickly see that it never varies. Now let's bring in the "B" version and randomly swap that in:

imgA = file.loadImage("/sys/pics/textures/ToonWoodA.png")
imgB = file.loadImage("/sys/pics/textures/ToonWoodB.png")
w = imgA.width; h = imgA.height
for x in range(0, 960, w)
    for y in range(0, 640, h)
        if rnd > 0.5 then img = imgA else img = imgB
        gfx.drawImage img, x,y,w,h, 0,0,w,h
    end for
end for

Much better! Now, even if you try to follow one of the vertical zig-zags or horizontal board-lanes with your eye, you quickly find that the pattern does not repeat. The cycles are broken up, and it no longer looks unnatural.

The other five texture pairs work the same way. Using these, you can tile a large area without being too obvious about it.

What will you create?

Now you know how to use the textures in the /sys/pics/textures folder (or similar textures you might find elsewhere). What do you think? Can you imagine uses for these in your own games and programs? Let us know in the comments below!