HTML5 - - Modernize Seu Jogo HTML5 Canvas: APIs Offline, De Arrastar e Soltar e de Arquivo

8/16/2019 HTML5 - - Modernize Seu Jogo HTML5 Canvas: APIs Offline, De Arrastar e Soltar e de Arquivo

1/11

HTML5 - - Modernize seu jogo HTML5Canvas: APIs offline, de arrastar e soltar

e de arquivo

David Rousset

Technical EvangelistRecursos HTML5 em navegadores modernos como o Internet Explorer 10 possibilitam uma classe totalmente

nova de aplicativos Web e de cenários de jogos. Este artigo em duas partes demonstra como usei alguns

desses recursos novos para modernizar meu último, jogo de plataforma HTML5. Na Parte 1 deste artigo, faleisobre como usar transformações 3D, transições e layout de grade CSS3. Neste artigo, mostrarei como usar

as APIs offline, de arrastar e soltar e de arquivo para implementar algumas ideias interessantes.

Jogo no modo offlineA versão original de meu jogo funcionava somente se o seu dispositivo estivesse conectado à Internet. Se

você quisesse jogar meu jogo fabuloso no trem, em um táxi ou qualquer outro lugar sem uma conexão de

Internet, estava sem sorte—preso sem acesso àquela maravilha. E isso era uma pena, porque realmente não

há nada em meu jogo que precise de uma conexão ativa com o servidor Web uma vez que todos os recursos

tenham sido baixados. Felizmente, APIs offline fornecem uma solução para isso em HTML5.

Etapa 1: Escolha os recursos que quiser armazenar no cacheNa verdade é bem fácil dizer ao navegador que recursos você quer armazenar no cache para uso offline.

Mas, antes de ir adiante, recomendo que você leia estes dois artigos:

Criação de experiências offline com o AppCache e IndexedDB HTML5 de nosso blog do IE

Application Cache API ("AppCache"), da documentação do MSDN

Para o meu jogo, criei o arquivo dragDropLogic.js contendo o código mostrado na Figura 1.

CACHE MANIFEST

# Version 1.5

CACHE:

index.html

modernplatformer.css

img/MonsterA.png

.. up to ..

img/MonsterD.png

img/Player.png

img/offlinelogoblack.png

Java

HTML5 - - Modernize seu jogo HTML5 Canvas: ... https://msdn.microsoft.com/pt-br/library/jj9380...

1 de 11 25-05-2016 19:52


2/11

Figura 1 - Platformer.cache

Inseri todos os arquivos PNG contendo meus sprites, fundo, camadas e sobreposições; os arquivos JS

necessários da estrutura EaseJS; e minha própria lógica de jogo e os principais arquivos HTML e de CSS.

Depois simplesmente indico que quero usar esse arquivo de manifesto em minha página HTML principal.

Neste caso, é index.html:

img/Backgrounds/Layer0_0.png

.. up to ..

img/Backgrounds/Layer2_2.png

img/Tiles/BlockA0.png

.. up to ..

img/Tiles/BlockA6.png

img/Tiles/BlockB0.png

img/Tiles/BlockB1.png

img/Tiles/Gem.png

img/Tiles/Exit.png

img/Tiles/Platform.png

overlays/you_died.png

overlays/you_lose.png

overlays/you_win.png

src/dragDropLogic.js

src/main.js

src/ModernizrCSS3.js

src/easeljs/utils/UID.js

src/easeljs/geom/Matrix2D.jssrc/easeljs/events/MouseEvent.js

src/easeljs/utils/SpriteSheetUtils.js

src/easeljs/display/SpriteSheet.js

src/easeljs/display/Shadow.js

src/easeljs/display/DisplayObject.js

src/easeljs/display/Container.js

src/easeljs/display/Stage.js

src/easeljs/display/Bitmap.js

src/easeljs/display/BitmapAnimation.js

src/easeljs/display/Text.js

src/easeljs/utils/Ticker.js

src/easeljs/geom/Rectangle.js

src/easeljs/geom/Point.js

src/easeljs/XNARectangle.js

src/easeljs/PlatformerHelper.js

src/easeljs/ContentManager.js

src/easeljs/Tile.js

src/easeljs/Gem.js

src/easeljs/Enemy.js

src/easeljs/Player.js

src/easeljs/Level.js

src/easeljs/PlatformerGame.js

NETWORK:

*

HTML


2 de 11 25-05-2016 19:52


3/11

Note que o arquivo de seu manifesto deve ser servido como “text/cache-manifest”. Para o meu jogo, adicionei

um novo tipo de conteúdo .cache mapeado para text/cache-manifest, pois é armazenado no armazenamento

de blob do Windows Azure.

Tenha em mente que essa especificação não permite alterações delta. Mesmo que um de seus arquivos

mude, você precisa forçar um redownload completo para o navegador se atualizar para a nova versão.

Contudo, qualquer alteração no arquivo de seu manifesto será excluída pelo navegador, que então baixa

todos os recursos especificados no arquivo. A alteração pode ser um número de versão, uma data, um

GUID—o que quer que funcione para você—no início do arquivo através de um comentário (“Versão 1.5” naFigura 1).

Etapa 2: Modificação da lógica para o carregamento dos níveisA versão original de meu código baixava cada nível através de uma chamada de XHR para o servidor Web.

Preciso mudar isso para fazer meu jogo funcionar no modo offline. Além disso, gostaria de indicar ao usuário

que ele está jogando offline no modo offline incluindo o logotipo HTML5 associado "oficial" dentro da tela do

jogo.

Vejamos as mudanças para fazer isso acontecer. Na primeira vez que o usuário lançar meu jogo, todos os

níveis serão baixados (descritos nos arquivos {x}.txt) para o armazenamento local. Essa operação é

amplamente suportada (desde o Internet Explorer 8) e bastante fácil de usar—e, mais importante, está

disponível no modo offline.

A Figura 2 mostra o código que eu adicionei em PlatformerGame.js.

HTML5 Platformer Game

// ...

PlatformerGame.prototype.DownloadAllLevels = function () {

// Searching where we are currently hosted

var levelsUrl = window.location.href.replace('index.html', '') +

"levels/";

var that = this;

for (var i = 0; i < numberOfLevels; i++) {

try {

var request = new XMLHttpRequest();

request.open('GET', levelsUrl + i + ".txt", true);

request.onreadystatechange = makeStoreCallback(i, request, that);

request.send(null);

}

catch (e) {

// Loading the hard coded error level to have at least something

// to play with console.log("Error in XHR. Are you offline?");

if (!window.localStorage["platformer_level_0"]) {

Java


3 de 11 25-05-2016 19:52


4/11


5/11

armazenamento local através da chave apropriada para recuperar o conteúdo baixado anteriormente.

Etapa 3: Confirmação de online/offline e exibição de um logotipo

quando lançado no modo offlineDois testes são necessários para confirmar que o jogo está sendo executado no modo offline. O primeiro é se

o navegador implementou eventos offline/online, como a maioria dos navegadores faz. Se o navegador

disser que o usuário está offline, isso é confirmado e o jogo deve se alternar automaticamente para a lógica

offline Contudo, frequentemente essa verificação simples não é suficiente. O navegador pode dizer que está

online, mas não sabe se o servidor Web ainda está online ou não. Assim, você precisa de uma segunda

verificação executando ping no servidor com uma XHR simples. A Figura 3 mostra código para as duas

verificações.

PlatformerGame.prototype.CheckIfOnline = function () {1.

if (!navigator.onLine) return false;2.

var levelsUrl = window.location.href.replace('index.html', '') +3.

"levels/";4.try {5.

var request = new XMLHttpRequest();6.

request.open('GET', levelsUrl + "0.txt", false);7.

request.send(null);8.

}9.

catch (e) {10.

return false;11.

}12.

if (request.status !== 200)13.

return false;14.

else15.

return true;16.

};17.

Figura 3 - Verificação do modo offline

Meu teste é tentar baixar o primeiro nível. Se falhar, o jogo alterna para a parte offline de meu código. Agora

aqui está o código lançado na parte do construtor de PlatformerGame.js:

PlatformerGame.IsOnline = this.CheckIfOnline();1.

// If we're online, we're downloading/updating all the levels2.

// from the webserver3.

if (PlatformerGame.IsOnline) {4.

this.DownloadAllLevels();5.

}6.

// If we're offline, we're loading the first level7.

// from the cache handled by the local storage8.

else {9.

this.LoadNextLevel();10.

}11.

E aqui está o código exibindo o logotipo de offline em Level.js na função CreateAndAddRandomBackground:

if (!PlatformerGame.IsOnline) {1.


5 de 11 25-05-2016 19:52


6/11

offlineLogo.x = 710;2.

offlineLogo.y = -1;3.

offlineLogo.scaleX = 0.5;4.

offlineLogo.scaleY = 0.5;5.

this.levelStage.addChild(offlineLogo);6.

}7.

Com essas alterações implementadas, a Figura 4 mostra a aparência de meu jogo quando é lançado semuma conexão de rede.

Figura 4 - Jogo de plataforma HTML5 no modo offline

O logotipo de offline é exibido logo acima da taxa de quadros, indicando ao usuário que o jogo está sendo

executado puramente offline.

Etapa 4: Download condicional dos arquivos MP3 ou OGG e

armazenamento deles como blob em IndexedDBIsso é algo que não implementei, mas gostaria de compartilhar o conceito com você como um bônus, para

que você mesmo possa implementá-lo.

Você pode ter notado que eu não incluí os efeitos sonoros e a música de meu jogo no arquivo do manifesto

na Etapa 1. Quando escrevi esse jogo HTML5, meu primeiro objetivo era que fosse compatível com o maior

número de navegadores possível. Para isso, tenho duas versões dos sons: MP3 para o Internet Explorer e o

Safari, e OGG para o Chrome, Firefox e o Opera. O gerenciador de downloads de conteúdo baixa apenas o

tipo de codec suportado pelo navegador que lançar meu jogo. Isso porque não há necessidade de baixar a

versão OGG dos arquivos se eu estiver jogando o jogo no Internet Explorer, assim como não é preciso baixar

a versão MP3 para o Firefox.

O problema com o arquivo de manifesto é que você não indica continuamente qual recurso carregar com

base no suporte do navegador do momento. Cheguei a três soluções para contornar essa limitação:

Baixar as duas versões colocando todas as versões de arquivo no arquivo de manifesto. Isso é muito

simples de implementar e funciona bem, mas os usuários estarão baixando alguns arquivos que nunca

1.


6 de 11 25-05-2016 19:52


7/11

serão usados por alguns navegadores.

Criar um arquivo de manifesto dinâmico no lado do servidor detectando o agente do navegador para

reconhecer o codec suportado. Essa é definitivamente uma prática muito ruim!

2.

Usar um recurso no lado do cliente para detectar o suporte a codec no objeto do gerenciador de

conteúdo e depois baixar o formato de arquivo apropriado para IndexedDB ou para o armazenamento

local para uso offline.

3.

Creio que a terceira solução é a melhor, mas você precisa ficar atendo a algumas coisas para fazê-lafuncionar:

Se estiver usando armazenamento local, precisa codificar os arquivos em base64, e pode se deparar

com limites de cota se tiver muitos arquivos ou se estes forem grandes demais.

Se estiver usando IndexedDB, você pode armazenar a versão codificada em base64 dos arquivos ou

armazená-los como um blob.

A abordagem de blob é definitivamente a solução mais inteligente e eficiente, mas requer um navegador

muito atual, como a última versão do Internet Explorer 10 (PP5) ou do Firefox (11). Se estiver curioso com

esta ideia, veja a demo do complemento para Facebook de nosso site de test-drive do IE aqui:

Você encontrará mais detalhes sobre essa demo neste arquivo: Atualizações de IndexedDB para o IE10 e

aplicativos estilo Metro.

Na versão do jogo fornecida com esse artigo, decidi armazenar todos os formatos no cache (solução 1).

Posso atualizar isso em um artigo futuro implementando um armazenamento de IndexedDB em cache. Fique

ligado!

APIs de arrastar e soltar e de arquivoAqui está um recurso novo divertido que tira proveito das novas APIs de arrastar e soltar e de arquivo. O

usuário pode criar ou editar um nível usando seu editor de texto favorito e depois simplesmente arrastá-lo eu

explorador de arquivos e soltá-lo no jogo HTML5 e jogar!

Não entrarei em muitos detalhes sobre arrastar e soltar, pois isso foi muito bem coberto em Arrastar e soltar

HTML5 no IE10, que explica como a demo Magnetic Poetry foi criada. Recomendo a leitura daquele artigo

primeiro para um entendimento completo do código a seguir.

Para o meu jogo, criei o arquivo dragDropLogic.js contendo o código mostrado na Figura 5.

(function () {

"use strict";

var DragDropLogic = DragDropLogic || {};

var _elementToMonitor;

Java


7 de 11 25-05-2016 19:52


8/11

Figura 5 - dragDropLogic.js

O código de arrastar e soltar é chamado dentro de main.js na função startGame:

var _platformerGameInstance;

// We need the canvas to monitor its drag&drop events

// and the platformer game instance to trigger the loadnextlevel

// function

DragDropLogic.monitorElement = function (elementToMonitor,

platformerGameInstance) {

_elementToMonitor = elementToMonitor;

_platformerGameInstance = platformerGameInstance;

_elementToMonitor.addEventListener("dragenter",

DragDropLogic.drag,false);

_elementToMonitor.addEventListener("dragover",

DragDropLogic.drag, false);

_elementToMonitor.addEventListener("drop",

DragDropLogic.drop, false);

};

// We don't need to do specific actions

// enter & over, we're only interested in drop

DragDropLogic.drag = function (e) {

e.stopPropagation();e.preventDefault();

};

DragDropLogic.drop = function (e) {

e.stopPropagation();

e.preventDefault();

var dt = e.dataTransfer;

var files = dt.files;

// Taking only the first dropped file

var firstFileDropped = files[0];

// Basic check of the type of file dropped

if (firstFileDropped.type.indexOf("text") == 0) {

var reader = new FileReader();

// Callback function

reader.onload = function(e){

// get file content

var text = e.target.result;

var textLevel = text.replace(/[\s\n\r\t]/g, '');

// Warning, there is no real check on the consistency

// of the file.

_platformerGameInstance.LoadThisTextLevel(textLevel);

}

// Asynchronous read

reader.readAsText(firstFileDropped);

}

};

window.DragDropLogic = DragDropLogic;

})();

Java


8 de 11 25-05-2016 19:52


9/11

E isso é tudo! Por exemplo, copie e cole este bloco de texto em um arquivo .txt novo:

....................

....................

....................

.1..................

######.........#####

....................

.........###........

....................

.G.G.GGG.G.G.G......

.GGG..G..GGG.G......

.G.G..G..G.G.GGG....

....................

....................

.X................C.

####################

Agora arraste e solte-o no meu jogo. O novo nível será carregado como mágica, como pode ver na Figura 6.

// Callback function once everything has been downloaded

function startGame() {

platformerGame = new PlatformerGame(stage, contentManager, 800, 480,

window.innerWidth, window.innerHeight);

window.addEventListener("resize", OnResizeCalled, false);

OnResizeCalled();

DragDropLogic.monitorElement(canvas, platformerGame);

platformerGame.StartGame();

}


9 de 11 25-05-2016 19:52


10/11

Figura 6 - Um novo nível adicionado através da API de arrastar e soltar

Demo e código-fonteSe você quiser ver uma demonstração no Internet Explorer de todos os recursos implementados neste artigo,

assista a este vídeo curto:

Baixar o vídeo:MP4, WebM, HTML5 Video Player de VideoJS

Você também pode brincar com essa demo no Internet Explorer 10 ou seu navegador favorito aqui:. Jogo de

plataforma HTML5 moderno.


10 de 11 25-05-2016 19:52


11/11

Como você fez a gentileza de ler este artigo inteiro, desfrute o código-fonte inteiro aqui: Código-fonte do jogo

de plataforma HTML5 moderno.

| Home | Artigos Técnicos | Comunidade

© 2016 Microsoft


11 de 11 25-05-2016 19:52

HTML5 - - Modernize Seu Jogo HTML5 Canvas: APIs Offline, De Arrastar e Soltar e de Arquivo

Documents

Transcript of HTML5 - - Modernize Seu Jogo HTML5 Canvas: APIs Offline, De Arrastar e Soltar e de Arquivo