Skip To Main Content

Introducing BoxArt: A Library to Help Build HTML Games

Posted by Z Goddard

May 23 2016

We’ve been busy building some Open Web Games at Bocoup. As we did so, we realized there was a dearth of resources for making performant, fun web games using the DOM. Most material aimed at game developers focuses on canvas rendering, and there aren’t many resources for web developers that show them how to use the accessible and responsive HTML they already know to build games. To address this we are excited to announce BoxArt to share the lessons we have learned while building modern DOM games.

We are starting off BoxArt with two main repos: boxart, a JavaScript library distributed on npm, and boxart-boiler, a boilerplate pulling together webpack, React, and boxart with sensible defaults for building Open Web Games.

BoxArt vs BoxArt Boiler

The npm boxart package focuses on rendering and animating 2D games using the DOM and React. It’s predominantly a collection of components to support CSS and JS animations, sprite animation, optimization of rendering updates, and organization of game logic such as timing and keyboard navigation.

The boxart-boiler is a great starting point for DOM games, providing a dev and production build workflow with React and boxart. It combines some webpack plugins to optimize delivery of sound and visual assets, some UI groundwork to cover common styling problems, such as centering a fixed aspect-ratio area, HUD layout, and QA cheat menu helpers.

In our work to build out and document boxart, we are putting together some demo games built with boxart-boiler. Here’s an example matching game with animations managed by boxart.

You can find the code for this game in the simple-demo branch of boxart-boiler.

New Tools and Features for Game Developers

BoxArt is at an early point in its development, but we already have some great tools to aid developers in building games and other websites, such as BoxArt Batch, BoxArt Animated, BoxArt Stage.

Following the baseline build workflow, sound/graphics packaging, animation management, and layout management, our roadmap includes:

  • Keyboard helpers
  • Strategy-based asset precaching
  • Drag and Drop helpers
  • Scene management

Build Open Web Games with Us!

We’re actively building games with this toolchain, so please give it a look, let us know what you think, and start building Open Web Games with us. Patches are particularly welcome for the following:

We’re building in the open, so you can also see and get involved in our planning process at waffle.io/boxart/boxart-boiler.

Posted by
Z Goddard
on May 23rd, 2016

Tagged in

Comments

We moved off of Disqus for data privacy and consent concerns, and are currently searching for a new commenting tool.

Contact Us

We'd love to hear from you. Get in touch!