Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Google Santa Tracker: Present Bounce

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".

D34efae5a5bdbb00ce3b300c78cf359a?s=128

14islands

March 05, 2016
Tweet

Transcript

  1. Santa Tracker

  2. None
  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

  7. None
  8. The Tracker

  9. None
  10. None
  11. Olá!

  12. Eu sou o @MarcoBarbosa

  13. Nós somos a @14islands

  14. @marcobarbosa @hjortureh @ffdead

  15. None
  16. Retrospectiva Últimos 3 anos

  17. None
  18. None
  19. Santa Tracker Present Bounce

  20. None
  21. None
  22. None
  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.

  27. None
  28. Shape Shape Shape Fixture Body

  29. None
  30. Protótipos Estudos preliminares

  31. None
  32. None
  33. None
  34. None
  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

  46. None
  47. None
  48. None
  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%
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  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

  63. None
  64. None
  65. SVG

  66. .conveyor .conveyor__belt .conveyor__wheel .conveyor__wheel

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

  68. None
  69. SVG

  70. .spring .spring__top .spring__bottom

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

  72. None
  73. None
  74. None
  75. Demo time!

  76. None
  77. None
  78. None
  79. Demo time 2!

  80. None
  81. None
  82. Obrigado!