13. Drawing with meshes in 2D

This post shows how to replace sprite commands with mesh, in 2D drawing. I am going to focus heavily on understanding what a mesh is all about, because for me, it was all gibberish for far too long.

Let’s take a simple example. We’ll draw a whole bunch of sprites on the screen, then we’ll do the same thing with a mesh.

So here is a simple program that draws 200 sprites in random positions on the screen.

function setup()
    img=readImage('Tyrian Remastered:Space Ice 3')
    w,h=img.width,img.height
    Number=200
end

function draw()
    background(0) --black
        for i=1,Number do
            x=math.random(0,WIDTH)
            y=math.random(0,HEIGHT)
            s=w*(math.random()*.4 --size
            sprite(img,x,y,s)
    end
end

Now we’ll do the same thing with a mesh.

function setup()
    g=mesh()
    g.texture='Tyrian Remastered:Flame 2'
    img=readImage('Tyrian Remastered:Flame 2')
    w,h=img.width,img.height
    Number=200
end

function draw()
    background(0) --black
    g:clear()
    for i=1,Number do
        x=math.random(0,WIDTH)
        y=math.random(0,HEIGHT)
        s=math.random()*.4 --size
        d=g:addRect(x,y,w*s,h*s)
        g:setRectTex(d,0,0,1,1)
    end
    g:draw()
end

So let’s look at the mesh statements.

g=mesh()
We start off in setup by defining a mesh object called g.

g.texture=”Tyrian Remastered:Flame 2″
Then we tell it what “texture” we will use to clothe it. The word mesh is actually a good one, because a mesh is really an invisible wireframe, and is of no use to anyone until you draw something over it.

So the texture, which in 2D will usually be an image, is what you will see. Note that we provide the name of the image to the mesh, rather than the image itself.

(I have then gone on to actually load the image so I can find out its dimensions. Maybe there’s a better way, in which case I’ll amend the code!).

g:clear()
Moving into the draw function, we empty the mesh of everything we put there in the last drawing cycle.

d=g:addRect(x,y,ws,hs)
Now we add a rectangle to the mesh to hold our image. This is where you specify the location and size.

g:setRectTex(d,0,0,1,1)
This tells the mesh to clothe the rectangle ‘d’ which we just created. Now, if you happen to know that a mesh is only allowed to have one texture, you will wonder why we need to tell the mesh to clothe d with that texture, because what else could it do? Why doesn’t it just happen automatically?

The answer is that a mesh may only have one texture, but it allows you to choose which part of the texture to use when clothing each item in the mesh.

If you look at the mesh command above, you’ll see it has four numbers inside the brackets. These are the starting x,y and ending x,y positions of the part of the image to use in clothing our rectangle, expressed as a percentage of height and width.

So in our demo above, we want to use the entire image each time, so we want to go from 0,0 to 1,1 (ie 100%,100%).

But suppose you are building an action game, and you want to put (say) five different types of figure into your drawing (eg dwarf, wizard etc). You can create an image with all five figures next to each other, eg an image 1000×200, where each individual figure takes up 200×200.

So if we wanted to draw figure number 3, we would tell the mesh to start at 0.4,0 and end at 0.6,1. In this way, we can add a whole lot of rectangles and clothe them all differently using different bits of a single texture image.

And that is why you specifically have to tell the mesh which part of the texture to apply.

g:draw()
I think you can guess what this does.

I have a demo of both together, with the ability to switch between them, here.

The code is here or here.

See? That wasn’t so scary, was it? But it gets more difficult once we move out of flatland, into 3D.

Advertisement