Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Custom background

edited April 2012 in Questions Posts: 7

Hey, I was wondering if I can create a custom background. (i.e a picture from my camera roll, or a sprite)
Something that is not a plain color. Also, can the background be moving?

Thanks in advance.



  • Posts: 6

    They way I understand it, this functionality will be available in version 1.4 due shortly

  • Posts: 2,820

    There is no built in functions for this stuff, but you can use a sprite and tile it or use meshes to make a gradient or something.I have a tile image class that I haven't shared yet. You have interest in that?

  • Posts: 7

    Sure, how would I do a gradient? I hope 1.4 had that.

  • JohnJohn Admin Mod
    edited April 2012 Posts: 625

    You can draw a gradient yourself using an image object.

    size = 256
    grad = image(size, size)
    for y=1,size do
        f = 255.0 * y / size
        for x=1,size do 
            grad:set(x,y,color(f, f, f, 255))

    Meanwhile in the start of draw...

    sprite(grad, 0, 0, WIDTH, HEIGHT)

    I haven't run this code specifically but I think it should work. You can adjust the set code to get different gradients.

  • SimeonSimeon Admin Mod
    Posts: 5,387

    I'd suggest not using an image of WIDTH and HEIGHT dimensions — you only need an image 256x256 and then can stretch it to the dimensions you need. For a gradient it will look identical and it will perform better and use less memory.

  • JohnJohn Admin Mod
    Posts: 625

    Updated the code to reflect what @simeon said

  • If you are stretching the image, you can also just make the width 1, and cut out a for loop.

    Here is a slightly more advanced example, which takes 2 colors or hex values and creates a gradient with an optional height, which defaults to 256:

    -- Utils
    function createGradient(topColor, bottomColor, height)
        -- If height is not specified, default to 256
        height = height or 256
        -- Get the start and end color values
        local r1, g1, b1, a1 = parseRGBA(bottomColor)
        local r2, g2, b2, a2 = parseRGBA(topColor)
        -- If both alpha values are 0, default to full alpha
        if a1 == 0 and a2 == 0 then
            a1, a2 = 255, 255
        -- Calculate the gradient increments
        local ai = (a2 - a1) / height
        local ri = (r2 - r1) / height
        local gi = (g2 - g1) / height
        local bi = (b2 - b1) / height
        -- Build the gradient
        local grad = image(1, height)
        for y = 1, height do
            local a = math.floor(a1 + (y * ai))
            local r = math.floor(r1 + (y * ri))
            local g = math.floor(g1 + (y * gi))
            local b = math.floor(b1 + (y * bi))
            grad:set(1, y, color(r, g, b, a))
        return grad
    function parseRGBA(value)
        if type(value) == type(0) then
            -- Parse values such as 0xffff0000, which is red with full alpha
            local a = math.floor(value / (256 ^ 3)) % 256
            local r = math.floor(value / (256 ^ 2)) % 256
            local g = math.floor(value / (256 ^ 1)) % 256
            local b = math.floor(value / (256 ^ 0)) % 256
            return r, g, b, a
        elseif value ~= nil then
            -- If a color was passed in, return the values
            return value.r or 0, value.g or 0, value.b or 0, value.a or 255
        -- Default to black
        return 0, 0, 0, 255

    To create a gradient from blue to red you can do either:

    gradient = createGradient(0xff0000, 0x0000ff)


    gradient = createGradient(color(255, 0, 0), color(0, 0, 255))

    Then draw with this:

    sprite(gradient, WIDTH/2, HEIGHT/2, WIDTH, HEIGHT)

    Here is a full example with a little extra animation: ;-)

    -- TestGradient
    function setup()
        -- Create the background gradient
        gradient = createGradient(0x1f3f4f, 0x0f8f7f)
        -- Set up variables for logo animation
        logoTime = 1.5
        logoTheta = 0
        logoScale = 0.05
        incScale = 2 / logoTime
        incTheta = 1100 / logoTime
    function draw()
        -- Calculate the center of the screen
        center = vec2(WIDTH/2, HEIGHT/2)
        -- Draw the gradient
        sprite(gradient, center.x, center.y, WIDTH, HEIGHT)
        -- Animate the logo
    function tickLogo(deltaSeconds)
        if logoTime > 0 then
            logoTime = logoTime - deltaSeconds
            logoTheta = logoTheta + (incTheta * deltaSeconds)
            logoScale = logoScale + (incScale * deltaSeconds)
        translate(center.x, center.y)
        sprite("Cargo Bot:Codea Icon")
  • IgnatzIgnatz Mod
    Posts: 5,396

    @Striblezz - you may not have noticed, but this discussion is 2 years old. In this situation, it's better to start a new post! ;)

  • Fair enough, but this is the post I found when I searched for how to make a gradient.
    So adding to the conversation seemed appropriate, since I started with the example above.

  • IgnatzIgnatz Mod
    Posts: 5,396

    @Stribblezz - the folks here prefer you to start a new topic in this situation, please

    But your input is very welcome, thank you

Sign In or Register to comment.