My new approach to game design, making use of Adobe After Effects.

StormyStudio

I just wrote this for the blog on my site http://stormystudio.com/blog , but thought I'd share here as well.

I've recently been working on a new game project, 'Project M'.  I've decided to step to the side of game programming for a while and tackle some of the visual design for the gameplay and menu system.

Normally on a project :
• I’ll do some rough sketches,
• create some images in Photoshop or Illustrator
• import it all into GameSalad
• and then start adding images to actors and rules to make the actors scale/swing/bounce/fade and slide into position.

This last step takes considerable time and takes away a lot of instant control that I would normally have when animating in software like Adobe After Effects, which happens to be software I use on a daily basis for various cool corporate motion graphics.

So I've decided to change my work flow to incorporate ‘After Effects’ and it’s working really well.




It may seem like an extra unnecessary step but I really think the freedom to design animation, colour schemes, and layouts so quickly will have a great impact on the game when it is finally created in GameSalad.

Also another benefit is that if I make any changes to images created in Adobe Photoshop and Illustrator they’re automatically updated inside After Effects to see how the changes in design affect the games look as a whole.

I would share what I've been making so far, but the salads not quite ready yet...

One last tip: Making use of the Adobe Kuler website to create a unique complimentary colour palette is another great way to ensure a cool final game design. These Kuler palettes are now integrated with ‘Adobe Illustrator CC’ making it even easier to create a consistent game design aesthetic.

Anyway, I hope this approach might appeal to other developers.

The Creative Cloud CC package is obviously not the cheapest, but if you use it for other things or if games are your full time job it might be worth considering... you can at always do the 30 day trial ;-)

'like' my humble Facebook page... https://www.facebook.com/StormyStudio :-)

VolontaArts

yea i would like to see what you came up with. sound interesting

blue_elephant

So can you import all the images and animations into GS? Or is it more of a mockup thing? I didn't think AE could export GIF files so I'm just wondering.

SinSquid

Great post... we need more focus on game design. I`ve been thinking about using after effects myself. It`s even possible to rigg a character with bones, then export all frames to PNGs. It`s a great way to make animations. Check out this video for example ()
If you add some motion blur etc... animations can look pretty sweet.

But as for now im still using Photoshop and the "puppet warp" function for animations. Just because im more confortable in photoshop.

Another good site to create color pallets is http://colorschemedesigner.com/

BoomshackBarry

This sounds like a great workflow Jon. It'll be great for you to see your game in action before having to start programming it, kind of like an active version of a flow chart. Also because you use AE all the time anyway I'm guessing it will be fairly quick for you to work in this way too.

Off to read your blog post now for more insight...

StormyStudio

@blue_elephant - as @SinSquad says , it's easy to export a PNG sequence with or with out alpha straight out of After Effects ready for importing into GameSalad.

@BoomshackBarry - Cheers mate, obviously this approach works especially well for me as I use After Effects on a daily basis and know it really well. I'd still say its an approach worth learning to help proof game design early on, create character animation, also it's worth knowing the software a little for making some cool promos for game releases. Regarding the blog post, not much else in their on this subject, but I've added a couple of others recently, one on how to handle working from home full time.

One of the reasons I decided to use After Effect in this way is I was inspired by the awesome design used in the game 'Wide Sky', every transition, menu, game asset looks perfect and the scenes flow around and animate in and out beautifully. It was made by a designer who's already a very talented motion graphics artist so it makes sense. I have no idea if he created a game mock up in after Effects first, but if it means my game can look its best, it's got to be worth the time.







Even his promo video is exceptionally awesome.

BoomshackBarry

That is an epic video, you can tell that guy knows his way around motion graphics.

I've been considering getting in to After effects too, although that was intended for game promo videos, I hadn't considered using it for the game itself. I played around with CS4 a bit but never got far in to it.

Have you ever used Apple motion? I've heard that it's simiar to AE, but with a £35 price tag rather than an expensive Creative Cloud subscription - it could be a good alternative?

StormyStudio

I've used Apple Motion a few times, it's not bad by any means and comes with a tonne of presets to produce some things quickly, especially videos in a frame with a 3d floor. It doesn't have anywhere near the same scope as After Effects in terms of the different sorts of content you can create and control plus far less 3rd party plugins for extra visual effects. But Motion could certainly suit smaller budget promo videos.

Some of the 3rd party plugins for Adobe After effects are insanely cool: (But not always that cheap :-/


• Element 3D - import 3d models, or extrude text and shapes, and texture and light, animate and render incredibly quickly at the end. I used this for the 3D iphone I spun around in the video I recently made for Riffel.
https://www.videocopilot.net/products/element/
(Plus some impressive model packs are available, the city scapes are very cool)


• Newton - 2D Box physics in After Effects
http://aescripts.com/newton/


• Plexus - Create and control 3D/2D geometric shapes
http://aescripts.com/plexus/


• Particular - Superb particle engine... expensive though.
http://www.redgiant.com/products/all/trapcode-particular/

There's a tonne more, but those are some of the big hitters...

With that said, Apple Motion is priced really really well and would no doubt churn out some good looking game promos.

fiorentin

Hi,

I would just like recommend After Effects and encourages anyone to try it, especially if your working with 2d games. After Effects has a given place in my workflow/production line whether im working with film, 2D graphics, 3D visualisations or prototyping but I think its a perfect companion to Gamesalad especially. Plus, if you have ever used Photoshop its pretty easy to understand (compared to node-based compositing tools).

For GS i mainly use AE for creating character animations. You can create a bone rig and/or puppet with ease and pretty soon your static character is alive. This is really nice since once this is done you can play around and create as many animations/moves/expressions as you want to.

For me AE+GS is as natural as using your favourite 3D software with Unity3d.

BoomshackBarry

I think that's what I was expecting to hear. I remember looking at all of the video copilot examples from a few years ago, the stuff you can do with AE is insane. Looking forward to seeing what you come up with

fiorentin

Newton is a really nice tool for simulations in 2D!

Sure the things you can do in AE is amazing. Myself i try to not get too carried away all the time but rather limit myself for the task i need to focus on. I have three different layouts in most of my software, one for 2D, one for 3D and one for video editing. This makes the workflow faster but also reminds me why im there - im easily getting carried away and suddenly 4 hours have passed and im trying out cool stuff instead of what i should be doing

Anyway, if anyone wants to try out AE for character animation you should have a look at Duik. Its free!

BoomshackBarry

Thanks for sharing, those Duik tools look just the job for animating game characters.

StormyStudio

@fiorentin . I used Duik for a cyclist animation as part of a big video for a well known Beer company... Duik was free when I used it, hopefully still is.

We created a very quick promo at work to show the I.K rig in action...

I can't embed it, but here's the address:
www.vimeo.com/59070602

fiorentin

From the developers site: Duik is and will stay free.

Nice job Stormy! I think Duik is invaluable for 2D animation in AE.

StormyStudio

cheers @fiorentin

KevinCross

That cycle clip was really cool.