This week, we take a look at how our animations are added to RAE.

Be sure to leave us any questions or comments and remember! Our sprite sheet exporter for Photoshop is available for download here.

There's two things I wanted to talk about today. First, we've never really given you a high level list of everything the engine does for us. Allow me to enlighten you...

RAE features:
* A fully integrated level editor - Includes tools for placing, rotating, and scaling objects as well as placing world geometry, physics joints, and more
* Component based objects system - Objects comprised of Gibs (as in "instagib", where a guy explodes into a bunch of little pieces or "gibs")
* Physics based gameplay - Currently using Box2d
* Custom scripted objects and levels using Lua
* N levels of parallax support
* Cross platform - Runs on Windows and Linux. OSX is currently under development
* 2d Animation system
* Internal Event system within the engine - Instances of C++ objects can subscribe/unsubscribe for event callbacks
* Custom 2d Lighting system
* Positional sound support - Currently uses the OpenAL library
* ...and more...

Secondly, I've had a lot of questions about our Game Objects and Gibs. Let me describe to you a little bit more about how we create objects for the game...

We use a component based object system, and we call our components "Gibs". I won't go into detail about the pros and cons of a component based object system right now, but instead I'll describe what we love about ours.

The engine has a few built in gibs which support adding animations, sprites, physics, or scripts to a game object. New game-specific gibs can be created outside of the engine code and registered with the engine before the main loop starts. This allows game programmers to create new C++ gibs which add their game specific functionality. For Snapshot, we take advantage of this to create specific types of objects and to set up our player specific code to the object representing the player. When an object is first constructed, it traverses through the data for the object, which typically is pulled from a GO file or level file. In addition to adding gibs during creation time, the engine supports adding and removing gibs to an object at runtime. Multiple gibs of the same type can also be added to a single game object. For example, a game object can have N number of sprites or physics components added to it, allowing it to interact with the world in a new an interesting way.

Finally, through the use of the script gib, the engine allows Lua scripts to be tied to any object. Objects with a Lua script receive callbacks when the object is updating, being created or destroyed, when physics gibs attached to the same object receive contact callbacks, and at many other times.


We're going to continue publishing videos showing off what decisions we've made with our tech along the way. If you have any questions about how any of our tech was written, feel free to jump into our Live Chat!

We've shown you how we make the art, we've shown you how to make the objects, now it's time to show you how we make the levels. This week, we introduce you to the RAE Editor. This is where the magic happens, folks.

Leave us your questions and comments! We'll be sure to answer them as best we can.

This week, we take a closer look at GO files and their components. Enjoy!

Next week, we'll show you some of our editor tools which let you place and manipulate the game objects you make. See you next week!


Actually, while I have your attention...Snapshot managed to land a place in IndieDB's Top 100 Indies for 2010 and we're now in the running for the Indie of the Year. Woah. Whenever you get a chance, hop on over to our IndieDB page, and show us some love! We're in the "Upcoming Indies" under "Platformer". The top 100 is determined by "quality" of vote. For example a vote from a long time member is worth more than a new members vote which is again worth more than a guests vote. So if you get a chance, register! IndieDB is an awesome community. Thanks for your support!

This week, we take a brief look at our art pipeline and how images from Photoshop are brought into RAE.

Leave us your questions/comments, and come back next week as we take a closer look at what game objects are made of and how they interact with the engine. See you then!

We were feeling a bit crafty this weekend again, so we broke out the clay brick and modelled our very own Pic. It was a nice way to spend a lazy Saturday morning, and the good news is that there's plenty of more clay, wire and paint...so I think it's safe to say there are more Pics to come (probably better ones too)!

If you're ever feeling crafty with Snapshot too, make sure you show us what you can do. We'll put it up on our blog and maybe send you something nice in return!

As you may have heard, much of the last two years has been devoted to developing our own custom engine, the Retro Affect Engine (RAE). Since RAE has a lot to do with Snapshot, we thought it'd be appropriate to show you backstage.

For anyone who's unfamiliar with engines as they apply to game development, an engine is sort of like the solid foundation to a video game house. An engine is used for not just one game, but many games and in some cases many very different kinds of games. Companies spend a lot of time evaluating which is best for them, and we were no different.

Kyle, Dave and I sat down and listed the features we wanted in an engine. We had a clear idea of things that didn't make it into the prototype because of technological restrictions. Namely that it be game object based, physics, scripting support, we wanted it to be versatile so we can bring our games to platforms beyond just the PC, and also versatile that we can create games beyond platformers. Finally we wanted an engine that was familiar. Of course, there's a learning curve for anything new, but we wanted the ability to add in new features down the road as we needed them.

Ultimately, none fit the bill well enough. It was then that we decided to create our own engine from scratch. The biggest downside was time; we've been working on RAE for over a year and a half! Thankfully, the upside is in our games. Snapshot's development is finally in full swing and any shortcomings of RAE are addressed almost immediately.

Over the next few weeks, we'd like to show off some of RAE's awesome features through a series of video posts. We want to hear from you! What aspect of the game engine would you like to learn more about? Game objects? Scripting? Physics? The art pipeline? Give us your questions/comments below or in our IRC channel! And come back next week for our first installment in the series.

Dave and his sister redecorated our walls a bit this last weekend:


Each character is made up of about 200 foam squares bringing the total cost to about $20! Give it a shot if you have some blank walls. You can actually feel the classic inspiration emanating from the walls.

Hello again! This post is part two of a tutorial which introduces you to the basics of Adobe Photoshop's animation tool set. If you've never heard that Photoshop has animation tools, then I encourage you to do a quick read before jumping into this one.


A quick lesson in animation: there are two techniques to animating, straight ahead and pose to pose. Which you use depends largely on what you're animating. Straight ahead means you animate each frame sequentially one after another. Pose to pose, however, requires a bit more planning. You first draw the extremes, or the most expressive frames, followed by the frames in between those extremes.

In game development, I typically use pose to pose for cycle animations (i.e. run cycles, walk cycles, jumps, idles). Straight ahead I save for actions (i.e. climb, punch). For the bouncing ball we're about to do, we'll use pose to pose.

The Steps!
1. Let's get started: if you haven't already, open Photoshop up and create a blank canvas, let's say 256 by 256.


2. From here, we can open our Animation Pane. It can be found under Window > Animation.

3. Create 12 frames of blank animation. Once that's done, create a new layer and label it "blocking". On "blocking", draw a circle. This will be used to basically sketch out where our bouncing ball will bounce.


4. Once open, make sure the Frame option is selected. Also, uncheck "Propagate Frame 1" at the top of your layers pane. This option toggles whether or not any changes made on the first frame occur in all the other frames.

5. Remember that since we're doing pose to pose, we want to block out the extremes of our animation. For a bouncing ball, we'll say those are the highest and lowest points. Select the 6th frame, and move the Blocking layer to a high point on the canvas, or the highest point you want your bouncing ball to travel.


6. Now select the 12th frame, and move that same layer to the lowest point. For anyone a little more experienced out there, don't worry about adding any details like squash and stretch quite yet. We'll get to that later.

7. There! Both of your extremes are in place. Now, fill in the frames in between by moving your same "blocking" layer on each frame. At this point, make sure you play the animation occasionally, and make any tweaks necessary to give it a nice arc. Bounce a real ball if you have to remember how it looks! Keep in mind that any minor changes now, save you from major changes down the road.


8. I've found that a great way to stay organized is to have a folder represent each frame. Since this is a simple animation, create 12 layers instead and label them corresponding to each frame. Once you do so, make sure only the blocking layer and the corresponding layer are visible in each frame.

9. Using your blocking as reference, draw a ball on each new layer. Here's where you can take into consideration some of the principles of animation: squashing the ball when it hits the ground, and stretching it as it rockets to the sky.

10. Make sure you still keep it relatively simple, and play it often to see how it looks. Once you have each layer drawn and it feels good, you can make a second pass to add detail like shadows and highlights.


There you go! Your first Photoshop animation. You can save it as an animated GIF, an image sequence (one image for each frame), or you can use Retro Affect's custom animation exporter that puts each frame into a sprite sheet.

Here's the finished PSD used in the example for reference too.

Comment with any questions or tips you may have!

It's relatively unknown that Photoshop houses tools for animation. They're not exactly top of the line, but for anyone that already "has" Photoshop, it certainly gets the job done. Since it's a pretty big topic, I'll split into three separate posts. Today will be your introduction to the animation pane and all its function. The next part will walk you through your first animation, and the last will build on the second, teaching slightly more advanced practices.



A few assumptions: all that's required is some experience in Photoshop, and a very basic knowledge of animation. This tutorial is intended for the independent developer/fledging animator who wants to improve their games with moving pictures! This is certainly not the end all, be all of introductions/tutorials. If you have experience with the animation tool, share your tips in the comment section!

Let's get started...

Photoshop's Animation tool works by controlling the opacity, location and style of each layer depending on time. This tool is split into two modes, Timeline and Frame.

Timeline works somewhat like Flash animation whereas you edit each layer's individual timeline. In Timeline, you can also utlize onion skinning, a function that faintly shows the frames around your current frame. This makes for smoother animations.

Frame is less complicated and a bit more approachable. Think of it like a Post-It Note pad. Each frame represents one page of the pad. In my opinion, this translates well into game development, since we think in frames anyways. Though you loose the onion skin function, you can move in between frames easily. For instance, I've mapped my next/previous frame to buttons on my tablet.

A. Frame - Each square represents a single frame of the animation. Here, you can edit, move or delete frames. You can also change how long a frame is displayed for. Shift click to select many layers, or Ctrl click to select multiple, specific layers.
B. Play Mode - Options for playing the animation. Play once, play forever, or play for a set number of loops.
C. Controls - These are your typical video controls. Return to the first frame; previous frame; play; next frame.
D. Tween - Automatically transitions between two frames for a predetermined number of frames. Can't say I've utilized this too much, but it could be useful for blocking.
E. Create a New Frame - Creates a new frame.
F. Delete Frame - Plants an apple tree.
G. Mode - Toggles between Timeline and Frame.
H. Options - Contains various options for the animation pane. One option to note is Match Layer Across Frames. This takes your current frame and layer, and copies that layer's position, opacity and style across all other frames.

That's it! Consider yourself introduced. Within the next week, I'll post a tutorial that walks through a full animation, best practices and all. Any questions?