Simple video games - intro to coding
For this project, you'll build a simple video game. This game will add to your overall unit plan, so think about your artist, theme, or process as you develop ideas for your game.
Gamemaker Software
|
GameMaker is a downloadable software that you can use on Mac or Window platforms.
Click on the image to go to the download page: there are both Mac and Windows versions. If you have a Windows machine, download the GM7 version (far left) |
Learning the Program
There are tutorials and resources here:
http://currentlab.art.vcu.edu/modules/
We will follow the tutorials for MODULE 1 – Introduction to Digital Game Design as Art to learn how to use the program. You can download the tutorial and the zip file to save the components to your computer.
Here are printer-friendly versions of the tutorials, divided into 3 segments:
http://currentlab.art.vcu.edu/modules/
We will follow the tutorials for MODULE 1 – Introduction to Digital Game Design as Art to learn how to use the program. You can download the tutorial and the zip file to save the components to your computer.
Here are printer-friendly versions of the tutorials, divided into 3 segments:
Player and initial room
|
Hazards and shooting objects
|
Additional rooms and views
| ||||||
To learn more advanced techniques, you can continue to explore the remaining modules.
Requirements for your game:
Making your game
A. Things to consider for the game you will be making:
B. Create folders on your computer for your images so you can keep track of them.
C. Upload all your sprites, backgrounds and sounds to your gamemaker file. Files must be named with sprite_ or background_ before the title or sprite_, object_. You cannot have the same name for multiple sprites/objects/etc. Delete unused objects, sprites and rooms, and do not leave any spaces (all one word).
D. Next, you will create objects from your sprites. Remember that sprites are images only, to make them do something, you must create an object. Objects must be named with _object after the title, or object_ before the name.
Objects will have actions associated with them.
E. Create rooms. Place your objects inside the rooms. Test your rooms to be sure they function correctly
F. Debug your game, add sounds, ask someone to test drive it for you. Check to see that all your sprites, objects, rooms, backgrounds have names with the proper format.
Requirements for your game:
- you must have at least 3 levels (rooms).
- you must have a start screen with instructions
- you must have an art focus - it should tie to a lesson plan you've already written, or at least tie into some kind of artist or art concept.
- it must have sound, artwork, and backgrounds.
Making your game
A. Things to consider for the game you will be making:
- You will need to collect images for sprites, rooms and walls. Sprites need to be proportional to your room and barrier sizes.
- You will need to collect sounds for your game. You can use the sound from youtube videos by extracting the sound as an mp3 here.
B. Create folders on your computer for your images so you can keep track of them.
- Create a folder for sprites
- Create a folder for rooms
- Create a folder for sounds
C. Upload all your sprites, backgrounds and sounds to your gamemaker file. Files must be named with sprite_ or background_ before the title or sprite_, object_. You cannot have the same name for multiple sprites/objects/etc. Delete unused objects, sprites and rooms, and do not leave any spaces (all one word).
D. Next, you will create objects from your sprites. Remember that sprites are images only, to make them do something, you must create an object. Objects must be named with _object after the title, or object_ before the name.
Objects will have actions associated with them.
E. Create rooms. Place your objects inside the rooms. Test your rooms to be sure they function correctly
F. Debug your game, add sounds, ask someone to test drive it for you. Check to see that all your sprites, objects, rooms, backgrounds have names with the proper format.
To resize pictures
You can find images for sprites by either making your own or finding images on the internet. When you find images, they will probably not be the right size, so you will have to resize them. Here's an easy way to do that:
Mac process:
1. Find the image you want to use. For this, I'm going to choose an image for my background. I downloaded a picture, but I need to change the size.
2. The picture I found was really big - 3840 x 2400. I needed it to be 1920 x 690. So I opened it up in Preview (double click on it, automatically opens in Preview)
Mac process:
1. Find the image you want to use. For this, I'm going to choose an image for my background. I downloaded a picture, but I need to change the size.
2. The picture I found was really big - 3840 x 2400. I needed it to be 1920 x 690. So I opened it up in Preview (double click on it, automatically opens in Preview)
3. Click on Tools>Adjust Size and your next window will open.
4. You may have to "unclick" the Scale Proportionally box to get it to let you enter each dimension. Once you have entered the size, click OK and you are done!
Windows version -- you will use Paint and do a very similar process -- you can go here to get step by step info.
Windows version -- you will use Paint and do a very similar process -- you can go here to get step by step info.
Making a transparent background
|
This is a little more complicated. There are two ways to find pictures for sprites that have clear backgrounds and irregular edges. The first (easiest!) is to search for suitable pictures. To do this, I search my words and and png with a couple of spaces in between:
then you have to look at the picture to be sure it has a transparent background. Here's how to tell the difference: click on the picture, and it will give you a better look. If it has a white background (you might have to wait a couple of beats to see if it clears up), then it is not transparent. What you're looking for is a series of checkers in the background -- that will indicate that the image has a transparent background. Here's an example: 
|
|
If the image you want isn't transparent-- or maybe it's in jpg file--, you can make it transparent in Photoshop. To do this, drag the image into Photoshop, then Select all>Edit copy. Then click on File>New and be sure the background contents says "Transparent." If it says anything else, click on the pulldown box and choose Transparent. then paste your image.
Now you can erase anything you want to be transparent with the eraser, or you can use the magic wand to select large portions and then delete them. You'll see they turn transparent:
Now you can erase anything you want to be transparent with the eraser, or you can use the magic wand to select large portions and then delete them. You'll see they turn transparent:
When you get it the way you like it, go to Image>image size and resize it to the size you need it, and then save it as a png file: File>save as, and choose png from the drop down menu. That's it!
Making pop up messages
|
So one of the things I thought I'd write out a little step by step for is how to make a message pop up and then go away. This was something I didn't see on the tutorials, but here's the process I used:
The Popup 1. I created a picture with text on it. I made one for a message on the alien game, when I bumped into something the spaceman coudln't use yet. I used a splash image with a transparent background, and added text in photoshop. I saved it as "notyet.png" |
|
2. I uploaded that as a sprite, and called it sprite_notyet
3. I created an object, added the sprite_notyet, and then created an action:
Add Event>keypress>any key
Drag over "destroy the instance" icon
Click OK. That means that after the message pops up, it will go away when the person playing presses any key to continue.
3. I created an object, added the sprite_notyet, and then created an action:
Add Event>keypress>any key
Drag over "destroy the instance" icon
Click OK. That means that after the message pops up, it will go away when the person playing presses any key to continue.
The Event
|
Next, I created an event for it to pop up. In this case, when the player collided with the ring of fire, the message would pop up.
1. Create the object, upload a sprite (I used the ring of fire), name object. in this case, I called it Object_ring. 2. Then I gave it an action: Add Event>collide>object_player 3. I wanted it to do 2 things: display the message and make a sound. First, I added the sound. Drag over Sound icon (from Main 1- Sound), click on the sound I had uploaded (sound_awwww) Then I wanted it to display the message. I dragged over the Create icon (Main 1 - Objects) and chose object_notyet |
|
|
Another window opens, and this time I needed to add where the pop up would happen. Here is what I used: This puts it above and to the left of the object I collided with. Make sure to click on Relative. Then I said OK. the two negative numbers put it in the upper left -- to make it appear to the upper right, you can change the top number to 200 and leave the bottom number at -300. To make it appear below right, both numbers would be positive, and to appear in the lower left, it would be x=negative, y=positive). You can also adjust the numbers to place it nearer/further. That should work! Test it out and see if the sound plays (if that's whtat you want to add) and that the message pops up and then disappears after you start moving the player again. |
Converting your game to a playable web-based game
A. Save your gamemaker file to a flash drive so you can upload it to the class Windows computer for conversion for upload. Send me your gamemnaker file (put it in the dropbox for me to convert) After conversion, you will have two documents, one file and one that is titled "index.html" -- you need to save these as a zipped file.
B. on a mac, highlight your two files and CTRL+click and choose "compress 2 items." This will "zip" your files.
C. Go to itch.io and create an account. Click on arrow next to your name in top right, then go to "Upload New Project." Fill in Name of your game, then go down to upload file (red button) and upload your zip file.
D. Click on the 'Widget' tab on top. On the left is an 'embed game' tab, where you can get your embed code. You can copy this and paste it into an embed element on your page.
E. Add instructions on your website on how to play the game, and don't forget to write a reflection on the process of making your game after you've uploaded it!
Click here to see (and play!) the sample Andy Warhol game
| andy_warhol_goes_shopping.gmk |
Click here to see (and play!) the sample Alien space game
| alien_space_game.gmk |
Assessment
|
In such an open-ended assignment, how does a teacher determine a fair grade? In this section, you can see how we're going to use a great classroom exercise in order to help our future students better understand the grading process.
For this acctivity, we will not only develop a rubric ourselves for this project, but we will talk about how we can involve students in the rubric making process so they understand assessment more fully. Students often wonder how their grades are determined. Getting them involved in sorting and discussing criteria help them to understand what teachers are looking for when scoring projects. |
|
Having students presort a stack of work into 4 piles (how they determine what the piles represent is up to them). Ask them to explain how they decided what it was that indicated why the works in each stack were put there. These are the criteria. Examples might be: "these had good shading" or "the proportions on this one look right". Writing these criteria down on a blank rubricrubric-1.docx and then asking students to describe what a great example of that criteria contains, and how the performance would make a piece move to another stack helps them to see how we determine a grade. Participation in this activity cuts WAY down on their challenging grades.
