Universidade Estadual de Ponta Grossa - Engenharia de Computação – Professor: Dierone.

Eduardo Patrick Ferreira – RA: 17219226.

SUMÁRIO

2.Conceitos. 1

3.Sprites. 1

4.Eventos. 1

5.Criação de Jogos. 1

5.1Personagem Básico. 1

5.2Personagem com Touch. 1

5.3Personagem com touch e inimigo. 1

5.4Personagem combatendo inimigo. 1

6.Demo e link para baixar programa. 1

1.Enchant.JS Engine

É um framework para desenvolvimento de jogos simples e aplicativos em HTML5 + JavaScript, mantido na UEI (Ubiquitous Entertainment, Inc), por membros do Centro de Pesquisa de Akihabara, o framework japonês, permite criar com poucas linhas de código um jogo simples. Com enchant.js, você pode criar desde simples jogos 2D até avançados jogos em três dimensões, graças ao suporte WebGL(Biblioteca de Gráficos da web) usado como plugin.

2.Conceitos

Enchant.js é uma biblioteca que funciona em navegadores compatíveis com HTML5. Pode ser usada para desenvolver jogos facilmente, mas também pode ser utilizada para criar outros tipos de programas além de jogos.

EXEMPLO DE PROGRAMA:

enchant(); // declara o uso de enchant.js

window.onload = function(){ // executa essa função depois da janela ser carregada

game = new Core(320,320); // cria um novo jogo com resolução de 320x320

game.preload('fig1.png','fig2.png'); // especifica quais imagens devem ser carregadas quando o jogo iniciar

game.onload = function(){ // descreve o que deve ser executado quando o jogo iniciar

var bear = new Sprite(32,32); // cria um sprite

bear.image = game.assets['fig1.png']; // especifica o arquivo de imagem, deve ter sido pré-carregado

bear.x = 50; // especifica a posição no eixo x

bear.y = 50; // especifica a posição no eixo y

game.rootScene.addChild(bear); // exibe a imagem na tela

}

game.start(); // inicia o jogo

3.Sprites

O enchant.js trabalha com sprites para renderizar objetos na tela. Esse recurso tem várias utilidades, como criar um personagem ou mesmo um ambiente. O sprite permite além de renderizar um objeto no DOM(Document Object Model) ou no Canvas(é um elemento que pode ser usado para desenhar gráfico via código), criar animações com frames a partir de uma imagem sprit.

EXEMPLO:

var Person = new Sprite(64, 64);

Person.image = game.assets['images/Person.png'];

Person.frame = [0, 1, 4, 5, 1];

Isto fará com que a imagem passe entre estes sprites em um intervalo de tempo determinado pela propriedade FPS(Frames per Second) do objeto.

4.Eventos

Eventos ocorrem quando alguma coisa toca outra na tela, quando uma quantidade específica de tempo passa ou algum outro tipo de mudança ocorre. Quando os eventos ocorrem, funções chamadas “ouvintes de eventos” (event listeners) podem ser criadas. Adicionar ouvintes de eventos às entidades permite que elas sejam controladas. Quando os ouvintes de eventos são disparados, eles emitem comandos à sua entidade pai.

var bear = new Sprite(32,32); // cria um sprite

bear.image = game.assets['fig1.png']; // define a imagem a ser exibida

bear.x = 50; // define a posição no eixo x

bear.y = 50; // define a posição no eixo y

bear.addEventListener('enterframe',function(){ // adiciona um ouvinte de eventos

// o ouvinte de eventos para o evento enterframe event

this.x+=2; // move dois pixels para direita

});

game.rootScene.addChild(bear); // exibe a imagem na tela

Fazendo isso, a animação do urso se movendo para direita pode ser exibida na tela. O evento enterframe invoca todas entidades exibidas na tela, uma a uma, em um intervalo fixo de tempo.

5.Criação de Jogos

5.1Personagem Básico

<!doctype html>

enchant(); // initialize

var game = new Core(320, 320); // Palco do jogo

game.preload('chara1.png'); // Pré imagem

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) // mover para a direita

.scaleTo(-1, 1, 10) // vire a esquerda

.moveBy(-288, 0, 90) // mover para a esquerda

.scaleTo(1, 1, 10) // vire a direita

.loop(); // faz o loop

};

game.start(); // começe o jogo!

</script>

</body>

</html>

5.2Personagem com Touch

<!doctype html>

enchant(); // initialize

var game = new Core(320, 320);

game.preload('chara1.png', 'icon0.png'); // preload image

game.fps = 20;

game.onload = function(){

var bear = new Sprite(32, 32);

bear.image = game.assets['chara1.png'];

bear.frame = 5;

game.rootScene.addChild(bear);

// add event listener (chamado quando o clique / toque é iniciado)

game.rootScene.on('touchstart', function(evt){

var apple = new Sprite(16, 16); // generate new sprite

apple.image = game.assets['icon0.png']; // definer imagem

apple.moveTo(16, bear.y + 8); // move para posição

apple.tl.moveBy(320, 0, 30); // definer o movimento

apple.frame = 15; // dados da imagem

game.rootScene.addChild(apple); // adicionar a tela

});

// add event listener (chamado quando o clique / toque é movido)

game.rootScene.on('touchmove', function(evt){

bear.y = evt.localY; // ajusta a posição para o posição toque-y

});

};

game.start(); // começe o jogo!

</script>

</body>

</html>

5.3Personagem com touch e inimigo

<!doctype html>

enchant(); // inicializar

var game = new Core(320, 320);

game.preload('chara1.png', 'icon0.png'); // pre recarrega imagem

game.fps = 20;

game.onload = function(){

// faz nova classe para o jogador

var Player = enchant.Class.create(enchant.Sprite, {

initialize: function(){

enchant.Sprite.call(this, 32, 32);

this.image = game.assets['chara1.png'];

this.frame = 5; // definer dados da imagem

game.rootScene.addChild(this); // adicionar a tela

}

});

// make new class for apple

var Apple = enchant.Class.create(enchant.Sprite, {

initialize: function(){

enchant.Sprite.call(this, 16, 16);

this.image = game.assets['icon0.png']; // definir imagem

this.moveTo(16, player.y + 8); // mover para posição

this.tl.moveBy(320, 0, 30); // definer movimento

this.frame = 15; // definer dados da imagem

game.rootScene.addChild(this); // adicionar a tela

}

});

// criar nova classe para o inimigo

var Enemy = enchant.Class.create(enchant.Sprite, {

initialize: function(){

enchant.Sprite.call(this, 32, 32);

this.image = game.assets['chara1.png']; // definer imagem

this.moveTo(320, Math.floor(Math.random() * 320)); // definir posição

this.scaleX = -1;

this.tl.moveBy(-360, 0, 160); // definir movimento

game.rootScene.addChild(this); // tela de pintura

}

});

var player = novo jogador();

// gera inimigo a cada 60 frames

game.rootScene.tl.then(function() {

var inimico = novo inimigo();

}).delay(30).loop(); // aguarde 60 quadros e faça um loop!

// adiciona ouvinte de evento (chamado quando o clique / toque é iniciado)

game.rootScene.on('touchstart', function(evt){

player.y = evt.localY; // ajusta a posição para a posição-y

var apple = nova maça();

});

// adiciona ouvinte de evento (chamado quando o clique / toque é iniciado)

game.rootScene.on('touchmove', function(evt){

player.y = evt.localY; // ajusta a posição para a posição-y });

};

game.start(); // começe o jogo!

</script>

</body>

</html>

5.4Personagem combatendo inimigo

<!doctype html>

enchant(); // initialize

var game = new Core(320, 320);

game.preload('chara1.png', 'icon0.png'); // preload image

game.fps = 20;

game.onload = function(){

// make new class for player

var Player = enchant.Class.create(enchant.Sprite, {

initialize: function(){

enchant.Sprite.call(this, 32, 32);

this.image = game.assets['chara1.png'];

this.frame = 5; // set image data

game.rootScene.addChild(this); // add to canvas

}

});

// faz nova classe para o jogador

var Apple = enchant.Class.create(enchant.Sprite, {

initialize: function(){

enchant.Sprite.call(this, 16, 16);

this.image = game.assets['icon0.png']; // definir imagem

this.moveTo(16, player.y + 8); // move to the position

this.tl.moveBy(320, 0, 30); // set movement

this.frame = 15; // set image data

game.rootScene.addChild(this); // adicionar a tela

}

});

// make new class for enemy

var Enemy = enchant.Class.create(enchant.Sprite, {

initialize: function(){

enchant.Sprite.call(this, 32, 32);

this.image = game.assets['chara1.png']; // set image

this.moveTo(320, Math.floor(Math.random() * 320)); // set position

this.scaleX = -1;

this.tl.moveBy(-360, 0, 160); // set movement

game.rootScene.addChild(this); // canvas

}

});

var player = novo jogador();

// generate enemy every 60 frames

game.rootScene.tl.then(function() {

var enemy = new Enemy();

}).delay(30).loop(); // wait 60 frames and loop it!

// add event listener (called when click/touch started)

game.rootScene.on('touchstart', function(evt){

player.y = evt.localY; // set position to touch-y position

var apple = new Apple();

});

// add event listener (called when click/touch moved)

game.rootScene.on('touchmove', function(evt){

player.y = evt.localY; // set position to touch-y position

});

var pontuação = 0;

game.rootScene.on('enterframe', function(){

var hits = Apple.intersect(Enemy);

for(var i = 0, len = hits.length; i < len; i++){

game.rootScene.removeChild(hits[i][0]);

game.rootScene.removeChild(hits[i][1]);

pontuação ++;

}

});

player.tl.delay(game.fps * 10).then(function(){

alert('game over! score: ' + score);

game.stop();

});

};

game.start(); // start your game!

</script>

</body>

</html>

6.Demo e link para baixar programa

http://enchantjs.com/pt-br/