Google Santa Tracker: Present Bounce

[Brazilian Portuguese] Apresentação dada na décima edição do FloripaJS mostrando um por trás das cenas do projeto com foco na cena "Present Bounce".

Transcript

1. Santa Tracker
3. Desde 2004.
4. Mais de 23 cenas.
5. 1 cena disponível por dia.
6. +1.4M visualizaçōes. https://www.similarweb.com/website/santatracker.google.com
8. The Tracker
11. Olá!
12. Eu sou o @MarcoBarbosa
13. Nós somos a @14islands
14. @marcobarbosa @hjortureh @ffdead
16. Retrospectiva Últimos 3 anos
19. Santa Tracker Present Bounce
23. Box2D Body, Fixture e Shapes
24. Pode ser dinâmico ou estático. Contém ângulo e posição no mundo. Body
25. z Fixture Contém propriedades físicas: densidade, fricção, etc.
26. z Shape Objeto 2D geométrico.
28. Shape Shape Shape Fixture Body
30. Protótipos Estudos preliminares
35. Renderizando Injetando gráficos nas cenas
36. Objects Level Box2d Draw() RequestAnimationFrame Game Box2d Step()
37. RequestAnimationFrame Game
38. RequestAnimationFrame Game Level Box2d Step()
39. RequestAnimationFrame Game Level Box2d Step() Objects Box2d Draw()
40. RequestAnimationFrame Game Level Box2d Step()
41. RequestAnimationFrame Game Level Box2d Step() Objects Box2d Draw()
42. RequestAnimationFrame Game Level Box2d Step()
43. RequestAnimationFrame Game Level Box2d Step() Objects Box2d Draw()
44. RequestAnimationFrame Game Level Box2d Step() Objects Box2d Draw()
45. Responsivo Seguindo o framework
49. 100% 80% 70% 55% 40% 35%
50. transform: scale(0.8); 100% 80%
51. @media (max-width: 1200px), (max-height: 675px) { .scene { transform: scale(0.8); (…) } } 100% 80%
52. @media (max-width: 1000px) and (max-width: 562px) { .scene { transform: scale(0.7); (…) } } 100% 80% 70%
53. @media (max-width: 400px) and (max-width: 225px) { .scene { transform: scale(0.35); (…) } } 100% 80% 35% 70%
60. Animaçōes Descomplicadas e “baratas”
61. Position transform: translate(npx, npx) Scale transform: scale(n) Rotation transform: rotate(ndeg) Opacity opacity: 0…1 Animaçōes “baratas”
62. Gráficos em camadas Para melhor flexibilidade
65. SVG
66. .conveyor .conveyor__belt .conveyor__wheel .conveyor__wheel
67. dash-offset com JavaScript transform: rotate() transform: rotate()
69. SVG
70. .spring .spring__top .spring__bottom
71. transform: translateY() transform: scaleY()
75. Demo time!
79. Demo time 2!
82. Obrigado!