game em html5

[MafnGamer 13]

Mano o canvas eu desenrolo, matriz so o basico. E tambem não existe matriz no javascript :thumbsup:. Minha curiosidade é fazer o tile map só isso :D

[pvpzaum 0]

Sim tudo bem o fato de não existir na documentação não significa que você não consiga fazer e se eu estou perguntando se você sabe isso é por que precisará disso para fazer seu tile map na mão.

[MafnGamer 13]

Mano matriz no javascript eu não sei como fazer

:huh:

[JCMais 75]

Mano matriz no javascript eu não sei como fazer

:huh:

 

 

var m = [ [ 1, 0, 1 ], [ 1, 1, 0 ], [ 1, 1, 0 ] ];

[MafnGamer 13]

Vlw JCMais eu pensei q fosse impossivel fazer uma no javascript

[JCMais 75]

Tava de bobeira aqui, e como também estou estudando desenvolvimento de games, resolvi fazer um exemplo bem rústico para você ter uma ideia de como fazer um tile map: http://jsfiddle.net/JCMais/RkFHy/

 

Tem bastante o que melhorar aí, mas isso é com você. :thumbsup:

[MafnGamer 13]

Cara vlw muito obrigado pensei q nunca ia conseguir achar um tile map em HTML5. Você usa HTML5 nos games?

[JCMais 75]

Sim, na verdade ainda estou apenas estudando, não criei nenhum jogo relevante, no momento estou lendo o livro Foundation HTML5 Animation with JavaScript, que foca apenas em animação, trigonometria, física, etc. Agora msm estou tentando fazer um gerador de particulas :D

[MafnGamer 13]

Já que você ta vendo isso tb você sabe um jeito melhor de atualizar o canvas? pq eu to usando o setInterval mas tá muito ruim firefox

[JCMais 75]

Já que você ta vendo isso tb você sabe um jeito melhor de atualizar o canvas? pq eu to usando o setInterval mas tá muito ruim firefox

 

Usar interval para animação não é recomendado, pois os timers do Javascript não são exatos, se o navegador tiver algo importante para fazer ele vai deixar o teu interval de lado e realizar a tarefa importante, e só depois executar o teu interval, isso dá um delay consideravel à tua animação.

 

A maneira correta é usar o metódo window.requestAnimationFrame. Como este metódo ainda está em fase experimental na maioria dos navegadores, ele está prefixado, e portanto o ideal é usar um Polyfill:

(function() { //requestAnimationFrame Polyfill
   var lastTime = 0;
   var vendors = ['ms', 'moz', 'webkit', 'o'];
   for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
       window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
       window.cancelAnimationFrame = 
         window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
   }

   if (!window.requestAnimationFrame)
       window.requestAnimationFrame = function(callback, element) {
           var currTime = new Date().getTime();
           var timeToCall = Math.max(0, 16 - (currTime - lastTime));
           var id = window.setTimeout(function() { callback(currTime + timeToCall); }, 
             timeToCall);
           lastTime = currTime + timeToCall;
           return id;
       };

   if (!window.cancelAnimationFrame)
       window.cancelAnimationFrame = function(id) {
           clearTimeout(id);
       };
}());

:seta: http://paulirish.com/2011/requestanimationframe-for-smart-animating/

 

Usando:

(function drawFrame() {

   /*
      atualiza o canvas aqui.
   */

   window.requestAnimationFrame( drawFrame );

)()};

[pvpzaum 0]

Já que você ta vendo isso tb você sabe um jeito melhor de atualizar o canvas? pq eu to usando o setInterval mas tá muito ruim firefox

 

Você pode usar o setTimeout. Qualquer duvida de como usar ele manda mensagem aqui.

 

Edit: Malz achei que ele queria outra coisa.

[MafnGamer 13]

JCMais eu num etendi o que é essa

var src = images[i]

poderia me esclarecer?

[JCMais 75]

Segue o trecho referente à esta parte comentado:

for( i = 0; i < images.length; i++ ){ //Efetua um loop na array contendo os links para as imagens que serão usadas no mapa.
   var src = images[i],             //Pega-se a imagem atual, e à coloca na variavel src.
       img = new Image();          //Cria-se um novo elemento IMG e o adiciona à variavel img, também poderia usar document.createElement( 'img' ),
                                   //e
   img.src = src;                  //define a propriedade src deste elemento para o valor da variavel src (no caso, o link da imagem).

   img.onload = (function( index ) { //Quando a imagem for carregada, executar esta função, usei uma função auto executavel como wrapper para preservar
       return function(){            //o valor do i atual, caso usasse apenas uma função normal passando o i como parâmetro, ele iria sempre ter o último valor possivel para o i,
           imageLoaded( this, index );//devido a função não ser executada imediatamente (a imagem ainda está carregando, e o loop vai terminar antes da mesma carregar)
       };
   }( i ));
}

var imageLoaded = ( function() { //aqui novamente foi usada uma função anônima auto-executavel, porém desta vez para
   var totalImagesLoaded = 0; //definir uma variavel interna estatica.

   return function( image, index ){
       ++totalImagesLoaded;
       images[index] = image; //substitui o link da nossa array images, pelo seu objeto Image correspondente.
       if( totalImagesLoaded === images.length ) //se a quantidade de imagens carregadas for igual ao tamanho da nossa array de imagens
           drawTileMap();                        //significa que todas as imagens foram carregadas, logo pode-se renderizar o mapa.
   }
}());

 

Essa parte é basicamente um ResourceLoader, se você já estiver utilizando algum (como o PxLoader), use-o no lugar, fiz assim apenas para não ter que incluir dependências.

[MafnGamer 13]

Ei JCMais você sabe como usar a api fullscreen do HTML5? pois venho procurando como usar mas não consigo :cry:

[JCMais 75]

Eu ainda não li à respeito, mas tem conteúdo nesse blog sobre o assunto :seta: http://jlongster.com/2011/11/21/canvas.html

[MafnGamer 13]

Alguem mais aqui do forum usa html5 nos games?

[Gille New 9]

eu uso cara