1. Creating games with game editors
GAM 244: Game Design I
Creating games with game editors

2. GAM 244
Introduction to GAM 244

3. GAM 244 Technical Prerequisites: none
In particular you are not expected to know how to program.
Work expectation: very high!
See the work schedule for this class.
Experimentation with the game editor is essential
Some creativity and love of video game is preferable
Artistic talent not necessary.
Rewards: worth it!
You get an excellent introduction to programming
You will understand the game development process
You will be ready for entry-level jobs in the game industry

4. GAM 244
Game Editors

5. Understanding Computer Animations
Just like movies and flipbooks, computer animation is merely an optical illusions: Movement appears because we are presented with a rapid sequence of slightly different still images.
Example 1: This animation is composed of 30 different still images, a sample of which are shown below. …
Example 2: Step through this bouncing ball example using the debug mode (use ‘pause’ and ‘step’ buttons)

6. Game Engines
Game Engine: the core software component of a video game. It typically handles the image rendering, computes the interaction between all game elements, and also handle additional tasks such as :
user input
game artificial intelligence (AI)
collision detection between game objects
etc.
There are two ways to create video games:
Program yourself the game engine, the objects, the AI, etc.
No limit to the possibilities
Technically demanding
Use a commercial game editor with its own game engine.
Very versatile, but limited by the engine’s capabilities
Technically easier, but still requires some coding

7. Game Engines We will use the Game Maker Studio editor.
We will use version
There are two ways to create video games:
Program yourself the game engine, the objects, the AI, etc.
No limit to the possibilities
Technically demanding
Use a commercial game editor with its own game engine.
Very versatile, but limited by the engine’s capabilities
Technically easier, but still requires some coding

8. Game Engines We will use the Game Maker Studio editor.
We will use version
Note: In this class, we will concentrate on 2D games only. 3D games have their own specific complexities and will be discussed in other GAM classes

9. Game Editors Basics
The general structures of games we will consider is:
The games plays through one or more levels.
A level is an environment (or, in GM-speak, a room) in which game objects exist and interact.
Game objects include all the ‘moving’ elements as well as many ‘static’ ones such as walls, platforms, etc.
Game objects
Have Properties: How they look, how they move, etc.
React to events such as: collisions, user input, etc.
The purpose of a game editor is to provide mechanisms to create and manipulate rooms, objects, and help control the object’s reactions to events.

10. Game Editors Basics: Sprites
Most game objects will have an associated visual representation, called a sprite.
Sprite can either composed of:
a single image:
Or multiple images:
In GM, you can use ready made sprites or create your own sprites.
Many sprites are available from the GM installation
The GM site offers many more (see resource packs)
You can also find varius sprite libraries on the internet (Google it!)
GM provides a sprite editing tool (good enough for us)
This week, the goal is to learn how to build games using Game Maker. Don’t waste too much time creating fancy sprites: you’ll have a chance to do that in later projects!

11. Game Editors Basics: Objects
Every single element in a game: the players, the enemy, various moving entities, the walls, platforms, etc. are all controlled by their own respective objects.
In particular, objects have
a name
an associated sprite (though not always)
numerous properties: position, speed, direction, etc.
And they react to various events…
Collision
User input (keyboard, mouse, etc.)
Game boundary
etc.

12. Game Editors Basics: Rooms
Rooms are the environment where objects exists for each level. Some of the room properties are:
Name
Background images
(note: objects do not interact with the background)
Room dimension
Viewing dimension
Within this room, you can place as many objects as you wish.
Example: Bouncing balls

13. Objects: Solid/Not Solid checkbox
Collisions are going to be a very central event in most games
For various technical reasons too involved for us at this point the course, GM offers two different method of collision checking based on whether an object is solid or not.
The concept of solidity of an object will be discussed later.
For the time being, please follow this very important rule:
SOLID v. NOT SOLID RULE:
If an object is ever going to be in motion then
do NOT check the ‘solid’ box
Otherwise (if the object never moves) then
DO check the ‘solid’ box

14. Graphics Basics: Coordinate system
(0, 0) x y
(x, y)
(680, 0)
(0, 480)
We must be aware of some basics graphic elements of how objects will be interact in a room…
Most of our games will use room size of 680x480 pixels
The origin is at the upper left corner
Positive values are right and down.
Coordinates outside the bounds of the rooms are valid

15. Graphics Basics: Objects position and sprites
(0, 0) x
(680, 0)
(x, y) y 32
pixels
64 pixels
A sprite has dimensions in pixels. For example:
An object’s position is a single point (x, y)
An object’s sprite is drawn starting at the object’s coordinates
(0,480)

16. Graphics Basics: Objects position and sprites
(0, 0) x
(680, 0)
(x, y) y
64 pixels 32
pixels
A sprite has dimensions in pixels. For example:
An object’s position is a single point (x, y)
An object’s sprite is drawn starting at the object’s coordinates
Sprite have a property called origin which allow you to change where the sprite is drawn relative to the object’s position.
Default origin (0, 0)
(0,480)

17. Graphics Basics: Objects position and sprites
(0, 0) x
(680, 0)
(x, y) y
64 pixels 32
pixels
A sprite has dimensions in pixels. For example:
An object’s position is a single point (x, y)
An object’s sprite is drawn starting at the object’s coordinates
Sprite have a property called origin which allow you to change where the sprite is drawn relative to the object’s position.
Default origin (0, 0)
Often changed to half the sprite’s dimensions, to center it
(0,480)
Example: Paddles

18. Object Variables
Each object has a collection of individual variables that indicate various properties of that specific object. Some of the more common variables are:
x Its x-position.
y Its y-position.
xprevious Its previous x-position.
yprevious Its previous y-position.
xstart Its starting x-position in the room.
ystart Its starting y-position in the room.
speed Its current speed (pixels per step).
hspeed Horizontal component of the speed.
vspeed Vertical component of the speed.
direction Its current direction
(0-360, counter-clockwise, 0 = to the right).
There are many more variables. We will learn about them later as we learn more about GML, the scripting language used in Game Maker

19. If-Then-Else actions
GM offers various buttons to perform the more common tests during a game. When the condition in the ‘if’ is true, the next action is executed, otherwise it is skipped (or the ‘else’ action is executed, if present)
If multiple actions are to be conditionally triggered, surround these actions with the block buttons (the ‘top’ and ‘bottom’ triangles)
Note: in expressing conditions, ‘&&’ is the logical And, ‘||’ is the logical Or and ‘!’ is the logical Not.

20. Example: Creating a Complex Bounce
GM offers a bounce mechanism that computes a “natural” bounce based on the angle of approach relative to the surface impacted
But we if we wish, we can “program” a different kind of bounce…
Hitting the ball in the center of the bat causes bounce straight up.
Hitting the ball towards the edge of the bat causes the bounce angle to increase towards that side.

21. Example: Creating a Complex Bounce
We need to compute the bounce angle as function of how far the ball is from the center of the bat. For example:
This is a value between -24 and 24
A center hit = 0
A hit at the extreme left = 24
A hit at the extreme right = -24
consider the value of Bat.x - Ball.x
Hitting the ball in the center of the bat causes bounce straight up.
Note:
bat width is 48 pixels
origin is at (24,2)
Hitting the ball towards the edge of the bat causes the bounce angle to increase towards that side.

22. Example: Creating a Complex Bounce
We need to compute the bounce angle as function of how far the ball is from the center of the bat. For example:
Now, when the ball hits the bat…
in the center, it bounces straight up
to the left gives a sharper the left angle
to the right gives sharper the right angle
Bounce angle = *( Bat.x - Ball.x)
Hitting the ball in the center of the bat causes bounce straight up.
Note: bat origin is at (24,2)
Hitting the ball towards the edge of the bat causes the bounce angle to increase towards that side.

23. Example: Creating a Complex Bounce
We also would like to have the following behavior:
If the ball hits the bat from above, the bounce should be computed with the previous formula
Otherwise, use the standard built-in bounce
Q: How can we know is the ball is hitting the bat from above?
Hitting the ball in the center of the bat causes bounce straight up.
Note: bat origin is at (24,2)
Hitting the ball towards the edge of the bat causes the bounce angle to increase towards that side.

24. Example: Creating a Complex Bounce
A: (one of many) look at the ball’s direction variable
If direction > 180 and direction < 360 then
Compute fancy bounce
else
Use built-in standard bounce
(See balls and bat example)
Hitting the ball in the center of the bat causes bounce straight up.
Note: bat origin is at (24,2)
Hitting the ball towards the edge of the bat causes the bounce angle to increase towards that side.

25. Sprite: Transparency Sprite images are drawn within a rectangular box:
But since the true ‘image’ is likely not a rectangle, some part of this image must be made invisible or transparent.
The sprite editor now allows for alpha-blending.
Collision Detection:
Precise checking computed using the non-transparent part of the image.
Non precise checking computed using to the bounding rectangle only.
Collision Masks defines the precise geometry of the colliding part. See game maker help for more details

26. Sprite Editing/Creating
GM provides a sprite editor/creator:
Add a sprite to a game
Load an existing sprite (or leave blank to create one)
Click on ‘Edit Sprite’
You now see the images that compose the sprite
Double-click on an individual image to go to the image editor
Tools such as grow, shrink and rotate can produce very nice animation.

27. Useful function: Random
A useful function to know:
Random(x) returns a number ≥ 0 and < x
Examples:
Random speed of ‘Balloon’
Random location of ‘star’ targets
Random ‘image_index’ for the ‘star’ targets

28. Two Events: Destroy and End-of-Animation
For most objects, if they use an animated sprite, we want to have this animation loop over and over
Example: The ‘star’ target.
But there are cases where we want to animation to execute only once. This is true for many ‘transformation’ of game objects, such as exploding when hit.
Example: The balloon explosion
When hit, the balloon objects is destroyed (by the Ball)
When the Balloon ‘destroyed’ event is triggered, it creates an explosion object.
The explosion object destroys itself when the End-of-Animation events is triggered

29. Special Effects for ‘explosions’
GM offers you some ready made effects that can be used to visually signal an impact. This effect sampler shows all 12 options: press letters A through L to see the possibilities.
The ‘effect’ button is on the ‘draw’ tab
The ‘effect’ button can be used anywhere (not just in the draw event)
Note the this is only a visual effect: you still have to destroy the instance yourself (if needed)
These effects are all special cases of particle systems, a much more complex tool provided by GM which we’ll review later in the course

30. Keeping Score
Not surprisingly, GM allows you to keep a score as well as remembering the top-ten high scores for your game.
To modify the current score:
Use the ‘score’ button (three yellow balls) in the appropriate event.
Or manually change the ‘score’ variable
To Display the current score:
Used to be a lot easier in previous versions of GM
We’ll come back to this soon.
High scores are kept automatically.
To display them, use the ‘High Score’ (list) button
Background images are allowed (360x400 pixels)
Clearing the high score table is also possible