Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Facade.js

Scott Doxey
September 16, 2015

 Facade.js

Slides from my talk at the Boston HTML5 Game Development meetup.

Scott Doxey

September 16, 2015
Tweet

More Decks by Scott Doxey

Other Decks in Programming

Transcript

  1. Facade.js
    Drawing shapes, images and text in HTML5 canvas made easy.

    View full-size slide

  2. Scott Doxey
    twitter.com/@neogeek
    github.com/neogeek
    dribbble.com/neogeek
    Full stack developer

    View full-size slide

  3. Why build a canvas drawing library
    when so many already exist?

    View full-size slide

  4. The experience of building a library
    from scratch in a technology one is
    not proficient with is invaluable.

    View full-size slide

  5. Vision for Facade.js
    • Easy to use
    • Familiar syntax
    • Fast rendering
    • Small file size
    • Extensible via plugins

    View full-size slide

  6. Getting Started With Facade.js

    View full-size slide

  7. $ bower install Facade.js
    or use the CDN at http://cdn.facadejs.com/0.3.0-beta/facade.min.js

    View full-size slide

  8. Facade.js Examples

    View full-size slide

  9. So what is everything
    Facade.js can do?

    View full-size slide

  10. Core Features of Facade.js
    • Draw custom polygons, circles, lines, rectangles
    • Render images
    • Animate images via sprites
    • Draw Text
    • Group Facade.js objects
    • Handle the animation loop

    View full-size slide

  11. Does Facade.js do
    anything else?

    View full-size slide

  12. Facade.js is a finely tuned wrapper
    for the HTML5 canvas renderer.

    View full-size slide

  13. Facade.js Plugins

    View full-size slide

  14. Gamepad.js
    Simple customizable event binding for the HTML Gamepad API.
    https://github.com/neogeek/gamepad.js

    View full-size slide

  15. facadejs-Box2D-plugin
    An API wrapper for the Box2D JavaScript library.
    https://github.com/neogeek/facadejs-Box2D-plugin

    View full-size slide

  16. facadejs-SATjs-plugin
    An API wrapper for the SAT-js library, a simple JavaScript
    library for performing 2D collision detection.
    https://github.com/neogeek/facadejs-SATjs-plugin

    View full-size slide

  17. plastick.js
    A lightweight game loop framework utilizing Facade.js.
    https://github.com/syntaxtsb/plastick.js

    View full-size slide

  18. Demos of games built with
    Facade.js and Plugins

    View full-size slide

  19. Links
    • https://facadejs.com/ - Main Project Page
    • https://play.facadejs.com/ - Interactive Demos
    • https://plugins.facadejs.com/ - Plugin Registry
    • https://doxdox.org/facadejs/Facade.js - Documentation
    • https://github.com/facadejs - GitHub Organization
    • https://github.com/facadejs/facadejs-sample - Sample Project

    View full-size slide

  20. Facade.js Playground
    Interactive demos in an editor similar to CodePen, JSFiddle and JS Bin.

    View full-size slide