[Ultracode Munich #4] Demo on Animatron by Anton Kotenko

  • 333 views
Uploaded on

Animatron is an engine for a web animation tool written in Java/GWT. Presentation took place at Wayra Munich during the Ultracode Munich meetup: http://www.meetup.com/Ultracode-Munich

Animatron is an engine for a web animation tool written in Java/GWT. Presentation took place at Wayra Munich during the Ultracode Munich meetup: http://www.meetup.com/Ultracode-Munich

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
333
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
6
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Animatron Player API Modern JavaScript HTML5 Engine Flow in Details 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 internals builder.js API *.module.js Extending API *.import.js Import scenes
  • 7. Files player.js builder.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(); *.module.js b(this.$).collides(...) *.import.js createPlayer('...').load(project, new AnimatronImporter());
  • 8. Flow
  • 9. Scene consists of Elements A B
  • 10. ...actually, internally structured A w A A B X
  • 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 b('my-star').star(5) text b('a-letter').text('A'); b('fish').path('...'); sprite b('alien').sprite('...');
  • 14. Elements may have children A w A A i BX
  • 15. Elements may have children b('parent').sprite(...).add(b('child').star(5)) A w A A i BX
  • 16. ...even while not being something for themselves b('parent').add(b('child').star(5)) w A A i BX
  • 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 Modify f(t) → f(t) → f(t) → visuals Paint ← f(ctx) ← f(ctx) ← f(ctx)
  • 23. state Modifiers f(t) → f(t) → f(t) → visuals Painters ← f(ctx) ← f(ctx) ← f(ctx)
  • 24. visuals state Painters Modifiers f(t) → f(t) → f(t) → ← f(ctx) ← f(ctx) ← f(ctx) Time band
  • 25. visuals state Painters Modifiers f(t) → f(t) → f(t) → ← f(ctx) ← f(ctx) ← f(ctx) Time band
  • 26. visuals state Painters Modifiers tweens → events → f(t) → ← f(ctx) ← morphs ← f(ctx, t) Time band
  • 27. visuals state Painters Modifiers tweens → events → f(t) → ← f(ctx) ← morphs ← f(ctx, t) 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. Options 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, 10 'bgfill': { color: '#fff' }, 'duration': 10 } } ).load(my_scene); ⚙
  • 32. Import and Export createPlayer('canvas-id').load(my_scene, new AnimatronImporter()); new AnimatronExporter().create(source_scene) (NYI)
  • 33. Embedding 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 Any of the parameters is optional, here is a definition for each one • 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. • 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. • z is zoom of the scene, may be a float value <iframe/>
  • 34. Supports </> • Еmbedding • Time bands x,y • Static modification • Repeat modes • Structures of any deep • Events • Masks α 5 ! • Tweens and Easings • Live changes • Simple collisions • Jumping in time 9:17 • Band-restricted modifiers • Sprites 0.3:1 • Relative modifiers
  • 35. Overview
  • 36. Construction • b() — unnamed empty element 'name' • 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)
  • 37. 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 A • b().text([30, 30], 'A', 53).stroke('#000').nofill() — text • b().sprite([30, 30], '/....png', [53, 53]) — sprite
  • 38. 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 A • 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]) 2π π 0 0 2 π / 2 3 5 7
  • 47. Relative Composite Tweens (NYI) b()...rrotate([0.3, 0.5, 0.6, 1], [0, 1/2 * Math.PI, Math.PI, 2 * Math.PI]) 2π π 0 0 0.3 π / 2 0.5 0.6 1
  • 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 10 f(t) • b().paint(function(ctx, t) { ctx.fillText(0, 0, t); }) — painter
  • 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 A • NYI: touchstart, touchend, touchmove... on()
  • 51. Timing 5 • b().on(C.M_CLICK, function(evt, t) { this.t = 5; }) — jump to time .3 • b().on(C.M_CLICK, function(evt, t) { this.rt = 0.3; }) — jump to relative time jump .jump • 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
  • 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!