Autor Zpráva
Farrell
Profil
Zdravím

vytvářím hru inspirovanou bulánkama, bude to MP hromadná střílečka ve stylu bulánků, ovšem asi s jinou grafikou. Zatím pracuji na základním engine, ovšem už teď se dostávám do potíží. Hra běží na mém PC, které je většinou zaplé - http://78.102.201.48/ ale můžete si to i stáhnout... https://drive.google.com/file/d/0B-H9kIYCXx8UMmVRZlhMSmpOcDA/view

Základem je herní smyčka nastavená intervalem na 20ms, animace (zatím jen hráče) je nastavena v souladu s touhle hodnotou. Více je v souboru projekt.rtf, pak v samotném kódu. Problém je, že v Chrome mi panáček běhá bez problémů, ale ve Firefoxu se pohyb trhá. S těmito problémy jsem se ještě nesetkal a nevím, jak je řešit a jak nejlépe hru optimalizovat, aby běhala plynule ve všech běžných prohlížečích. Zatím zkoušeno pouze v Chrome a Firefoxu.

Bude to MP střílečka, tak je důležité kompenzovat různé latence a lagy, plánuju, že se každou herní smyčku pošle paket s pingem, případně doplněný např. o pohyb, zpětně se pak bude posílat paket s kontrolou pozice (proti hackům a mega lagům) a dalšími informacemi, to ještě není ujasněné. Hlavní je, aby klientská část byla dobře optimalizovaná aby bez větších obtíží včas odesílala správné pakety, aby hra byla dobře hratelná. Plánuju i nějaký antilag, pokud budou drobné problémy (počítání cest)...

Byl bych tedy vděčný za každou radu, klidně i poznámku k něčemu, co se vám nezdá, díky.

Farrell
1Pupik1989
Profil
Na smyčku použij requestAnimationFrame nebo setTimeout.
var timer = window.requestAnimationFrame       ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            function( callback ){
              window.setTimeout(callback, 1000/60);
            };

Volání pak vypadá asi takto:

N3D.prototype.mainLoop = function(){
  var that = this;
  
  if(this.paused){ return; }    
  
  this.render.clear();
  this.camera.update();
  
  if(typeof this.onUpdate === 'function'){
    this.onUpdate();
  }
  
  this.scene.update(this.render,this.camera);
  
  timer(function(){
    that.mainLoop();
  }); 
};

Další dobrou věcí je kešování, pokud k vlastnosti objektu přistupuješ v cyklu.

var sprite_collision = this.spriteCollision;
var sprites = this.sprites;
var sprite; 
var player_col_size = settings.player.colSize;                                

for(var key=0, length=sprites.length; key< length; key++) {
    sprite = sprites[key];
    sprite.tick();
    
    if( Collision.checkBoxBox
        (
            pPos,
            player_col_size,
            sprite.pos,
            sprite.size
        )
    ) {
        if( sprite_collision === 0 ) {
            sprite_collision = key;
            sprite.onStep();
        }
    } else if(sprite_collision === key) {
        sprite_collision = 0;
        sprite.onStepOut();
    }
    
}

this.spriteCollision = sprite_collision;

V tomu vrchnímu patří i další rada. Na indexované pole použij cyklus jako pro pole, ne objekt. Respektive chci říct, že pokud jsou klíče posloupné (0,1,2,3), tak index víš. Ve for(var key in obj) můžeš mít třeba i klíč ahoj

var arr = ['prvni','druhy','treti'];
arr.ahoj = 'ja jsem vlastnost "ahoj"';

for(var key in arr){
  console.log(key);
}

//0,1,2,ahoj


Nakonec ti doporučím poslední věc. Tou je oddělení toho, co se překresluje od toho, co je statické. Vytvoř si Canvas a vykresli na něj pozadí. Pozadí se nemění. Nad to absolutně napozicuj další Canvas. Ten právě bude vykreslovat panáčka a ostatní věci, které se během interakce s uživatelem změní.
Farrell
Profil
Díky moc za pomoc, to rozdělení do vrstev je logické(když vzpomínám, dřív jsem to tak i dělal), udělám i jednu bokem pro sprity, páč ty se tak často neaktualizují. Jinak i tahle málá změna ve firefoxu velmi pomohla, ještě tam zakomponuju to requestAnimationFrame, ale to budu muset upravit časování animací, ale to je detail.

Jinak, kdyby měl někdo zájem se na hře podílet, nechť se ozve na adam.porybny@gmail.com, vše je marketingově promyšleno, hra bude free-to-play, ovšem za příplatek budou k dispozici různé vylepšení, atd. Více info na mailu. Především potřebujeme grafiky, pro různé sprite textury a animace, pak na grafiku levelů. Sice nečekám, že by se někdo takový s ochotou a časem našel, ale za zkoušku nedám nic. :)
1Pupik1989
Profil
Animace jsem dělal jako PNG, kde jsem měl všechny snímky vedle sebe. Pak jsem ve smyčce zjišťoval čas a odečítal od posledního. Z toho krásně i zjistíš který snímek se má zobrazit a jestli nevzniklo nějaké nechtěné zpoždění.

Jestli si všiml, že tam mám vlastnost "paused", tak to je taky celkem užitečná věc. Pokud neprobíhá žádná interakce nebo animace, tak nemá smysl aby smyčka běžela. V tom případě jí prostě zastavíš.


//Edit: Tak koukám, že ty animace máš jak jsem psal, takže tam to bude jednoduché.
//Edit2: Koukám, na Collision. Nejspíš si před funkci zapomněl dát new, nicméně je to tam zbytečné. Vytvoř to jako normální objekt.

var Collision = {};

Vaše odpověď

Mohlo by se hodit

Nezapomeňte na odkaz na živou ukázku problému.

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: