boxart / boxart-boiler

A boilerplate for Responsive DOM based Open Web Games.

boxart

Tools for building animated html content and games.

boxart-boiler's Issues

Responsive Hud/base layout phase 2

Continue to refine “minimum viable” layout framework. Should also serve as a css style guide.

Z Blog Post on performance work

Screen shot of profiler, gif, showing how to minimize # of layouts per interaction

Blog Post: introduce philosophy: open web games

Start the conversation about building games on the open web. This should happen before we introduce all of the specific tools we are developing to do so, but can touch on them at a high level.

Add Tooling to Release Process

Could have grunt tasks that make a versioning workflow interactive or flagable. This would help users who are new to git with their build process.

Image Packaging part 1

Provide an automated image packaging and chunking solution for SVG and binary images.

Webpack Loader

This loader will be all that gets used during active development so as to not package a sprite sheet on every local rebuild. It should internally generate a non-base64 dataUri of the image passed to it and create a style sheet that contains one item of the form:

:local(.someClass){
  background-image: url(DATA_URI);
  background-repeat: repeat;
}

With this generated style sheet we will then run the css-loader and the style-loader so that the resulting CSS is injected into the page at run time.

Solicit art from Coop for "Memory" Card Game

Ask the Coop to contribute art for the memory game. Specify format, colors, etc. for how we want art delivered. Coordinate collecting art for the demo game.

Spike: Image Asset Packaging Resource

Investigate how to go about accomplishing similar optimizations and loading binary image assets in the same manor as #13 and #14

Blog Post (short): Introduce BoxArt

Follow on #51 to introduce BoxArt. Call out how it aligns with Bocoup philosophy. Follow template for introducing Grunt, Johnny-5, JQuery.

Spike: Image Asset Memory Management

Investigate how to handle loading and unloading the data output by #38 so that we're sensitive to the memory footprint of the game/browser.

Documentation: Why not Canvas?

Create documentation to splain.

"Memory" Card Game Branch

Create demo games as branches that can be deployed via Github Pages. The first one we'll do is a card matching memory style game. This game should be usable via screen reader.

Naming Party

Get folks together to talk about an overarching name/org etc for all of this repos various pieces

First Animation Blog Post

Write about the experience of implementing #18

Boilerplate Repos Blog Post

Write a blog post about effective git strategies to use when building something based of a boilerplate repository.

Cover:

• Forking 🍴
• Git remotes 📡
• Pulling the latest upstream changes ⛵
• Conflict resolution 👊

Blog Post: discuss game development philosophy

Align with Bocoup philosophy of diverse teams, inclusive workflows, etc.

Matt Blog Post re: battery consumption testing

SVG Packaging

Write tooling for webpack that helps to intelligently manage SVG assets. We might want to get some input from @Wilto about how we can make this as awesome as possible. Maybe investigate any grunticon optimizations and replicate here.

SVG Sprite Loader

• Combines multiple SVGs into one to create a spritesheet
• Optimize sheets for file size, according to a defaulted parameter
• Loader should return the path to the SVG and the #defid

Getting Started Guide

Document system deps, outline the repo and how to work with it

Marketing tasks

Add screenshots of demo games at different resolutions, ratios, orientations to the README. List of what's cool about this.

Sound Packaging

Write tooling for webpack that helps with sound asset management. Each of these will be a new repo that can be maintained personally or by Bocoup or in some other org since they are not RWD Boilerplate specific. We'll just import them here as dependencies.

Webpack Audio Sprite Loader

• Generates a generic manifest for each audio file it is passed and returns a manifest object that describe each file
• Looping and other spritesheet metadata can be optionally provided in an identically named .json file.

Dragon Drop

Should have drag and drop functionality and animation

boxart repo / animated

/packages
/boxart-animated
/tests
/packages
/boxart-animated

Blog Post: Introduce games boilerplate

Introduce demo games
Screenreader accessible?

Pitch Isaac for demo game images

Spec out for Isaac what we need, how long it will take. He is possibly available 5/5-5/6 but likely just part time due to other projects.

Asset Pre-Caching/Loading

When an asset is needed by the application, we should be able to display it immediately. Networking is slow, so requesting the asset only when needed would introduce lag. We should be able to instruct the browser to download a set of assets ahead of time, so that when we need to display them to the user they are immediately available.

PreCaching:

• Service worker / AppCache fallback?
  • Memory asset management

Loading:

• Be able to know what has been loaded (what is cached)
  • Be able to express that with some sort of UX; not a loading bar, but some games let you play and load the next content at the same time; we could provide that sort of boiler UX

Image Packaging part 2

Webpack Plugin

This is an optimization plugin that builds a sprite sheet from all of the image assets referenced in a given chunk and outputs a style sheet that contains rules referencing the main sprite sheet and using background position to display only relevant images. In this way production builds that utilize the plugin are able to achieve maximum GPU performance.

:local(.something), :local(.somethingElse) {
  background-image: url(DATA_URI);
}

:local(.something) {
  background-position: X y;
}

Keyboard Helpers

React components to help move keyboard focus around in a 2d or 3d context. This needs to be more than tabbing through the page. 50 elements to tab through takes too much time, need to be able to WASD or arrow around child elements.

boxart repo

Move RWD boiler to boxart/box-art boiler. Fix waffle, update blog post links

AppVeyor

Add AppVeyor support for Windows CI.

Responsive Hud/base layout

• fullscreen, across devices
  • vertical/horizontal centering

Server Side Rendering

Animated Children

Setup Sinon For Test Usage

Getting Sinon wired up with Karma is a pain because of the myriad of packages available on NPM. The boiler plate should come with some way to spy and mimic server responses.

Doc Site Skeleton

Design game theme part 1

Design game theme.
Coordinate with art vendor to create contracted art for 2 demo games.

Basic design for combined documentation/pattern library

Documentation Strategy

Should we use the wiki or store documentation in the repo itself?

I'm personally a fan of in the repo.

Deploy demo games

Email Coop: boilerplate is published!

Sprite Animation

Provide some kind of solution for spritesheet based animations in react components.

Contributor's Guide

Document project tenants, and provide tips on eslint/testing expectations.

Blog Animation 2 - Physics

Physics Animations

Sound Packaging Part 2

Finish and integrate the webpack-audio-sprite-plugin

Webpack Audio Sprite Plugin

• Use ffmpeg exec calls to concat sound files, in future we can refactor this and extract a new module that our tooling family can use.
  • Splits audio files into 45 second chunks to appease browser preferred audio size.

https://github.com/MattSurabian/webpack-audio-sprite-plugin

and

SoundJS Sheet Loader

• Converts generic sound sheet loader output into a soundjs specific format.

Scene management

Need a way to group control flow in a game so that you're not in individual property checking hell. Basically we need to build a linear state machine.

Scene Component

• Can themselves contain scenes

Animation Helpers

Parentable Runloop

Class that provides helpers for animating objects, especially around timeout based cleanup tasks. Can create a hierarchy where the parent retains complete play/pause control over all its containing children.

Runloop Light

Class that provides animation optimization for small animation pieces within a game. Think: falling stars around end game text.

Promise chain helper

Helpers that do things like return promises that resolve when a frame has been requested.

Generator helper

Similar to co but more lightweight and purpose built for a gaming animation use case

add description of branches to readme

Anchor Component

React component anchors, e.g. to enable highlighting objects with arrows and tooltips.

CI

Setup Travis integration to use BrowserStack. Document the test:ci task in the README

Making QA Menu Removable

We should setup the QA Menu along with a sample production build webpack config that can use the ProvidePlugin along with the UglifyPlugin to completely remove QA code from the build.

Closed as dupe of #16 - Memory Game

Build memory game