Fading In and Out
Last updated
Last updated
The previous tutorial ended with the camera falling and rotating in a way similar to the falling sequence in ActRaiser. In this tutorial we'll be adding fading in and fading out using Gum.
We will be using Gum to fade our screen in and out by overlaying a black colored rectangle with animated alpha. As an alternative we could also fade the screen by creating an overlay Sprite in FlatRedBall. Gum will resolve a few problems for us automatically, such as not having to worry about positioning our overlay Sprite so it always sits in between the camera and world Sprite. To add Gum, click the Add Gum Project button in the Quick Actions tab.
Normally Gum screens will be created whenever adding a new Glue screen, but we already have an existing Glue screen that was created before adding the Gum project. We can add a Gum screen:
Expand the Screens folder
Right-click on the Mode7Screen
Click Create New Gum Screen for Mode7Screen
Now we can open the Gum project by clicking on the Gum icon in the toolbar.
Our Gum project will have a Screen called Mode7ScreenGum.
To add an overlay ColoredRectangle:
Expand the Standards folder
Drag+drop the ColoredRectangle type onto the Mode7ScreenGum
Rename the newly-created ColoredRectangle to **OverlayRectangle
**
Change the color of the rectangle to Black (Red, Green, and Blue values set to 0)
Click the Alignment tab
Change the Dock to fill
We now have a fully opaque black overlay in our game. If we run the game now, the black overlay will completely cover the spinning map.
The fade-in and fade-out will be Gum animations. Since animations in Gum are created using states, so we must first create a state category and two states:
Right-click in the States list box
Select Add Category
Enter the category name Opacity. Avoid naming the category an existing name like Alpha
Right-click on Opacity and select Add State
Enter the name Opaque
Add another state and name it Transparent
Notice that when a state is selected, Glue informs you that you are editing that particular state. Any change you make to the object when a state is selected will apply to the state, so be sure to only change properties that you want changed in the state. In our case, the only property we want to change in a state is the OverlayRectangle Alpha property:
Select the Transparent state
Verify OverlayRectangle is selected
Change Alpha to 0
The Opaque state automatically inherits the default value of 255, so no changes are needed on this state. We can see the two states by clicking on them and observing the change in the Editor window.
The two states we created above (Opaque and Transparent) will be keyframes in our animations. We'll create our two animations next:
Click State Animation -> View Animations to view/edit animations for Mode7ScreenGum
The Animations tab will appear in the bottom right tab view, so you may need to expand it to view animations
Click the Add Animation button
Enter the name FadeIn (no spaces) and click OK
Click the Add State button to add a keyframe to the animation
FadeIn animation will begin Opaque and animate to Transparent, so select the Opacity/Opaque state first and click OK
The Opaque state will be added at time 0.00
Repeat the steps above to add the Transparent state
Gum adds the second keyframe at time 1.00, and we can use the play button to view the animation in the editor window.
Repeat the steps above to add a FadeOut animation. The first state should be Opacity/Transparent, and the second should be Opacity/Opaque.
By default both of our animations are 1 second in length. The fade in and fade out in ActRaiser are much shorter, around .3 seconds. We can speed the animations up by changing the Time variable on the second state in both FadeIn and FadeOut.
Now that our animations are defined i