Universidade Estadual de Ponta Grossa -  Engenharia de Computação

Aluno: Alysson André de Quadros – RA: 17203926

1. Introdução ao Stage.Js

O Stage.js é uma biblioteca JavaScript leve e de código aberto que você pode usar para o desenvolvimento de jogos HTML5 2D entre plataformas. Essa biblioteca usa um modelo semelhante ao DOM para manipular a tela e gerencia os ciclos de renderização e o desenho do seu aplicativo internamente e por si só.  Também processa e distribui eventos de mouse e de toque para nós de árvores de destino. Um aplicativo Stage.js consiste em uma árvore de nós. Cada nó é fixado (transformado) contra seu local de origem e possui zero, uma ou mais texturas de imagem.

2. Configuração e Uso

Os aplicativos no Stage.js são criados passando a função de retorno de chamada para Stage. A biblioteca carregará todos os componentes necessários. Finalmente, ele chamará a função de retorno de chamada e processará tudo na tela. Cada aplicativo que você criar terá uma árvore e stage estará na raiz dessa árvore. Todos os outros elementos, como imagens ou strings, serão seus nós. A árvore de aplicativos é redesenhada enquanto os nós são atualizados durante cada ciclo de renderização.

Exemplo:

// Criar novo aplicativo
Stage(function(stage) {
 
 // Definir caixa de visão
 stage.viewbox(300, 200);
 
 // Criar imagem e anexá-la ao stage
 var box = Stage.image('box').appendTo(stage);
 
 // Alinhar caixa de visão ao centro
 box.pin('align', 0.5);
 
 // No clique do mouse...
 box.on('click', function(point) {
 // ...entre os valores de escala deste nó
 this.tween().ease('bounce').pin({
 scaleX : Math.random() + 0.5,
 scaleY : Math.random() + 0.5
 });
 });e
});
 
// Adicionando uma textura
Stage({
 image : 'sample.png',
 textures : {
 box : { x : 0, y : 0, width : 30, height : 30 }
 }
});

3. Aplicações

Um aplicativo é criado passando uma função de retorno de chamada para Stage(). A biblioteca carregará, criará e inicializará todos os componentes necessários e chamará a função fornecida com o nó raiz do aplicativo e o contêiner de exibição que normalmente é um elemento Canvas.

Exemplo:

// Cria e inicia um aplicativo 
Stage ( function ( stage , display ) {
 
 // Defina a caixa de visão para o stage, fixando-o para o 
  modos válidos
 
 stage.viewbox (largura, altura, modo =  ' no teclado ' );
 
 // Redimensionamento do eventos de viewport 
 
 stage.on ( ' viewport ' , função ( viewport ) {
 
 // `viewport` atributos são` width`, `height` e` ratio`
 });
 
 // Pausa
 stage.pause ();
 
 // Retomar 
 stage.resume ();
});

3.1 Modelo de árvore

Cada aplicativo consiste em uma árvore, e a raiz da árvore é fornecida como stage.

Exemplo:

// Criar uma nova instância de nós (sem texturas)
var node = Stage.create();
 
// Anexar/prefixar filho aos pais (aceita matriz)
parent.append(child);
parent.prepend(child);
 
// Acrescentar/preceder a criança para os seus pais
child.appendTo(parent);
child.prependTo(parent);
 
// Inserir irmão antes/depois da criança (aceita matriz)
child.insertNext(sibling);
child.insertPrev(sibling);
 
// Inserir irmão antes/depois da criança
sibling.insertAfter(child);
sibling.insertBefore(child);
 
// Remove filho dos seus pais
child.remove();
 
// Remove filho dos seus pais (aceita matriz)
parent.remove(child);
 
// Remove todos os filhos dos pais
parent.empty();
 
// Obtém pais por primeiro/último (visível) dos filhos
parent.first(onlyVisible = false);
parent.last(onlyVisible = false);
 
// Obtém imediatamente os pais
child.parent();
 
// Obtém o próximo/anterior (visível) irmão
child.next(onlyVisible = false);
child.prev(onlyVisible = false);
 
// Obtém o nó de visibilidade
node.visible();
 
// Define o nó de visibilidade
node.visible(visible);
node.hide();
node.show();
 
// Iterar sobre os pais, filho não pode ser removido
for (var child = parent.first(); child; child = child.next()) {
 
// usa filho
}
 
// Iterar sobre os pais, filho não pode ser removido
var child, next = parent.first();
while (child = next) {
 next = child.next();
 // use child
}
 
// Consultar o nó da sub-árvore, incluindo o próprio nó
 node.visit({
 start : function(node) {
 return skipChildren;
 },
 end : function(node) {
 return stopVisit;
 },
 reverse : reverseChildrenOrder = false,
 visible : onlyVisibleNodes = false
});

3.2 Loop de Jogo

Cada ciclo de renderização consiste em marcar e redesenhar a árvore de aplicativos. O aplicativo e seus nós podem ser atualizados durante o ticking. Dependendo das atividades de aplicação, pode haver três diferentes acompanhamentos após o registro:

· Se pelo menos um nó for tocado, toda a árvore de aplicativos será redesenhada e o loop do jogo continuará.

· Se nenhum nó for tocado, mas pelo menos uma função ticking retornar true, o loop do jogo continuará, mas o desenho anterior será retido.

· Se nenhum nó for tocado e nenhuma função de disparo retornar true, o aplicativo fará uma pausa até ser tocado direta ou indiretamente.

Os nós podem ser tocados diretamente chamando, node.touch()mas geralmente eles são tocados indiretamente por outras ações, como fixação ou manipulação de árvores.

Exemplo:

// Registra uma função para ser chamada de ticking
 node.tick ( função ( millisecElapsed ) {
  return continueGameLoop;
}, beforeChildren =  false ); 
 
// Toque no nó 
 node.touch();

3.3 Fixando

Fixação especifica como um nó é anexado ao seu pai. A fixação consiste em tamanho, transformação, posicionamento e transparência.

Exemplo:

// Obter um valor de fixação 
node.pin(name);
 
// Definir um valor de fixação 
node.pin(name, value);
 
// Definir um ou mais valores de fixação
node.pin({
 name : value,
 ...
});

Quando nameX igual nameY, a variável name não pode ser usada no lugar.

3.4 Tamanho

Para alguns nós, como imagens, strings, linhas e colunas, o tamanho é definido automaticamente.

Exemplo:

node.pin({
 height : height,
 width : width
});
 
// Atalho para definir tamanho:
node.size(width, height);
node.width(width);
node.height(height);
 
// Atalho para obter tamanho:
node.width();
node.height();

3.5 Transformação

Transformação consiste em escalar, inclinar e girar. A rotação é aplicada depois de dimensionar e inclinar.

Exemplo:

node.pin({
 scaleX : 1,
 scaleY : 1,
 skewX : 0,
 skewY : 0,
 rotation : 0
});
 
// Atalho para definir uma transformação:
node.scale(x, y = x);
node.scale({ x : x, y : y });
node.skew(x, y = x);
node.skew({ x : x, y : y });
node.rotate(angle);

3.6 Posicionamento

Ao posicionar, o ponto de manuseio em si é posicionado na distância de deslocamento do ponto de alinhamento no pai. Alça e alinhamento são definidos como relação de largura / altura, 0 é superior / esquerda e 1 é inferior / direita. Identificador padrão para alinhar valor quando não é especificado.

Exemplo:

node.pin({
 alignX : 0,
 alignY : 0,
 handleX : 0,
 handleY : 0,
 offsetX : 0,
 offsetY : 0
});
 
// Métodos de atalho para definir posicionamento:
node.offset(x, y);
node.offset({ x : x, y : y });

Por padrão, a caixa delimitadora alinhada por eixo (AABB) após a transformação é usada para posicionamento, no entanto, é possível usar a caixa não transformada definindo a localização dinâmica. A localização do pivô é definida como a razão da largura / altura não transformada e é usada como ponto central em si para escala, inclinação e rotação.

Exemplo:

node.pin({
 pivotX : 0,
 pivotY : 0
});

3.7 Transparência

A transparência pode ser aplicada a texturas de nós e a nós de sub-árvores ou apenas a texturas de nós.

Exemplo:

node.pin({
 alpha : 1,
 textureAlpha : 1
});
 
// Métodos de atalho para definir transparência:
node.alpha(alpha);
node.alpha(alpha, textureAlpha);

3.8 Escala

Escala para nova largura / altura, se o modo for definido proporcionalmente. Os modos válidos são:

· in: escala máxima que mantém as bordas dos nós dentro de scaleWidth / Height

· in-pad: like in, mas unifly pads nó para preencher scaleWidth / Height inteira

· out: escala mínima que mantém as bordas do nó fora de scaleWidth / Height

· out-crop: como out, mas corta uniformemente a scaleWidth / Height

Exemplo:

node.pin({
 scaleMode : mode,
 scaleWidth : width,
 scaleHeight : height
});
 
// Método de atalho:
node.scaleTo(width, height, mode);

3.9 Eventos

Os ouvintes de eventos podem ser registrados e não registrados nos nós, os ouvintes são chamados quando um evento é publicado em um nó. Alguns eventos podem ser publicados em vários nós, mas os eventos não se propagam.

Exemplo:

// Registre um ouvinte no nó

// O evento nome pode ser uma matriz de string ou um nó de string separados e espaçados

node.on(name, listener);

// Cancelar um registro de um nó

node.off(name, listener);

// Obter ouvintes registrados no nó

// Retorna uma matriz ou um nó indefinido

node.listeners(name);

// Chama os ouvintes

// Retorna o número de ouvintes chamados

node.publish(name, args);

4. Mouse e toque

Mouse nativo e eventos de toque são capturados, processados e publicados nos nós de aplicativos. Os nós recebem os eventos do mouse na coordenada local, ou seja, a localização do mouse é especificada como a distância até o canto superior esquerdo do nó.

Exemplo:

// Adicionar ouvinte de clique ao nó

node.on('click', function(point) {

// point.x e point.y são relativos a este nó esquerda e topo

// point.raw é um evento original

});

Em vez de eventos de cliques nativos, os eventos de cliques sintáticos são criados e publicados nos nós. Além dos tipos de evento padrão, o mousecanceltipo de evento sintático também é suportado, o que é semelhante, touchcancelmas é publicado quando mousedown não é seguido por um mouseup.

Exemplo:

// Eventos com o mouse:

Stage.Mouse.CLICK = 'click';

Stage.Mouse.START = 'touchstart mousedown';

Stage.Mouse.MOVE = 'touchmove mousemove';

Stage.Mouse.END = 'touchend mouseup';

Stage.Mouse.CANCEL = 'touchcancel mousecancel';

5. Textura

As texturas são objetos que podem ser desenhados e que são usados pelos nós da árvore para desenhar gráficos na superfície da tela.

5.1 Textura Atlas

A textura atlas consiste em um conjunto de texturas nomeadas que são referenciadas por nome em um aplicativo.

Atlas geralmente são criados usando arquivos de imagem estática. Imagens referenciadas em atlas são automaticamente pré-carregadas.

Exemplo:

// Adicionando a textura atlas

Stage({

name : 'mario', // opcional

image : {

src : 'mario.png',

ratio : 1, // opcional, para imagens de alta resolução

}

textures : {

stand : { x : 0, y : 0, width : 40, height : 60 },

walk : [

{ x : 40, y : 0, width : 40, height : 60 },

{ x : 80, y : 0, width : 40, height : 60 },

{ x : 120, y : 0, width : 40, height : 60 }

],

number : {

'0' : { x : 0, y : 60, width : 10, height : 14 },

'1' : { x : 10, y : 60, width : 10, height : 14 },

'2' : { x : 20, y : 60, width : 10, height : 14 },

'3' : { x : 30, y : 60, width : 10, height : 14 },

'4' : { x : 40, y : 60, width : 10, height : 14 },

'5' : { x : 50, y : 60, width : 10, height : 14 },

'6' : { x : 60, y : 60, width : 10, height : 14 },

'7' : { x : 70, y : 60, width : 10, height : 14 },

'8' : { x : 80, y : 60, width : 10, height : 14 },

'9' : { x : 90, y : 60, width : 10, height : 14 }

}

}

});

Stage.image('mario:stand');

Stage.anim('mario:walk').play();

Stage.string('mario:number').value(100);

6. Imagem

Uma imagem, nada mais é que um nó com uma textura.

Exemplo:

// Cria uma nova instanciação de imagem

var image = Stage.image(texture);

// Altera a textura da imagem

image.image(texture);

// Encolhe/estica a imagem ao fixar a largura e/ou a altura

// Para definir bordas adicionar top, bottom, left e right a textura

image.tile();

image.stretch();

7. Animação

Uma animação ou anim é um nó com uma matriz de texturas como quadros.

Exemplo:

// Cria uma nova instancia de animação

var anim = Stage.anim(textures, fps = 15);

// Obter ou definir frames por segundo da animação

anim.fps();

anim.fps(fps);

// Definir frames da animação, `texturas` pode ser em matriz ou em seletor de textura

anim.frames(textures);

// Vai para o n-ésimo frame

anim.gotoFrame(n);

// Mover n frames para frente (ou para trás se n for negativo)

anim.moveFrame(n);

// Obter o número de frames

anim.length();

// Começa a jogar (a partir de `frameName` se especificado)

anim.play(frameName = undefined);

// Para de jogar (e pula para `frameName` se especificado)

anim.stop(frameName = undefined);

// Inicia `repeat * length` frames e depois para e chama a função `callback`

anim.repeat(repeat, callback = null);

8. String

String é uma linha de imagens que são selecionadas dinamicamente a partir do frames uso de caracteres de uma string, ou itens de uma matriz value.

Exemplo:

// Cria uma nova instancia de string com frames
var string = Stage.string(frames);
 
// Define frames, uma string que faz referência a um mapa em atlas 
string.frames("digits");
 
// Define frames, um mapa com texturas cujos valores e frame names são chaves 
string.frames({
 '0' : zeroTexture,
 '1' : oneTexture,
 ...
});
 
// Define frames, uma função que pega um char (ou item) e retorna a textura
string.frames(function(char) {
 // cria uma textura para o char
 return texture;
});
 
// Define valor, pode ser um string ou uma matriz
// Caracteres (ou itens) são usados para selecionar frames e criar uma sequência de imagens
string.value(value);
 
// Obter valor atribuído
string.value();

9. Linha e coluna

Uma linha / coluna é um nó que organiza seus filhos como uma sequência horizontal / vertical.

Exemplo:

// Cria uma nova linha / coluna 
var row =  Stage.row (childrenAlignY =  0 );
var column =  Stage.column (childrenAlignX =  0 );
 
// Faça nó de uma linha / coluna 
node.row (childrenAlignY =  0 );
node.column (childrenAlignX =  0 );
 
// Adicionar espaçamento entre o células da linha / coluna . node.spacing (space);

10. Caixa (experimental)

Uma caixa é redimensionada para envolver seus filhos. Ele pode ser aplicado a imagens lado a lado / estendidas para criar componentes de tamanho variável, como janelas e botões.

Exemplo:

// Cria uma nova caixa 
var box =  Stage.box ();
 
// Torna o nó uma caixa 
node =  node.box ();

11. Interpolação

A interpolação é usada para aplicar transições suaves a valores de fixação.

Exemplo:

// Criar uma entrada de interpolação 
// Quando `append` for true, a nova entrada é anexada às entradas atuais, caso contrário, substitui-as 
var tween =  node.tween (duração =  400 , atraso =  0 ,acréscimo =  false );
 
// Definir valores de fixação e iniciar a interpolação 
// Fixar métodos de atalho, como `.scale ()`, também pode ser usado 
tween.pin(pinning);
 
// Definir atenuação para interpolação, pode ser uma função ou um identificador 
// definido como 'nome [-modo] [(params)]', por exemplo, 'quad' ou 'poli-in-out (3)' 
/ / Nomes: linear, quad, cúbico, quart, quint, poli (p), sin / seno, 
// exp, círculo / circ, ressalto, elástico (a, p), verso (s) 
// Modos: in, out in-out, out-in 
tween.ease(facilitação);
 
// Define a duração em milissegundos
tween.duration (ms);
 
// Definir atraso em milissegundos 
tween.delay (ms);
 
// Retorno de chamada quando a interpolação é feita 
tween.done ( function () {
  // este === nó
});
 
// Remover este nó quando a interpolação terminar a 
tween.remove ();
 
// Ocultar este nó quando a interpolação terminar a 
tween.hide ();
 
// Criar e encadear uma nova interpolação a esta entrada 
var nextTween =  tween.tween(duração =  400 , atraso =  0 );

12. Métodos Globais

// Criar um novo aplicativo

Stage ( function ( stage , display ) {});

// Criar e pré-carregar um atlas de textura

Stage ({});

// Uma função a ser chamada antes de iniciar qualquer aplicativo

// Pode ser usada para pré-carregar os ativos do aplicativo

Stage.preload ( function ( done ) {

// Chamada `done` quando carregado ou quando falhar

done(error);

});

// Pré-carregar e executar um arquivo JS

// As URLs que começam com `. /` São resolvidas em relação ao atual URL do script

Stage.preload (src);

// Pause a reprodução de todos os aplicativos

Stage.pause ();

// Retomar a reprodução de todos os aplicativos

Stage.resume ();