Peint talk

351 views
263 views

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
351
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Peint talk

  1. 1. PeintHigh-Performance, Evented Canvas
  2. 2. Who am I? I’m a developer for Blackcomb Games.I build web & mobile games with HTML5.
  3. 3. Peint is...• A Javascript graphics engine• Supports HTML5 Canvas• Component-based• Good for any game (isometric, etc)
  4. 4. Philosophy• Positioning and rendering should be handled separately• High-frequency code should be as lightweight as possible• Rendering should only happen when there are changes to render
  5. 5. Features• Event-based rendering• Object-based positioning• Animation management• Modular design will do CSS3 & WebGL
  6. 6. Event-based rendering
  7. 7. // Ugly nesting needed to ensure image// is loaded before trying to draw it.var img = new Imageimg.onload = function () { function render () { requestAnimationFrame(render) // This image draws every frame, // even though it’s state hasn’t changed. context.drawImage(img, 0, 0) } render()}img.src = /img.png
  8. 8. Let’s clean that up
  9. 9. // Start canvasvar Game = Peint.all()var canvas = new Game.Canvas(#viewport)canvas.start()// Load image and add to canvasvar img = new Game.Image({ url: /img.png })canvas.add(img)// Reposition later, redraw automaticallysetTimeout(function () { img.set({ left: 200, top: 200 })}, 5000)
  10. 10. Abstract rendering• Support multiple render methods• Add objects before loaded• Change layer sorting• Automate redraw
  11. 11. Animations
  12. 12. // Create animationvar animation = new Peint.Animation({ url: /img.png , top: 330 , left: 100 , animation: { // Each column is a frame, and each // is a separate animation rows: 8, cols: 9 // time between frames is adjustable // even while animating , duration: 40 }})
  13. 13. // play is called at image:loaded, let’s pauseanimation.on(image:loaded, function () { this.pause() // Let’s unpause it later setTimeout(function () { animation.play() }, 1000)})
  14. 14. Modularity
  15. 15. // Load selectivelyvar Canvas = Peint.require(canvas)var Image = Peint.require(image)// Start canvasvar canvas = new Canvas(#viewport)canvas.start()// Load and add imagevar image = new Image({ url: /img.png })canvas.add(image)
  16. 16. Advantages• Easier to support multiple back-ends• Execution order becomes irrelevant• Only executes what it needs to
  17. 17. Alternatives• Easel - monolithic, pollutes global• Fabric - intended for drawing apps• Paper - vector transform scripting• Raphael - SVG, graphs and vector• Processing - vector visualization
  18. 18. Limitations• Primitives other than rectangle not yet implemented, low priority• Currently canvas-only, needs at least CSS3 to better support mobile• Alpha-stage, likely to change a lot and needs some better optimization
  19. 19. Planned• Scaling & rotations (Partially done)• Primitives, lines, etc• CSS3 & WebGL renderers• Better examples & tutorials
  20. 20. github.com/qard/peint

×