Connecting the dots on game development.
Published in · 7 min read · Mar 5, 2020
--
By Andrew Dore, Ashley Riccardi, Carron White and Sam Von Ehren
The game idea that would eventually become Vertex was born the weekend Sam Von Ehren moved to New York City. In the middle of unpacking, Von Ehren took a break to attend a friend’s party, where he met Deanna Destefano, one of the product designers on the New York Times Crossword app. Destefano told Von Ehren that her team was beginning to brainstorm ideas for new games, but all they could come up with were word games. “It would be cool,” she said, “if we did something with colors and shapes.”
While the party raged on, Von Ehren, a game designer by training, kept turning that prompt over in his head. How might one make a Times game without words, he wondered. When he went home, he drafted up a prototype for a game that asked players to create two triangles from four dots. The idea combined a tangram puzzle with the dots and boxes game often played on pencil and paper.
Two years later, Von Ehren had gotten a job as a game designer on The Times’s the Games team and was leading the brainstorming for new games. The team had just launched Tiles, its first non-word game, and wanted to prototype more non-word games. Von Ehren fished out the old prototype he had designed his first weekend in New York and showed it to the team.
While the team thought the game was interesting, they didn’t think solving it felt like a big enough accomplishment. The solving experience needed to feel revelatory, like the flash of insight that comes when solving a crossword puzzle.
That’s when the team had their own “ah-ha” moment: instead of centering the game around drawing triangles, they reoriented it so the shapes reveal an image when connected. As players connect the dots, the shapes fill with color, hinting at the final image. To keep players engaged and hint at the final image, the team included a clue, similar to those found in traditional crossword puzzles.
At its core, a vertex puzzle is a drawing game with a logic component. A clue adds an element of riddle to the puzzle. The team had their game concept down—and a name for the game: Vertex.
The dynamics of the game were defined, but the team still needed to know whether users would actually play it, so they built a web-based prototype with basic features and minimal design to see how users responded to the game. It was linked at the bottom of the news feed on the mobile version of the Times website for two weeks. The team tracked the number of users who played the game, how they interacted with it and whether they returned to play again. (They did.)
Armed with positive user data and the green light to build a full-fledged game, the team had to decide what the final game would look like and how it would be built.
For Andrew Dore, a product designer on the Games team, the weeks after the prototyping phase were dominated by design discovery. Because the game is a blend of geometry and low-poly art, Dore started his design inspiration there and brainstormed ways to create an engaging playing experience. The challenge for a game based on mathematics, however, is to prevent it from feeling like homework.
Games are emotional experiences created, in part, by how they look. Dore knew that simply highlighting the game’s geometry component would create a one-dimensional experience. So he started to explore how a visual narrative could convey the object of the game while elevating the experience of playing it.
Since players connect dots by drawing lines, much like stargazers might do in the night sky, Dore decided to use the visual metaphor of a constellation in the game design. Most people are familiar with the concept of drawing shapes by connecting dots, so Dore thought that leaning into this metaphor would help teach users how to play Vertex. Dore created a moodboard with examples of geometry and constellations, as well as visual references to designs that use simple shapes and color, and started working on designs.
How it feels to play a game is just as important as how it looks, especially in a digital environment. To design the feel of Vertex, Dore created a number of simple animations and prototypes.
While the dots and lines in the game are simple, it took some experimentation to decide how they should react to user actions. Dore considered whether the dots should be firmly set as if they were pins in a pinboard; or whether they should slide around as if they were on ice; or if they should float as if suspended in water. For the action of line drawing, he tested interactions that emulated wire being pulled from a tightly wound spool, and if released, the line would retract automatically.
To keep track of all of the user interactions, the team created a large diagram with every user input and possible animation. This is where the process shifted from exploring visual treatments to building out the game.
Building an interactive game can be complicated. This is especially true with Vertex, as it has numerous moving parts and points of user interaction. The game is also built for the web, which means it needs to work on a variety of screen sizes, from desktop to mobile. The front-end engineering team, made up of Ashley Riccardi and Carron White (with some help from Greg Skiano), decided to build the game using HTML Canvas because of its drawing capabilities.
The beginning of the development phase raised a user experience issue: on small devices, some dots appeared so close together that users couldn’t access them. The engineering team realized that Vertex needed pinch and zoom capabilities. Since they were using HTML Canvas to build the game, the team tried the built-in Canvas functions for transforming and translating the interface. This worked to a point, but didn’t provide the control they wanted users to have when navigating the interface and it negatively affected other features in the game.
The team opted to build their own zoom and pan functions. When users zoom in the game, the functions calculate how large each shape on the screen should be and they redraw the shape; the same thing happens when a user pans. This functionality became the technical foundation for the rest of the game.
Just as Dore considered how the game feels in his designs, the engineers factored “game-feel” into their development process. With so many points, lines and triangles on the page, performance was being negatively impacted and it didn’t feel good.
Initially, they drew all of the shapes on a single canvas element. This meant that anytime a user drew a line from one point to another, every single shape (which could amount to hundreds on certain puzzles) had to be redrawn. And since this would happen anytime a user’s cursor moved while drawing, this could mean redrawing hundreds of shapes, possibly hundreds of times over the span of a few seconds. The game felt laggy.
To fix this issue, the engineers separated elements onto different canvases and layered them on top of one another. The triangles are on one canvas, completed lines on another and the points on a third. These three layers are topped by a blank canvas that renders the line that is actively being drawn. This protects the other elements while the user is drawing the line. Once a shape has been successfully created, the line and triangle are added to their respective canvases. No clearing or redrawing required.
In the end, this amounts to a game that doesn’t weigh down a browser and feels good to play.
Since launching Vertex, the team has learned a few things: namely, that building a game as interactive as this one was really hard. But as they rose to the challenge, they created a strong technical foundation that will allow them to experiment with other visual game ideas in the future.
They also have some post-launch improvements queued up: they intend to improve the touch experience on mobile and implement new design features such as UI color themes that enhance the solving experience and additional animations.
Check out Vertex here.
