O documento discute como usar efeitos de física na interface do usuário com o framework PhaserJS. Ele apresenta o autor e seus projetos, explica porque usar física na interface torna a experiência do usuário mais realista e intuitiva, descreve animações e interações como duas maneiras comuns de usar física, e fornece um exemplo prático usando PhaserJS.

1. Efeitos de física na UI com o PhaserJS

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. Meus projetos pessoais
Plataforma de educação especial Escola de
design intrucional

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. Porque usar física na interface?

6. Porque usar física na interface?

7. Porque usar física na interface?
• Interfaces mais realistas / intuitivas

8. Porque usar física na interface?
• Interfaces mais realistas / intuitivas
• Feedback visual e imediato

9. Porque usar física na interface?
• Interfaces mais realistas / intuitivas
• Feedback visual e imediato
• Melhoram a experiência do usuário

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. Duas maneiras mais comuns de uso de física na
interface

12. Animações
Duas maneiras mais comuns de uso de física na
interface

13. Animações Interações
Duas maneiras mais comuns de uso de física na
interface

14. Mas trabalhar com física não é muito
difícil?

15. Meu objetivo nesta conversa
rápida
Mostrar como usar física hoje (2015) é muito fácil

16. Exemplos:

17. Playground
http://dynamicsjs.com/
Dynamics JS
http://www.phaser.io/
PhaserJS
hammerjs.github.io
HammerJS (inputs)

18. PhaserJ
S

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. O Phaser possui 4 sistemas diferentes de física
ArcadeP2 Phisics Ninja Phisics

21. O Phaser possui 4 sistemas diferentes de física
ArcadeP2 Phisics Ninja Phisics
Box2D

22. Exemplo prático rápido!
https://github.com/davidluz/frontinrio2015

23. Estrutura básica de arquivos

29. Play it!

30. Obrigado!
davidmelo8@gmail.com