How to Use GT7K

Hello, world

Welcome to GT7K!

GT7K is a game-building toolkit. It's all web-based (and all HTML5 — no Flash). And it's social, meaning you can remix what other people have made. (More about that later.)

GT7K is designed to make simple two-dimensional sprite-based games: side-scrolling platformers in the style of Super Mario Brothers, top-down games in the style of The Legend of Zelda, and related games like Space Invaders kinds of games — essentially anything you mind find in an arcade in the mid-80s. Sadly, you can't make custom Modern Warfare levels or your new Portal-like ideas, here. We're keeping things pretty simple.

If you'd like more background about exactly what this is all about, please read our page for educators and organizations. It's got a bit of history and some bigger-picture discussion about what GT7K is and where we're hoping it goes. The short version: GT7K was originally built to help teach game design to high schoolers, so there's an educational underpinning to some of it. But. It's certainly not limited just to teenagers — I certainly hope that a wide range of people will find GT7K useful and fun!

Note! GT7K is under active development. What you're using, now, is an alpha version of the site that I've been using with students when I teach. You will encounter some missing and possibly broken features. And the instructions are poor (in fact, this page is about it). I apologize. Please do, though, leave feedback and comments in the form at the bottom of each page. Any thoughts you feel like sharing will be useful. And please ask me questions. I'm more than happy to help. And I'm always at my computer. Literally. Always. Thanks!

A note about browsers

I develop GT7K using Mac OS X. Because the GT7K game engine is rendered using HTML5 (using the Processing.js library, if you're curious) it runs slow in some browsers. Safari on the Mac and Chrome on the Mac seem to run best on my 2010 Macbook Pro. Firefox can be stuttery — I don't recommend it. On Windows, Internet Explorer and Firefox can render games poorly. I recommend Chrome on Windows, as well. Please let me know if this experience is different for you.

We are in the process of making some decisions about whether HTML5 should be used in the future. Although we prefer opens standards, we might move back to Flash. But for now, it's what we've got.

Quick overview: What makes a GT7K game?

GT7K games are constructed out of eight different types of objects:

• Games — This should be pretty self-evident. This is what a player plays — it's the basic shrink-wrapped final product that you use GT7K to make. Anyone can come play these. They track high scores. For now, each Game only has a single Level. This will soon change to allow each Game to include as many Levels as the designer wishes.

• Levels — Levels are fragments of a Game. A Level is a Map with Sprites placed upon it. At least one of these Sprites is player-controlled. The other Sprites can either be enemy characters, objects to be collected, objects that the player touches to leave the level (a door), or something else. That's up to you, the designer! Also: Levels have gravity. Right now, if you'd like to make a top-down game, set that gravity to zero.

• Maps — A Map is the grid-based layout of a Level — without any Sprites placed on it. A Map is a grid of square Blocks.

• Sprites — Sprites are the things that can move around in a Level and interact. Like the player-controlled Sprite. Each Sprite is made up of a single Image with a variety of settings.

• Blocks — Blocks are the square units that make up a Map. They can be solid like walls or they can be more decorative by allowing Sprites to pass through them unimpeded. Blocks are made up of a single Image along with settings.

• Images — Any image file used to draw a Block or Sprite is stored as an Image object.

• Sounds — Sounds don't actually work in GT7K at the moment. Coming soon you'll be able to attach sounds to particular in-game events like collisions.

• Projects — A Project is like a folder that contains all other sort of objects: Games, levels, images, etc. A Project can contain as many Games as you'd like. And a project can have as many people associated with it as you want. They're a great way to work together with GT7K. There's a special project you'll see called The Commons which contains all objects made by all users. Browse around here if you'd like to see what else people have been up to.

Here's the quick version of the above:

Got all that? No worries if you don't. Hopefully it'll become obvious when you make your first game. Let's do that now.

Fast start: Make a game in five minutes

Okay. Let's get to it.

1. First: I recommend opening up a separate browser window or tab for this, so you're not constantly flipping back and forth.

2. Now, create a new account for yourself, if you haven't already. You should get an e-mail to confirm your e-mail address. Just follow that link to confirm it. If you don't get that e-mail, don't worry. The site should work, anyway. Just log in with the username and password you just created.

3. Now, in the menu bar along the top of the web page, you should see an option that says "Create." It's between "Play" and "Glossary," up there. Click that.

4. Click the giant gray "Create a New Project" button.

A brief interlude. GT7K is built upon the idea of copying and remixing. Everything is copyable. You can copy other people's Images, Maps, Sprites — anything — into your Project. In fact, you can copy entire Games. You can even copy entire Projects! Which is what we're doing here. I've set up a few simple starter Projects with different core game mechanics. You can pick one of these to build off of instead of building your own game from scratch. It's much faster that way. So that's what we're going to do, here.

5. Select "Platformer Template" — we're going to make a platformer-type of game. Many early Nintendo Entertainment System games were platformers: Super Mario Brothers and Mega Man, for example. The genre is very well-known.

6. Great! Doing the above step will copy all of the objects from the template Project into a brand new Project that's all yours. You can edit anything and change whatever you want — there's no way to screw up someone else's stuff.

7. Before editing, though, let's play the Game. After copying above, you should be looking at your Project's main view. This shows all of the objects in this Project. I've tried to color-code the different types of object wherever possible, just to help your mind keep things straight. Games are red. Levels are orange. Maps, yellow-orange. Etc. The first section should list a single Game (in red). Called "Platformer Game." With a little "Play" button next to it. Click that and try playing the game. It's very simple and you'll probably win the first time through. After winning, try losing! Then come back to the main Project page.

8. Let's rename this Project to something more memorable. Renaming any object in GT7K is easy: Just hover over the name of the object when you're viewing it. It's the big text near the top of the page. "Platformer Template," in the case of this new Project you've just made. When you hover over an object name, a little button will appear that says "Rename." Click it. Rename it. You can hit the return key to save it or the "Save" button. Voila. You can do this whenever you like.

9. Now, we get creative. First, just take a few minutes to click around in this Project. Click into the Level and the Map object and see what's there. Click into the Sprites. The Blocks. The Images. (There are no sounds in this version of GT7K — coming soon.) Feel free to edit whatever you'd like, but at least just take a look and see what's going on. When you're done, go back to the main Project page where you can see all of the different objects at once.

10. Let's edit the Level. You may have noticed something interesting about the way GT7K is organized: A "level" is made up of a Map and a Level object. The Map defines the positions of the fixed objects — the Blocks, in GT7K. The Level defines the positions of movable objects — Sprites. This is so you can reuse Maps with different sets of Sprites on them. It makes GT7K more flexible as a game editor. So let's edit the Level the start, then we'll do the map. Click the name of the Level — "Simple Platformer Level" (unless you've changed it).

11. In the Level editor view, you should see something that looks like the game you just played. Except! All of the Sprites are now editable. If you click anywhere in the Level view that's not on a Sprite and drag the mouse around, you'll notice you can scroll the view. Click on a Sprite to select it. You can't edit the Map here — only the movable Sprite elements. (We'll do the Map next.)

12. If you select a Sprite, here are a few things you can do:

    • You can move it by clicking and dragging it around.
    • You can set it's starting velocity in the form below the editor window. This determines the direction and speed it goes when the Level is run. This is shown in the editor view by a black line coming from the center of the Sprite.
    • You can make a Sprite the player Sprite — but be careful. If you haven't set up your new player Sprite properly, it might not move properly. Or at all. Also — very important — each Level MUST HAVE AT LEAST ONE PLAYER! Otherwise, obviously, you won't be able to play the game.
    • You can make the Sprite an "exit." This means that the Level will end as soon as the player touches this Sprite. For example: If you want to make a door that the player escapes out of.
    • You can delete it by hitting "D" on your keyboard (be careful!).

13. Poke around the other settings on this page. Some of the other features should be clear from their descriptions.

14. SAVE SAVE SAVE SAVE SAVE. I can't emphasize this enough. Always hit the "Save" button at the bottom of a page to save your work, otherwise it'll be lost. I know this is easy to miss — we're working on improving this. But for now: SAVE SAVE SAVE.

15. Now, let's edit the Map. Go back to the main Project page or click the "Maps" menu item and select the default Map that comes with this Project: "Simple Platformer Map." Enter the Map editor view.

16. The Map editor view should look similar to the Level editor. You can interact with the Map in a similar way: Click and drag to move the view around. Click to edit a Block square.

17. To draw Blocks, just select what you want from the list of Blocks below the editor window. For example, "Brick." Then click up in the Map editor window. (You might have to click twice, once to get the mouse focus in that area and then once again to make the edit.) If you selected an existing Block, that Block will go away. If you select a blank space, a new Block will appear. Simple! Hold down the "shift" key while dragging the mouse around to draw a bunch of blocks.

18. Done? SAVE SAVE SAVE.

19. Let's play your new Game! Go to the main Project page or hit the "Games" menu item above. The play your Game. If all went well, you should be playing your new Map with your new arrangement of Sprites layered on top. What do you think?

20. Now, I'll leave the rest to you. This is a quick overview. The more detail instruction manual is coming soon — but if we've done our jobs right, you should be able to make sense of how GT7K works just by looking at the instructions build right into the editor interface. Mess around with the Sprites and Blocks. See what you can make. Have fun!

21. Finally, a quick note about The Commons. You can get there from the pull-down menu item in the "Create" menu, to the left of the colored object menu items. The Commons is a pool of everything everyone's made with GT7K. It's a bit of a jumbled mess at the moment, but you can go and copy literally anything out of it into your own Project. Like an image? Copy it. Like a Sprite? Copy it. Like a Game? Copy it. You get the idea. If you want a fresh Project, just go make another one like we did above. But select the "Empty Project" option. And then copy, copy, copy. This is one of the powerful parts of GT7K. You can remix other people's work, and they can remix yours. GT7K is new, so we're still figuring out how to best organize this. So for now, it's literally everything lumped together. Hopefully that's useful for you.

Anyway: That's the quick(-ish?) intro. I hope it made some sense. E-mail me if not. And if it did: Go nuts! Like I've said before, GT7K is currently in alpha mode and is in active development, so you will find bugs, missing features, and other spots of mess. Our apologies on that — we're working as fast as we can. But don't let that stop you from getting creative.

Thanks!

— Josh Knowles
chasing@spaceship.com