Manual de utilização MAWI
Contents
1. Portanto tudo que deve ser renderizado est pendurado neste SceneGraph Exemplo de cria o de objeto e adi o ao grafo var piso1 new Bloco piso1 m 1 0 0 1 0 175 piso1 height 30 pisol width 165 var piso2 new Bloco piso2 m 1 0 0 1 350 100 piso2 height 30 piso2 width 1200 var noPrincipal SceneGraph root add piso1 noPrincipal add piso2 Neste exemplo adicionamos o objeto piso1 na raiz do grafo de cena que retorna o n que foi armazenado na vari vel noPrincipal Em seguida adicionamos o objeto piso2 como filho de noPrincipal Assim se a matriz de transforma o 2D do objeto piso1 for alterada ter influ ncia na posi o de piso2 Por exemplo se transladarmos piso1 de 100 pixels seus filhos ser o transladados tamb m m 6 render context render context Figura 1 Representa o gr fica da estrutura SceneGraph Exemplo completo lt html gt lt head gt lt title gt Demol lt title gt lt meta http equiv Content Type content text html charset UTF 8 gt lt script type text javascript src mawi engine js gt lt script gt lt script type text javascript src mawi core js gt lt script gt lt script type text javascript src mawi physics js gt lt script gt lt script type text javascript src mawi scenegraph js gt lt script gt lt script type text javascript gt window onload function Engine init canvasld innerWidth2. ngulo final reverse ctx arc 100 100 15 O 2 Math PI false ctx closePath ctx fill Esfera prototype new Drawable Instanciando o objeto var bola new Esfera bola m 1 0 O 1 100 500 bola height 15 bola width 15 Scenegraph Cada elemento renderiz vel armazenado em um grafo de cena com uma refer ncia global SceneGraph Neste grafo de cena poss vel adicionar n s hierarquicamente Cada n possui um objeto atributo obj e uma lista de filhos O atributo obj por sua vez deve ser um objeto Drawable que possui sua pr pria matriz de transforma o 2D que representa sua transforma o em rela o ao seu pai A estrutura de dados que define um n a classe Node function Node obj parent this obj obj this parent parent this children new Array this add function obj var node new Node obj this this children push node return node e obj objeto renderiz vel Deve ser um objeto Drawable que possua sua matriz de transforma o 2D e um m todo render e add filho adiciona um n filho ao n atual e retorna a refer ncia para este n filho Os n s devem ent o ser adicionados ao SceneGraph Este possui um m todo render que inicia da raiz invoca o rendeR do obj da raiz e parte para seus filhos repetindo o processo at cobrir todos os elementos do grafo de cena O objeto SceneGraph invocado automaticamente pelo Engine em seu gameloop
3. 0 50 innerHeight 0 50 var piso1 new Bloco piso1 m 1 0 0 1 30 175 piso1 height 30 pisolwidth 30 var piso2 new Bloco piso2 m 1 0 0 1 250 100 piso2 height 30 piso2 width 120 var noPrincipal SceneGraph root add piso1 noPrincipal add piso2 Engine run lt script gt lt style type text css gt Hcanvasldf background color black lt style gt lt head gt lt body gt lt canvas id canvasld gt lt canvas gt lt body gt lt html gt Ilustra o 2 Imagem Gerada pelo c digo Demo1 Adicionando Eventos poss vel adicionar captura de eventos ao canvas ou janela normalmente da forma mais tradicional Por m a fun o Engine processinput pode ser usada para processar os dados de entrada do usu rio A fun o processinput invocada dentro do gameloop ficando sincronizada com a renderiza o ou processamento de colis o Exemplo window onkeydown function event controlDownFunction event window onkeyup function event controlUpFunction event ou Engine processinput handleKeys Anima es Anima es utilizando efeitos j implementados pelo framework ou desenhos que usam formas primitivas arcos retas ou curvas de bezier podem ser realizadas dentro do m todo render de cada objeto renderiz vel que possuir as propriedades de um Drawable Geralmente o objeto renderiz vel possui um ou mais atributos que controla
4. m algumas fun es para calcular colis o ou calculo com vetores gt lt script type text javascript src mawi physics js gt lt script gt e lt Arquivo que cont m algumas classes para auxiliar a comunica o via webservice gt lt script type text javascript src mawi net js gt lt script gt e lt Arquivo que cont m o grafo de cena e os n s onde s o pendurados os atores gt lt script type text Jjavascript src mawi scenegraph js gt lt script gt Ainda temos alguns recursos n o obrigat rios que podem ser inclu dos e lt Framework para auxiliar na cria o de efeitos de chuva Exemplo no arquivo chuva html gt lt script type text Jjavascript src chuva js gt lt script gt e lt Framework para auxiliar na cria o de efeitos de explos o Exemplo no arquivo explosion html gt lt script type text javascript src explosion js gt lt script gt e lt Framework para auxiliar na cria o de efeitos de brilho Exemplo no arquivo shine html gt lt script type text Jjavascript src shine js gt lt script gt e lt Framework para auxiliar na cria o de smiles animados Exemplo no arquivo smile html gt lt script type text Jjavascript src smile js gt lt script gt e lt Framework para auxiliar na cria o de efeitos de fuma a fogo ou nuvem Exemplo no arquivo smoke html gt lt script type text Jjavascript s
5. Manual de utiliza o MAWI Nascido a partir de um PIBIC MAWI um projeto da cria o de um motor 2D multiplataforma para o ambiente web usando recursos do estado da arte introduzidos pelo HTMLS n o s para criar aplica es visualmente interessantes mas tamb m para tirar vantagem dos novos recursos que o HTML5 tem a oferecer criando aplica es interativas A cria o de jogos digitais e expans o das bibliotecas necess rias ao seu funcionamento uma atividade multidisciplinar que envolve diversas reas da computa o e por tratar se de uma atividade l dica visa tamb m motivar o interesse dos alunos em diversas reas da computa o al m de qualific los a respeito das compet ncias necess rias para cria o de aplica es web utilizando HTMLS MAWI inteiramente feito em JavaScript Por ter um objetivo did tico maior do que comercial todos os c digos fontes dispon veis n o est o compactados e nem muito otimizados para que seja poss vel entender os conceitos mais facilmente A inclus o dos arquivos pode ser realizado no cabe alho de qualquer p gina web e lt Arquivo que cont m a estrutura que representa o la o principal e objeto drawable gt lt script type text javascript src mawi engine js gt lt script gt e lt Arquivo que cont m fun es utilit rias usadas no motor gt lt script type text javascript src mawi core js gt lt script gt e lt Arquivo que cont
6. a a propriedade left true e a segunda para left false Se houver apenas uma posi o poss vel para o ator left deve ser true e update obj O par metro obj o objeto sendo animado Ao final de cada chamada do m todo run ctx obj invocado o m todo update Neste m todo s o atualizados os ticks que verificam se o spritesheet deve ser trocado Al m disso invocado o m todo callback this obj unfinished se este foi fornecido pelo usu rio Isto pode servir por exmeplo para criar outro objeto ou mudar a anima o dependendo do estado do objeto O par metro unfinished indica se a anima o ainda n o foi executada por completo ao menos uma vez e width largura do sprite e height altura do sprite e name Um nome qualquer para a anima o Pode ser usado por exemplo para saber se determinada anima o j est sendo executada e callback fun o opcional fornecida pelo usu rio que pode receber tr s par metros o CAnimation sendo executado objeto sendo animado e um booleano indicando se a anima o continua Clique para Mudar a propriedade LEFT do ator animado Ilustra o 5 Exemplo de anima o usando sprites e a propriedade left Por exemplo podemos criar um n do nosso grafo de cena representando o ator e criar como seus filhos um objeto que seja possua uma anima o por sprites e um outro que possua anima o por renderiza o de primitivas Sons Sons s o tocados atrav s do objeto Audio introdu
7. e exibi o das imagens na tela mais f cil requisitar uma nica imagem e mostrar apenas parte dela do que buscar v rias imagens e exibi las Isso ainda mais percept vel em uma p gina web onde cada imagem buscada por uma requisi o HTTP Em suma anima o usando Spritesheet nada mais do que carregar um spritesheet e mudar qual sprite renderizado em r pidas sucess es para dar a ilus o de movimento assim como um desenho animado No MAWI as anima es baseadas em spritesheets s o realizadas pela classe CAnimation A ideia b sica ir alternando entre essas poses com intervalos definidos pelo programador dando a impress o de movimento poss vel que cada objeto do motor possua uma variedade de anima es e dependendo de seu estado ative a anima o adequada ver exemplo jacar Tamb m poss vel mesclar diferentes tipos de anima es em um s ator CAnimation e horizontalSprites indica se os spritesheets cont m sequ ncias de anima o na horizontal default ou na vertica e width largura do sprite O motor permite que seja diferente do tamanho da figura e height altura do spritel O motor permite que seja diferente do tamanho da figura e frames Matriz com tr s colunas A primeira coluna a Imnagem objeto Image Javascript A segunda e terceira colunas possuem um vetor de mesmo tamanho O primeiro vetor aramzena os intervalos de tempo que devem ser esperados antes de trocar para o pr ximo sp
8. m a anima o sua dura o dentre outros par metros Exemplo var sol step 0 1 frame 0 limit 0 6 m 1 0 0 1 150 0 height 60 width 60 render function ctx ctx save ctx shadowColor yellow ctx shadowOffsetX O ctx shadowOffsetY 5 ctx shadowBlur 20 ctx beginPath ctx arc sol m 4 O sol width sol frame 0 2 Math PI false if sol frame sol limit sol frame sol limit 1 sol step sol step 1 sol frame sol step ctx fillStyle yellow ctx fill ctx lineWidth 3 ctx strokeStyle orange ctx stroke ctx restore sol prototype new Drawable Para Adicionar o sol a raiz da cena basta executar SceneGraph root add sol Ilustra o 3 Exemplo de anima o usando primitivas no m todo render Anima o usando Sprites Um sprite uma nica imagem que ser incorporada a uma cena maior de forma que seja parte daquela cena uma forma popular de criar cenas mais complexas pois poss vel manipular cada sprite separadamente Isto permite um controle maior sobre como a cena renderizada e at como os jogadores interagem com a cena Alguns jogos podem ter centenas de sprites Diante disso carregar cada sprite pode ser custoso por isso muitos jogos utilizam os chamados spritesheets Quando v rios sprites s o colocados em uma nica imagem chamamos esta imagem de spritesheet Spritesheets s o usadas para melhorar o processo de busca
9. o se deseja ser usado o tratamento default n o realiza a o alguma e PplaySound som volume Toca um arquivo de som e mainLoop Game loop aqui s o realizadas as chamadas de renderiza o f sica e controle dos FPS Chamado automaticamente pelo motor n o necessita ser invocado diretamente Exemplo de utiliza o Engine init canvasld 640 480 CRIAR CENA AQUI Engine run Drawable Drawable Todo objeto dentro do grafo de cena que ser renderizado deve possuir algumas propriedades espec ficas uma matriz de coordenadas homog neas m uma fun o de renderiza o render e propriedades de largura e altura width e height e m 6 Matriz de transforma o de coordenadas homog neas 2D do objeto Armazena a transla o rota o e escala do objeto obtidas atrav s de transforma es afins As 6 posi es representam na ordem as 3 linhas da matriz exceto a coluna 0 0 1 de transforma o 2D e render ctx fun o respons vel por renderizar o objeto A renderiza o default desenha um ret ngulo de acordo com a largura e altura do objeto e height altura do objeto usado para auxiliar na renderiza o e eventualmente at na detec o de colis o e width largura do objeto usado para auxiliar na renderiza o e eventualmente at na detec o de colis o Exemplo de defini o de um objeto Drawable function Esfera render function ctx ctx beginPath x y raio ngulo inicial
10. rc smoke js gt lt script gt lt script type text Jjavascript src smokeCloud js gt lt script gt e lt Framework para auxiliar na cria o de atores no formato de peixe Exemplo no arquivo peixe html gt lt script type text Jjavascript src peixe js gt lt script gt Estas p ginas mostram alguns efeitos predefinidos dispon veis no MAWI Para auxiliar na programa o o motor gera o c digo fonte correspondente ao efeito visualizado bastando ent o colocar o c digo gerado na cena desejada e ajustar de acordo com a hierarquia Engine Engine a principal classe classe do motor representa o motor e seu game loop essencial para funcionamento do mesmo Gerencia as chamadas de renderiza o processamento de entrada do usu rio processamento de detec o de colis o e movimento som e comunica o e init canvas largura altura Define o canvas onde o motor atuar e a altura e largura que este canvas deve ter e run Come a a rodar o motor A partir da chamada deste m todo o motor inicia o game loop e stop Para momentaneamente o game loop Para continuar a execu o basta invocar novamente o m todo run e render M todo que trata as chamadas de renderiza o N o necess rio invocar este m todo diretamente Limpa a tela e invoca o objeto SceneGraph para renderizar os objetos da cena e physics fun o que define como ser o tratamento da f sica entre os objetos Deve ser setad
11. rite do spritesheet O segundo vetor o ndice de cada sprite dentro do spritesheet que ser utilizado em cada intervalo definido no primeiro vetor alligator arun frames j1 VE 95 10 15 20 29 30 35 10 2 9 4 3 2 1 0 1 VE alligator arun zopUffaer 10 alligator arun le e ndo alligator arun len Ilustra o 4 Exemplo do funcionamento de um objeto CAnimation No exemplo da ilustra o 3 temos um spritesheet vertical J1 um objeto do tipo Image figura a direita A anima o definida possuir 8 sprites Inicialmente o sprite de ndice 02 ser mostrado ap s 5 frames o sprite ser trocado pelo sprite 03 Ap s mais cinco frames 10 o sprite 03 ser trocado pelo sprite 4 e assim sucessivamente e Cont Define se a anima o deve ser repetida indefinidamente ap s percorrer toda a sequ ncia de sprites Ap s ltimo sprite a anima o recome a do in cio e run ctx obj Executa uma anima o importante observar que o objeto animado deve ter uma propriedade chamada left Esta propriedade diz se o ator est virado para esquerda ou direita O motor considera que os spritesheets cont m duplas de sequ ncias de anima o A primeira para o ator voltado para esquerda e a segunda para o ator voltado para direita espelho Desta forma basta mudar a propriedade left do objeto que a anima o ser trocada automaticamente Na figura anterior a imagem de jacar possui duas colunas a primeira par
12. zido no HTML5 Os formatos suportados mais comuns s o mp3 e ogg h ainda alguma varia o no suporte entre os navegadores sendo que o ideal oferecer recursos nos dois formatos Para tocar um som em determinado momento var som identificaNavegador firefox new Audio jump ogg new Audio jump mp3 objeto audio e volume 0 a 1 Engine playSound som 1 0 M sica de Fundo H a possibilidade de definir uma m sica de fundo tocada repetidamente pelo motor var sound identificaNavegador firefox new Audio intro ogg new Audio intro mp3 Engine music sound Ap s o Engine run poss vel ajustar outros atributos da m sica de fudo como volume entre 0 e 1 e repeti o Engine music volume 1 Engine music loop true Figura 6 Arquitetura de grafo ac clico das bibliotecas do MAWI
Download Pdf Manuals
Related Search