Viewport
Touched upon in the previous tutorial was the camera viewport. Now we'll be utilizing the camera to change what part of the scene is visible.- Open your epilogue to the Scenes tab.
- First, we need to zoom in the camera so that the whole background isn't visible at once.
- Click the first scene in the Scene View.
- Zoom out the canvas (slider in the toolbar or ctrl+mouse wheel) so that you can see the L corners of the camera viewport.
- Grab the intersection of an L's legs and drag it around to change the camera's zoom. Whatever is outside the viewport appears slightly darker than what's inside.
- To set the Zoom level exactly, with the scene selected, in the Property Table, set the zoom to 1.50. Remember, the canvas zoom and the camera zoom are two separate things.
- Click the Play Scene button in the canvas toolbar. Notice how Florina's face is much bigger than last time. In fact, she is viewed at 1.5x zoom. Also notice how the portions of the background image outside the viewport are blacked out.
- Stop playback to return to edit mode.
Moving the Camera
We're now going to animate the camera.- With the camera still selected (you can click the diamond next to "camera" in the timeline if it's not), set X to 130. You could also drag the viewport in the canvas, but for the sake of following this tutorial it's easier to type exact numbers.
-
The viewport is now lined up with the right side of the background.
- Drag the red time marker in the timeline to 1:00.
- Set the camera's X value to 0. A diamond appears at the 1:00s mark in the timeline.
- Put the time marker back to 0:00.
- In the timeline, click the Play button. You'll see the viewport moving from position 130 to 0 in 1 second.
- Click the Play Scene button. When playing a scene, you see the scene from the viewpoint of the camera, so it looks like a pan across the landscape as the camera moves.
- Stop playback.
Waiting for Animations
You may have noticed during playback that the speech bubble is stuck in place while the camera moves. This is because, unlike sprites, speech bubbles are not physical objects in the scene. Instead, they are like stickers overlaid atop the camera lens. We don't want to display the bubble until Florina moves into view, so we'll wait for the camera to stop before we display it.- In the timeline, grab the box with the green bar to the right of "Congratulations! You've unlocked..." and drag it so it starts at 1:00.
- Play the scene again. This time the bubble doesn't appear until the camera has stopped.
Moving Sprites
Let's give Florina some animation by moving her into the scene too.- Select "calm" in the timeline. In the Property Table, change the ID to "florina". The timeline updates to use this new ID.
- Giving your objects names helps identify them in a complicated timeline.
- Click the diamond next to "florina" in the timeline to select the first keyframe.
- Move Florina out of the viewport by dragging her left. Alternatively, you can manually type -200 into the X field of the Property Table.
- In the timeline, drag the time marker to halfway between 0:00 and 1:00.
- Drag Florina to the right back to where she was a few moments ago. Alternatively, type 0 into the X field of the Keyframe: florina (0.5s).
- Play the scene and you'll see Florina slide in from the right.
- Let's delay her movement a bit. Drag the diamond at 0.5s and move it to 1:00.
- Put the time marker back to 0.5s and type -200 into the X field to create a new keyframe.
- Click this diamond at 0.5 and then select the "Begin keyframe" button in the timeline toolbar. It looks like triangle pointing right.
- Play the scene again. This time she waits a bit before popping into view. Stop playback.
Key Frames
The animation system uses key frames and tweening. Values for properties (X, Y, transparency, etc.) are defined at certain points in time, and the animation system fills the "in between" frames automatically. At its core, the tweening system used by the epilogue system is virtually identical to the system used by custom poses, and so is working with them in the editor. This section will give a brief overview, but the Pose Maker tutorials go into more depth.It wouldn't be a Florina tutorial without summoning orbs being involved somehow. We'll use one to practice with animation key frames.
- Select Scene: Blue in the Scene View.
- Click the "Toggle fixed length" button for the speech bubble.
. This will cause the bubble to disappear when moving to the next action.
- Add a new action in the Actions list.
- Drag the time marker to 1:00.
- Select the camera in the timeline. For a keyframe at 1s, give it the following values:
- Time: 1
- X: -600
- Y: 384
- Zoom: 0.40
- This will pull back the camera and move Florina to the right side of the viewport as seen below:
You will likely need to recenter the canvas to see this all.
- Make sure the time marker is at 1:00..
- Add a sprite (Add Sprite button in the toolbar). Use ep_orb.png from Florina's directory.
- Give the sprite an ID of "orb."
- Drag the orb to the lower left of the viewport, just outside of the rectangle. This should be somewhere around (X: -1500, Y: 1130).
- Move the time marker to 2:00.
- Drag the orb to Florina's feet, around (X: -100, Y: 1130). Fill out Y even though it's the same as the starting value. We're going to move Y in a bit and without putting it in the key frame, this frame would be skipped when animating Y and it would not animate as expected.
- Move the time marker to the tick mark after 2:00 (at the default timeline zoom, this will be 2.12 and display as 1.12 for the orb's prospective keyframe.
- Drag the orb up and to the left a bit, around (X: -230, Y: 990).
- Move the time marker to the next tick mark.
- Drag the orb back to the floor, around (X: -385, Y: 1130).
- Play the scene. The camera will zoom out, and then the orb will roll up.
- Stop playback. Let's give the orb a head start while the camera is still moving.
- Grab the orb's in the timeline (rectangle with a blue line) and drag it so it starts at 0.5s.
- Play the scene again. This time the orb is already moving by the time the camera stops.
Looping Animations
It's possible to loop different properties on a sprite at the same time. Let's add a rolling effect to the orb.- Make sure the orb is selected.
- Click the initial keyframe for the orb (it should be at 0.5s).
- Type 0 into the blank Rotation field to force an initial keyframe for rotation.
- Drag the time marker to 1:00. Type 360 into the Rotation field.
- Expand the orb's properties in the timeline by clicking the expand arrow to the left of the name.
- On the Rotation row, hover over the empty space on the right and click it to enable looping.
- A repeat size appears next to Rotation's last keyframe.
- Play the scene. The ball will be rolling in place, but stopping and starting.
- This is because of the easing method, which defaults to "smooth": start slow, build up speed, and slow down.
- Click the curve button two icons to the left of the looping button you just used to bring up a dropdown menu for easing functions.
- Change the Easing to linear.
- Preview the animation again. This time it rolls at a constant (linear) rate.
- It looks decent enough, except it keeps rolling forever. Stop playback.
- Select the last keyframe on the orb. This should be at time 1.75s (1.25 relative to the start of the orb).
- Type 360 into the Rotation.
- A new keyframe appears on the Rotation row and becomes part of the loop. We don't actually want this, so select the keyframe (only for the Rotation row) and click the "Begin keyframe" button in the timeline toolbar. This will make it part of a new animation block, ending the previous loop.
- Play the action. The orb now stops rolling, but its rotation jumps to its new resting point. Change the rotation on this new frame to 190 and play it again to confirm that it looks better.
- This looks good enough for tutorial purposes, but there are a number of ways we could accomplish this in a way that looks nicer. One idea would be to split the movement animation into before and after hitting Florina's leg and stop the loop between them, and then integrating a separate roll into the bounce. This will be left as an exercise to the reader.
- One last finishing touch. Add a new speech bubble with the text, "Oh no!" and position it somewhere around Florina with the bubble arrow pointing at her.
- Drag this bubble in the timeline so that it starts at the point the orb hits Florina (around 1.5s).
-
Assuming you followed along exactly, your actions for the blue scene should look like this: