Learn to Codea - Atlas and Slice

Learn to Codea - Atlas and Slice

Learn To Codea - Atlas and Slice.zip (27.7 KB)

Codea Version

Modern

Description

Here’s a really simple example showing how to slice up a sprite sheet using an atlas and then drawing the individual tiles using those slices. Very useful for 2D tile-based games

API Covered

image.read()
image.atlas
image.slice
scene

Learn to Codea?
This is be part of an ongoing series called “Learn to Codea”, which will cover a variety of topics from beginner to advanced and everything in-between

3 Likes

@John - thanks for the post, have used it on one of my sprite sheets, pretty easy to apply. I think that a tutorial would be very useful for new and old forum members.

1 Like

The new image and atlas stuff looks great, @John!

1 Like

Good job! We need it---- an simple and easy way to learn the usage of Codea4! Thanks!

1 Like

@John - just had a couple of crashes with the latest Atlas/Slice demo. First crash whilst trying to scroll up or down to on the screen trying to find Settings (from the Apps summary) - reported directly.

Second incident whilst changing the sprite capture size and display sizes, I was trying to condense the image to give richer colours by changing sprite size alone.

Not sure what you mean by the settings/app summary?

Can you show me the code that causes the second crash?

@John - whilst running a project on Codea, dragging up from the centre bottom of the screen produces a screen with organized apps on the device in ‘boxes’.

On the second crash - I was using your code with a different sprite-sheet, which is 1.3mb in size. It loaded up and displayed OK (same sprite-sheet) as above - I just changed the tilesetImg to the file path (only changing the filename - path unchanged).

I also changed the tilesetAtlas:setWithCellSize to 64/64
Note - that’s not meant to be setWidthCellSize ???

then

scn.pixelsPerUnit = 64

Note I tried changing the latter to different values without changing the former.

Does Codea freeze the running project when the iPad is being used for a parallel app ?

Ah I see. Not sure about the first one but for the second one I’d need to have a look at the image you used to see if there’s something going on there. pixelsPerUnit shouldn’t cause a crash no matter what its set to…

@John - on the graphic front I found an issue with the file involved.

Moving on from that I tried your demo with a crude file I had built to try to change the sprite display. I have commented that in V4 the graphics seem to be larger than in V3. Now I think it may be due to the 2D camera provision for 2D scenes.

I tried to build a project using a parameter to change the camera ortho.size which appears to be a scaling factor. I can sometimes get the display to work but errors are thrown up.

I enclose a zipped file, could you point out the errors I have made.
spritesheettester.zip (1.2 MB)

@John - got it working, attached photo. Scales the image OK although I have no idea what the value means.

@Bri_G So the scene.pixelsPerUnit property lets you scale sprites up or down to make them fit within certain units without needing scale them using transforms. So in the original example, each sprite is 16x16 pixels and I wanted to have game units of 1x1 for each square (usually better for things like physics). So settings pixelsPerUnit to 16 makes sprites draw 16 pixels wide for each 1 unit in world space. If you set it to 1, then its just regular pixels (1 unit = 1 pixel).

I haven’t properly put in code to handle @2x anda @3x images so some of them might be too big or too small. I need to fix this

@john - thanks for the info - I should be able to build on that and understand V4 better as it grows.

Note - never heard of @3x !!!

The @3x images happen on iPhone, which has an even denser screen than iPad

@sim - thanks for the info, makes sense cramming images into such a small area.