física na ui com phaserjs
TRANSCRIPT
Efeitos de física na UI com o PhaserJS
Sobre mimDavid 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 instrucionalFundação Padre Anchieta (TV Cultura)
Consultor Plataforma Geekie
Meus projetos pessoais
Plataforma de educação especial Escola de design intrucional
O que é faço hoje exatamente ?
Jogos e objetos de aprendizagem para EAD e Elarning(famoso joguinho educativo)
Jogo das placas Detran.SP Regaste SolidariunsSecretaria Educação Estado SP joANNINHA
SP GameJAM 2015
Porque usar física na interface?
Porque usar física na interface?
Porque usar física na interface?
• Interfaces mais realistas / intuitivas
Porque usar física na interface?
• Interfaces mais realistas / intuitivas• Feedback visual e imediato
Porque usar física na interface?• Interfaces mais realistas / intuitivas• Feedback visual e imediato• Melhoram a experiência do usuário
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
Duas maneiras mais comuns de uso de física na interface
Animações
Duas maneiras mais comuns de uso de física na interface
Animações Interações
Duas maneiras mais comuns de uso de física na interface
Mas trabalhar com física não é muito difícil?
Meu objetivo nesta conversa rápida
Mostrar como usar física hoje (2015) é muito fácil
Exemplos:
Playground
http://dynamicsjs.com/Dynamics JS
http://www.phaser.io/
PhaserJShammerjs.github.ioHammerJS (inputs)
PhaserJS
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.
O Phaser possui 4 sistemas diferentes de física
Arcade P2 Phisics Ninja Phisics
O Phaser possui 4 sistemas diferentes de física
Arcade P2 Phisics Ninja Phisics
Box2D
Exemplo prático rápido!
https://github.com/davidluz/frontinrio2015
Estrutura básica de arquivos
Play it!
Obrigado!