Unit 4 – Animated Text

Step

Instructions

1

Start your GD game engine as before.

2

Create a new project with the name “scrolling-text” and with one scene called “Level 1”

3

Go to the scene editor by double clicking on the Level 1 scene

4

Create a new text object named “textscroll” with the following text:

My cool scrolling text for my game intro!

My second paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis condimentum justo, ac scelerisque enim placerat non. Nullam vel mi et libero commodo facilisis eget a lectus. Suspendisse ultricies rutrum enim eu ornare. Pellentesque laoreet cursus libero, eget fringilla felis ultricies quis. Vivamus eget pretium augue. Etiam consectetur, magna et pulvinar tempus, dolor urna imperdiet quam, sed feugiat urna tellus non lectus.

My third paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam facilisis condimentum justo, ac scelerisque enim placerat non. Nullam vel mi et libero commodo facilisis eget a lectus. Suspendisse ultricies rutrum enim eu ornare. Pellentesque laoreet cursus libero, eget fringilla felis ultricies quis. Vivamus eget pretium augue. Etiam consectetur, magna et pulvinar tempus, dolor urna imperdiet quam, sed feugiat urna tellus non lectus.

5

Drag and drop the created text object just slightly below the viewable game area as shown below.

6

Next, switch to the scene events tab. You should see the screen as shown below.

7

As you can see there are no events defined, click on the “Add a new empty event” button, found near the center-right at the top of the window.

8

You should now see a new row with “Add condition” & “Add action”

We want to move the text object from the bottom to the top and beyond the visible game area.

First, click on “Add action”.

9

You should see the following screen.

Click on the “textscroll” object as shown above.

10

Next, you will see a list of possible actions for the “textscroll” object.

Click on “Add a force to move toward a position”.

11

Next, you will see the following screen.

Enter the following information for each item:
X Position: 400
Y Position: -600
Speed (in pixels per second): 200
After entering these values your screen should look like the following.

Click on the “OK” button.

12

Your screen should look like the following.

Click on the game Preview (3^rd button from the top left)

13

You should see your text scrolling up.

Take a couple of minutes, change the speed of the vertical scroll by changing the pixels / second force to your liking. (Hint: double click on the action you created earlier.)

14

Next, instead of text scrolling off the screen, let’s make it stay fully on the screen.

To do that, we need to add a condition that will only scroll the text up to a certain point vertically

Click on the “Add condition” as indicated above.

15

Select the “textscroll” object from the next screen.

You should see the following screen.

At this point, you will see many options.

Enter “Y” followed by a space.

16

Click on Compare Y position of an object. You should see the following screen.

17

Make the following selections which will ensure the text object stops scrolling at the desired location. In our case, we want to see the full text on the screen.

Sign of the test: ≥ (greater or equal to)
Value to compare: 84

Click on “OK”.

18

You should see the following screen.

19

Click on the Preview button. The intro text object will scroll and stop in a way that shows the full text in the viewable game window.

20

What if the game intro was a scene on its own and we wanted to fade out the text before the game continues to the next scene or level?

We can use “timers” and text opacity to accomplish just that. Timers are conditions that run actions after a specific number of seconds. Opacity in general is a measure of transparency (see-through effect) of an object such as a picture, text etc. 100% opacity (default) means the game objects are opaque. 0% opacity means the game objects will be invisible because they are completely transparent.

Close your game window and go to the events sheet.

Click to add another condition as indicated below.

21

Next click on the bottom “Add condition”. You should see the following.

This time click on the “OTHER CONDITIONS” tab near the top right corner. You should see the following

22

Click on “Timers and time”. You should see the following.

23

Click on “Value of a scene timer”. You should see the following.

Enter the following value for the 2 fields:

Time in seconds: 3
Timer’s name: “introtimer”

Your screen should now look like the following.

Click “OK”.

24

Your screen should look like the following.

25

Click on “Add action as indicated above”. You should see the following.

Click on “textscroll”. You should see the following.

26

Click on “Change text opacity”. You should see the following.

Make the following selection and enter the text:

Choose an operator: – (subtract)
Value: 2

What this will do is to subtract the intro text object opacity by 2% for every screen frame.
Your screen should look as follows:

Click on “OK” when done.

27

Your event sheet should look like this.

28

Click on the Preview button and observe the effects.

29

Does the text disappear too fast? We think so! Change the opacity subtraction part from 2 to 1 by single-clicking on “2” in the event sheet.

Now change the value to 1. Don’t press the “Enter” key after entering 1. Just click on any empty space.

Your event sheet should look like the following.

30

Click on the Preview button again and observe the results.

Do we need to leave the text on the screen a bit longer?

We can also modify the timer to last a bit longer say 10 seconds. Make the change on the event sheet by clicking on “3” as shown below.

After changing the time in seconds your event sheet should like the following.

31

Click on Preview and observe the results.