Art 315 Lecture 4

1. Art 315Lecture 4 Dr. J. Parker AB 606

2. Today’s class: Programming! • We are going to write some simple programs. • We will use a tool called GameMaker • It allows point and click instead of typing • Syntax is more or less irrelevant • Remembering names/syntax is unimportant Concepts are what is essential here.

3. What Shall We Do? • Something with pictures • Something very simple So how about a ball doing something ball-like? Rolling or bouncing, perhaps? If you think about it, there is a lot to even this simple program.

4. Let’s Get Started. GameMaker can be downloaded for a PC, no cost, from The maker – YoYo Games. http://wiki.yoyogames.com/images/f/fd/GM7.zip The new version is 8. Don’t get it, it will not be compatible with the Mac version. The Labs should have a Mac version, and I can give you either one on a CD.

5. GameMaker GameMaker is a tool intended to allow people to develop computer games on their PCs. We are using it as an intro to programming because it is simple to use, yet contains all of the power of an interpreted programming language. It is simply an intro, not intended to replace C++ or Java.

6. Let’s Get Started Run the install script. Then run the program itself. You will see:

7. The menu on the left side has the key stuff. Sprites Sounds Backgrounds Paths Scripts Fonts Time Lines Objects Rooms GameMaker 7

8. These are pictures. Small GIF or JPG files. A sprite is the representation of an object within the game. Here are some sprites: Sprites

9. These are audio clips, things like the sound of impacts, shots, bounces. WAV or MP3 files. A sound is the representation of an event within the game. Here are some sounds: Sounds Boink Zap Shot

10. These are larger images, static. They represent the set or backdrop upon which a game is played out (also: a room or a board). JPG/GIF Here are some backgrounds: Backgrounds Stars Tile

11. The key elements of a game. These are the things that move about and interact to create game play. One is generally controlled by the user, the rest have some autonomy. Pac-Man is an object. So is Mario. Objects are connected to their graphical rendition, their sprite. Objects themselves have no fixed appearance, only a sprite. Objects

12. Our project: a ball that moves. Object: a ball. The ball’s sprite should look like a ball. We can make a ball using paint or some such program. Or we can borrow one. Making our own will contribute to making the final work our own. Borrowing is faster. Objects

13. Ball from google. Search: ‘ball’ under the ‘images’ class. It’s too big (trust me). Make it smaller – say, 32x32 Now we start … Objects

14. We are going to make a ‘ball’ object. (why?) The object will have a sprite (or we can’t see it) so let’s make that first. (in windows visual compilers this would be a ‘resource’, and game developers would call it an ‘asset’) Click the Sprites link on the left hand menu. A new menu pops up: Objects

15. We are going to make a ‘ball’ object. (why?) The object will have a sprite (or we can’t see it) so let’s make that first. (in windows visual compilers this would be a ‘resource’, and game developers would call it an ‘asset’) Right click the Sprites link on the left hand menu and a new menu drops down; Left click on the ‘Create Sprite’ item Sprites

16. Sprites

17. Sprites

18. Sprites Name the sprite spr_ball Click here to load the Image from the file ‘ballsmall.jpg’ Click here so that the Centre of the ball is the Reference point (??) Click here when done. This can be edited again later on.

19. Sprites This is what it looks like just before saving.

20. Are We Programming? No, not really. We’re organizing assets, which will become a larger part of what ‘programmers’ will be doing. Now that we have a ball sprite, we could make the ball object, or at least start to.

21. Ball Object On the left menu, right click on ‘Objects’ and then left click on ‘create object’ in the menu that drops down. The ‘Object Properties’ window will appear.

22. Ball Object This is a very complicated window. Objects are complex things. Click on name and rename this ‘obj_ball’. Click on the little picture right of where is says <no sprite>. A menu will drop down, and one of the items will be Spr_ball and a little Picture. Click on this to Select the ball as the sprite

23. Ball Object For now we can click on ‘OK’ and the window will close. Still no programming, more ‘setup’. By the way, the menu on the left changes whenever we add a new thing. Now it looks like this:

24. Rooms Left menu, rooms link: right click, then left click on the create room item. The room properties window appears. Objects tab

25. Rooms Make sure that the obj_ball object has been selected, as it was on the displayed window. Then left click the mouse anywhere in the room area. A copy of the ball sprite will appear where you clicked.

26. Rooms Each time you left click, a new obj_ball object will be created, and a new sprite drawn. Right clicking on a sprite Removes both the object and the sprite. Now click on the close icon (red X in upper right) and the Room Properties window will close. First basic test: click on the green array (which is ‘play’) A popup will say ‘saving executable’ and then a new Window will open:

27. Rooms Click here to return to the editor.

28. The Metaphor This system is like a programming system (API/SDK). The metaphor is a simple one: Sprite  output Room  screen/monitor Object the point of the program (goal, objective).

29. The Metaphor Since the object is the target of the program we write, that means that our task as a programmer is to make the correct things happen to the object. The object in this case is a ball. Making the ball do something will be programming. Let’s make it move.

30. Move The Ball In the editor, double click on obj_ball in the left menu; the Object Properties menu opens for the ball object. We want to talk about events for a while.

31. Move The Ball An event is something that happens. Something the program did not make happen, but was done to the program rather than done by it. Simple, obvious events are: key presses, mouse buttons/position changes. Creation of an object is an event; so is the passage of time, strangely.

32. Move The Ball We can’t predict when a key will be pressed, but can respond properly when one is pressed. In a game, an arrow key can change motion direction (or wasd keys). We can’t predict when the mouse button will be pressed, but can respond to it by, for instance, doing something to the object under the cursor at that time.

33. Move The Ball Click ‘add event’ and see the list of events! This is the window that opens when the add event button is clicked. Each is an event or class of event.

34. Move The Ball Let’s make the ball move in the direction of an arrow key when we press one. This would be a ‘Key Press’ event, and when we click on the Key Press menu item another menu opens:

35. Move The Ball The arrow keys

36. Move The Ball The text in the Events window shows what event is being handled. The Actions Window shows the program: what to do when the event occurs! Clicking on press <Left> gives us this window: There’s nothing there just now.

37. Move The Ball What we want to do then the left arrow key is pressed is to make the ball move left. How can we do that? The symbols in the right panel reflect actions you can specify. Since we Wish to make the ball move, I’d suggest We select one of the ‘Move’ symbols: Move fixed move towards Move free Speed gravity Change x, y direction friction

38. Move The Ball

39. Move The Ball What we did was: mouse down on the red MOVE icon, move mouse to the Actions window, let go of the button. The red icon stays in Actions and a detailed MOVE window opens. Then we select The parameters with the mouse: direction left, speed=1, then click on the OK button.

40. Move The Ball What it means is: when the event left array key pressed occurs, The object is to move in the left direction with a speed of 1. Let’s see what this looks like (run the program) by clicking on the green arrow (run) again! About 6 seconds in I pressed the left arrow key.

41. Our First Computer Program This is a computer program in every respect, and we put it together. It is very much like the first trivial program that first year Engineers write: the “Hello, World.” program: #include <stdio.h> int main () { printf (“Hello, world.\n”); return 0; }

42. Pause for Discussion Do you think of this as a program? (what we did, I mean) Is it done? A painting is never done, I hear. Is a program? The ball just floats off when you type the left arrow key. How could we make it stop? Go right? Can we make it stop at the edge, instead of disappearing into the unknown?

43. Done for Today This has been a lot to swallow for anyone not a programmer. If we get this far, lets stop for today and digest. • Download the program we wrote from the course web site. This program is L0401.gmk