Download as PDF, PPTX
Uploaded byCantina
Intro to facade
Facade.js is a JavaScript library designed to simplify drawing shapes, images, and text in the HTML5 canvas. It offers an easy-to-read key/value pair format, making the drawing process more efficient with less coding. Additionally, it supports JSON import and comes with various plugins for enhanced functionality.
Intro to facade
- 1. Intro to Facade.js Drawingshapes, images and text in HTML5 canvas made easy.
- 2.
- 3. I’m a userexperience consultant at
- 4.
- 5. In October of2012 ! GitHub hosted a Game Jam.
- 6. The theme was "forking, # branching, and $ cloning.
- 7. I didn’t builda game.
- 8. Instead I builta library for drawing in canvas.
- 9. After three versions, I’mready to share.
- 10. Let’s talk aboutcanvas.
- 11. It’s easy enoughto use. But it could be easier.
- 12.
- 13. Drawing a rectangle witha stroke.
- 14.
- 15. Drawing a circle witha stroke.
- 16.
- 17. Drawing a polygon witha stroke.
- 18.
- 19.
- 20. Rotating an object fromthe center.
- 21.
- 22. Scaling an object fromthe center.
- 23. Now compare native canvasand Facade.js
- 24.
- 25.
- 26. Some advantages of thisformat. • Easy to read. • Format is key/value pairs (similar to CSS). • Importable from JSON.
- 27. So what isFacade.js?
- 28. Facade.js is awrapper around the canvas 2d rendering context.
- 29. What does thatmean?
- 30.
- 31. How to getstarted with Facade.js
- 32.
- 33.
- 34.
- 35. Plugins in Development •Gamepad.js - Simple customizable event binding for the HTML Gamepad API. • Box2D-plugin - A wrapper for the Box2D JavaScript library. • SATjs-plugin - A wrapper for the SAT-js library, a simple JavaScript library for performing 2D collision detection.
- 36.
- 37.
- 38. • Interactive Demos:http://play.facadejs.com • Documentation: http://docs.facadejs.com • Plugins: http://plugins.facadejs.com • ! Repo: http://github.com/facadejs/Facade.js • ! Organization: http://github.com/facadejs
- 39.
- 40.
- 41.
- 42.