Let's make a platformer. By the end you'll have a warrior who runs around, jumps between platforms, and grabs coins, plus a title screen.
Every step has a demo you can play, with the code right below it. Mess with the code and hit Run. If you break something, Reset code puts it back.
MDog Engine is already imported in these demos, and the screen is 256 by 192. When you start your own game, grab the import line from Getting Started. You can also open any step in the Playground if you want to keep going on your own.
We'll start with a box. The player is 14 by 30 pixels, and its position is a Vector, which is just an x and a y.
main() runs 160 times a second. Every time, we check the arrow keys with isDown(), nudge the player, clear the screen, and draw everything again. Pretty much every game works this way.
For jumping, the player needs a velocity. Every tick, gravity pulls the velocity down a little, and the velocity moves the player. A jump just sets the velocity upward and lets gravity do the rest.
You can only jump while you're on the ground, and the up arrow uses isClicked() instead of isDown(). It's only true on the tick you press the key, so holding it doesn't turn you into a pogo stick.
Mess with gravity (0.06) and jump speed (-2.7). Small changes to these two make a big difference in how the jump feels.
One floor is easy. A bunch of platforms needs real collision, and that's what SquareKickbox is for. It's a hitbox that can tell when it's overlapping another one. The player's kickbox is stuck to its position, so it follows the player around.
The trick is to move one axis at a time. Move sideways, and if you're now inside a platform, push back out. Then do the same for up and down. If you move both at once, you can't tell whether you hit a wall, landed on a floor, or bonked your head on a ceiling, and things get weird fast.
Now the box gets a sprite. MultipleFileAnimation plays a list of images in order. The warrior has an idle animation and a run animation, and flipX turns her around when she runs left.
Her sprite is a lot bigger than her hitbox (there's empty space around her, plus the sword), so we draw it up and to the left to line her feet up with the bottom of the box. Collisions still use the plain box. Nobody wants to get stuck on a ledge by the tip of their sword.
If she ever looks like she's floating or sinking into the ground, draw the hitbox to see what's going on: MDog.Draw.rectangle(playerBox.getLeftX(), playerBox.getTopY(), 14, 30, "#ff0000"); right after the warrior is drawn.
Each coin is a small kickbox. When you touch one, it gets removed from the list and your score goes up.
The sparkles are particles from the FX Module. Each one shoots off in a random direction (a Vector spun a random amount with rotate()) and falls with gravity.
Each screen is its own function, and setActiveFunction() picks which one runs. startGame() puts everything back to the start, so you can play again after you win.
Text is drawn with textImage() using the marsfont.png pixel font. For your own game, put the font image in your assets folder (see Add Text).
From here it's your game. Some ideas: enemies that walk back and forth on the platforms, a level bigger than the screen using translate(), or a timer so you can speedrun the coins.
Or move on to the next tutorial, a space shooter.