From 91486e0ad0c22bedc29dbe735a0c2a5f8104dc4c Mon Sep 17 00:00:00 2001 From: "K. Adam White" Date: Fri, 3 Jun 2016 16:37:02 -0400 Subject: [PATCH] Begin documenting animation tool in the readme and docs site --- README.md | 4 ++++ docs-src/pages/about.md | 4 ++++ .../example-armatures/box-center.jsx | 18 +++++++++++++++--- .../animated-preview/example-armatures/box.jsx | 12 +++++++++--- tools/animated-preview/js-list.js | 10 ++++++---- 5 files changed, 38 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 60cb480..4c07863 100644 --- a/README.md +++ b/README.md @@ -25,6 +25,10 @@ For your own games, we recommend starting with [the `master` branch](https://git - [box2d-demo](https://github.com/boxart/boxart-boiler/tree/box2d-demo): A demo showing how BoxArt can be used in conjunction with [Box2D](http://box2d.org/) - [2048-demo](https://github.com/boxart/boxart-boiler/tree/2048-demo): A BoxArt implementation of the addictive sliding number game +## Animation Preview Tool + +With the development server running (see "grunt" default task section, below), visit [localhost:8080/animated-preview.html](http://localhost:8080/animated-preview.html) to see a set of animation clips that can be applied to a variety of armatures. This tool permits animation clips to be viewed (and therefore developed) in isolation before they are applied to a game environment. + ## System Dependencies In order to use or contribute to this repo you'll need the following things installed on your system: diff --git a/docs-src/pages/about.md b/docs-src/pages/about.md index 49981fd..f9960c7 100644 --- a/docs-src/pages/about.md +++ b/docs-src/pages/about.md @@ -17,6 +17,10 @@ For your own games, we recommend starting with [the `master` branch](https://git - [box2d-demo](https://github.com/boxart/boxart-boiler/tree/box2d-demo): A demo showing how BoxArt can be used in conjunction with [Box2D](http://box2d.org/) - [2048-demo](https://github.com/boxart/boxart-boiler/tree/2048-demo): A BoxArt implementation of the addictive sliding number game +## Animation Preview Tool + +With the development server running (see "grunt" default task section, below), visit [localhost:8080/animated-preview.html](http://localhost:8080/animated-preview.html) to see a set of animation clips that can be applied to a variety of armatures. This tool permits animation clips to be viewed (and therefore developed) in isolation before they are applied to a game environment. + ## System Dependencies In order to use or contribute to this repo you'll need the following things installed on your system: diff --git a/tools/animated-preview/example-armatures/box-center.jsx b/tools/animated-preview/example-armatures/box-center.jsx index 4072d81..9de20e4 100644 --- a/tools/animated-preview/example-armatures/box-center.jsx +++ b/tools/animated-preview/example-armatures/box-center.jsx @@ -19,10 +19,22 @@ export default class BoxCenter extends Component { } render() { - return (
+ return (
-
-
+
+
); diff --git a/tools/animated-preview/example-armatures/box.jsx b/tools/animated-preview/example-armatures/box.jsx index 189f3f1..cd2c88a 100644 --- a/tools/animated-preview/example-armatures/box.jsx +++ b/tools/animated-preview/example-armatures/box.jsx @@ -19,9 +19,15 @@ export default class Box extends Component { } render() { - return (
-
-
+ return (
+
); } } diff --git a/tools/animated-preview/js-list.js b/tools/animated-preview/js-list.js index 042b9e6..789e5a3 100644 --- a/tools/animated-preview/js-list.js +++ b/tools/animated-preview/js-list.js @@ -10,14 +10,16 @@ module.exports = (() => { // that addition of complexity we can opt to exclude index files since they // are the entry into a folder. This does mean making armatures as the index // of a folder would be invisible to the preview tool. If a project can make - // more specific assumptions it should do so to reopen that oppurtunity, like - // how animated-preview excludes its root folder. + // more specific assumptions then it should do so in order to reopen that + // opportunity, like how animated-preview excludes its root folder. const srcContext = require.context( '../../src', true, - /(^(?!.*(index|animated-preview)).*\.jsx?$)|(animated-preview\/[^\\]*\/.*\.jsx?$)/); + /(^(?!.*(index|animated-preview)).*\.jsx?$)|(animated-preview\/[^\\]*\/.*\.jsx?$)/ + ); const toolsContext = require.context( '..', true, - /(^(?!.*(index|animated-preview)).*\.jsx?$)|(animated-preview\/[^\\]*\/.*\.jsx?$)/); + /(^(?!.*(index|animated-preview)).*\.jsx?$)|(animated-preview\/[^\\]*\/.*\.jsx?$)/ + ); return srcContext.keys().map(key => srcContext(key)) .concat(toolsContext.keys().map(key => toolsContext(key))); })();