Apresentação da palestra de Introdução a Desenvolvimento de Jogos HTML 5 para Windows 8 com Html5Quintus minha e do André Castro

1. Desenvolvendojogoshtml5paraoWindows8
u d h j l s U R

2. Charles Fortes
André Castro

3. Conceitos básicos de programação
uDesenvolvimento de jogos html5 para Windows 8

4. UI – User Interface
uDesenvolvimento de jogos html5 para Windows 8
A interação entre usuário e sistema é feita pela UI, que pode
ser gráfica ou de console.

5. Coordenadas
uDesenvolvimento de jogos html5 para Windows 8
Todo elemento presente na interface é
orientado no plano cartesiano, sendo X e Y
no plano 2D e com o acréscimo de Z e da
rotação quando 3D
x:0 y:0 z:0
x:800 y:600 z:0
x:800 y:600 z:10

6. Elementos de interação
uDesenvolvimento de jogos html5 para Windows 8
A interação com do usuário com o sistema é composta por elementos que podem ser um
botão, um label, uma entrada de dados, etc...

7. Elementos de interação
uDesenvolvimento de jogos html5 para Windows 8
Além disto, interagimos com a interface através dos mais diversos
dispositivos de entrada e saída, como o teclado, mouse, kinect, etc..

8. Testes condicionais e Iterações (Loops)
uDesenvolvimento de jogos html5 para Windows 8
Durante a execução do programa, diversas informações
devem ser testadas de forma que a aplicação tenha um
comportamento específico diante de um contexto
If (Object.Type == Enemy){
KillEnemy();
} else {
GoAway();
}

9. Testes condicionais e Iterações (Loops)
uDesenvolvimento de jogos html5 para Windows 8
Além disto, existem condições de nas quais é necessário
que um trecho de código seja repetido uma série de vezes.
While (Game.Status != Paused){
MoveAllEnemies();
}

10. Funções
uDesenvolvimento de jogos html5 para Windows 8
Os trechos de código são organizados em funções para que possam ser
reaproveitados e para tornar a manutenção mais fácil
function CheckCollision (e) {
if (e.Type == Enemy){
YouLose();
}
}

11. Eventos
uDesenvolvimento de jogos html5 para Windows 8
Os componente podem emitir sinais ao sistema, por exemplo um botão ao
ser pressionado dispara o evento onCLick, que é tratado por uma função
registrada especificamente para isto.

12. Callback
uDesenvolvimento de jogos html5 para Windows 8
Estas funções são registradas na forma para serem chamadas num processo
que chamamos de CallBack.

13. Objetos
uDesenvolvimento de jogos html5 para Windows 8
No processo que veremos a seguir, lideremos com uma série de
elementos que são tratados como objetos (assim como na POO).
Este objeto pode ser um personagem, um elemento do cenário, qualquer
coisa que tenhamos que manipular a grosso modo.

14. HTML5 - Quintus
dDesenvolvimento de jogos html5 para Windows 8

15. Desenvolvimento de jogos html5 para Windows 8d

16. Desenvolvimento de jogos html5 para Windows 8d

17. Fases - Levels
hDesenvolvimento de jogos html5 para Windows 8

18. Scenas
Desenvolvimento de jogos html5 para Windows 8h
Os elementos dos jogos são organizados em camadas, pra facilitar a interação,
cenários, elementos animados, tesouros, etc...

19. Scenas
Desenvolvimento de jogos html5 para Windows 8h
Uma cena pode ser tratado como um agrupador de elementos que
compõem uma fase do jogo, considerando câmera, personagens
envolvidos, etc...

20. Sprites
Desenvolvimento de jogos html5 para Windows 8j
Os sprites representam os estados possíveis de um elemento do jogo, seja
ele um personagem, um tesouro, ou qualquer outro elemento que não
represente o cenário.

21. Sprites
Desenvolvimento de jogos html5 para Windows 8j
Podem por exemplo representar a
animação de um personagem
parado, correndo, pulando e tudo
mais que possamos interagir.

22. Física e Colisão
UDesenvolvimento de jogos html5 para Windows 8

23. Física de jogos
Desenvolvimento de jogos html5 para Windows 8U
Para que os elementos do jogo se comportem de maneira correta, os jogos precisam
utilizar regras de física que englobam a gravidade, ação e reação e tudo mais...

24. Colisões
Desenvolvimento de jogos html5 para Windows 8U
Existem muitos elementos controlados pelos motores de física de um jogo, mas vários
deles podem ou devem ser tratados pelo desenvolvedor, que é o caso das colisões do
personagem e dos inimigos.

25. Colisões
Desenvolvimento de jogos html5 para Windows 8U
Uma colisão é literalmente o ato de um objeto se chocar com
outro. Quando se personagem “colide” com o chão pelo efeito da
gravidade, o motor de física providencia para que ele não caia, mas
se o terreno for inclinado, ele escorregará.

26. Colisões
Desenvolvimento de jogos html5 para Windows 8U
Mas colisões com outros objetos que não são do cenário devem ser tratados pelo desenvolvedor,
onde ele verifica se o personagem colidiu com um inimigo, um elemento que possa mata-lo, ou com
troféu por exemplo
Isto é feito registrando CallBacks para os eventos de colisão.

27. Elementos do Jogo
jDesenvolvimento de jogos html5 para Windows 8

28. Tiles
Desenvolvimento de jogos html5 para Windows 8
Consiste em dividir a tela em vários pedaços (como um grande tabuleiro de Xadrez) e
fazer com que cada espaço fosse preenchido por uma parte do gráfico.
j

29. Viewport
Desenvolvimento de jogos html5 para Windows 8
Esse recurso divide a tela em várias partes, sendo que cada
parte mostra as imagens de um determinado ponto de vista.
h

30. Exemplo Completo

31. Dúvidas?
slides em http://www.slideshare.net/charleswellingtonfortes
André castro: http://www.100loop.com/author/alrcastro/
Charles Fortes: http://www.100loop.com/author/chalk/
@CharlesFortes
RDesenvolvimento de jogos html5 para Windows 8