Let's make the smallest possible game: a square you move around with the arrow keys. You don't need to download anything, since your game imports MDog Engine straight from the web.
If you just want to poke at it first, the Playground runs code right in your browser, no setup.
Make a new folder for your game, with these files in it:
my-game/
index.html
game.js
assets/The assets folder is where your images and other files go. Any time MDog Engine asks for a file name, it looks in here. More on that in Where Do My Files Go?
Put this in index.html. It loads game.js as a module and centers the game in the window.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Game</title>
</head>
<body style="margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center;">
<script type="module" src="game.js"></script>
</body>
</html>Put this in game.js.
import MDog from "https://cdn.jsdelivr.net/gh/MiloKesteloot/MDogEngine@v1.4.0/MDogModules/MDogMain.js";
const position = new MDog.Math.Vector(256, 192);
function main() {
// Move with the arrow keys
if (MDog.Input.Keyboard.isDown("ArrowLeft")) {
position.add(-1, 0);
}
if (MDog.Input.Keyboard.isDown("ArrowRight")) {
position.add(1, 0);
}
if (MDog.Input.Keyboard.isDown("ArrowUp")) {
position.add(0, -1);
}
if (MDog.Input.Keyboard.isDown("ArrowDown")) {
position.add(0, 1);
}
// Draw
MDog.Draw.clear({color: "#1c1c3c"});
MDog.Draw.rectangleFill(position.x - 8, position.y - 8, 16, 16, "#ff8800");
}
MDog.setActiveFunction(main);The import line loads MDog Engine and makes the game screen. MDog.setActiveFunction(main) tells MDog Engine to run main 160 times a second, and each run is called a "tick" (see Core). Every tick, we move the square if an arrow key is held, then clear the screen and draw it.
Here it is running. Click on it, then use the arrow keys:
Browsers won't run modules from a file you just double-click, so you need a local web server. Any of these work:
index.html and pick "Open with Live Server."index.html from WebStorm or another JetBrains editor.npx serve or python -m http.server in the game's folder, then going to the address it prints.You should see an orange square in the middle of the screen that moves with the arrow keys. If you do, congrats, you made a game.
Put an image in your assets folder, like assets/player.png, and draw it instead of the square:
MDog.Draw.image("player.png", position.x - 8, position.y - 8);Images load the first time they're drawn, so don't be surprised if one's missing for the first few ticks.
MDog Engine draws text with pixel fonts, which are images in your assets folder. Download one or both of the font images and put them in assets/fonts/:
marsfont.png - A small 5 by 5 pixel font.
determinationfont.png - A larger 8 by 13 pixel font.Then draw text with textImage():
MDog.Draw.textImage("Hello world!", 256, 20, "#ffffff", "fonts/marsfont.png", {alignX: "center", size: 2});It's just a web page, so you can put it online anywhere that hosts web pages, like GitHub Pages.
Once you've got this working, the Examples have some bigger games to dig through.
Every file MDog Engine loads (images, fonts, level files) goes in the assets folder next to index.html. Folders inside assets are fine. In your code, leave off the assets/ part, since the engine adds it for you.
my-game/
index.html
game.js
assets/
player.png MDog.Draw.image("player.png", ...)
fonts/
marsfont.png MDog.Draw.textImage(..., "fonts/marsfont.png")
levels/
level1.csv MDog.AssetManager.loadFile("levels/level1.csv", ...)If an image won't show up:
Player.png or player.png, but GitHub Pages does. This one gets everybody: the game works fine on your computer and breaks the second it's online.assets/ yourself. MDog.Draw.image("assets/player.png", ...) looks for assets/assets/player.png.index.html straight from your computer.?fullscreen=true to the end of the URL.@v1.4.0 in the import is the version of MDog Engine. Your game keeps using that version even after MDog Engine is updated.