Licenciando em Computação no IFBA Campus Santo Amaro e bolsista do PIBID. Desenvolvedor de games que usa as bibliotecas melonJS e Tiled para criar jogos 2D no navegador, com recursos como mapas, objetos, animações, colisões e câmera que acompanha o personagem. Fornece links para download das bibliotecas e seu contato para quem tiver interesse.

2.  Licenciando em Computação – IFBA Campus
Santo Amaro;
 Bolsista do Programa Institucional de Bolsa de
Incentivo à docência (PIBID);
 Desenvolvedor de Games.

3. Imagem obtida em http://www.flash-to-html5.net/

5. Imagens obtidas em http://www.melonjs.org e http://retrofishsta.blogspot.com.br

6. index.html
main.js
melonjs.js
mapa.tmx
index.html
main.js
melonjs.js
mapa.tmx arq1.js
arq2.js
login.php

7.  Disponível em:
◦ melonJS (versão 0.9.6)
 http://www.melonjs.org/download.html
◦ Tiled (Linux/Windows/Mac)
 http://www.mapeditor.org/download.html

8. CAMADAS!!!

9. <?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" orientation="orthogonal" width="100" height="15" tilewidth="32" tileheight="32" backgroundcolor="#ff65cf">
<tileset firstgid="1“ name="colisao” tilewidth="32” tileheight="32">
<image source="tileset/colisao.png" width="160" height="32"/>
<tile id="0">
<properties>
<property name="type" value="solid"/>
</properties>
</tile>
...
<objectgroup name="rubis" width="100" height="15">
<object name="jujuba" x="664" y="201" width="47" height="42">
<properties>
<property name="image" value="jujuba"/>
<property name="spritewidth" value="32"/>
</properties>
<ellipse/>
</objectgroup>
Referente ao Tiled
Referente à Imagem
carregada
Referente à Camada
Referente ao Objeto
Na Camada

10. canvas
audio
video

11. Funções Padrões
da jsApp
g_ressources?
Carregando a
loaded
Iniciando
Vídeo e Audio
Screen
inicial
Configurando
os estados.
MenuScreen e
PlaySrceen são
objetos do tipo
Screen
definidos no
nosso código.
Função que
será chamada
quando ocorrer
um pause (
quando o
canvas perde o
foco)
Carregando o
estado Menu,
definido
anteriormente
Configurando
os Botões
jsApp é
chamada no
html

12. mapa.tmx
Pasta com
Imagens

13. PlayScreen do
Tipo Screen
Funções
padrões do
Screen
Construtor
Carregando e
Desenhando
uma Imagem
Função chamado
quando a Screen é
Destruída

14. Pode ser do Tipo:
CollectableEntity
Configurando
Velocidade
(andar, pulo)
Configurando
animação
(true) anda para esquerda
(false) anda para a direita
Câmera
acompanha o
personagem
Retorna true se a
tecla cadastrada foi
pressionada
Repeat Game
Parar o
personagem
Pulo normal,
pode-se usar
forceJump() para
pulos no “ar”.

15.  Entendendo o Seu Funcionamento
name: “NomeFont", type: "image", src: "data/font/Font01.png"}
font = new me.BitmapFont(“NomeFont”, tamanho, zoom);
Parte da Imagem Font01.png
 Criando um BitmapFont
“AB CDEFGHIJ....”

17.  Links:
◦ Site Principal:
 http://www.melonjs.org
◦ Grupo Google:
 “melonJs”
◦ Jogos no GitHub:
 http://www.melonjs.org/gallery
◦ GameBoxDeveloper
 http://gameboxdeveloper.blogspot.com

19. ◦ Meu e-mail:
luisaraujo.ifba@gmail.com
◦ E-mail Grude Jogos:
grudejogos@gmail.com
◦ Blog :
http://gameboxdeveloper.blogspot.com