Simple Sprite Creator

Code Sharing
1

While I was working on a project of mine, I needed to create a simple transparent arrow image. So I went to a drawing app, created and saved the image to the camera roll, went back to Codea, and loaded it into the Documents folder for use in my project. I created this program to help myself avoid this long process, and I thought I’d share it.

Tips:

• Draw the image as big as possible (unless you are creating a background).

• Change the displayMode if you want.

• Use an actual drawing app for more complex drawing.



Code:

--# Main
-- Simple Sprite Creator
displayMode(STANDARD)

function setup()
    saveProjectInfo("Description", "A simple sprite/image editor by Saturn031000.")
    lines={}
    witBG=image(WIDTH, HEIGHT)
    woBG=image(WIDTH, HEIGHT)
    parameter.color("background_color", 0)
    parameter.color("pen_color", 255)
    parameter.number("pen_size", 1, 20, 4)
    parameter.action("CLEAR ALL", function() lines={} witBG=nil woBG=nil witBG=image(WIDTH, HEIGHT) woBG=image(WIDTH, HEIGHT) sound(SOUND_EXPLODE, 40024) end)
    parameter.text("image_name", "img")
    parameter.action("SAVE WITH BACKGROUND", function() saveImage("Documents:"..image_name, witBG) print("SAVED TO DOCUMENTS FOLDER") sound(SOUND_POWERUP, 35583) parameter.clear() end)
    parameter.action("SAVE WITHOUT BACKGROUND", function() saveImage("Documents:"..image_name, woBG) print("SAVED TO DOCUMENTS FOLDER") sound(SOUND_POWERUP, 35583) parameter.clear() end)
end

function draw()
    setContext(witBG)
    background(background_color)
    for a,b in pairs(lines) do
        b:draw()
    end
    setContext()
    background(background_color)
    setContext(woBG)
    for a,b in pairs(lines) do
        b:draw()
    end
    setContext()
    sprite(woBG, WIDTH/2, HEIGHT/2)
end

function touched(t)
    table.insert(lines, ligne(t.prevX, t.prevY, t.x, t.y, pen_color, pen_size))
end

--# ligne
ligne = class()

function ligne:init(xo, yo, xt, yt, lColor, thickness)
    self.xo = xo
    self.yo = yo
    self.xt = xt
    self.yt = yt
    self.lColor = lColor
    self.thickness = thickness
end

function ligne:draw()
    strokeWidth(self.thickness)
    stroke(self.lColor)
    line(self.xo, self.yo, self.xt, self.yt)
end
2

Looks very cool! I think this project can be on examples because spritely is for pixel art and your programm is like watered down adobe ideas or paint . I think it would be awesome if you add eraser and some more functions . Continue developing this promising project :slight_smile:

3

@saturn031000 nice. Maybe you could optimize it a little bit? It seems (at first sight) the drawwing is very expensive (multiple redraw, inceasing line table), specially if you use setContex?

4

@lupino8211 — Thanks.

@Jmv38 — Yeah, it’s not optimized at all, but I figured that with a program this small, it wouldn’t matter much.

5

I must ask, did you mistype line and just roll with it? XD
That out of the way, nice little project :slight_smile:

6

@Monkeyman32123 If he named it line it would have interfered with the function line.

7

very good now!

8

@Jmv38 - It’s slightly more optimized because the setContext() is in touched(t) instead of draw(), right?

9

The user and all related content has been deleted.

10

@Monkeyman32123 If you must know, it’s french for line. :wink:

11

Updated!

I removed the background color parameter, added a straight line function, and an eraser function. I also made the max size 200 so you can easily draw the background if required. The gray background represents transparency.

-- Sprite Creator v2.0
displayMode(STANDARD)

function setup()
    saveProjectInfo("Description", "A simple transparent sprite editor by Saturn031000.")
    woBG=image(WIDTH, HEIGHT)    
    parameter.color("pen_color", 255)
    parameter.number("pen_size", 1, 200, 4)
    parameter.boolean("straight_line", false)
    parameter.boolean("eraser", false)
    parameter.action("CLEAR ALL", function() lines={} witBG=nil woBG=nil witBG=image(WIDTH, HEIGHT) woBG=image(WIDTH, HEIGHT) sound(SOUND_EXPLODE, 40024) end)
    parameter.text("image_name", "img")
    parameter.action("SAVE", function() saveImage("Documents:"..image_name, woBG) print("SAVED TO DOCUMENTS FOLDER") sound(SOUND_POWERUP, 35583) parameter.clear() end)
end

function draw()
    strokeWidth(pen_size)
    background(118)
    sprite(woBG, WIDTH/2, HEIGHT/2)
end

function touched(t)
    if straight_line then
        if t.state==BEGAN then
            tB=vec2(t.x, t.y)
        end
        if t.state==ENDED then
            tE=vec2(t.x, t.y)
            setContext(woBG)
            stroke(pen_color)
            if eraser then
                stroke(0)
                blendMode(ZERO, ONE_MINUS_SRC_ALPHA)
            end
            line(tB.x, tB.y, tE.x, tE.y)
            setContext()
            blendMode(NORMAL)
        end
    else
        setContext(woBG)
        stroke(pen_color)
        if eraser then
            stroke(0)
            blendMode(ZERO, ONE_MINUS_SRC_ALPHA)
        end
        line(t.prevX, t.prevY, t.x, t.y)
        setContext()
        blendMode(NORMAL)
    end
end
12

yes. And you dont need the ligne table any more.
What would be even nicer: a way to set resolution of image: image pixels of size 1,2,3,…8,16,32,64,128.