Animated Opening Scene am I doing it right? :D

wilsongalucho

Hello GS peeps!

I am creating an interactive story and I need a little help with the opening/menu scene.

Basically before the menu pops up, I want to play an animation in the background. Here's the link of the animation created in
After Effects -

I'm creating the App to target Ipad 1024x762 and the Kindle HD 1280x800.

My GS project is set to 1280x800. Is this alright?

Now using Resolution Independence, I need to import the images 2x as big. So its compatible with all devices. Right?

The way I'm playing the animations in GS is using the Timers and Animation Behavior.

I'm exporting my PNG Image Sequences from After Effects, the background, the train, the buttons, the mouse, and the white fade.

The reason I animated everything in After Effects is because it gives me more freedom to do the Animation. e.g the Blur
on the train, the slow out whens its stopping, the zoom out of the backgorund, ect...

However just the train has 110 frames, first I imported it at 2x the size which is 2560x1600 (which comes to almost 200mbs) and divide actor size by 2 so it fits the 1280x800... is this the right procedure to import images?

Then i tried importing it at 1280x800 (which I guess would be a no-no if I'm using RI,) it plays fine at 24fps, but when I imported another element like the button with the animation, Game Salad starts to crash, which I guess its because of too many frames and too big for it to handle.

What I'm trying to figure out is if there is a way of having the same control over the animation, or a way to create the animation exactly like the one on the link, just using Game Salad?

I know you can use you move behaviors, but is it possible to slow out the train as I have it on the animation, and is it possible to fade in and out actors?

Basically how would YOU do that animation I provided, in Game Salad?? what would be your procedure?

Cheers!

wilsongalucho

Hello GS peeps!

I am creating an interactive story and I need a little help with the opening/menu scene.

Basically before the menu pops up, I want to play an animation in the background. Here's the link of the animation created in
After Effects -

I'm creating the App to target Ipad 1024x762 and the Kindle HD 1280x800.

My GS project is set to 1280x800. Is this alright?

Now using Resolution Independence, I need to import the images 2x as big. So its compatible with all devices. Right?

The way I'm playing the animations in GS is using the Timers and Animation Behavior.

I'm exporting my PNG Image Sequences from After Effects, the background, the train, the buttons, the mouse, and the white fade.

The reason I animated everything in After Effects is because it gives me more freedom to do the Animation. e.g the Blur
on the train, the slow out whens its stopping, the zoom out of the backgorund, ect...

However just the train has 110 frames, first I imported it at 2x the size which is 2560x1600 (which comes to almost 200mbs) and divide actor size by 2 so it fits the 1280x800... is this the right procedure to import images?

Then i tried importing it at 1280x800 (which I guess would be a no-no if I'm using RI,) it plays fine at 24fps, but when I imported another element like the button with the animation, Game Salad starts to crash, which I guess its because of too many frames and too big for it to handle.

What I'm trying to figure out is if there is a way of having the same control over the animation, or a way to create the animation exactly like the one on the link, just using Game Salad?

I know you can use you move behaviors, but is it possible to slow out the train as I have it on the animation, and is it possible to fade in and out actors?

Basically how would YOU do that animation I provided, in Game Salad?? what would be your procedure?

Cheers!

gyroscope

Hi @wilsongalucho Welcome to GSC and the Forums.

I really like your animation! However, despite it being short, I'd advise a couple of things...

First to say, personally I wouldn't try to make your game file "universal" for both the iPad and the Kindle HD. I'd make two separate game files. i.e Make one, then make a copy, adjust the size for the other and rename it of course, to avoid confusion.

A rundown of image sizes (for iPad, at least) (I might over-explain as you prob. know some of this):

always best nowadays to check RI (use Resolution Independence) . So any image that appears in the game should be made 4 times the size, i.e twice the width and twice the height (example, 100 x 100 should be made 200 x 200 pxls.

Any full background image you want to cover the screen should be brought in as 2048 x 1532. The max. size of any image that can be imported into GSC is 2048 x 2048.

As to your animation, it could easily be done with just 4 or 5 images, moved and resized by Interpolate behaviours (including the out-of-focus effect by fading in that out-of-focus image as an overlay.)

Even if you still go the Animate behaviour route, you can get away with far less fps - 15, 12 or even 10 fps for non-photographic graphics-type images.

Finally, to answer your question about fading actors, you can do that using their Alpha attribute, and have its max. value of 1 fade to 0 over time using Interpolate Behaviour. (Or from 0 to 1 for a fade-in, of course.) Hope that's helped!

Hopscotch

@wilsongalucho‌ , this would be my approach.

gyroscope

so who deleted my post? Strange.

gyroscope

Hang on, you've made two identical threads, @wilsongalucho

That is against Forum rules because it causes confusion - (like I was confused). In future, please don't make identical threads. I'll merge the two threads in a min.

tatiang

@gyroscope I have no idea what happened but I tried to restore it and now it isn't showing up in the deleted queue. ARGH! So I can't even copy and paste the text for you. So sorry!

Edit: ahhh, thanks @gyroscope‌.

gyroscope

For the record, no apology from @tatiang needed! Cheers, Tatian.

Right, off to merge the threads.... got my pickaxe, sandpaper, glue, sword of mighty valour, bag of chestnuts, everything...

wilsongalucho

Hello everyone @gyroscope @Hopscotch @tatiang

Thanks for all the great replies! And so sorry for creating two identical posts, I created one in a different category by mistake then I created on this category and forgot to delete the first...sorry. I can see everyone @Hopscotch @tatiang posts I think, including your very first one @gyroscope

Thank you for your examples I really wasn't expecting such detail wow ! I have a much better idea how to create this animated intro using interpolate and your great examples thanks guys.

However im still not sure about my image sizes... is it ok if I import an image at for example at 1280x800 and upscale it 4x as big in GS, so it will be 2560x1600. and will it keep displaying at correct size on all devices or because of the RI will it change size?
e.g make the train look too small..

Cheers,

Socks

@Hopscotch said:
wilsongalucho‌ , this would be my approach.

Great post !

Socks

@wilsongalucho said:
However im still not sure about my image sizes... is it ok if I import an image at for example at 1280x800 and upscale it 4x as big in GS, so it will be 2560x1600. and will it keep displaying at correct size on all devices or because of the RI will it change size?

I would target iPad size - and derive everything else from that.

2560 x 1600 doesn't mean anything in the world of tablets, the Kindle HD is 1280 x 800, so 2560 x 1600 is 4 times the size it needs to be for the Kindle - and the iPad (Retina) is 2048 x 1536, so 2560 x 1600 is also way too big.

I'd work at 2048 x 1536, there is no need to 'upscale' anything within GameSalad, the size an image appears on screen is the size it will appear on screen on the device.

wilsongalucho

Hey guys, just to let you know that I've managed to animate my menu scene exactly like the AE animation thanks to your amazing help! @Socks @gyroscope @Hopscotch im still to try on the devices to see how it plays, but on GS plays fine cheers

MAGNUM

Looks awesome, I really like the unique drawing style.