You are on page 1of 7

Desenvolvimento de Games com HTML5 e Enchant.

js

Thyago Luciano

Desenvolvimento de Games com HTML5 e Enchant.js
Thyago Luciano
©2013 Thyago Luciano

Conteúdo
Capítulo 1: Conhecendo a biblioteca Enchant.js . . . . . . . . . . . . . . . . . . . . . . . . Enchant.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Chapter Two . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Chapter Three . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1 3 4

Capítulo 1: Conhecendo a biblioteca Enchant.js
Enchant.js
O enchant.js é um framework para desenvolvimento de jogos e aplicativos em HTML5 + JavaScript, OK! mas afinal de contas o que é um FRAMEWORK?

Framework
Na literatura existe varias definições de framework. As principais são. Um framework é um conjunto de classes que constitui um projeto abstrato para a solução de uma família de problemas ( Fayad, 1999 / Johnson & Foote, 1988). Um framework é uma arquitetura desenvolvida com o objetivo de atingir a máxima reutilização, representada com um conjunto de classes abstrata e concretas, com grande potencial de especialização ( Mattsson, 1996 - 2000). Um framework é um conjunto de objetos que colaboram com o objetivo de atender a um conjunto de responsabilidades para uma aplicação específica ou um domínio de aplicação ( Johnson, 1992 / Gamma et all, 1995). Um framework é definido como um software parcialmente completo projetado para ser instanciado. o framework define uma arquitetura para uma família de subsistemas e oferece os contrutores básicos para criá-los. Também são explicitados os lugares ou pontos de extensão (hot-spots) nos quais adaptações do código para um funcionamento específico de certos módulos devem ser feitas (Buschmann, 1996 / Pree, 1995 / Pinto, 2000). Resumindo o enchant.js é um framework que possui um conjunto de scripts organizados, com funções, rotinas e variáveis, que servem para facilitar o desenvolvimento de games e aplicações.

O enchant.js foi lançado em 2011 e é continuamente desenvolvido e mantido na UEI por membros do Centro de Pesquisa de Akibara, possui uma extensiva documentação e um site com tutoriais, alem disso suas funcionalidades podem ser ampliadas com varios plugins. Caso queira você pode ver os mais de 1.000 jogos e aplicativos publicados¹ na 9leap.net².
¹http://enchantjs.com/showcase/games-on-9leap-net/ ²http://9leap.net

Capítulo 1: Conhecendo a biblioteca Enchant.js

2

Características
Orientado a Objetos: Todos os itens exibidos são objetos. Multiplataforma: Funciona em navegadores dentro de iOS, Android, Mac, Windows. Windows 8: Dá suporte ao desenvolvimento para HTML5 interativo do windows 8. Orientado a Eventos: Baseado em processamento assíncrono via listeners de eventos. Motor de Animação: Permite o uso de animações padrão, tais como tweens. Renderização Híbrida: Suporta a renderização tanto através da API Canvas quanto através do DOM. Suporte a WebGL: Possibilita a criação de jogos 3D usando WebGL com um plugin. Biblioteca de Conteúdo: Contém uma biblioteca de imagens sem direitos autorais pronto para ser usada em seus jogos.

Exemplo ao vivo.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<!doctype html> <html><head><script src="enchant.js"></script></head> <body style="margin:0; padding: 0;"> <script> enchant(); // initialize var game = new Core(320, 320); // game stage game.preload('chara1.png'); // preload image game.fps = 20; game.onload = function(){ var bear = new Sprite(32, 32); bear.image = game.assets['chara1.png']; game.rootScene.addChild(bear); bear.frame = [6, 6, 7, 7]; // select sprite frame bear.tl.moveBy(288, 0, 90) .scaleTo(-1, 1, 10) .moveBy(-288, 0, 90) .scaleTo(1, 1, 10) .loop(); }; game.start(); // start your game! </script> </body> // // // // // move turn move turn loop right left left right it

Chapter Two
Here are some quick Markdown examples to get you started. To start a new paragraph, hit the return key twice. You want to create a blank line between paragraphs. To italicize, surround a word in asterisks. To bold, use two asterisks. Here is a link to the leanpub home-page³. Chapter 3 tells you how to make a preview of your book.
³https://leanpub.com

Chapter Three
To make a preview of your book, click on the “Preview” button on the left. We’ll show you some links to download your book when the preview is complete. You can keep writing in the meantime. That’s it for the brief introduction to Leanpub.