quarta-feira, 8 de maio de 2013

Criando uma Bomba Ver. 1


Olá, esse é de fato o primeiro post em relação a desenvolvimento. Nele vamos aprender a criar uma bomba, esse elemento é constantemente usado em jogos, podemos citar o famoso Angry Birds e Commandos 3.


Basicamente o que termos que ter em mente é o seguinte:

1 -  Toda bomba tem o seu campo de ação (a areá que ela pode atingir).
2 - Algumas bombas tem um tempo programado, ou um tempo referente a queima do pavio.

Resolvi dividir esse assunto em três post: Na primeira versão, vamos criar uma bomba capaz de matar os inimigo e que tenha um tempo para explodir. Na segundo, abordaremos uma implementação em relação à distância (quem está mais longe é menos afetado do que o mais perto). E no terceiro, criaremos uma bomba que tenha a trajetória parabólica (balística) que pode ser aplicado a qualquer objeto.





Vamos lá.... Segue uma imagem da bomba para ser usada na nossa implementação.

bomba.png


Primeiramente vamos carregar essa imagem no g_resources.



    name: "bomba",
    type: "image",    
    src: "data/bomba.png" 

}



Feito isso,  pronto!!!

 Brincadeira, temos que declarar o nosso elemento, e ele será um EntityObject.




Agora vem a parte boa, em update vamos fazer:





Variáveis:

this.cont  = contador, percorrerá todo o vetor de elementos obtidos com o getEntiyByName;
this.inimigo = vetor de elementos obtidos com o getEntiyByName;
this.status = especifica o estado da bomba;
this.alcance = distância do alcance da bomba.
this.tempoAtual = obter o tempo corrente;
this.tempoInicial = especifica o tempo inicial;
this.tempoAtual - this.tempoInicial = é o intervalo que a bomba ficará "queimando"

Métodos Usados:

me.timer.getTimer(); = retorna o tempo corrente (variação em milissegundo)
me.game.remove(object) = remove um objeto do game.

Comentário:

Se o estado é igual a "lancado",  verificamos se o tempo atual menos o tempo inicial é maior ou igual ao nosso limite, se sim passamos para o estado "explodindo". Nesse estado, como método getEntityByName() obtemos um vetor com os elementos do tipo "inimigo" da fase. Percorremos o vetor e comparamos a distância da bomba e o imigo, caso esta esteja dentro do alcance eliminamos os inimigos.


É isso, qualquer dúvida  deixa o comentário.




Traduzir para Chinês Traduzir para Espanhol Traduzir para Italiano Traduzir para Françês Traduzir para Inglês Traduzir para Alemão Traduzir para Japonês Traduzir para Russo

terça-feira, 7 de maio de 2013

A MelonJS




O que é o melonJS? Basicamente o mJS é uma engine free para jogos em HTML5. Apresentei uma palestra sobre a mJS no Festival Latino-Americano de Software Livre (Salvador- BA) e estarei falando um pouco do que eu falei lá e, como o slide é cheio de animações vou convertê-lo para vídeo e colocar o link aqui. 

Todos que produzem games para a web ou estão começando, já ouviram falar sobre um tal de HTML5 e certamente sabem da "briga" com o velho Flash. Pois bem, essa tecnologia certamente tirará a hegemonia do Flash por diversos motivos, principalmente relativos à desempenho. Segue um link sobre o assunto: http://www.longtailvideo.com/html5, afinal o assunto aqui é o melonJS. Essa engine foi/está sendo desenvolvida pelo Oliver Brion, que começou fazendo games em HTML5 e percebeu que já tinha uma certa quantidade de módulos que poderia ser compartilhando, acho que aqui cabe um "Obrigado Oliver". Dentro desse contexto, os jogos feitos na melonJS seguem basicamente esse padrão (figura 1). 

figura 1
obs.: Falaremos, mais a frente, um pouco sobre arquivos do tipo tmx.

O ideal é usar vários Js, cada um referente a um elemento do game. por exemplo: imigo.js, persogem.js, cena.js ... e por ai vai.  Nossos elementos são variáveis que estendem  suas propriedades de métodos de tipos como ObjectEntity, ScreenObject ... HUD.



Exemplo:   

var MyObject = me.ObjectEntity.extend({     
// métodos e propriedades  
});

Por esse motivo podemos dividir o nosso game. Como normalmente esse código crescerá muito, fica muito melhor de dá manutenção. Então antes de começar, crie os arquivos que irá precisar. Um projeto inicial é muito importante!




figura 2


Como dito antes, vamos saber o que é esse arquivo tmx:

O TileMap é baseando em XML e é usado pela mJS para, além de exibir as imagens e elementos iniciais (falo isso porque podemos adicionar elementos no próprio código) mapeia a plataforma de colisão. O programa usado para a edição do TileMap é o Tile (irei disponibilizar o link no final do post), é bem intuitivo e trabalha com camadas (para quem tá habituado, sabe que isso é muito importante quanto a facilidade de manusear os elementos). 


Retornando ao melonJS, algumas pessoas podem falar: Mas eu não sei nada de HTML5, deixa isso para lá... depois eu aprendo. Bem, a mJS cria, de certa forma, um nível de abstração (figura 3). Podemos o desenvolvedor trabalhar apenas com JS em cima das classes da engine. 





5 motivos para usar a melonJS

1- A documentação da mJS é muito boa, dá para aprender. 
2- O site tem alguns link de exemplos e projetos no GitHub.
3- Existe  um grupo de discussão sobre a mJS.
4- Existe uma séries de facilidades já implementadas como : andar, pular, a colisão com a plataforma de colisão.
5- Você pode desenvolver para mobiles.


Ok, chegamos ao fim. Não vou fazer um tutorial para os iniciantes pois, já existe um tuto no site oficial e outro no site Tuxtilt.: http://www.tuxtilt.com/criando-jogos-online-para-html5/ que, na minha opinião, são bons e dá para começar! Breve postarei um tuto e partirei do pressuposto que vocês já foram lá no tuto inicial. Qualquer dúvida é só deixar um comentário aqui.


Agora é mão na massa... quero dizer: Mão no teclado para programar e desenvolver as imagens, sons, projeto, documentação e etc.
  

Links importantes:




Traduzir para Chinês Traduzir para Espanhol Traduzir para Italiano Traduzir para Françês Traduzir para Inglês Traduzir para Alemão Traduzir para Japonês Traduzir para Russo

sábado, 4 de maio de 2013

Apresentação




Luis Gustavo Araujo



Licenciado em Computação (IFBA - Campus Santo Amaro) e apaixonado por Games, Luis Gustavo trabalhou com games educativos em 2012  no projeto de extensão no IFBA - Campus Santo Amaro, tendo apresentado trabalhos, sobre os games desenvolvidos no projeto, na V Semana de desenvolvimento sustentável [SEMAD] (Santo Amaro - BA), no II Fórum Mundial de Educação (Florianópolis - SC), na 64º Encontro da Sociedade Brasileira para o Progresso da Ciência [SPBC] (São Luis - MA), no I Fórum Regional das Licenciaturas (Juazeiro - BA), no VIII Seminário de Jogos Eletrônicos e Educação (Salvador - BA). Ministrou o Minicurso "GoToAndPlay: Desenvolvendo Jogos na Plataforma Flash" no I conLOCUS (Santo Amaro - BA) e "Desenvolvimento de Games com HTML5 com o Constric2" (Santo Amaro - BA). Além disso, vem desenvolvendo, durante o curso, pequenos games nas disciplinas como Bingo em Pascal (Algoritmo), Nave em Java -Console (Linguagem OPP), Snake em C (Estrutura de Dados) e Jantar dos Filósofos em Flash (Sistemas Operacionais). Em maio deste ano (2013) apresentou a palestra de tema "melonJS: Um alternativa livre para o desenvolvimento de games em HTML5" no Festival Latino-Americanos de instalação de software livre [FLISOL] (Salvador - BA).Trabalha atualmente com Flash e HTML5 e está desenvolvendo um indie game em HTML5 com a melonJS. 




Luis Gustavo Araujo








Traduzir para Chinês Traduzir para Espanhol Traduzir para Italiano Traduzir para Françês Traduzir para Inglês Traduzir para Alemão Traduzir para Japonês Traduzir para Russo

Translate