Rogério Lino » Jogos

Javascript Game Engine for HTML5 Canvas

Rogério Alencar Lino Filho — Thu, 06 May 2010 19:04:35 +0000

Comecei escrever um pequeno projeto para facilitar a criação de jogos em Javascript utilizando HTML5 Canvas para isso. Baseado em scenegraph podendo criar nós dependentes, relativos ao nó pai. Por enquanto a estrutura da engine é composta por:

Canvas: para encapsular a tag canvas, pegando automaticamente o context e fornecendo algumas funções a mais.

Game: o jogo em sí, possui uma ou muitas cenas (Scene). Contém o loop principal para atualizações do canvas. Necessita de uma instância do Canvas.

Scene: deve ser estendida para criar cenas customizadas, deve implementar o método update(interval).

CanvasNode: um nó do grafo, possui as coordenadas e ângulo de rotação do elemento no canvas.

CanvasNodeGroup: um grupo de nós. Estende CanvasNode.

Graphics: um nó “printável”, quem for estendê-lo deve implementar o método draw(). Possui como subclasses: Rectangle, Triangle, Circle, Text, Image2d e Line.

GraphicsGroup: estende CanvasNodeGroup, possui um grupo de graphics. Scene é um GraphicsGroup.

Os próximos passos serão a implementação de TileMap, Scene Intro, Menu e botões. Agora é só aguardar até o próximo exemplo.

[update 2010-05-06]
Added mouse and button support.
See example above.
[/update]

[update 2010-05-06]
Examples in http://mangame.rogeriolino.com/
[/update]

[update 2011-11-11]
Source now available in GitHub!
[/update]

Jogos: Pathfinding

Rogério Alencar Lino Filho — Mon, 08 Feb 2010 19:15:33 +0000

É inevitável o estudo e a aplicação de IA (Inteligência Artificial) em jogos nos quais possuem inimigos (personagens) não controlados pelo jogador (humano). E o problema mais comum é encontrar uma maneira eficaz de delimitar áreas no cenário aonde o personagem pode se locomover sem aparentar ser um robô seguindo um rastro, ou seja, mais próximo possível da realidade.

Normalmente visualizamos o problema como um grafo e nas arestas distribuimos valores que medem o custo entre um nó e outro. E para saber qual o melhor caminho (de menor custo) utilizamos de algum algoritmo de caminho mínimo. Dentre os algoritmos existentes, os mais famosos são: A* (A Estrela), Algoritmo de Dijkstra, Branch-and-Bound e etc.

Não vou analisar a efeciência do algoritmo utilizado, já que o objetivo é mostrar o problema ao utilizar grafos e uma possível solução (já aplicada em vários jogos).

Esse grafo delimitando a trajetória que pode ser percorrida pelo cenário é denominado waypoint graphs. O termo waypoint ficou bastante conhecido no mod Counter-Strike, no qual para poder adicionar bots aos mapas para jogar “sozinho” era necessário antes percorrer todo o mapa criando marcaçöes (waypoints) que seriam utilizadas pelos bots para se locomoverem. Abaixo segue um vídeo mostrando alguns bugs envolvendo caminhos em jogos famosos:

Evitando o problema

Uma forma de evitar esse problema é utilizando polígonos para delimitar aonde os personagens podem andar. Venha as imagens abaixo:

Cenário marcado com waypoints

Cenário marcado com Navegation Mesh

O Navegation Mesh nada mais é que um grafo aonde cada nó é representado por um polígono, e ao invés de buscar por um ponto no cenário que se pode andar, verifica se o ponto do jogador está contido no polígono. Levando em consideração que os mesmos algoritmos utilizados com os waypoints podem ser utilizados para o navegation mesh efetuando pequenas modificações. Obviamente dessa forma será um pouco mais custosa (custo do algoritmo), em contrapartida, pode conseguir economizar uma quantidade enorme de waypoints.

Waypoints: Saindo do ponto A para o ponto B

NavMesh: Saindo do ponto A para o ponto B

Também nem sempre essa solução será a melhor para todos os tipos de jogos, é preciso antes de qualquer coisa, analisar com calma quais são as necessidades para não ter que utilizar um canhão para matar uma mosca.

Alguns jogos que utilizam navigation meshes

Algumas parte desse texto e imagens foram retirados do artigo publicado no site ai-blog e nesse mesmo blog há outra solução e um conteúdo muito mais robusto.

Javascript: Games

Rogério Alencar Lino Filho — Tue, 02 Feb 2010 14:03:47 +0000

Conforme a evolução dos browsers e consequentemente das suas engines de javascript, hoje é possível encontrarmos diversas API/Engines dessa linguagem de script. E um tipo de engine que vem crescendo nessa linguagem é a de jogos.

O que antes precisariámos de um plugin adicional – Flash Player e/ou Java Applet – consumindo mais memória e processamento, podemos agora nos divertir com jogos rodando nativamente no browser.

É possível encontrar na web jogos desde os simples e clássicos Paciência (Solitaire), Tetris, Resta Um (Peg), passando por clássicos não tão simples como Mario Kart, até jogos mais complexos como Shadow of Time 4 e Crystal Galaxy.

Segue abaixo alguns jogos:

Javascript Game Engines:

gameQuery: é um plugin do famoso jQuery, que fornece animação de sprites multi camadas, hierarquia de sprite (agrupamentos), detecção de colisões, dentre outras funcionalidades. Para visualizar alguns demos de jogos desenvolvidos por essa engine é só clicar aqui.

GameJS: inspirado nos códigos javascript da ExtJS e com a ideia de portar a facilidade de criar jogos da XNA Game Framework da Microsoft. No site do projeto possui um jogo demo chamado Jetris.

EffectGames: consiste na verdade em um site que provê ferramentas online e gratuitas para desenvolvimento, hospedagem e compartilhamento de jogos. Há uma wiki contendo o passo-a-passo de como utilizar as ferramentas através do Getting Started Guide. E também há a documentação da API fornecida pelo site. Na própria página principal você irá encontrar os demos.

Render Engine: engine cross-browser, opensource, tem como principal característica facilidade de uso. Veja seus demos aqui.

Akihabara: engine para jogos arcade, estilo 8-bit. Na mesma página da engine se encontram os demos.

Mais sobre jogos em javascript:

http://www.def-logic.com/

http://www.javascriptgaming.com/

http://www.webresourcesdepot.com/25-amazing-javascript-games-some-fun-and-inspiration/

Flash: Game Tutorials

Rogério Alencar Lino Filho — Thu, 23 Aug 2007 21:04:38 +0000

Uma coisa que facina a mim e acredito que a muitos outros usuários do Flash é a posibilidade de desenvolver jogos bastante interativos com uma certa facilidade.

Então como conhecimento em excesso nunca é o bastante, segue alguns links de Tutoriais sobre criação de jogos (variados) em Flash, e links de experimentos interessantes.

OutsideOfSociety (Tutoriais – Exemplos)
http://oos.moxiecode.com/

Tonypa (Tutoral – Tile Based Games)
http://www.tonypa.pri.ee/tbw/start.html

Strille (Tutoriais)
http://www.strille.net/tutorials/part1_scrolling.php

Andre Michelle (Exemplos)
http://lab.andre-michelle.com/

GotoAndPlay (Tutoriais)
http://www.gotoandplay.it/

GotoAndPlay (Tutorial – Zelda-like Game)
http://www.gotoandplay.it/_articles/2003/10/zelda.php

Tutorialized (Tutoriais)
http://www.tutorialized.com/tutorials/Flash/Games/1

MXStudio (Tutorial Megaman – Parte 1 e 2)
http://www.mxstudio.com.br/views.tutorial.php?act=view&cid=3&aid=1128
http://www.mxstudio.com.br/views.tutorial.php?act=view&cid=3&aid=1132

GameSheep (Tutorial – Flash Racing Game)
http://www.gamesheep.com/free/flash-tutorials/1-flash-racing-game-1/flash-tutorial-1-1.php

Emanuele Feronato (Tutorial)
http://www.emanueleferonato.com/2006/10/29/flash-game-creation-tutorial-part-1/

Actionscript.org (Tutorial – Building Games in Flash)
http://www.actionscript.org/resources/articles/52/1/Building-games-in-flash/Page1.html

Flash Dreamer (Tutorial – Into to OOP Game Design)
http://www.freshvision.com.au/blog/index.php/2007/03/27/tutorial-intro-to-oop-game-design/

Flashkit (Tutorial – Scoreboard)
http://www.flashkit.com/tutorials/Games/How_to_c-Nick_Kuh-771/index.php

FlashPerfection (Tutorial – Pong)
http://www.flashperfection.com/tutorials/How-to-Make-the-Game-of-Pong-65527.html

Matheus Prestes (Tutorial – Tiles Map – português)
http://www.freewebs.com/matheusprestes/MapTiles/html/TilesMap.html