Seasons and surroundings: game scenery that follows the real calendar

The request was one line from the founder: "I think adding environments to the games as well will add a lot of value and flair to it. Cool environments, completely unique with seasons and surroundings as well."

A place for each game#

The Week gets a desk by a window, and the window shows the season outside. Table for Six gets six rooms, from a dining room whose table settings change through the year to a garden. Paper Plane's notebooks get carried outdoors, to a park, a beach, a snowy field. Loose Ends' corkboard hangs in different rooms. Volley plays on seasonal courts, snow volley included. Stack gets a building site or a desk, and Catch the Tasks gets an orchard or a garden.

Each of those is a data pack on one shared system, drawn through the same canvas interface the games use, so the web and the phone draw it the same way. An environment is a stack of layers: a sky or a wall at the back; far, middle and near scenery that slide at different speeds when the camera moves; weather and small drifting things (leaves, snow, rain, petals, dust, fireflies); light, whether that's the hour of the day or a patch of sun from a window; and an ambient bed for the place, the season and the hour. The music is separate. Each game has a set of longer pieces and picks one by place, hour and season, or holds the one you choose.

Which season is it?#

By default, the real one. We guess your hemisphere from your time zone, so October is fall in New York and spring in Sydney, and you can override the guess whenever you like. A season is supposed to change what's in the scene, the particles, the light and the ambience. A warmer tint on the same picture doesn't count.

Singapore has a time zone and no winter. The calendar code gives it the northern seasons, and a comment in that file admits that near the equator the four seasons are a courtesy more than the weather. The season picker in each game's settings is the real answer there.

The board always wins#

Scenery that makes a game harder to read is a bug, however nice it looks. Its colors come from the current theme, with the season's tint applied inside that theme instead of on top of it. The contrast test from the two-canvases chapter grows to cover every environment in every theme, so a snowy field that would swallow white pieces in a light theme fails in CI. Each scene declares its play area and where scenery is allowed. The environment draws behind the play area, and its optional foreground layer is never allowed to cover it. Weather is decoration, except where a game ties it to a mechanic on purpose, the way Paper Plane already has wind.

The frame budget for the whole environment on a phone is about 2 ms. Static layers get painted once and reused, particles have a cap, and with reduced motion on, the parallax and the drifting stop.

There are 22 places across the seven games. The budget test runs every one of them, in every season, on a 390 by 844 phone surface at dusk. Its worst frame makes 207 draw calls, with the limit at 220, and spends 0.11 to 0.16 ms of JavaScript, with the limit at 0.35.

The pixels are the expensive part. Before launch, on the first 17 places, we measured on a CPU canvas in Node at 1x. A still place (The Week, Table for Six, Loose Ends, Stack's desk, Catch the Tasks, Volley's rooftop and gym) holds a steady frame at 1.2 to 2.1 ms. Volley's beach and park have swaying trees and glints on the sea, and take 1.6 to 3.8 ms. Paper Plane's camera never stops, so it takes 2.0 to 4.5 ms, and every fourth frame of flight costs about 5 ms while the far scenery gets composited again. Before we reworked the layers, the same places took 3.5 to 6.7 ms. The box was busy while we measured, so we also counted in full-screen copies on the same canvas. A still place costs 1.5 to 2.4 of them, and it replaces the game's old background paint, which cost about one. On a CPU canvas, then, the moving places are over the 2 ms phone budget. Whether they still are when a phone's graphics chip does the work is the open question at the end of this chapter.

The drifting things share pooled sprites: 44 on a phone and 84 anywhere else, plus the room's dust, which gets 14 on a phone and 22 elsewhere. Leaves and petals and rain may each take half a pool.

In the data package, the contrast sweep checks every place in every season, at dawn, day, dusk and night, on a laptop and on an upright phone, in a light and a dark test theme. That comes to 1,408 combinations for the two text inks. The web runs the same sweep over all eight real themes, 5,632 combinations. We didn't repaint any scenery to get there. The environment lays a wash of the theme's paper over the declared play area, and it works out how thick that wash has to be per theme, season and hour, from every color the scenery could paint. It never goes below 55% opacity. The main ink has to hold 4.5:1 over it, every other ink 3:1.

The number we still don't have is the one that matters most: the frame on a real phone, where the layers go through the GPU and the CPU figures above should be an upper bound. That one waits on testing on actual devices.