Sprite Strip vs Single Images

Hello everybody.

I did an experiment with the way importing images.

Project 1: I import 4 different frames (png files) as a single images to the edit image menu. After this, I export the project 1 as html5 website format.

Project 2: I import an sprite sheep (png file) that contains the 4 images in one file. I split the image in 4, then C2 generate the same 4 frames as before. After this, I export the project 2 as html5 website format.

When I enter in the images folder that C2 generates for the Project 1, I realize that the 4 images were created as a sprite sheet! It's the same that I found in the images folder in the project 2.

This means that C2 automatically generate sprite sheets for the single frames?

This means that the way I import the images doesn't affect the size of the project?

Thanks!!!

That would be correct, what affects it is creating multiple objects with the same images (you get a sprite sheet for each object) which is why it is better to create one object and use multiple instances when you need to have more of that object.

Also the format of the image can affect the size of course, look at the manual for png formats supported.

Ok, thanks —

You know, I'm using Flash CS6 to design my sprites. I don't know if you worked with Flash sometimes, but the way that Flash export the images as Sprite Sheet is quite bad. Leave too many blank spaces in the edges. Flash generates disordered sprite sheets.

My procedure is to export from Flash my animations as a png sequence and import to C2 as a frames. Doing this procedure with the project I'm testing now, I can see that C2 (when export the project) generate sprite sheet for every object, as you say. But this sprite sheets are disordered because the different images of the animation have different sizes.

When I import an sprite sheet to C2 I have two options:

1. Import an sprite sheet where all the images have the same size. Like this, after I can cut in e.g. 3 columns x 4 rows. Of course, to do this, first I have to transform, in some way, a disordered sprite sheet into a ordered sprite sheet (same size in all the images).

2. Import a disordered sprite sheet and cut the image that belongs to the frame. And to this for EVERY frame!

Doing in my way I only need to import png sequence and after crop the images (as a recommended practice). If this procedure doesn't affect the size of the project, in fact, in the end the result is the same.

Sorry for my long explanation...

In conclusion:

What do you think? It's better if I continue with my way of importing?

either way works, it's really up to which is easiest for you. What I have been doing is using adobe illustrator or inkscape and make my own sprite strip first. It may seem a bit tedious, but then I have ordered sprite strips that I can reuse later in other games, etc... and easy way to do this is to take the size of your largest frame, make a square that big, make a strip of the squares which is pretty easy since they are all of even size, then on a layer above it, you can center each of your animation frames above a square (in order). Once you have them all, they should now be evenly spaced based on the position of the squares. You can then delete the squares and export the sprite strip as a PNG. When you import just give construct the size of the square you created (that is now the size of your frames) and it should do the rest by importing all the frames. I am sure there must be other apps that would do this for you, I just haven't looked that hard.

Or you can just use something like spriter and do the save as PNG option to have it create a series of pngs (one for each frame) and then import those. That is what I have started doing for characters. Though for background and platform tiles, etc... I just use illustrator or inkscape still. This way I end up with ordered sprite strips that I can use anywhere in case I have to use something other than Construct 2 later, or if I need to use them in another game they are ready to go.

Yes, with Flash Professional you can do the same procedure you explain. It's good to know this different ways to do it. Maybe it could be helpfull in the future.

I'm really in the beginning of my project (interactive book for children), but if some day it become real I will let you know... For your curiosity.

Thank you BluePhaze!

No problem, glad to be of assistance. I Haven't used flash in about 9+ years (Flash 3 and 4) so it's been awhile and it was a whole different beast them.

gbell12

if you right-click on the animation frame box there's an option to import sprite strip

(ok, weird. I thought I was reacting to someone, but somehow this happened in the wrong thread. Sorry!)

See Construct 2's export-time optimisations. It automatically generates sprite sheets, deduplicates identical images, and more.