5.1 Hello Sprite and Movement
SLO 3
Describe, design, implement, and test structured programs using currently accepted methodology.
Learning Objectives
By the end of this section, you will be able to:
- Create a canvas and sprites using the moSHion game engine.
- Set gravity and observe how physics affects sprites automatically.
- Write
setupanddrawfunctions that the engine runs for you.
5.1.1 What is moSHion?
moSHion is a beginner-friendly 2D game engine for the web. It pairs a simple drawing canvas with real Box2D-style physics (via a physics library called planck.js), so you can draw shapes and make them bump into each other without wiring the two worlds together yourself.
It's aimed at people who've written a little JavaScript and want to make a game this afternoon — not a week from now. The whole API is a handful of globals: Sprite, Group, world, camera, kb, mouse.
You don't import anything. You don't install anything. You write two functions — setup and draw — and the engine runs them for you. Add an update function if you need per-frame input or logic (though most of the examples in this book keep everything inside draw, matching how you'll actually write your first sketches).
In earlier chapters, you typed code into a browser console and it ran once. moSHion is different — it runs your draw function over and over, about 60 times per second. Each repetition is called a frame. This is how every game works: a loop that keeps updating the screen.
Here's a complete moSHion sketch — a blue square that falls onto a gray floor and stops. Watch it run.
▶ Starting…
That's a complete, if tiny, physics simulation — no physics math written by you.
5.1.2 Your First Sprite
A sprite is a 2D shape that the engine can draw, move, and collide with other shapes. In moSHion, you create one with new Sprite(x, y, width, height). The first two numbers are the starting position (x and y coordinates on the canvas). The next two are the size.
The fifth argument, 'static', makes a sprite that doesn't move. Without it, sprites are dynamic — gravity pulls them down and other sprites can push them.
A 2D shape in a game engine that can be drawn, moved, and collided with other sprites. In moSHion, sprites are created with new Sprite(x, y, width, height).
A static sprite does not move (it stays in place like a wall or floor). A dynamic sprite is affected by gravity and collisions (it falls, bounces, and gets pushed).
Modify the code from Example 5.1.1. Change the player's starting y-position from 100 to 50. Change the player's color to 'tomato'. What happens? Now change world.gravity.y from 10 to 5. How does the fall change?
▶ Press Run to see the output…
Solution
▶ Press Run to see the output…
The player starts higher (50 instead of 100) and falls more slowly because gravity is weaker (5 instead of 10). The player is now red ('tomato') instead of blue.
5.1.3 The Engine Loop
Every moSHion sketch has two functions:
setup()— runs once at the start. This is where you create the canvas, set up gravity, and create your sprites.draw()— runs every frame (about 60 times per second). This is where you clear the background and draw anything that changes.
The engine calls setup first, then calls draw in a loop. You never call these functions yourself — the engine does it for you.
The draw loop is the heart of every game. Each frame, the engine: (1) reads your input (keyboard, mouse), (2) runs your draw code, (3) updates physics (gravity, collisions), and (4) draws everything to the screen. Then it does it again, 60 times a second. Your code just fills in step 2.
Add a console.log('frame') inside your draw function. Open the browser's developer console (F12). How many times does "frame" appear per second? What happens if you change new Canvas(400, 400) to new Canvas(800, 600)?
▶ Press Run to see the output…
Solution
▶ Press Run to see the output…
"frame" appears in the console about 60 times per second (the frame rate). Changing the canvas size makes the canvas bigger (800x600 instead of 400x400) but doesn't change the frame rate.
Problem Set 5.1
Problem 1. What two functions does every moSHion sketch need? What does each one do?
Problem 2. What does the fifth argument 'static' do when creating a sprite? What happens if you leave it out?
Problem 3. Write code to create a canvas that is 500 pixels wide and 300 pixels tall, with a red circle (diameter 50) at position (250, 150) and a static floor at the bottom.
Problem 4. What does world.gravity.y = 10 do? What would happen if you set it to 0?
Problem 5. How many times per second does the draw function run? Why is this important for games?
Problem 6. In the example code, why does the blue square stop when it hits the gray floor instead of falling through it?
Problem 7. What is a sprite? Write a definition in your own words.
Problem 8. What is the difference between a static sprite and a dynamic sprite? Give an example of when you would use each one.
Key Terms
| Term | Definition |
|---|---|
| Canvas | The drawing area in moSHion, created with new Canvas(width, height) |
| Draw function | A function that runs every frame (about 60 times per second) to update and render the game |
| Dynamic sprite | A sprite affected by gravity and collisions — it can move, fall, and be pushed |
| Frame | One cycle of the game loop — one screen update |
| moSHion | A beginner-friendly 2D game engine for the web with built-in physics |
| Setup function | A function that runs once at the start to initialize the canvas, sprites, and settings |
| Sprite | A 2D shape in a game engine that can be drawn, moved, and collided with other sprites |
| Static sprite | A sprite that does not move — it stays in place like a wall or floor |