Modularity The re-use of everything in Games. Yes, even animation, bare with me
What we’re covering today In this session, we’re going to touch upon how artists have used ‘tilesets’ to populate a game world, how this practice has transitioned to 3D game workflows, and how we can use this ‘modular’ mindset to create an appealing character. We’re then going to animate a modular character’s base with which you might later want to go on and replace all the base parts to create your own characters. This isn’t a lesson for just artists. Everyone’s an animator given the right toolset.
Modular (2D level design) Since games existed games designers have been designing art assets with full intention of them being re-used throughout the game. Often referred to as ‘Tilesets’. These tiles populate the world they’re created for.
Modular (3D level design) The practice of using pieces of smaller bits of art was happy to transition to 3D, artists for games will often create a few variations of the same piece of geometry and use them throughout their games.
A fully modular character Who do these parts make up to create?
Rayman
=^D
Our modular character, Yew. ‘Yew’, which is heavily influenced by what Rayman accomplished, was created from a need to have a groups artists contribute their efforts into creating a character. He was made in Flash using symbols with a full turn-table of replaceable images, and all the pieces were already animated. The artists just needed to replace the pieces.
What we’re going to do with Yew. With no drawing required, we’re going to get Yew to do a couple of animations created by yourself, export them as .GIFS and import them into Gamemaker. Please create:
a Crouching animation ( This slideshow will help you ) a Walk cycle a Standing Still Attack ( Punch? kick? HADOKEN? ) a End-of-level celebration
Download the presentation and continue at your own paces!
Standardising our workspace Before we start loading our required files, our Flash layout might differ from person to person. Open up Flash and load up ‘Small Screen’.
Standardising our workspace To simplify our workspace further, click and drag/hold one of the icons on the right and pull it to the side, (It might cascade itself into your workspace, click and hold/drag the darker gray panelling above it and dragging it out has the same effect). Do this for all but the Library tool.
Standardising our workspace We’re going to get rid of all the unnecessary windows we’re not going to be using.
Standardising our workspace Once we’ve done this, we can open our .fla files we’ve downloaded from itslearning Your library contents might differ from mine, depending on what files we have open.
Animating Yew. Opening our ‘BASE’ project file, we should be greeted with something like this. On the right I’ve included a version of the toolset with the tools we’re probably not going to be using scribbled out. We need to play around with the timeline now. It isn’t too hard. Easily one of the better ones Adobe has in its programs.
Timeline The playhead and it’s position symbolises (depending if we have more than one layer for frames) what particular set of frames we’re looking at. A Blank (white) keyframe means those frames are empty, while a normal darker keyframe means they’re occupied by a picture. Onionskin enables you to view several frames at a time. we’ll be using it in a second or two. Remember it’s location. Onion skinning ->
Quick notes: Playback Pressing the ‘Enter’ key will play the animation in the timeline, with how short our animations are going to be, it will probably be preferable to turn ‘loop playback’ on. Find ‘control’ on the top of Flash’s menus and open it, and ensure there is a tick next to ‘loop playback’.
Quick notes: Order If you want to layer your limbs differently, right click the limb you want to bring forwards/backwards and go to ‘arrange’, and change what you want from there.
Quick notes: Background It’s generally bad practice to work on the default white background, I’ve changed mine to pink to contrast against white, we want our background to be anything but white so Gamemaker can figure out which colour it should remove to make our animation transparent.
Crouching Open up the ‘Crouch_Tutorial’ .fla file. You will find two keyframes. The default standing position in the first keyframe, and the second, the pieces in a crouching position. If you want to move / replace one of the parts, go to the library on the right and drag and drop what body piece you want into your workspace
Crouching Right-clicking a frame in the timeline, we can ‘insert keyframe’ or ‘convert to keyframe’. This creates a duplicate of the frame we’re on, so we don’t have to recreate the placements of each limb or copy-paste them from the previous frame. (If we wanted this we’d have done ‘insert blank keyframe’)
Crouching Now, with the free transform tool, move the pieces into the appropriate location. I prepared this tutorial with 5 frames between fully stood up and fully crouched, you are free to add more frames if you need them, or remove the amount of frames between the action. 5 is just a base. I usually move the parts around by selecting what pieces I want to move (hold shift to select multiple) and using the arrow keys. Don’t get discouraged! This takes awhile!
Quick notes: adding appeal How where you go with your in between frames can change the mood of your animation & trying to go anywhere but the middle. https://youtu.be/K3619dVqFSY the Principles of animation. https://youtu.be/l-KtwW6eptM
Exporting .GIFs Once you’ve finished your animation, go to file, publish settings, and change your settings according to the image tutorial. Then once you’re done, hit ‘OK’, then go to file -> publish
Importing to GameMaker I’m assuming at this point you know how to get assets into GameMaker, and turn them into objects and the like. Be sure to enable ‘remove background’ from the sprites you import. And to rename your assets to suit their purpose!
Final Notes. Hopefully you’ve kept Yew’s feet on the bottom border of the document. There’s a bit of wasted space to the left and right of Yew. When you’ve finished your animation, right click and enter ‘Document Properties’, find ‘match: content’ and check it, and click ‘OK’. This crops your document so that any space not taken up by something is taken off. This can be a bit of a double-edged sword at times like standardising boundaries/object sizes between animations. Just be weary.
To do: Now that you know the basic rundown of how to animate symbols in Flash and export them. Look into various spritesheets and gather inspiration from them to create a ‘looping walk cycle’. Try to aim for less frames, rather than more to lessen the workload. Putting ‘walk cycle’ into a image search engine should help you with this task. a Crouching animation ( This slideshow should have helped you ) a Walk cycle a Standing Still Attack ( Punch? kick? HADOKEN? ) a End-of-level celebration