Play from the side or from above
Ziggy and Pam are flat drawings, which would look wrong from above. The game stands them up at the right size from either camera, the way classic sports games do, so you can play from the side or straight overhead.
Case study
Ziggy & Pam Sports Arena
A boy against his pug, and the start of a sports engine
The first sports game in the Ziggy Games arcade: soccer between Ziggy and Pam, playable from two cameras, built so more sports could follow without rebuilding the basics each time.
- Sport
- Arena soccer, 1 v 1
- Play it
- Free on this site and in the Ziggy Games arcade
- Play-test rounds
- 2
- Plays on
- iPads, Chromebooks, phones, laptops
The brief
Ziggy's family asked for "Ziggy and Pam Sports Arena": a set of small sports games, soccer first, with Ziggy playing against Pam, the family pug, from a side camera or straight overhead.
It also had to work alone against the computer, with a friend on the same keyboard, and on a phone.
What it gives the kid playing it
- Ziggy plays against his own pug, and either one can win.
- They can play the computer at three levels, or a friend on the same keyboard.
- On a phone they get a thumb stick and a Kick button: hold to charge, let go to kick.
What we decided, and why
A rink, so the ball stays in
Arena soccer with rounded boards means no out-of-bounds. Matches run two or four minutes, with a golden goal if the score is tied.
Different players, same rules
Ziggy has the bigger kick, volleys, headers and a slide tackle. Pam is quicker, dribbles closer and pounces. Either can win.
Built for the next sport
Everything a new sport needs, the camera, the characters, the ball, the arena and the sound, lives in one shared place, so the next sport starts from working parts.
Play-test rounds
Each round started with the family playing the latest build and asking for what came next, and our team built it. Words in quotation marks are the family's own, as recorded in the build notes.
- 1
The ask
A dribble that keeps the ball close in every direction.
What we built
The ball stays out in front of whoever has it and swings around on turns, so it stays close. A tackle works best when you step into the dribbler's path, and the levels were set so a kid-level player beats Easy, splits Medium and loses to Hard.
- 2
The family's note
“Copy of the game plus exactly how it was made, to build a different soccer game with the same assets.”
What we built
That copy became the Ziggy & Pam Soccer Kit, with a build log explaining every step and decision. Soccer Kids, Hockey Kids and Pickle Kids all grew from it.
What it teaches
- Dribbling: keeping the ball close and turning with it
- Tackling by stepping into the dribbler's path instead of chasing from behind
- Timing a charged kick
Under the hood How it works, and how it is built. For the curious.
One camera for two views
Flat side-view drawings would look wrong from above. Drawing heights straight up the screen at each ground point's scale, the way classic 2D sports games do, keeps them upright in both views, and a ball at head height still lines up with a head.
Smooth at 60 frames a second
A frame takes about 1.5 milliseconds to draw. The game is timed without ever reading pixels back from the canvas, which keeps Chrome drawing on the graphics card.
Goals that are earned
The computer defends at a full sprint on every level, so a goal comes from beating a defender, at any level a kid picks.
Updates that arrive whole
Every file is published under a name made from its contents, so a changed file always has a new address and a browser never mixes an old file with a new one.
How it is built
The game is plain JavaScript modules drawn on a canvas. The match lives in a deterministic simulation that steps 120 times a second and runs in Node, so whole matches can be tested without a browser. Ziggy and Pam are posed from their motion on the field each frame.
The sound is made in the browser with Web Audio, with no audio files to download. Settings and the record against each level are kept on the device.
- JavaScript modules
- Canvas 2D
- Web Audio
- Deterministic simulation
- Node match tests
From the finished game
The result
- 60frames a second, steady in testing, so the action stays smooth
- 3levels set against a test bot that plays like a kid: it beats Easy, splits Medium and loses to Hard
- 3more games built from its parts: Soccer Kids, Hockey Kids and Pickle Kids
Free to play on this site and in the Ziggy Games arcade.
Its camera, characters, ball and sound became the starter kit for every paper-kid sports game since. Soccer Kids, Hockey Kids and Pickle Kids were all built from it.
What this means for your game
Your pet can be more than a face in the crowd. Pam is a full player here, with her own speed and moves, and yours can be too.
Want a game like this?
We build games around one kid, one team or one school, the same way we built this one: with the people who will play it in the loop. Start with your player.