Responses by Wade Cowin, creative director; Cam O’Connell, creative front-end developer; and Dan Mercer, creative director, Resn.

Background: Noiz! is a creative musical soundboard game that was designed to appeal to kids of all ages. It was funded by NZ On Air, which seeks to ensure New Zealanders can experience public media that is authentically Kiwi. Our aim was to encourage musical creativity in kids and provide them with a New Zealand–centric sonic identity that included sounds from the natural world as well as local artists and media. By giving them a forum to explore and experiment with culturally resonant sound, Noiz! shows Kiwi kids that music is all around them and encourages them to make music from anything.

Design core: We wanted to create an experience that had both a distinctive visual and sonic style. We collaborated with renowned Kiwi illustrator Ned Wenlock to develop the site’s signature look, which combines simplified shapes, bold lines and vibrant colors. For the different sound packs, we worked with musicians FFWH and Disasteradio, and the animation studio Mukpuddy. We also incorporated recordings from some of New Zealand’s many endemic bird species like the tui, kererū and pukeko—without relying on our omnipresent national symbol, the kiwi. With such incredible illustrations and sounds, we had our work cut out for us to limit the concepts down to just seven packs!

Navigation structure: As we wanted to appeal to every age group, even the very young, we needed to ensure the navigation structure was as simple and intuitive as possible with minimal navigation and familiar interactions. Players can quickly select one of two different modes: “Freeplay,” a sandbox mode which lets you tap out beats and noises; and “Challenge,” which tests players’ ability to copy an increasing sequence of sounds.

New lessons: It was important for us to achieve consistency of design across the entire experience. Early in the process, we decided to repurpose and recolor image assets across the app, identifying visual compatibilities. Properly considering the colorway approach from the outset greatly improved efficiencies in production, diminishing the total number of assets, reducing pressure on the GPU and allowing us to achieve faster load times. These improvements also helped in reducing latency on touch devices—important for an audio game where delays are particularly noticeable. Ultimately, every pack had to be really fun to play. After a few false starts, we created a fast prototyping process that helped us immeasurably to weed out the good from the bad. Also, recording the farts was quite an ordeal!

Technology: We used TexturePacker within our asset pipeline to layout our compositions in Three.js, saving us many hours of time and keeping the process flexible enough to update any pack at any time through production. TexturePacker also took care of image trimming, which provided additional performance improvements and carved away unneeded pixels with minimal effort.

Once our packs were positioned, we set up a JSON file and assigned a color value to each pack. These color values were fed into three simple classes: sprite class, which handles TexturePacker trim/offset values and positioning; colored_sprite class, which extends sprite class and handles colorization; and button class, which extends colored_sprite class and handles user interaction and pattern masking.