O documento descreve o desenvolvimento de um jogo 2D usando a biblioteca melonJS. Apresenta conceitos como camadas, objetos, animações e funções para controle do personagem principal. Explica também a criação de fontes bitmap e links relevantes para aprendizado adicional sobre a melonJS.

2. Licenciando em Computação pelo IFBA – Campus Santo
Amaro,
Bolsista de Iniciação Científica (PIBIC),
Indie Game Developer.

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. › Email:
hiperbyte@ymail.com
luisaraujo.ifba@gmail.com
› Blog :
http://gamedeveloperbox.blogspot.com