Howdy, Stranger!

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

Animation with png

edited May 2013 in General Posts: 18

Hi, im new and i have no idea about programming, becours design is my home.
But i want learn more about games. The design of Codea is great!

I have make a animation in the App "Sprite Something". Its a Mini Guybrush Threepwood.
I need help to let him move.

Sorry, my english is not the best. ; j



  • Posts: 18

    1 = Stay / 2 -5 = walking

  • BriarfoxBriarfox Mod
    Posts: 1,542

    I was working on a class to import from sprite something. I used the tile map to show the animation frames and it was all read from dropbox. Its really messy, ill clean it up and post it. I would really like to see sprite something used more in codea. Im a fan of completely developed in codea :) I'll dig up some links to tide you over.

  • dave1707dave1707 Mod
    Posts: 8,737

    .@Elturro This really looks dumb, but I don't have access to your sprites so I created 2 simple images for this example. Maybe something like this will get you started.

    displayMode(FULLSCREEN) function setup()     jpg = { img1(), img2() }     delay=.2     xx=0     yy=0     z=1     et=ElapsedTime end function draw()     background(40, 40, 50)     if ElapsedTime - et > delay then         et = ElapsedTime         xx = xx + 5         yy = yy + 5         z = z + 1         if z > #jpg then             z = 1         end     end     sprite(jpg[z],100+xx,500+yy,100) end function img1()     local img = image(16, 16)     img:set(6,1,255,0,0,255)     img:set(6,2,255,0,0,255)     img:set(6,3,255,0,0,255)     img:set(6,4,255,0,0,255)     img:set(6,9,255,0,0,255)     img:set(7,5,255,0,0,255)     img:set(7,9,255,0,0,255)     img:set(8,6,255,0,0,255)     img:set(8,7,255,0,0,255)     img:set(8,8,255,0,0,255)     img:set(8,9,255,0,0,255)     img:set(8,10,255,0,0,255)     img:set(8,11,255,0,0,255)     img:set(9,5,255,0,0,255)     img:set(9,9,255,0,0,255)     img:set(10,1,255,0,0,255)     img:set(10,2,255,0,0,255)     img:set(10,3,255,0,0,255)     img:set(10,4,255,0,0,255)     img:set(10,9,255,0,0,255)     return img end function img2()     local img = image(16, 16)     img:set(6,3,255,0,0,255)     img:set(6,4,255,0,0,255)     img:set(6,9,255,0,0,255)     img:set(7,1,255,0,0,255)     img:set(7,2,255,0,0,255)     img:set(7,5,255,0,0,255)     img:set(7,9,255,0,0,255)     img:set(8,6,255,0,0,255)     img:set(8,7,255,0,0,255)     img:set(8,8,255,0,0,255)     img:set(8,9,255,0,0,255)     img:set(8,10,255,0,0,255)     img:set(8,11,255,0,0,255)     img:set(9,1,255,0,0,255)     img:set(9,2,255,0,0,255)     img:set(9,5,255,0,0,255)     img:set(9,9,255,0,0,255)     img:set(10,3,255,0,0,255)     img:set(10,4,255,0,0,255)     img:set(10,9,255,0,0,255)     return img end
  • edited May 2013 Posts: 68


    -- Anim PNG
    function setup()
     img=readImage("Documents:guybrush") -- your GuyBrush in Documents
     w=50 -- Retina display or 100
     h=60 -- Retina display or 120
        for i=1,5 do
            guy[i] = img:copy(x,y,w,h)
            x = x + w
     anim = tween(0.8, animguy,{nbre=6},{ loop = tween.loop.forever} )      
     walk = tween(12, walkguy,{x=WIDTH},{ loop = tween.loop.forever} )      
    function draw()
     background(255, 255, 255, 255)
        if tween.hasExpired(walk) then
            sprite(guy[math.floor(animguy.nbre)], walkguy.x,walkguy.y) 
    function touched(touch)
        if touch.state==BEGAN then
  • edited May 2013 Posts: 18

    Thanks Briarfox, Dave1707 and Diablo76. I test all the next days.
    I will make Buttons for walk and jump. Background, Npc with Speaking pale and an adversary. :))
    I hope you can help me.

    Wip Bild hochladen

    Where can I upload my transparent png images so that you can test it?

  • edited May 2013 Posts: 455

    Here's another one using my SpriteSheet shader class

    --# Main -- SpriteSheet -- Use this function to perform your initial setup function setup() image = readImage("Dropbox:guybrush") guyBrush = SpriteSheet(image, vec2(100,120), vec2(5,1)) frame = 0 position = 0 end -- This function gets called once every frame function draw() output.clear() print(1/DeltaTime) -- This sets a dark background color background(40, 40, 50) translate(WIDTH/2,HEIGHT/2) --draw the world if CurrentTouch.state ~= ENDED then if CurrentTouch.x < WIDTH/2 then guyBrush:invert(true) else guyBrush:invert(false) end --running guyBrush:draw(vec2(position+1,0)) else --standing guyBrush:draw(vec2(0,0)) end frame = frame + 1 if frame == 15 then frame = 0 position = (position + 1)%4 end end --# SpriteSheet SpriteSheet = class() function SpriteSheet:init(sheetImage, size, tiles) self.m = mesh() self.m.texture = sheetImage self.m:addRect(-size.x/2, -size.y/2, size.x, size.y) self.m.shader = shader(SpriteSheetShader.vertexShader, SpriteSheetShader.fragmentShader) self.m.shader.tiles = tiles self.m.shader.invert = false end function SpriteSheet:draw(tile, location, angle, resize) self.m.shader.tile = tile self.m:draw() end function SpriteSheet:invert(invert) self.m.shader.invert = invert end SpriteSheetShader = { vertexShader = [[ // // A basic vertex shader // //This is the current model * view * projection matrix // Codea sets it automatically uniform mat4 modelViewProjection; uniform highp vec2 tiles; uniform highp vec2 tile; uniform bool invert; //This is the current mesh vertex position, color and tex coord // Set automatically attribute vec4 position; attribute vec4 color; attribute vec2 texCoord; //This is an output variable that will be passed to the fragment shader varying lowp vec4 vColor; varying highp vec2 vTexCoord; const float c_one = 1.0; void main() { //Pass the mesh color to the fragment shader vColor = color; if (invert) { vTexCoord.x = (1.0 - texCoord.x) / tiles.x + (c_one / tiles.x * tile.x); } else { vTexCoord.x = texCoord.x / tiles.x + (c_one / tiles.x * tile.x); } vTexCoord.y = texCoord.y / tiles.y + (c_one / tiles.y * tile.y); //Multiply the vertex position by our combined transform gl_Position = modelViewProjection * position; } ]], fragmentShader = [[ // // A basic fragment shader // //Default precision qualifier precision highp float; //This represents the current texture on the mesh uniform lowp sampler2D texture; //The interpolated vertex color for this fragment varying lowp vec4 vColor; //The interpolated texture coordinate for this fragment varying highp vec2 vTexCoord; void main() { lowp vec4 col = texture2D( texture, vTexCoord ) * vColor; //Set the output color to the texture color gl_FragColor = col; } ]] }
  • Posts: 68

    @spacemonkey, Why mesh? What is the reason? Fps?

  • BriarfoxBriarfox Mod
    Posts: 1,542

    Yeah if you load a lot of images mesh is faster.

  • Posts: 68

    Thank you, I would have thought rather sprite() ➤ 2D and mesh() ➤ 3D or for the big sprites

  • IgnatzIgnatz Mod
    Posts: 5,396

    Sprites are drawn using individual meshes anyway. There is an overhead for each mesh, so if you can put a whole lot of sprites on a single mesh, you will speed things up.

    Simeon had some useful explanations, I quoted them here

  • Posts: 455

    Exactly as Ignatz says, the key thing is that there is no 2d, Codea does all it's graphics through the OpenGL 3d pipeline, 2d is just camera settings to make it seem 2d. This is why a lot of the 2d primitive stuff is lower performing than you would expect.

  • edited June 2013 Posts: 18

    Today i worked on simple graphics to go the way of codea with you.

  • edited June 2013 Posts: 18

    I test all Codes, good work. Spacemonkey code is the best to use at the moment . ;)

Sign In or Register to comment.