Drawing

Contents 1 Drawing with images 1.1 Loading a Picture 1.2 Making Verge loop 1.3 Drawing a Box 1.4 Drawing an Image

[edit] Drawing with images

Hello there!

Today, I'm here to tell you about images.

This is our super fun example image, named "neshero.png". In a minute, I'm going to show you how to draw this image to the screen.

The death magenta background (which is 255 red, 0 green, and 255 blue) is transparent, and won't be drawn by the normal blits in vx (which is good). Just keep that in mind for any pictures or spritesheets you make for Verge.

[edit] Loading a Picture

Now to get started, let's load our image!

require 'vx'

function autoexec()
    -- Loads an image into the hero variable.
    local hero = vx.Image('neshero.png')
end

Woo, exciting! Now we've loaded the image into a variable called hero! But if you run this code, it won't show anything, and will close almost instantly.

To actually draw the image, it takes a bit more work.

[edit] Making Verge loop

Let's get it so we can at least keep the window open.

require 'vx'

function autoexec()
    -- Loads an image into the hero variable.
    local hero = vx.Image('neshero.png')
    -- Run forever.
    while true do
        -- If you forget this, Verge will freeze in this loop.
        vx.ShowPage()
    end
end

That while true section means it'll keep that running forever (until you close the window or hit ALT+X). The stuff between the do and end are things that will be executed repeatedly.

That function vx.ShowPage() causes the screen to refresh, and Verge to stay responsive. Anything drawing that happens before a vx.ShowPage() is drawn off-screen, and once that function is called the off-screen image will replace what you currently see in the window.

[edit] Drawing a Box

Now, if we wanted to draw something, we will want to doodle it before a ShowPage. Let's say we want a blue background instead of that "compiling code" screen that you normally see right after autoexec. We can do that, like this!

require 'vx'

function autoexec()
    -- Loads an image into the hero variable.
    local hero = vx.Image('neshero.png')
    -- Run forever.
    while true do
        -- Draw a blue box.
        vx.screen:RectFill(0, 0, vx.screen.width, vx.screen.height, vx.RGB(0, 0, 255))
        -- If you forget this, Verge will freeze in this loop.
        vx.ShowPage()
    end
end

Woo. So now we have a blue screen! Yay.

[edit] Drawing an Image

Okay, finally, let's draw our hero.

require 'vx'

function autoexec()
    -- Loads an image into the hero variable.
    local hero = vx.Image('neshero.png')
    -- Run forever.
    while true do
        -- Draw a blue box that covers the entire screen.
        vx.screen:RectFill(0, 0, vx.screen.width, vx.screen.height, vx.RGB(0, 0, 255))
        -- Draw the hero, over the blue backdrop at location (50, 50).
        hero:Blit(50, 50)
        -- If you forget this, Verge will freeze in this loop.
        vx.ShowPage()
    end
end

Fun. There are plenty more graphics routines you can do with images (vx.screen is an image too, by the way), just dig around in the documentation for vx.Image.