Blog Patrick Espake

Global Game Jam

Neste evento, artistas, programadores, músicos, designers, estudantes, professores e desenvolvedores de jogos em geral (amadores ou profissionais) reunem-se em locais ao redor do mundo e formam equipes de desenvolvimento. No fim do evento, após colaboraram durante cerca de 40 horas de trabalho, cada equipe terá construído um jogo diferente a partir de um tema comum a todas.

Aquecimento

Nesse sábado vai ocorrer o aquecimento, que são uma série de palestras afim de apresentar tecnologias para o desenvolvimento de jogos e mostrar os jogos já desenvolvidos. Eu vou estar dando uma palestra sobre os meus conhecimentos a respeito da Game Engine Flixel.

*** Programação Principal ***
- 9:00h – 9:30h – Guia de Sobrevivência do Jammer / Bruno Campagnolo – http://www.brunocampagnolo.com
- 9:30h – 10:30h – Scrum para jogos / Rafael Sales – http://www.rafaelsales.com.br/
- 10:30h – 10:40h – Intervalo
- 10:40h – 11:40h – Chien 2D / Paulo Vinícius Radtke – http://code.google.com/p/chien2d/
- 11:40h – 12:40h – Construct / Aduge e Miniboss – http://www.adugestudio.com/blog/ e http://studiominiboss.blogspot.com/
- 12:40h – 13:30h – ALMOÇO NO LOCAL
- 13:30h – 14:20h – Flixel / Patrick Espake – http://blog.patrickespake.com/
- 14:20h – 15:10h – Unity / Bruno Campagnolo
- 15:10h – 15:20h – Intervalo
- 15:20h – 16:10h – Integrando Blender e Unity / Mauricio Cunha – http://www.mcunha98.com/
- 16:10h – 17:00h – XNA / Vinícius Godoy de Mendonça – http://www.pontov.com.br/

*** Em paralelo (na sala ao lado) ***
- Mostra de jogos produzidos em Game Jams;
- Desafios para jammers.

Flixel é uma game engine escrita em ActionScript 3, facilita bastante a construção de alguns tipos e formatos de jogos, especialmente jogos de plataforma. Já possuí classes e métodos para lidar com:

• Texto;
• Colisão;
• Imagens
• Efeitos
• Mapa;
• Pontos;
• Estados;
• Fases;
• Inimigos;
• Vidas;
• Câmera
• e muitas outras coisas.

Esse post tem o objetivo de construir um Hello World, esse exemplo será o passo inicial para a construção de jogos mais complexos no futuro.

Em primeiro lugar você precisa conhecer o site do Flixel: http://www.flixel.org lá você encontra a game engine para download, fórum, wiki e outros games já desenvolvidos pela comunidade.

Primeiro passo: Instalação do FlashDevelop

Faça o download do FlashDevelop, nós vamos usar ele como IDE de desenvolvimento. Para fazer o download: http://www.flashdevelop.org/downloads/releases/FlashDevelop-3.2.1-RTM.exe.
Faça a instalação seguindo o padrão next next finish be happy! :)

Segundo passo: Flex SDK

Para construir o jogo nós precisamos do Flex SDK, que são as bibliotecas padrões do ActionScript 3, a game engine Flixel utiliza essas bibliotecas internamente e você provavelmente vai precisar de alguma delas para as customizações ou necessidades do seu jogo.
Faça o download: http://opensource.adobe.com/wiki/display/flexsdk/download?build=4.1.0.16248&pkgtype=1 e descompacte em algum diretório da sua preferência, daqui a pouco nós vamos usar ele.

Terceiro passo: Download do Flixel

Vamos precisar dele para a construção do jogo, ele na verdade é um framework de desenvolvimento de jogos. Já possui muitas bibliotecas prontas que facilitam e aceleram o desenvolvimento. Faça o download em: http://github.com/AdamAtomic/flixel/archives/master e descompacte também em algum diretório da sua preferência.

Criando um Novo Projeto

• Abra o FlashDevelop;
• Clique no menu “Project”;
• Clique na opção “New Project”;
• Em “Installed Templates” selecione “AS3 Project”;
• Em “Name:” digite HelloWorld;
• Marque o checkbox na opção “Create directory for project”;
• Clique no botão “Ok”.

Configurando o Flex SDK e Flixel no Projeto

• Clique no menu “Project”;
• Clique na opção “Properties…”;
• Clique na aba “Compiler Options”;
• No campo “Custom Path to Flex SDK” clique no botão “…” e selecione o diretório onde você descompactou o Flex SDK;
• Clique na aba “Classpaths”;
• Clique no botão “Add Classpaths…” e selecione o diretório onde você descompactou o Flixel, mas você precisa entrar na pasta e selecionar a pasta “org”;
• Clique no botão “Ok”.

Programando o HelloWorld

HelloWorld.as

• No diretório src do projeto existe o arquivo Main.as, apague esse arquivo;
• Clique com o botão direito do mouse na pasta “src” depois “add” e “New Class…“;
• Digite para o campo “Name:” o valor: HelloWorld.

Será gerando um código inicial como esse:

package  
{
	/**
	 * ...
	 * @author Patrick Espake
	 */
	public class HelloWorld
	{
 
		public function HelloWorld() 
		{
 
		}
 
	}
 
}

Vamos alterar para ficar dessa forma:

package  
{
	// Importa a game engine Flixel
	import org.flixel.*;
 
	// Tamanho da tela e cor de fundo
	[SWF(width = "640", height = "480", backgroundColor = "#000000")]
 
	// Classe HelloWorld
	// herda a classe FlxGame para incorporar as funcionalidades do Flixel
	public class HelloWorld extends FlxGame
	{
		// Método construtor
		public function HelloWorld() 
		{
			// Tamanho da área útil
			// classe inicial a ser chamada depois do jogo carregar
			// e nível de zoom
			super(640, 480, PlayState, 1);
		}	
	}
}

Através dos comentários acima você deve ser capaz de entender a maioria do código, basicamente nós definimos a dimensões do swf que será gerado, a cor de fundo, e qual classe de estado deve ser chamada após o jogo terminar de carregar, nesse exemplo PlayState que não criamos ainda.

E importante notar que nós herdamos no código a classe FlxGame, através desse herança podemos adquirir métodos e atributos da game engine Flixel.

Agora precisamos dizer para o FlashDevelop sempre compilar essa classe que acabamos de criar, clique com o botão direito do mouse sobre a classe “HelloWorld.as” e clique na opção “Always Compile“.

PlayState.as

Crie uma nova classe no diretório src chamada PlayState.

Altere o seu código para ficar da seguinte forma:

package  
{
	// Importa a game engine Flixel
	import org.flixel.*;
 
	// Classe inicial do jogo
	// herda de FlxState
	public class PlayState extends FlxState
	{
		// Método do Flixel
		// usado para criar os elementos do jogo
		override public function create():void
		{
			// Criação do texto com o Hello World!
			var t1:FlxText = new FlxText(0, 0, FlxG.width, "Hello World!");
			t1.alignment = "center";
			t1.size = 48;
 
			// Adiciona o texto na tela
			add(t1);
		}
	}
}

A classe PlayState representa o estado de jogo do Flixel, a game engine possui uma máquina de estados, você pode ter vários estados, por exemplo: menu, créditos, primeira fase, segunda fase, game over e vitória. O Flixel já possui alguns métodos para realizar facilmente essa transição de estados.

Nessa classe nós herdamos de FlxState que possui vários métodos e atributos para lidar com estados do jogo, através do método create é criado os elementos do jogo, nesse exemplo simples apenas um texto com “Hello World!”.

Você pode pressionar a tecla F5 para testar, caso você tenha o Flash Debugger instalado ele já vai abrir a tela com o jogo, caso contrário você terá que ir na pasta bin e abrir o arquinvo index.html no navegador.

Na página do Google de hoje (21 de maio de 2010) tem um doodle do Pacman – e o mais interessante disso: é jogável! E é o primeiro doodle jogável do Google.

Sendo um geek, eu decidi dar uma olhada no código-fonte para descobrir como o Google fez isso.

Eu não fiz engenharia reversa do código inteiro, eu só queria ter uma ideia geral de como eles tinham feito isso. Parece-me que o Google, afinal, tem um código extramamente conciso e eficiente para resolver muitos dos seus problemas.

Assim, em primeiro lugar eles têm um elemento div que contém a área do jogo:

<div id=lga>
  <a href="/search?q=PAC-MAN+30th+Anniversary&ct=pacman10-hp&oi=ddle" id="dlink">
  </a>
  <div id=logo style="width:554px;height:186px;background:black url(logos/pacman10-hp.png) 0 0 no-repeat;position:relative;margin-bottom:9px" title="PAC-MAN's 30th Birthday! Doodle with PAC-MAN™ & ©1980 NAMCO BANDAI Games Inc.">
    <div id="logo-l" style="width:200px;height:2px;left:177px;top:157px;background:#990;position:absolute;display:none;overflow:hidden">
      <div id="logo-b" style="position:absolute;left:0;background:#ff0;height:8px;width:0">
      </div>
    </div>
  </div>
  ...
</div>

E depois há o script mágico:

<script>
    google.pml = function() {
        function d(a) {
            if (!google.pml_installed) {
                google.pml_installed = true;
                if (!a) {
                    document.getElementById("logo").style.background = "black";
                    window.setTimeout(function() {
                        var b = document.getElementById("logo-l");
                        if (b) b.style.display = "block"
                    }, 400)
                }
                a = document.createElement("script");
                a.type = "text/javascript";
                a.src = "logos/js/pacman10-hp.2.js";
                google.dom.append(a)
            }
        }
        function e() {
            if (document.f && document.f.btnI) document.f.btnI.onclick = function() {
                typeof google.pacman != "undefined" ? google.pacman.insertCoin() : d(false);
                return false
            }
        }
        if (!google.pml_loaded) {
            google.pml_loaded = true;
            window.setTimeout(function() {
                document.f && document.f.q && document.f.q.value == "" && d(true)
            }, 1E4);
            e();
            google.rein && google.rein.push(e);
            google.dstr && google.dstr.push(function() {
                google.pacman && google.pacman.destroy();
                if (google.pml_installed) {
                    for (var a = (document.getElementById("xjsc") || document.body).getElementsByTagName("script"), b = 0, c; c = a[b++];) c.src.indexOf("/logos/js") != -1 && google.dom.remove(c);
                    google.pml_installed = false
                }
            });
            google.pacManQuery = function() {
                google.nav(document.getElementById("dlink").href)
            }
        }
    };
</script>

O que parece estar fazendo é o seguinte:

• Define o estilo CSS e propriedades para vários elementos HTML jogáveis;
• Carrega o código Javascript do Pacman: http://www.google.com/logos/js/pacman10-hp.2.js (nota: esse link era válido quando eu carreguei isso em 21 de maio de 2010, o dia do doodle, mas pode ser removido mais tarde. Depende do Google, e eu não quero guardar uma cópia offline por razões legais e outros.);
• Quando o jogo é terminado, redireciona para o link do elemento a id=”dlink”, e basicamente procura pela frase “PAC-MAN 30th Anniversary”;
• Responde ao botão “Insert Coin” quando é pressionado e reinicia o jogo.

No estilo Google: realmente puro e eficiente!

Eu usei dois recursos online para formatar o HTML e Javascript do Google melhor:

• Cool HTML formatter
• Online Javascript beautifier

Esse post é uma tradução do post: http://sumanrs.wordpress.com/2010/05/21/googles-pacman-doodle-reverse-engineering-101/

Através da minha bolsa de iniciação científica no TECPAR, eu pude aprender muita coisa desde o ano passado até agora. Vários novos conhecimentos foram adquiridos principalmente na área de desenvolvimento de jogos, inteligência artificial aplicada a jogos e a web.

Um dois primeiros frutos do meu trabalho foi o Jogo Galaxis Farm, onde eu fui responsável pela programação do jogo, atualmente o jogo está disponibilizado no endereço http://www.galaxisfarm.com.

Eu fico muito contente pela recupersão na mídia do jogo:

09/05/2010 – Pirataria é inimiga dos produtores de games – http://www.parana-online.com.br/canal/tecnologia/news/445889/?noticia=PIRATARIA+E+INIMIGA+DOS+PRODUTORES+DE+GAMES

29/04/2010 – Jogo para entender o funcionamento de uma fazenda leiteira – http://www.odiariomaringa.com.br/noticia/241672

28/04/2010 – Jogo eletrônico ajuda a entender funcionamento de fazenda leiteira – http://www.aen.pr.gov.br/modules/noticias/article.php?storyid=56025&tit=Jogo-eletronico-ajuda-a-entender-funcionamento-de-fazenda-leiteira&ordem=170000

Ainda não temos definido qual será o futuro do Jogo Galaxis Farm, por enquanto ele está na versão beta. Nas últimas semanas nós começamos a trabalhar no próximo jogo o Galaxis Dream, que tem o objetivo da difusão das boas práticas agropecuárias. Provavelmente no futuro irei escrever mais sobre o jogo Galaxis Dream.

Assim como o Galaxis Farm, o Galaxis Dream também tem o seu código fonte open source no endereço: http://code.google.com/p/galaxisdream/

Durante aproxidamente três meses eu estive trabalhando como programador do jogo Galaxis Farm, ele está disponível no endereço: http://www.galaxisfarm.com.

Esse foi o meu primeiro grande jogo, essa consideração é porque diversas pessoas estiveram presentes no processo:

• Eu – Programação;
• Diego Cabral – Ilustrações e design de personagens;
• Bruno Campagnolo de Paula – Coordenação e game design;
• Roberta Zuge – Consultoria veterinária.

Até o presente momento eu obtive um grande aprendizado em todo o processo de desenvolvimento, além dos fatores tecnológicos, os fatores científicos, de pesquisa, colaboração e concepção foram fortemente abordados.

Agora recebi a boa notícia que o jogo foi selecionado para participar da mostra de jogos eletrônicos que acontecerá no VI Seminário Jogos Eletrônicos, Educação e Comunicação – construindo novas trilhas, na Universidade do Estado da Bahia (UNEB). A apresentação do jogo será realizada no dia 06/05, com início às 12h e término às 12h20.

Mais informações: http://realidadesintetica.com/seminario/

Parabéns a todos os envolvidos.