tile/spritemaps and animation

I’ve had Codea for a whle, but I was diverted by my day job. I’m now planning to prototype games using Codea on the way to and from my day job (1.5 hours on the train!) So I’d like to use some techniques I’m used to in dev environments I’ve previously used - to make transferring the code simpler.

Does Codea support anything similar to the notion of Spritemaps to implement simple sprite animation? A spritemap being a group of tiled images in a grid that one may load and display periodically? I’ve done a bit of Flash game dev, and we can do something like (this is using the FlashPunk library):

    public class Player extends Entity 
	[Embed(source = 'assets/spritemapasset.png')] private const PLAYER:Class; //the PNG contains many sub images
	public var playerSprite: Spritemap = new Spritemap(PLAYER, 32, 32); //width/height
	public function Player()
		playerSprite.add("standing", [0, 1, 2, 3, 4, 5], 20, true); //sequence for standing
		playerSprite.add("moving", [6, 7, 8, 9, 10, 11], 20, true); //sequence for moving
		graphic = playerSprite; //assign graphic to entity

Al lot of that is down to the library, I know. But the Spritemap is actually the main point. Later on we can call this in the “update” method:

   playerSprite.play("moving", false); //render next moving frame, false means "don't restart loop here"

Which renders the next frame in the loop (or flips back to the start.) It also does stuff like having a “flipped” property that indicates that the images should be flipped on the X axis (so one can have just the player facing right, then use flip to reverse the image.)

I guess this can all be done in Codes with plain code, but was wondering if anyone had this working already? I specifically want to use a tilemap style interface because it simplifies the assets and will make things more portable for me.

Yes, you can use sprite sheets.

Have a look at this - I put together a simple example (probably could be optimised, but it should give you a starter for ten)


In terms of the flipping of the image, I don’t think there is a command for this (there is rotate, which is useful for top down games, but won’t cut it for platformers)

That’s pretty sweet. Begging for a wrapper class though :wink:

.@West, @memsom, I am pretty sure you can flip with either a scale(-1, 1) but you must just remember to flip it back, or a setRectTex(1,1,-1,-1) if you are using a mesh.

.@Jordan cheers for the heads up. @memsom looking forward to seeing your wrapper class :wink:

@West underway! I have the basics working, using your code as reference. I need to iron out the quirks. Lua can sometimes be a bit funky for me, so I’m still having to look stuff up.

What does work:

  1. Will read a tilemap with equal width tiles. Auto calculates the row/column count from the dimensions.

  2. Will accept the array (table?) of cells for each “action” (eq. to your animx), these define logical order of the cells to animate. I did away with your animy idea - this is cool, but I’m trying to implement an analogue to what I’m used to and this wasn’t part of it.

  3. Will draw the mesh, animating the frame automatically on each draw event.

Basically, it works, but isn’t friendly yet.

You do something like this in the setup:

    image = readImage("Document:mytilemap")
    player = Spritemap()
    player:setTexture(image, 32, 32, 2) -- image, tilewidth, tileheight, scalefactor

    walkleft = 0 --logical row
    wleft = {0, 1, 2, 3, 4, 5} --6 cell frames
    player:defineAnimation(walkleft, wleft)

Then in draw:

    player.x = 100 --your calculated X coordinate
    player.y = 100 -- your calculated Y coordinate
    player:draw(walkleft) --you'd pass the ID as defined above in setup for desired animation

The position control logic is decoupled from the drawing mechanism by design. The Spritemap is just meant to be a fancy Image/Sprite really.

I’ll make a small demo and upload an example when I’m done tweaking.

.@memson. Great!

One other thing to be aware of is to leave a border of blank pixels around each frame of animation, otherwise you can get “bleeding” round the edges of the adjacent frames.

This shouldn’t affect your code but is something to be aware of when you are drawing your images

I’ve just noticed the Codea uses (0,0) as bottom left, where as my Flash code assumes (0,0) as top left. Is there a simple way to adjust the position? It’ll just make my life simpler, as I can cut and paste code then translate between syntax.

A simple

translate(0, HEIGHT)
scale(1, -1)

Should do the trick (but all your graphics would be upside down)

In case you’re interested, I’ve written Codea exporters for TexturePacker and some code to render sprites from the exported sprite sheets (http://twolivesleft.com/Codea/Talk/discussion/1862/texture-packer-exporters-sprite-sheets). There’s a link to an example project showing how to take your generated sprite sheet, add it to your project, and render sprites using the tpBatch class.