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
   

   View Slide

2. View Slide

3. Desde 2004.
   

   View Slide

4. Mais de 23 cenas.
   

   View Slide

5. 1 cena disponível por dia.
   

   View Slide

6. +1.4M visualizaçōes.
   https://www.similarweb.com/website/santatracker.google.com
   

   View Slide

7. View Slide

8. The Tracker
   

   View Slide

9. View Slide

10. View Slide

11. Olá!
    

    View Slide

12. Eu sou o @MarcoBarbosa
    

    View Slide

13. Nós somos a @14islands
    

    View Slide

14. @marcobarbosa @hjortureh @ffdead
    

    View Slide

15. View Slide

16. Retrospectiva
    Últimos 3 anos
    

    View Slide

17. View Slide

18. View Slide

19. Santa Tracker
    Present Bounce
    

    View Slide

20. View Slide

21. View Slide

22. View Slide

23. Box2D
    Body, Fixture e Shapes
    

    View Slide

24. Pode ser dinâmico ou estático.
    Contém ângulo e posição no mundo.
    Body
    

    View Slide

25. z
    Fixture
    Contém propriedades físicas:
    densidade, fricção, etc.
    

    View Slide

26. z
    Shape
    Objeto 2D geométrico.
    

    View Slide

27. View Slide

28. Shape
    Shape
    Shape
    Fixture Body
    

    View Slide

29. View Slide

30. Protótipos
    Estudos preliminares
    

    View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. Renderizando
    Injetando gráficos nas cenas
    

    View Slide

36. Objects
    Level
    Box2d
    Draw()
    RequestAnimationFrame
    Game
    Box2d
    Step()
    

    View Slide

37. RequestAnimationFrame
    Game
    

    View Slide

38. RequestAnimationFrame
    Game
    Level Box2d
    Step()
    

    View Slide

39. RequestAnimationFrame
    Game
    Level Box2d
    Step()
    Objects Box2d
    Draw()
    

    View Slide

40. RequestAnimationFrame
    Game
    Level Box2d
    Step()
    

    View Slide

41. RequestAnimationFrame
    Game
    Level Box2d
    Step()
    Objects Box2d
    Draw()
    

    View Slide

42. RequestAnimationFrame
    Game
    Level Box2d
    Step()
    

    View Slide

43. RequestAnimationFrame
    Game
    Level Box2d
    Step()
    Objects Box2d
    Draw()
    

    View Slide

44. RequestAnimationFrame
    Game
    Level Box2d
    Step()
    Objects Box2d
    Draw()
    

    View Slide

45. Responsivo
    Seguindo o framework
    

    View Slide

46. View Slide

47. View Slide

48. View Slide

49. 100%
    80%
    70%
    55%
    40%
    35%
    

    View Slide

50. transform: scale(0.8);
    100%
    80%
    

    View Slide

51. @media (max-width: 1200px),
    (max-height: 675px) {
    .scene {
    transform: scale(0.8);
    (…)
    }
    }
    100%
    80%
    

    View Slide

52. @media (max-width: 1000px) and
    (max-width: 562px) {
    .scene {
    transform: scale(0.7);
    (…)
    }
    }
    100%
    80%
    70%
    

    View Slide

53. @media (max-width: 400px) and
    (max-width: 225px) {
    .scene {
    transform: scale(0.35);
    (…)
    }
    }
    100%
    80%
    35%
    70%
    

    View Slide

54. View Slide

55. View Slide

56. View Slide

57. View Slide

58. View Slide

59. View Slide

60. Animaçōes
    Descomplicadas e “baratas”
    

    View Slide

61. Position transform: translate(npx, npx)
    Scale transform: scale(n)
    Rotation transform: rotate(ndeg)
    Opacity opacity: 0…1
    Animaçōes “baratas”
    

    View Slide

62. Gráficos em camadas
    Para melhor flexibilidade
    

    View Slide

63. View Slide

64. View Slide

65. SVG
    

    View Slide

66. .conveyor
    .conveyor__belt
    .conveyor__wheel .conveyor__wheel
    

    View Slide

67. dash-offset com JavaScript
    transform: rotate() transform: rotate()
    

    View Slide

68. View Slide

69. SVG
    

    View Slide

70. .spring
    .spring__top
    .spring__bottom
    

    View Slide

71. transform: translateY()
    transform: scaleY()
    

    View Slide

72. View Slide

73. View Slide

74. View Slide

75. Demo time!
    

    View Slide

76. View Slide

77. View Slide

78. View Slide

79. Demo time 2!
    

    View Slide

80. View Slide

81. View Slide

82. Obrigado!
    

    View Slide