Welcome to Hippo! This tool allows you to easily make computer games (and if you're not careful, learn a lot about computer programming!). This document is a tutorial on how to do that. Together we will make a simple puzzle game, and along the way take a tour of the features of Hippo.

To start off with, open up Hippo by double-clicking on the icon. You'll see a screen that looks like this:

<screenshot of Hippo as it is first opened>

This window has several parts to it:
* The menu bar can be used to load and save Hippo modules and games
* The top part is where the graphics of your game map will go, once we make them. Right now it has no graphics, so is just shows a picture of a Hippo.
* There can be a sidebar on the right side to show game status information or other controls, but right now it's invisible.
* The text area and blank right below it can be used to send commands to Hippo. Right now we'll use it for programming interactively.

Hippo programming is done in a language called Javascript. Javascript was made for scripting web pages, but it's a good general-purpose language as well. It's very easy to learn, so if you don't know it, you can either go look at a tutorial (the world wide web is full of good ones) or just continue on and pick it up as we go along. If you want a book on it, "JavaScript: The Definitive Guide" by David Flanagan is what I have, and it is very good.

To start off with, let's type some Javascript into the text field and let Hippo interpret it. Into the text field on the bottom of the window type <b>"Hello World!"</b> (with the quotes). The window now shows this:

<screenshot>

(A note about the text: any code contained in this document will be in a bold typeface, so don't worry about quotes; if they're bold, leave them in. Anything that Hippo prints out will be in monospace. Anything in italics is advanced notes that you can ignore if you want. Click this link to hide them all.)

If you type this: <b>2+2</b> then Hippo prints out <fixed>4</fixed>. This text field is a Javascript console; you can type any Javascript in and Hippo will run it and print out the result. <i>You can also intercept anything from this text field yourself and use it for your own games, but by default it's a Javascript console.</i>

Enough chit-chat, let's put something on the screen. Hippo has a special object called "Window" that represents the window and everything in it. <i>You can have multiple windows if you want, but the first one opened is called Window.</i> Window has a member called "map" that represents the map currently on the screen. The map is an object, so let's make a new one and show it:

<b>var myMap=new Map(8, 8);</b>
<b>Window.map=myMap</b>

The first line makes a new map, eight squares wide by eight squares tall, and names it "myMap". The second line sets Window's map to myMap, which puts this on the screen:

<screenshot of chessboard>

We haven't put anything on the map yet, so it defaults to a chessboard pattern of gray and white. <i>Later we'll see how to load pictures from a file and use those for the map, but colors are good enough for now, just to get something going.</i> We can change the colors of the spaces like this:

<b>myMap.spaces[3][2]='blue';</b>

The first number is the column, the second one is the row. The the columns are numbered from 0 (on the left) to 7 (far right, on an 8x8 board); rows are 0 (topmost row) to 7 (bottom). 

Now let's make some game pieces and put those on the board. You make new pieces like this:

<b>var myPiece=new Piece('red');</b>

This makes a new Piece variable and calls it "myPiece". <i>All pieces have a color (this one is red) or use an image, just like spaces.</i> Now that we have a piece, let's place it on the board:

<b>myMap.place(myPiece,4,4);</b>

<i>Pieces are different from spaces in Hippo; spaces are meant for things that don't move and don't change often (hills, walls) while pieces are things that are more active (the player, items, enemies).</i>

The piece is just a red circle mark. We can move it around like this:

<b>myPiece.move(2,3);</b>

The piece smoothly moves over to the new square. If you just want to change its position without animating anything, you can either call "place" again or just change it directly:

<b>myPiece.x=6;</b>

If you forget the name of myPiece, you can get it from the map as well:

<b>myMap.pieces(6,3)[0].color='black';</b>

That was kind of a complicated statement, so let's go through it:
* myMap.pieces is a function that takes an x and y coordinate and returns an array of all the pieces at that space.
* The zeroth piece in the array is our piece
* We use piece.color='black' to change its color to black.

