Animatron Player API in Details v3

Transcript

1. Modern JavaScript HTML5 Engine Flow in Details Animatron Player API Anton shaman.sir Kotenko Animatron, June 2013
2. Place to go http://animatron.com/player
3. Docs
4. Sandbox
5. Games
6. Files player.js builder.js *.module.js *.import.js internals API Extending API Import scenes
7. Files player.js builder.js *.module.js *.import.js var pl = createPlayer('...'); var scene = new anm.Scene(); var oval = new anm.Element('oval', null, function(ctx) { ... }); scene.add(oval); player.load(scene).play(); createPlayer('...').load( b('oval').oval(...) ).play(); b(this.$).collides(...) createPlayer('...').load(project, new AnimatronImporter());
8. Flow
9. Scene consists of Elements A B
10. ...actually, internally structured A B X A A w
11. Everything is an Element A shape path text image
12. Everything is an Element A shape path text even sprite
13. Everything is an Element A shape path text sprite b('my-star').star(5) b('fish').path('...'); b('a-letter').text('A'); b('alien').sprite('...');
14. Elements may have children A B X i A A w
15. Elements may have children A B X i A A w b('parent').sprite(...).add(b('child').star(5))
16. ...even while not being something for themselves B X i A A w b('parent').add(b('child').star(5))
17. Which way a single element is rendered?
18. It stores transformations (state)
19. It stores transformations (state) ...and a brush (visuals) A
20. It stores transformations (state) ...and a brush (visuals)
21. state visuals
22. state visuals f(t) → f(t) → f(t) → ← f(ctx) ← f(ctx) ← f(ctx) Paint Modify
23. state visuals f(t) → f(t) → f(t) → ← f(ctx) ← f(ctx) ← f(ctx) Painters Modifiers
24. state visuals f(t) → f(t) → f(t) → ← f(ctx) ← f(ctx) ← f(ctx) Painters Modifiers Time band
25. state visuals f(t) → f(t) → f(t) → ← f(ctx) ← f(ctx) ← f(ctx) Painters Modifiers Time band
26. state visuals tweens → events → f(t) → ← f(ctx) ← morphs ← f(ctx, t) Painters Modifiers Time band
27. state visuals tweens → events → f(t) → ← f(ctx) ← morphs ← f(ctx, t) Painters Modifiers Time band Browser time between calls is unpredictable, though has delta δ δ δ δ δ
28. Animatron Player
29. Animatron Player createPlayer('canvas-id').load(my_scene).play();
30. Animatron Player createPlayer('canvas-id').load(my_scene).play(3); 3 3
31. createPlayer('canvas-id', { 'mode': C.M_VIDEO, // C.M_PREVIEW (no controls) or C.M_DYNAMIC (for games) 'zoom': 1.0, 'repeat': false, 'bgcolor': '#ffffff', 'anim': { 'width': 400, 'height': 250, 'bgfill': { color: '#fff' }, 'duration': 10 } } ).load(my_scene); Options ⚙ 10
32. Import and Export createPlayer('canvas-id').load(my_scene, new AnimatronImporter()); new AnimatronExporter().create(source_scene) (NYI)
33. Embedding • w and h — forced width and forced height of the player. Will add black ribbons if scene ratio will be different. • bg — the background color of the player in format of ff00a6; Default is transparent. Appears below the scene background. • m — mode of the player, PREVIEW (no controls, no handling mouse/kb) is 0, DYNAMIC (no controls, handling mouse/kb) is 4, VIDEO (controls are shown, no mouse/kb handling, default) is 11. • r — repeating mode, 1 is to repeat (loop), 0 (default) — play once. • z is zoom of the scene, may be a float value • t is time to start play from when scene is loaded. t=370 means "play from 3s 700ms" • p is time to pause at when scene is loaded. p=370 means "pause at 3s 700ms" • debug flag (0 or 1, off by default) allows to turn on debug information such as FPS and exact time. Any of the parameters is optional, here is a definition for each one http://player.animatron.com/go/3f68b131-8a6a-4e0f-82f8-99a2576ab9d9? w=600&h=500&bg=f0fff0&m=0&r=0&z=1&t=25&p=37&debug=0 <iframe/> ⚙
34. Supports • Еmbedding • Static modification • Structures of any deep • Masks • Tweens and Easings • Jumping in time • Sprites • Time bands • Repeat modes • Events • Live changes • Simple collisions • Band-restricted modifiers • Relative modifiers </> α 5 0.3:1 9:17 ! x,y
35. Overview
36. Construction • b() — unnamed empty element • b('name') — empty element with a name • b(this.$) — from low-level element • b(b()) — find in cache & return • b().add(b()) — add child (even live) • b().remove(child) — remove child (even live) 'name'
37. A Shapes • b().rect([30, 30], [53, 53]).fill('#00f') — square | rectangle • b().oval([30, 30], [53, 53]).fill('#00f') — circle | oval • b().path([30, 30], 'M0 0...').stroke('#000').nofill() — path • b().image([30, 30], '/....jpg') — image • b().text([30, 30], 'A', 53).stroke('#000').nofill() — text • b().sprite([30, 30], '/....png', [53, 53]) — sprite
38. A Shapes • b().rect([30, 30], 53).fill('#00f') — square | rectangle • b().oval([30, 30], 53).fill('#00f') — circle | oval • b().path([30, 30], B.path([...])).stroke('#000').nofill() — path • b().image([30, 30], '/....svg') — image • b().text([30, 30], 'A', 53).stroke('#000').nofill() — text • b().sprite([30, 30], '/....png', 53) — sprite
39. Base state change (NYI) • b()...pos([30, 30]) — move • b()...angle(Math.PI / 3) — rotate • b()...size([2, 7], [2, 1.5]) — scale • b()...opacity(0.8) — change opacity
40. Bands & Repeat Modes • b().band([2, 10]) — lives from 0s to 10s of parent time • b().band([2, 10]).once() — the same • b().band([2, 10]).stay() — keep last state inst. of disappearing • b().band([2, 10]).loop() — loop during life of a parent • b().band([2, 10]).bounce() — bounce during life of a parent
41. Tweens • b()...trans([2, 7], [[5, 5], [10, 10]) — translate • b()...transP([2, 7], [...pts...]) — translate by path • b()...rotate([2, 7], [0, Math.PI * 2]) — rotate • b()...rotateP([2, 7], [...pts...]) — rotate to path • b()...scale([2, 7], [[2, 2], [0.5, 0.3]) — scale • b()...xscale([2, 7], [2, .5]) — equally scale • b()...alpha([2, 7], [0, 0.8]) — alpha
42. Tweens • b()...trans([2, 7], [[5, 5], [10, 10]) — translate • b()...transP([2, 7], [...pts...]) — translate by path • b()...rotate([2, 7], [0, Math.PI * 2]) — rotate • b()...rotateP([2, 7], [...pts...]) — rotate to path • b()...scale([2, 7], [[2, 2], [0.5, 0.3]) — scale • b()...xscale([2, 7], [2, .5]) — equally scale • b()...alpha([2, 7], [0, 0.6]) — alpha
43. Relative Tweens • b()...rtrans([0.18, 0.6], [[5, 5], [10, 10]) — translate • b()...rtransP([0.18, 0.6], [...pts...]) — translate by path • b()...rrotate([0.18, 0.6], [0, Math.PI * 2]) — rotate • b()...rrotateP([0.18, 0.6], [...pts...]) — rotate to path • b()...rscale([0.18, 0.6], [[2, 2], [0.5, 0.3]) — scale • b()...rxscale([0.18, 0.6], [2, .5]) — equally scale • b()...ralpha([0.18, 0.6], [0, 0.6]) — alpha
44. Composing Tweens b()...xscale([2, 7], [.5, 2.2]) .rotate([2, 7], [0, Math.PI / 2]) .alpha([2, 7], [0, 1])
45. Composing Tweens b()...xscale([2, 7], [.5, 2.2]) .rotate([2, 7], [0, Math.PI / 2]) .alpha([2, 7], [0, 1])
46. Composite Tweens (NYI) b()...rotate([2, 3, 5, 7], [0, 1/2 * Math.PI, Math.PI, 2 * Math.PI]) 0 π / 2 π 2π 0 2 5 7 3
47. Relative Composite Tweens (NYI) b()...rrotate([0.3, 0.5, 0.6, 1], [0, 1/2 * Math.PI, Math.PI, 2 * Math.PI]) 0 π / 2 π 2π 0 0.3 0.6 1 0.5
48. Easings • b()...trans([2, 2], [[5, 5], [10, 10]], C.E_IN) — predefined IN • b()...trans([2, 2], [[5, 5], [10, 10]], C.E_OUT) — predefined OUT • b()...trans([2, 2], [[5, 5], [10, 10]], C.E_INOUT) — predefined INOUT • b()...trans([2, 2], [[5, 5], [10, 10]], C.E_CIN) — predefined CIN • b()...trans([2, 2], [[5, 5], [10, 10]], C.E_COUT) — predefined COUT • ... • b()...trans([2, 2], [[5, 5], [10, 10]], [...pts...]) — path-based easing • b()...trans([2, 2], [[5, 5], [10, 10]], function(t) { return 1 - t; }) — custom
49. Modifiers & Painters • b().modify(function(t) { this.x = y / t; }) — normal modifier • b().modify([6, 7], function(t) { this.x = y / t; }) — band-restricted modifier • b().rmodify([0.25, 0.9], function(t) { this.x = y / t; }) — relative band-restricted modifier • b().modify(5, function(t) { this.x = y / t; }) — trigger-modifier (NYI) • b().rmodify(0.3, function(t) { this.x = y / t; }) — relative trigger-modifier (NYI) • b().modify(function(t) { this.x = y / t; }, C.E_IN) — modifier with easing • b().paint(function(ctx, t) { ctx.fillText(0, 0, t); }) — painter 10 f(t)
50. Events • b().on(C.M_CLICK, function(evt, t) { this.x = evt.x; }) • b().on_click(function(evt, t) { this.x = evt.x; }) • ...double-click, mouseover, mouseout, mousemove, mouseup, mousedown, keydown, keypress, keyup, draw • NYI: touchstart, touchend, touchmove... on() A
51. Timing • b().on(C.M_CLICK, function(evt, t) { this.t = 5; }) — jump to time • b().on(C.M_CLICK, function(evt, t) { this.rt = 0.3; }) — jump to relative time • b().key(5, 'jump').on(C.M_CLICK, function(evt, t) { this.key = 'jump'; }) — jump by key • b().rkey(0.2, 'jump').on(C.M_CLICK, function(evt, t) { this.key = 'jump'; }) — (NIY) relative • b().time(C.E_QIN) — predefined time easing • b().time(function(t) { return t / 2; }) — time easing • b().rtime(function(t) { return 1 - t; }) — relative time easing (NYI) t 5 .3 jump .jump
52. Sprites • b().sprite([30, 30], 'my_sprite.png', [40, 40], ...) — create sprite and define frames / frames names • b().switch(['jump', 'walk'], 10) — switch to given frames and FPS, waiting for run() call • b().run(7) — animate stored frames starting from given time • b().animate(7, ['jump', 'walk'], 10) — animate frames starting from given time with given FPS
53. Composition & Masks • b().acomp(C.C_SRC_OVER) — Source over • b().acomp(C.C_SRC_IN) — Source in • b().acomp(C.C_DST_ATOP) — Destination atop • b().acomp(C.C_LIGHTER) — Lighter • ... • b().mask(b()) — Use element as a mask SRC_IN
54. Other • b().enable() — enable • b().disable() — disable element • b().show() — (NYI) show element • b().hide() — (NYI) hide element • b().each(function(elm) { ... }) — iterate over direct children • b().deach() — iterate deeply over sub*-children • b().take(b()) — copy another element • b().use(b()) — clone another element • B.grad(...), B.path(...), B.sheet(...), B.easing(...) ... — helpers for you to make things
55. Everything with the help of modifiers and painters
56. May be head to the docs now?)
57. ...or Sandbox?
58. Version 1.0 is coming soon
59. Thank you!
60. my homesite http://shamansir.github.io Player Home http://animatron.com/player/ GitHub http://github.com/Animatron/player Slides https://speakerdeck.com/shamansir/ animatron-player-api-in-details-v2