Autor: Felipe Do E. Santo

Professor, Mozilla Tech Speaker, Mozilla Rep, Desenvolvedor Web e Gamer nas horas vagas.

HardGame 1# – Como começar um game?

Tudo certo galera?
Nada melhor que um bom projeto para começar a semana!

Durante algumas semanas vamos desenvolver juntos um game em HTML5. Nesse tempo vou passar para vocês diversos conceitos e algumas dicas de ferramentas para facilitar esse processo.
Quando pensamos em desenvolver qualquer coisa, em primeiro lugar, precisamos definir bem os requisitos e buscar os recursos. Sendo assim vamos as dicas:

1. Como será o jogo?
A etapa de planejamento é muito importante pois aqui vamos definir o conceito do jogo a ser criado. Para facilitar vamos usar uma mecânica de game já bastante utilizada, assim ganhamos tempo, pois as regras e o funcionamento do jogo já estão bem definidos. Iremos montar um jogo nos modelos do Space Invaders do Atari.
Para quem não lembra ou não conhece:
http://www.youtube.com/watch?v=FYUFN0Ed9wk

2. Onde conseguir os recursos?
Como normalmente nossos conhecimentos na parte gráfica são limitados precisamos contornar essa questão. E nada melhor que a internet para suprir essa necessidade de gráficos para o game.
Uma dica de site para esse tipo de conteúdo e com conteúdo Free é o:
http://hasgraphics.com/free-sprites/

E para o nosso game iremos utilizar os seguintes gráficos:
http://www.lostgarden.com/2005/03/download-complete-set-of-sweet-8-bit.html

Por fim para a programação do jogo propriamente dito iremos utilizar uma ferramenta para o desenvolvimento que facilita muito todo processo. Mesmo sem conhecimento técnico e de linguagens de programação qualquer pessoa pode desenvolver jogos utilizando essa ferramenta.

A ferramenta em questão é o Construct 2 (https://www.scirra.com/) a empresa fornece uma versão Free que por enquanto atende perfeitamente a nossa necessidade.
O Construct é uma ferramenta para criação de jogos no melhor estilo arraste e solte, toda a parte de programação é baseada em eventos tornando muito fácil o desenvolvimento para iniciantes e facilitando muito o trabalho dos mais experientes.
Depois do pronto o game pode ser exportado para as mais diversas plataformas incluindo Android e iOS.

Por enquanto é isso galera, na próxima semana vou apresentar melhor o Construct2 e vamos iniciar o processo de desenvolvimento.

Abraços e até a próxima!

Imagens ON e OFF – Tutorial

Tudo certo galera?

O primeiro tutorial do hardcódigo acabou de sair!
Coisa bem simples mas que pode ajudar a acelerar o desenvolvimento quando o site fizer uso do efeito de imagem on e off.

Nesse tutorial vamos usar o Jquery que você pode baixar no link:
http://code.jquery.com/jquery-1.9.1.min.js

Para quem não conhece o Jquery é uma biblioteca que reúne diversos recursos que são uma mão na roda para todo desenvolvedor WEB.

E então vamos ao código:

<!-- Biblioteca Jquery -->
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    // comando para inicialização do código após o carregamento do HTML
    $(document).ready(function(){
        
		// Evento acionado quando o mouse entrar em uma classe on_off
		$(".on_off").mouseenter(function(){
			// Define a variável img como o objeto que o mouse está em cima atualmente
			img = this;
			// O comando replace() substitui o texto de _off por _on realizando a troca da imagem
			img.src = img.src.replace(/_off\./, "_on.");
		});
        
		// Evento acionado quando o mouse sair de uma classe on_off		
		$(".on_off").mouseleave(function(){
			// Define a variável img como o objeto que o mouse está em cima atualmente
			img = this;
			// O comando replace() substitui o texto de _on por _off realizando a troca da imagem			
			img.src = img.src.replace(/_on\./, "_off.");
		});		
	});
</script>

<img src="botao_off.jpg" alt="Botão" width="181" height="181" class="on_off" />
<br />
<img src="like_off.jpg" alt="Botão 2" width="181" height="181" class="on_off" />

No caso todas as imagens com recurso de on e off devem ter a classe “on_off” e no nome devem ser identificadas com o nome_on e nome_off.

Na linha “$(document).ready(function(){” iniciamos o jquery informando que o código deve ser executado após o carregamento do HTML.

Logo após isso definimos 2 eventos:
“$(‘.on_off’).mouseenter()” e “$(‘.on_off’).mouseleave()”.

E usando o codigo:
img = this;
img.src = img.src.replace(/_off\./, “_on.”);
E
img = this;
img.src = img.src.replace(/_on\./, “_off.”);

Trocamos a url da imagem substituindo o texto de _on e _off e isso faz a mudança da imagem.

Simples, prático e fácil!

Link para download dos arquivos do tutorial:
https://www.dropbox.com/s/bxayhex0r0yxkxc/tutorial_1.zip

Valeu e até a próxima!
Dúvidas e sugestões fiquem a vontade para comentar!