Development of games with html5 and Javascript

1. GAME DEVELOPMENT
IN HTML5 & JAVASCRIPT

2. GAME DEVELOPMENT
IN HTML5 & JAVASCRIPT
7 de Março de 2015
Vítor Julião:
Licenciado Engenharia Informática
ISTEC
Facebook
G+

3. Game Development
• Tentaremos explicar como construir jogos
simples multiplataforma
• As linguagens programação utilizadas são:
html5 e javascript
• E um exemplo poderia ser:
3

4. New Work
4

5. New
Environment
5

6. Inserir áudio numa página:
6

7. Com o elemento <Canvas>
• Pode-se desenhar texto
• Pode-se desenhar gráficos
• Pode ser animado
• Pode ser interativo
• Logo, pode-se jogar jogos....
http://www.html5canvastutorials.com
7

8. Exemplo com um script javascript:
8

9. Mas isto não é uma animação!
Mas para a saber construir, é necessário:
• Saber matemática....
• Trabalhar sobre angulos...
• Trignometria...
• Etc....
• Mas não se assustem!!!
9

10. simpleGame.js
• Cálculos de movimentos
• Aplicação forças vectoriais
• Deslocações, rotações, colisões
• Fácil de aprender
• Multiplataforma
• Free e open source
• Mobile-friendly
10

11. Scene, sprites e o boundary…
• Scene é como se fosse o palco do
jogo, objeto principal
• Touchable
• Height, widh, top and left que
quisermos
• Recebemos os inputs do utilizador
• Com ele iniciamos ou terminamos o
jogo
11

12. Scene, sprites e o boundary…
• Sprites são basicamente os objetos
do jogo
• Devem ser criados como variáveis
globais e iniciados no init()
• Tem que ser associados ao “Scene”
• Podemos alterar a posição,
velocidade, aceleração, ângulo,
rotação
• Pode-se aplicar um vector de força
no sprite
12

13. Scene, sprites e o boundary…
• Boundary: são os limites do jogo
(largura e altura)
• Pode sair dum lado e entrar pelo
outro contrário
• Fica encostado no limite do jogo
• Inverter sentido ao chegar ao limite
do jogo
• Morrer simplesmente
• Ir para o infinito ou mais além...
13

14. Sons…
• Usa o objeto “audio” do html5,
tornando fácil usar sons no jogo
• Criando o objeto Sound pode-se
depois usá-lo
• Como ou sem botão de controle do
som
14

15. Virtual JoyStick
• Suporte aos “mobile devices”, gere
os inputs dos touchscreens
• Recebe a posição do toque(x,y)
• Recebe a distancia entre o toque
inicial e o final(x,y)
• Virtual Keys, pode ser usado para o
joystick funcionar como “arrow
keys”
15

16. Virtual Acelerómetro
• Suporte a deteção de movimentos
• Mede a rotação à volta dos 3 eixos
16

17. Botões
• Criação de botões
• Posição e tamanho ao gosto do
cliente
17

18. Teclado
• Fácil de usar
• Suporta multitoque do teclado
18

19. E como usar o simpleGame.js???
Carregamento das variáveis globais
Montar o “cenário”, dispor os sprites
posições iniciais, desenhar e definir
momento inicial do jogo
Pôr jogo em andamento a 20fps, receber
inputs do user, testar colisões, dar outputs,
etc...
19

20. E como usar o simpleGame.js???
20

21. Vamos ver qualquer coisinha
animada?
21

22. Vamos apanhar moscas??
22

23. Já controlaram um carro voador??
23

24. Joguinho com naves espaciais
24

25. Querem brincar um pouco??
25

26. E sem mexer em código??
É possível criar jogos??
• Construct 2
• GameGuru
• Sploder
• Game Maker Studio
• Unity3D
• Unreal Development Kit
• GameSalad
• Stencyl
• Flixel
26

27. Comparando-os:
27

28. RESOURCES:
• Aharrisbooks.net
• Pixel Prospector
• Html5 Canvas Tutorials
• Canvas Tutorial
• W3Schools
28

29. QUESTIONS?
29