GameSalad animation problems - resizing image

dandandan18

hi,
I've just made a small animation of a few images that I'm going to use.

When I made them they were all the same initial canvas size and aligned the same - I was only animating the top half of the image so I just clicked 'save as' in illustrator and changed the top half of the image.

But when I made the animation in gamesalad the bottom half of the image changes size too - changes width.
When I opened the image in 'Finder' (on mac) and scrolled through them quickly so it looks like an animation they were fine except that the 1st image bottom half was not as wide as the 2nd and 3rd image which is weird. Even when I took the 1st images out of the animation on GS, the bottom half of the image changes width still which is weird - didn't see this in Finder.

I made the images the same size (36x336) in GS 'inspector' but I cant make an animation with these sizes, but the width does look different.


Here's a YouTube screen capture of what I mean.

dandandan18

having the same problem again... any ideas?

matarua

Hi there - your artwork is odd pixel sizes and you are not being very efficient or accurate with your imagery because of that.

You are changing the size of the actor - not the subsequent animation frames.

Efficient image sizes for memory usage below.

Get your artwork the correct size in Photoshop first preferably in a multiple of these numbers 1,2,4,8,16,32,64,128,256,512,1024 x 1,2,4,8,16,32,64,128,256,512,1024.

Whole pixels - not ##.5

I suggest your images should be 32 x 256 or 32 x 512 (double for retina display).

Once you have the 3 images the right exact size - import them.

Drag one image up to create the actor - that will be the actor image that resets when the animation completes. This image will also define the size of the actor.

Create the animation with the images and they are all the same size and there is no need to hack the image using GS inspector to make it the size you want.

Then the actor should sit on a whole pixel too when you drag it on stage correct it's position.

Should have zero problems then

Hope this helps... cheers, M@

dandandan18

@matarua Thanks a lot!!!! i'll give that ago in the morning. It's currently 3.20AM here in the UK..

matarua

All good

dandandan18

@matarua the images were made in Adobe Illustrator, 2 out of the 3 don't resize all weird. I have changed the design of the vector but the same problem occurs.

To make the animation I used the same size canvas - had the first image clicked Save As, second image clicked Save as ... then the third it messes up :S

I will import them into PhotoShop and try what you said though

dandandan18

Figured out a way around it - just put a blank transparent rectangle which is the same size as the canvas. But when I import it into GS the sizes are weird - the canvas is divisible by 4 in Adobe illustrator

matarua

@dandandan18 email them to me and I will have a look for ya... http://mata.co.nz/contact.html

Most legacy vector applications don't work to perfect pixels or use blank space as canvas as far as I know (apart from Fireworks, or new ones like Sketch etc.) - you should always create in Illustrator - prepare and save in Photoshop if you can.

LumpApps

I made a video for you (and everyone else). It can be found here:
http://forums.gamesalad.com/discussion/60261/create-images-and-animations-using-illustrator-slices?new=1

@matarua as you can see it is possible to make perfect pixels with Illustrator

matarua

@LumpApps hey that is great - although I have been a designer for 25 years would you believe I am a staunch Freehand user - still - use it and hate Illustrator to this day - hence I was a bit soft on my claim. So thanks for the heads up and I will watch the video. I have Creative Cloud and do use Illustrator if I have to I am just not fast in it like I am with Freehand. I have to hack the user prep file in Freehand to make it print in Windows tho (it's well gone on Mac), but I don't even have to think about 'how' when I create I just 'do' - it's still doing great things for me 9 years since it was binned by Adobe. But the writing is on the wall and things are changing. Using Indesign for more and more now.

Thanks for posting this up it's great to see how people do things - with graphics there are 101 ways to do the same thing at times. Great stuff

Always keen to learn new things!

Thanks heaps, M@

I made a video for you (and everyone else). It can be found here:
http://forums.gamesalad.com/discussion/60261/create-images-and-animations-using-illustrator-slices?new=1

@matarua as you can see it is possible to make perfect pixels with Illustrator

LumpApps

I come from Freehand too and hated illustrator in the beginning. But as you can see I learned to work with it over the years. Some stuff is annoying (like the slices not snapping to grid) but its workable. And I think nowadays production wise it is unbeatable.

matarua

@LumpApps - hey a note 8bit PNG can have a 24bit alpha channel - Adobe does not do that however - see http://tinypng.org/ - you can process images online there and save on space or use one of the other tools that does that

LumpApps

Ah, thanks. I knew something was going on there. I use ImageOptim anyway before publishing. I guess that works?

matarua

Watched the video and that is great stuff - it's very Photoshop like with the slices. And the working on the grid thing is great. The slices might need a controller key to snap maybe? I am sure you have tried that. Nice workaround for that.

Thanks again, cheers, M@

matarua

One of things I hated about Illustrator was how 'free' it was. I would always set up my document in Freehand, choose bleed, set guides etc. etc. Guides and grids in illustrator used to be poor and hidden in that order (to me a non regular user) and bleed was hidden deep in a print dialogue. It was an artists tool. Not a designers tool. You could not put bitmap images in it. You could not have multiple pages. It was totally impractical making you have to use two apps to produce anything more than a vector single sided poster or flyer. That put me off it way back then and I have resisted the swap as much as possible

But to hear you say you think it is 'unbeatable' is a good thing coming from a Freehand user

And to see your video on grids I like - grids make this stuff so much easier

I am not sure if I will change to doing my game dev stuff there tho - pixels be pixels and all. Much appreciate the time you took doing the vid, cheers, M@

matarua

In regards to your question too...

"ImageOptim converts images to PNG8+alpha format when that is possible without loss of quality. That's the most efficient way to store alpha channel."

So yep

dandandan18

Just seen these comments, thanks @matura and @LumpApps your video is great, thanks a lot!!!!!!!!