Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Física na UI com PhaserJS

329 views

Published on

Slides da apresentação do Front in Rio 2016

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Física na UI com PhaserJS

  1. 1. Efeitos de física na UI com o PhaserJS
  2. 2. Sobre mim David Melo da Luz MBA em Engenharia de Software IBTA – Instituto Brasileiro de Tecnologia Avançada (Atualmente) Pós graduação em Programação e produção de jogos Serviço Nacional de Aprendizagem Comercial – SENAC SP Graduação em Psicologia Pontifícia Universidade Católica de São Paulo (PUC-SP) Últimos trabalhos formais: Consultor em tecnologia | Designer instrucional (Atual) Fundação Vanzolini Designer instrucional Fundação Padre Anchieta (TV Cultura) Consultor Plataforma Geekie
  3. 3. Meus projetos pessoais Plataforma de educação especial Escola de design intrucional
  4. 4. O que é faço hoje exatamente ? Jogos e objetos de aprendizagem para EAD e Elarning (famoso joguinho educativo) Jogo das placas Detran.SP Regaste Solidariuns Secretaria Educação Estado SP joANNINHA SP GameJAM 2015
  5. 5. Porque usar física na interface?
  6. 6. Porque usar física na interface?
  7. 7. Porque usar física na interface? • Interfaces mais realistas / intuitivas
  8. 8. Porque usar física na interface? • Interfaces mais realistas / intuitivas • Feedback visual e imediato
  9. 9. Porque usar física na interface? • Interfaces mais realistas / intuitivas • Feedback visual e imediato • Melhoram a experiência do usuário
  10. 10. Porque usar física na interface? • Interfaces mais realistas / intuitivas • Feedback visual e imediato • Melhoram a experiência do usuário • É mais fácil de implementar
  11. 11. Duas maneiras mais comuns de uso de física na interface
  12. 12. Animações Duas maneiras mais comuns de uso de física na interface
  13. 13. Animações Interações Duas maneiras mais comuns de uso de física na interface
  14. 14. Mas trabalhar com física não é muito difícil?
  15. 15. Meu objetivo nesta conversa rápida Mostrar como usar física hoje (2015) é muito fácil
  16. 16. Exemplos:
  17. 17. Playground http://dynamicsjs.com/ Dynamics JS http://www.phaser.io/ PhaserJS hammerjs.github.io HammerJS (inputs)
  18. 18. PhaserJ S
  19. 19. Sobre a PhaserJS • É um framework para o desenvolvimento de jogos HTML5 (otimizado para mobile). • Possui inúmeros recursos que facilitam a implementação de de funcionalidades complexas no desenvolvimento de jogos (física, partícula, animações e etc). • É gratuito e open source.
  20. 20. O Phaser possui 4 sistemas diferentes de física ArcadeP2 Phisics Ninja Phisics
  21. 21. O Phaser possui 4 sistemas diferentes de física ArcadeP2 Phisics Ninja Phisics Box2D
  22. 22. Exemplo prático rápido! https://github.com/davidluz/frontinrio2015
  23. 23. Estrutura básica de arquivos
  24. 24. Play it!
  25. 25. Obrigado! davidmelo8@gmail.com

×