Where the Wild Beasts Roam / Wildlife camera game
Product design + developmentI designed and built a wildlife camera game.
I turned the camera decisions I make in the field into a browser game people can practice with. I shaped the lessons, worked through the controls and used AI to help write and refine the code. The game is part of Where the Wild Beasts Roam, alongside the wildlife planner.
See how I built it Explore the planner case study ↗
The planner helps people prepare for the drive. The game lets them practice the camera decisions behind the photo.
Chapter 1 of 6
Why I built itI wanted people to see what their settings actually change.
I spend a lot of time out photographing wildlife. I’m watching the light, where the animal is looking and whether it’s about to move. The camera settings have to work with that moment.
I wanted to bring those decisions into Where the Wild Beasts Roam. Someone could try a setting, take a photo and see the result before trying a different approach. That became the camera game.
See the moment. Make a choice. Look at the photo.
Watch the light and the animal.
Work through a camera choice.
See what happened and try again.
Real game screens and a saved game photo. These illustrate the loop; they are not three consecutive moments from one playthrough.
Make the result visible. Changing a number only helps someone learn if they can connect it to the photo.
Chapter 2 of 6
One setting at a timeI brought the control into the lesson.
The game has shutter speed, aperture, ISO, light, movement and focus. Putting all of that in front of someone at once made the first lesson harder to follow.
I worked through the lessons so each one asks for a specific choice. In the shutter lesson, someone selects 1/60 second, takes a test photo, then tries 1/1000. The relevant control sits with the instruction, and the matching camera reading is highlighted. The other settings are still there when they want to experiment.
The shutter control sits beside the instruction. Someone can make the choice without searching through the other settings.
The nine lessons
- Meet shutter speed
- Meet ISO
- Meet aperture
- Read the light meter
- Choose your focus
- Beat the blur
- Catch the pause
- Balance shutter and ISO
- Get the shot
Free practice lets someone try their own settings outside the guided comparisons.
Explain the choice, put the real control beside it, then show what that choice does.
Chapter 3 of 6
Make the difference visibleTwo photos needed to tell the same story.
One problem showed up in the shutter lesson: a slow shutter could still look sharp if the animal happened to be standing still. Comparing that to a different moving moment didn’t explain the setting clearly.
I changed the guided test so both photos replay the same head movement. That gives someone a clearer way to compare shutter speeds. The timing lesson works differently: they watch the live movement and choose when to take the photo themselves.
Both photos use f/11. Auto ISO changes from 100 to 1600 to keep brightness comparable. The comparison shows the effect on movement blur.
For aperture, I kept the daytime moose scene paused and shutter speed at 1/1000 second. Auto ISO changes with the opening so the background difference is easier to see. These are photos from the game, not edited blur effects added to this case study.
Control the guided comparison so someone can understand the setting. Keep free practice open for the moments they choose themselves.
Chapter 4 of 6
How I worked with AII worked through the game as we built it.
I used AI as a development partner. It helped write and revise the code. I brought the photography experience, decided what the lessons needed to explain and reviewed how each version actually behaved.
That meant going back and forth on the details. Could someone see the blur? Did the meter agree with the photo? Did focusing on the eye change the result? Was the instruction asking for something the controls could actually do?
Work through the decision
Describe the camera behavior and what someone needs to understand.
Build it with AI
Turn that direction into a working interface and simulation.
Try it and refine it
Take photos, inspect the result and work through what needs to change.
What sits behind the interface
HTML, CSS and JavaScript
The lesson steps, camera controls, comparisons and responsive layouts.
Three.js
The 3D animals, scene and camera simulation, connected to the settings and generated photo.
Saved progress
Lesson checkpoints and completion live in browser storage. This is not account-based or cross-device recovery.
Separate parts
The build keeps scene, camera, photo, lesson and progress behavior in separate modules so changes can be checked more closely.
I checked the behavior, not just the screen.
The build records include checks for exposure calculations, lesson progression, saved photos, keyboard controls and different screen sizes. I also worked through visible problems, including focus targets, photo comparisons and the animal’s position in the scene. These are development checks, not evidence of customer learning outcomes.
Set the direction, work through the choices, review the working result and keep refining it. AI helped with implementation throughout that process.
Chapter 5 of 6
Make room for the photoThe photo still had to be the focus on a phone.
On desktop, the scene and settings can sit beside each other. A phone needs a different arrangement. I kept the camera readings with the picture and put the relevant lesson control beside its instruction.
Long instructions and small comparisons made the first lesson harder to use. I shortened the steps, made the comparison photos easier to inspect and kept restart and help available. The game also has a full-screen view that keeps the camera controls with the scene.
Someone can leave and come back to their saved lesson in the same browser. That matters when they’re working through a few choices at a time.
Can they see the animal, understand the current setting and reach the action they need next?
Chapter 6 of 6
What works todayI can show the game working.
The current build has two wildlife scenes, nine guided lessons and free practice. People can change their settings, focus, take photos, compare results and keep their lesson progress in the same browser.
Existing paid members can now play the game from their account page on Where the Wild Beasts Roam. I added it alongside their planning tools so they can plan the drive and practice the camera in the same place.
Working now
Camera simulation, lessons, photo comparisons, free practice and browser-saved progress.
What comes next
Prepare the public game page and announcement.
Practice the camera.
Plan the drive.
The planner connects field knowledge to a route. The game brings camera choices into something people can try.
Explore the planner case studyGame imagery and credits
The screenshots show a simulation. The interface and game behavior are my work with AI-assisted development; the animal models include work by other creators.
Grizzly: “Grizzly Bear” by freddy1231, CC BY 4.0. Scale, orientation, materials and head animation adjusted for the game. Supplied through Ai2’s Objaverse.
Moose: “Low Poly: Moose - Anim Test” by Ulrik Langvandsbråten, CC BY 4.0. Colors and motion adjusted.
Old Faithful background: NPS / Jacob W. Frank, public domain. Grand Teton background: Where the Wild Beasts Roam.