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!

davidmelo8@gmail.com