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

Mateus Felipe Ribeiro – RA:17243526

Sumario

1.Backbone Game Engine...............................................................................................................

2.Estrutura de diretórios.................................................................................................................

3.index.html....................................................................................................................................

4.main.js..........................................................................................................................................

5.Funções da Engine.......................................................................................................................

-Backbone Engine..............................................................................................................

- Opções

- Métodos

- Eventos

-Backbone SpriteSheet................................................................................................

- Eventos

-Backbone.Input...............................................................................................................

- Atributos

- Métodos

- Eventos

-Backbone.World........................................................................................................

- Atributos

- Opções

- Métodos

- Eventos

-Backbone.WorldEditor......................................................................................

- Atributos

- Opções

- Eventos

-Como funciona

-Backbone.Hero.........................................................................................................

- Eventos

- Como funciona

- Colisões

-Backbone.Button............................................................................................

-Uso

1. Backbone Game Engine

Um modelo backbone trabalha com hash e métodos de javascript. Um modelo é um objeto Javascript. Portanto, o comportamento pode ser armazenado como propriedades e métodos diretamente no objeto. Por exemplo, uma folha de sprite aponta para uma imagem.

EXEMPLO EXECUTAVÉL.

Exemplo de jogo criado com a engine:

Descrição: Resultado de imagem para backbone game engine

Hash: qualquer algoritmo que mapeie dados grandes e de tamanho variável para pequenos dados de tamanho fixo; Get/Getter e Set/Setter: Eles servem para pegarmos informações de variáveis da classe; Sprite :Imagem utilizada na engine; Engine: biblioteca de scripts; Scripts: conjunto de instruções para que uma função seja executada;

2. Estrutura de diretórios

Para criar um novo exemplo (ou jogo), crie um diretório vazio .Em seguida, adicione um arquivo com o nome de index.html, logo após crie um arquivo com o nome de main.js. Esta é estrutura de arquivos recomendada pelo backbone:

exemplo/

        index.html

        main.js

(index.html é o documento HTML que carrega seus recursos e define sua tela. O arquivo main.js é onde você instancia o mecanismo de jogo(engine) e os sprites)

3. index.html

O documento HTML (geralmente chamado index.html em sua própria pasta) declara os recursos a serem carregados e o elementos canvas. Recursos de Javascript são declarados no elemento HEAD. Imagens são carregadas via elementos IMG. Não há carregamento assíncrono.

Exemplo de arquivo HTML:

<!DOCTYPE html>

<html> //Abertura do arquivo html

<head> //Cabeça do html

<title>AB</title> //Titulo do seu exemplo

</head>

<body> //Corpo do html

</body>

</html>

4. main.js

O arquivo main.js é onde você declara e inicializa seus objetos. Recomenda-se que você envolva esse código em uma função que seja executada assim que o documento e todos os recursos forem carregados (por exemplo, evento window.onload). Você pode usar por exemplo: $(window).on("load", function() {});.

Outros arquivos usam uma função anônima simples, pois contêm principalmente declarações de classe. Os ativos são, como consequência, sempre carregados de forma síncrona.

Exemplo de arquivo main.js:

$(window).on("load", function() {

  //Exemplo de como declarar a biblioteca correta

  Backbone.Mario = Backbone.Hero.extend({

    defaults: _.extend({}, Backbone.Hero.prototype.defaults, {

      name: "mario",

      spriteSheet: "mario"

})

});

  var canvas = document.getElementById("foreground");

  var spriteSheets = new Backbone.SpriteSheetCollection([{

    id: "mario",

    img: "#mario",

    tileWidth: 32,

    tileHeight: 64,

    tileColumns: 21,

    tileRows: 6

  }]).attachToSpriteClasses();

  var debugPanel = new Backbone.DebugPanel();

  var input = new Backbone.Input({

    drawTouchpad: true,

    drawPause: true

});

  var mario = new Backbone.Mario({

    x: 400, y: 400, floor: 500

  }, {

    input: input

});

  var world = new Backbone.World({

    width: 30, height: 18,

    tileWidth: 32, tileHeight: 32,

    backgroundColor: "rgba(66, 66, 255, 1)",

    viewportBottom: 156

});

  world.add(mario);

  var engine = new Backbone.Engine({}, {

    canvas: canvas,

    debugPanel: this.debugPanel,

    input: input

});

  engine.add([

    world,

    input,

    debugPanel

]);

  // Expose things as globals - easier to debug

  _.extend(window, {

    canvas: canvas,

    engine: engine

});

  // Ensure the canvas is always visible and centered

  adjustViewport(canvas, canvas.width, canvas.height);

});

O Backbone Game Engine define classes no namespace do Backbone. A maioria é subclassificada de Backbone.Model ou Backbone.Collection.

5. Funções da Engine:

-Backbone Engine:

Backbone.Engineé um modelo de Backbone que contém uma coleção de modelos de sprites. Ele usa o requestAnimationFrame do HTML5 para fornecer um loop de 60 frames por segundo.

Opções

Na instanciação, essas opções podem ser passadas. Elas serão armazenadas como propriedades no Backbone.Engine.

· canvas: A tela para desenhar. O desenho está no seu contexto 2d.

· input: Opcional. A instância de entrada de controle do usuário. Se passado e o botão de pausa estiver habilitado, irá parar / iniciar o motor quando pressionado.

· debugPanel: Opcional. Backbone.DebugPanel instanciado. fps e cycleTime são de saída.

Métodos

· add(): Adiciona um ou vários modelos.

· remove(): Remove um ou vários modelos .

· reset(): Limpa ou define a coleção de sprites.

· isRunning(): Retorna true se o mecanismo estiver em execução ou false, se não estiver.

· start(), stop(): Inicia ou pára o motor.

· toggle(): Alternar iniciar / parar o motor.

Eventos

· tap: Quando o usuário clica ou toca na tela. Um toque é definido quando o usuário pressiona / clica em uma posição sem se mover.

· key: Quando o usuário digita uma chave.

· dragstart, dragmove e dragend: Quando ocorre um gesto de arrastar.

-Backbone SpriteSheet:

Backbone.SpriteSheet é um modelo de Backbone que divide uma imagem em quadros usados para animação.

Descrição: Resultado de imagem para backbone game engine

Atributos:

img: Um ponteiro para um objeto imagem armazenado na propriedade img.
imgUrl: O URL da imagem para carregar dinamicamente.
tileWidth, tileHeight: Tamanho em pixels.
tileColumns, tileRows: Número de pixels na imagem.
x, y: As coordenadas em pixels.
width, height: Tamanho do sprite em pixels.
paddingLeft, paddingRight, paddingTop, paddingBottom: Preenchimento interno para contabilizar o espaço vazio dentro do ladrilho de um sprite. Útil para especificar zonas vazias para detecção de colisão.
sequenceIndex: O quadro atual de sequência de animação. Automaticamente definido.
state: A animação atual.
spriteSheet: Id da folha de Sprite.
collision: Colisão com objetos.
static: definir algo como estático.
visible: Booleano opcional. Se for verdade, o sprite não é desenhado. O padrão é falso.
zIndex: Especifica a ordem de desenho. Maior valor é desenhado acima de sprites com valores menores. O padrão é 0.

Descrição: Resultado de imagem para backbone game engine

Propriedades:

frames: Matriz de quadros de animação. Definir automaticamente quando o modelo é instanciado.
animations: Hash de animações do sprite.
saveAttributes: Salvar atributos.

Eventos:

spawnImg: Quando a imagem está totalmente carregada.
destroyImg: Quando a imagem é descarregada.
allSpawnImg: Quando todas as imagens estiverem totalmente carregadas.
attach: Disparado quando o sprite está ligado ao motor.
detach: Disparado quando o sprite é destacado para o motor.

Os eventos de anexar e desanexar podem ser usados para iniciar / parar de ouvir eventos.

Métodos:

· attachToSpriteClasses(): Anexa folhas de sprite a sprites protótipos de classes. Faz isso encontrando todas as classes de sprites definidas (Backbone.*) com atributo padrão spriteSheet combinando um ID de folha de sprite na coleção. Em seguida, define a sua spriteSheet propriedade para apontar para a folha de sprite correta na coleção.

toSave(): Serializa atributos para persistência. Atributos a serem serializados são especificados no saveAttributes.
update(dt): Chamado pelo motor então 60 vezes por segundo. Atualiza os sprites.
onUpdate(dt): Não definido por padrão. Se você defini-lo, ele é chamado no final de update. Útil para estender o comportamento de um sprite sem sobrecarregar o método update.
draw(context, options): Chamado pelo motor depois update, se um redesenho foi solicitado.
onDraw(context, options): Não definido por padrão. Se definido, é chamado no final do draw. Útil para estender a renderização de um sprite sem sobrecarregar o método draw.
getAnimation([state]): Retorna a animação atual com base no argumento state. Se o argumento state é omitido, o atributo é usado em seu lugar.
overlaps(x, y):: Verifica se o sprite se sobrepõe às coordenadas passadas. Retorna um booleano.
getLeft(withPadding), getRight(withPadding), getTop(withPadding), getBotttom(withPadding): Retorna a posição esquerda, direita, superior ou inferior de um sprite. Argumento withPadding é um booleano especificando se deve incluir o preenchimento ou não. O padrão é falso.
bbox(withPadding): Retorna a caixa delimitadora do sprite como um objeto {x1, y1, x2, y2}.
getCenterX(withPadding): Retorna o centro x do sprite.O padrão é falso.
getCenterY(withPadding): Retorna o centro y do sprite.O padrão é falso.

Animações

Animações de propriedade Sprite contém um hash de animações. Cada animação contém uma sequência de quadros e um atraso entre quadros para animação.

sequences: Matriz de índices de quadros ou objetos quadrados. Exemplo: {frame: 52, x: 0, y: -32, scaleX: 1.00, scaleY: 1}. Ele permite que você especifique um deslocamento a ser aplicado quando o sprite é desenhado e um fator de escala.
scaleX, scaleY: Opcional. Fatores de escala. Conjunto scaleX para -1 para virar horizontalmente. O padrão é 1 se omitido.
delay: Opcional. O tempo para mudar para a próxima sequência.

-Backbone.Input:

A classe Backbone.Input é um modelo que captura eventos de entrada do usuário e os armazena como atributos do modelo. Por exemplo, pressionando a seta para a esquerda.Exemplo: Descrição: Backbone.Input

Atributos

Este atributo pode ser passado ao criar o modelo, para configurar a entrada.

drawTouchpad: Opcional. Booleano ou string "auto" para indicar se deve desenhar o touchpad. Quando "auto", o touchpad será desenhado apenas em desvios de toque. O padrão é "auto".

Os seguintes atributos de modelo são definidos pelo modelo. Eles não devem ser definidos externamente.

touchEnabled: Booleano definido como verdadeiro se o dispositivo estiver ativado por toque.
left: Booleano definido como verdadeiro quando a seta esquerda do touchpad ou a tecla de seta esquerda do teclado é pressionada.
right: Booleano definido como verdadeiro quando a seta direita do touchpad ou a tecla de seta direita do teclado é pressionada.
buttonA: Booleano definido como verdadeiro quando o botão A do touchpad é pressionado ou quando a tecla z é pressionada.
buttonB: Booleano definido como verdadeiro quando o botão do touchpad B é pressionado ou quando a tecla x é pressionada.

Métodos

hasTouchpad(): Retorna verdadeiro se o touchpad estiver desenhado.
leftPressed(): Retorna verdadeiro se o botão esquerdo for pressionado.
rightPressed(): Retorna verdadeiro se o botão direito for pressionado.
buttonAPressed(): Retorna verdadeiro se o botão A for pressionado.
buttonBPressed(): Retorna true se o botão B for pressionado.

Eventos

attach: Disparado quando a entrada é anexada ao motor. Vai começar a ouvir a entrada do usuário.
detach: Disparado quando a entrada é desanexada no motor. Parará de ouvir a entrada do usuário.

Você pode adicionar ou remover um modelo de Backbone.Input do mecanismo em tempo real.

-Backbone.World:

Backbone.World é um modelo que contém uma coleção de sprites que interagem entre si. Um mundo é um ambiente composto de telhas e personagens.

Descrição: Resultado de imagem para backbone game engine

Atributos

x, y: Origem do canto superior esquerdo em pixels.
width, height: Tamanho do mundo em azulejos.
tileWidth, tileHeight: Tamanho de um bloco em pixels.
viewportLeft, viewportRight, viewportTop, viewportBottom: Define uma área na tela à qual o mundo está restrito. Cada valor fornece regiões de medianiz em pixels. Qualquer coisa desenhada pelo mundo será cortada na área. Útil para desenhar uma barra de menu ou botões na mesma tela. Nas demonstrações fornecidas, por exemplo, o viewportBottom é definido como 156 pixels para liberar espaço para o touchpad.
sprites: Matriz de modelos de sprites para persistência.
backgroundColor: Cor de fundo do mundo.
backgroundImage: Atributo Id de um elemento de imagem no DOM para mostrar como plano de fundo.
state: Estado persistente ou reproduzir ou pausar.

Opções

backgroundImage: Opcional. Passe para usar uma imagem de plano de fundo em vez de uma cor de plano de fundo. Ancorado na origem.
input: Instância de entrada para controlar o herói.
camera: Instância de câmera para manter o herói na viewport.
debugPanel: Opcional.

Métodos

Um Backbone.World é um modelo que envolve uma coleção armazenada em sprites de propriedade. Para impedir o acesso direto externo a essa coleção, ele fornece estes dois métodos:

add(models, [options]): Adicione um ou vários modelos.
remove(models, [options]): Remove um ou vários modelos. Delegados ao método de remoção da coleção de sprites. Exclui a referência de volta ao mundo e retorna o (s) modelo (s).

spawnSprites(): Redefine a coleção de sprites recuperando o atributo sprites do modelo. Isso é chamado depois que o mundo é carregado.
update(dt): Atualizar função chamada pelo mecanismo. Por sua vez, irá chamar o método de atualização de todos os sprites.
draw(context): Desenhe a função chamada pelo mecanismo. Por sua vez, irá chamar o método draw de todos os sprites.
cloneAtPosition(sprite, x, y): Clona o modelo de sprite e coloca a nova instância nas coordenadas especificadas.
width(), height(): Retorna o tamanho do mundo em pixels.
getWorldIndex(object): Calcula a posição do índice de um bloco com base em coordenadas. O objeto de argumento deve conter x e y ou ser um modelo com esses atributos. O índice é calculado com a altura da fórmula * x / tileWidth + y / tileHeight. Este método é usado para definir o id dos sprites de tile.
getWorldCol(x), getWorldRow(y): Retorna a posição do tile em colunas ou linhas de uma coordenada.
findAt(x, y, [type], [exclude], [collision]): Encontra o primeiro sprite na coordenada especificada. Use para detecção de colisão. Argumentos opcionais permitem que você filtre o que procurar.
filterAt(x, y, [type], [exclude], [collision]): O mesmo que findAt, mas retorna a lista de todos os sprites correspondentes ao invés do primeiro.
findCollidingAt(x, y): Encontra um bloco colidindo. Assim como chamando findAt(x, y, "tile", null, true).
findCollisions(): Localiza colisões para um determinado conjunto de mapa de colisão.

Eventos

attach: Disparado quando o sprite está ligado ao motor. Irá desencadear o método de anexação de todos os sprites do mundo.
detach: Disparado quando o sprite é destacado para o motor. Irá desencadear o evento de destaque de todos os sprites do mundo.
tap: Trigerred quando o usuário toca ou clica na tela. O retorno de chamada será passado no evento DOM estendido com estas propriedades: canvas, canvasX, canvasY, world, worldX e worldY.
key: Trigerred em um evento de chave. O retorno de chamada do evento será passado no evento DOM como argumento.

-Backbone.WorldEditor:

Backbone.WorldEditor é um modelo que exibe uma paleta de sprites e permite ao usuário editar uma instância de Backbone.World colocando e removendo sprites.Exemplo:

Descrição: Backbone.Input

Atributos

x, y: Posição de posicionamento superior esquerdo em pixels do editor na tela.
width, height: Tamanho do editor em pixels.
tileWidth, tileHeight: Tamanho dos sprites desenhados na paleta.
padding: Preenchimento em pixels ao redor de sprites.
backgroundColor: Cor de fundo do editor.
selectColor: Fundo e cor de contorno de um sprite selecionado.
selected: O nome do sprite atualmente selecionado.
spriteNames: Ordenação ordenada de nomes de sprites na paleta.

Opções

world: O Backbone.World para editar.
debugPanel: Opcional. Se passado, as coordenadas do mouse serão exibidas.

Eventos

attach: Disparado quando o sprite está ligado ao motor. Vai começar a ouvir a entrada do usuário.
detach: Disparado quando o sprite é destacado para o motor. Parará de ouvir a entrada do usuário.

Como funciona

A paleta é desenhada como uma série de peças da esquerda para a direita, de cima para baixo. Cada tile é um sprite. O sprite pode ser maior que o tamanho do bloco especificado.

-Backbone.Hero:

Eventos

O Backbone.Hero tem os mesmos eventos que o Backbone.Character.

Como funciona

O estado do atributo determina a animação atual. Um estado é um par de movimento e direção. Por exemplo, idle-right, walk-left e jump-right.

Segurar um tecla permite que o personagem se mecha conforme seja executado.

Colisões

Personagem detecta colisões de blocos ou outros caracteres para restringir seus movimentos. Ele faz isso usando o método de detecção de colisões findCollidings do Backbone.World. Toda atualização, colisões com outros sprites são detectadas no esboço do sprite:

Descrição: Hero Collisions

As colisões são tratadas apenas quando necessário. Por exemplo, quando as colisões de salto são manipuladas apenas na parte superior e direita. A decisão é baseada em olhar para velocidade e yVelocity. Para a gravidade, uma verificação é executada toda vez na parte inferior do sprite para aterrissar ou cair.

var bottomWorld = this.world.height() + tileHeight,

floor = this.get("floor") || bottomWorld,

bottomY = Math.min(floor, bottomWorld);

for (i = 0; i < this.collisionMap.bottom.sprites.length; i++) {

sprite = this.collisionMap.bottom.sprites[i];

bottomY = Math.min(bottomY, sprite.getTop(true));

if (sprite.get("type") == "platform") bottomPlatform = sprite;

}

...

if (yVelocity > 0 && heroBottomY >= bottomY) {

// Stop falling

land(bottomY);

for (i = 0; i < this.collisionMap.bottom.sprites.length; i++)

this.collisionMap.bottom.sprites[i].trigger("hit", this, "top", cur.dir);

if (this.cancelUpdate) return true;

} else if (cur.mov != "jump" && yVelocity == 0 && heroBottomY < bottomY) {

// Start falling if no obstacle below

attrs.nextState = state;

attrs.state = this.buildState("jump", cur.mov2, cur.dir);

} else if (yVelocity == 0 && heroBottomY == bottomY) {

// On a floating platform - same vertical velocity

if (bottomPlatform)

relativeVelocity = bottomPlatform.get("velocity");

}

Quando um obstáculo é atingido, o personagem para de se mover. Seu x está ancorado e a velocidade definida como 0.

if (velocity >= 0) {

// Stop if obstacle to the right

var rightX = this.world.width();

for (i = 0; i < this.collisionMap.right.sprites.length; i++)

if (heroTopY > 0 )

rightX = Math.min(rightX, this.collisionMap.right.sprites[i].getLeft(true));

if (heroRightX >= rightX) {

attrs.velocity = velocity = 0;

attrs.x = x = rightX - heroWidth - paddingLeft;

for (i = 0; i < this.collisionMap.right.sprites.length; i++)

this.collisionMap.right.sprites[i].trigger("hit", this, "left", cur.mov2);

if (this.cancelUpdate) return true;

}

Uma colisão com outros sprites aciona um evento de acerto naquele sprite. O mensageiro do evento receberá o sprite colidindo (herói), e sua posição relativa onde ocorreu o golpe (esquerda do sprite do enemie neste caso).

Uso Este trecho foi retirado do exemplo do Mario.

Backbone.Mario = Backbone.Hero.extend({

defaults: _.extend({}, Backbone.Hero.prototype.defaults, {

name: "mario",

spriteSheet: "mario"

})

});

var canvas = document.getElementById("foreground");

var spriteSheets = new Backbone.SpriteSheetCollection([{

id: "mario",

img: "#mario",

tileWidth: 32,

tileHeight: 64,

tileColumns: 21,

tileRows: 6

}]).attachToSpriteClasses();

var input = new Backbone.Input({

drawTouchpad: true,

drawPause: true

});

var mario = new Backbone.Mario({

x: 400, y: 400

}, {

input: input

});

var world = new Backbone.World({

width: 30, height: 18,

tileWidth: 32, tileHeight: 32,

backgroundColor: "rgba(66, 66, 255, 1)"

});

world.add(mario);

var engine = new Backbone.Engine({}, {

canvas: canvas,

input: input

});

engine.add([

world,

input

]);

-Backbone.Button:

Backbone.Button é um Backbone.Element que ao tocar / clicar executa uma ação pré-definida.

Descrição: Backbone.Input

Uso

var button = new Backbone.Button({

  x: 4, y: 4, width: 52, height: 52, borderRadius: 5,

  img: "#icons", imgX: 0, imgY: 0, imgWidth: 32, imgHeight: 32, imgMargin: 10

});

button.on("tap", function() {

  console.log("button tapped!");

});