[Tutorial - WIP] Using the Animation Editor in Intersect

[EVOLV]

Animation in Intersect

Date Modified: 7/4/2017

Engine Used: Intersect 3.1

 

The following guide will show steps to create an animation in the Intersect Engine. I made this guide as a follow-up for the Quest Guide, here, so I could go into more detail for people who need help using the animation effects. The guide uses Intersect 3.1.

 

Pre-req: You should have some basic familiarity with the Intersect Engine and how to access the Animation Editor.

 

Requirements: You should download Intersect 3.1. You should have some sort of graphics software which supports PNG files, such as Photoshop, if you are going to make your own animations. If you are not making your own animation and just want to use the editor, you should download our sample animation, here:

• http://gloryhound.info/wp-content/uploads/2017/06/questafter.png
   

Step 1: Understanding the animation file (PNG)

Spoiler

 

In Intersect, PNGs are used to create animation files. The file type allows for transparencies, which means you can make some very interesting effects for your games.

 

 

PNGs are usually presented as several frames, side by side. Intersect reads these frames left to right, topmost row, first. Each frame is equally wide as it is tall. We can think of this in terms of a table. The PNG we are using (the yellow "?") consists of 1 horizontal row and 5 horizontal columns, making it 5 frames total.

 

 

Step 2: Understanding the Animation Editor

 

 

Spoiler

 

 

Above is the animation editor laid out in a way that has an animation already defined within it. You can follow the above example to get our sample animation, working.

 

First thing's first: Click the New Animation button at the top left to create a new animation.

 

The components of the Animation Editor and their function in creating our animation are as follows:

• #1: The name of the animation. Choose a name you will remember.
• #2: The sound to play when the animation runs. If you want to affix a sound to this animation (i.e. running water, a buzzing sign, etc.) you may do so here. As of this writing, Intersect uses .WAV files for sounds that are not music files, and these should be placed in your sounds directory within the client folder.
• #3a: Upper Animation preview area. This is where you will preview how your animation runs.
• #3b: Upper Animation graphic. This is where you select your PNG file. It will show in the preview area, above (if it looks off, it'll look better after adjusting #4 & #5, the graphic frames)
• #4: Graphic Horizontal Frames. How many frames are there, left to right? Our sample animation has 5.
• #5: Graphic Vertical Frames. How many frames are there, top to bottom? Our sample animation is a single line, so set this to 1.
• #6: Graphic Frame Count. How many frames, overall. Simple math, here: 1 x 5 = 5. If you wanted to cut the animation short for whatever reason, leaving off a frame or two, you could do so.
• #7: Frame Duration. How many miliseconds does each frame last. The bigger the number, the slower the animation. Play around until you find something that works.
• #8: Loop Count. How many times does the animation play. Default is infinite.
• #9: Playback. Use this to scroll through each frame and to play the animation to see if it is working properly or needs adjusted.
• #10: Frame Options (lighting, etc): These extra effects can be placed on each frame. I will go into more detail with this in a separate topic, below.

Note that these fields are mirrored in the Lower Animation fields. You can have an animation which plays something overtop the character or below. You can have an animation that does both. An animation for a spell 'hitting' a character might look better overtop than below, for example. A runic circle which plays as a character casts a spell may look better below, etc.

 

 

 

More to come on this one, folks. Consider it a WIP!

 

Edited July 4, 2017 by EVOLV
clarification

[EVOLV]

Placeholder for adding lighting portion of this tutorial.

[Refur]

 

Excellent contribution as always