V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.
S vykreslovaným textem na canvas jsou celkem problémy. Pokud by to příliš nevadilo, asi bych ho umístil absolutně nad canvas.
Sám jsem to řešil pomocí sprite fontů. Měl jsem prostě vygenerované
znaky v obsázku a vykresloval je. Podobně jako v XNA (ale tam to za tebe
řeši framework 
).
Tak to vezmu Anglicky...
Něco je na té stránce špatně. Jakmile se načetla, stoupla mi zátěž procesoru na 100 % a nepřestalo to, dokud jsem tu stránku neopustil.
Mám tam timer - 180 ms a v něm jediný cyklus na stránce. Jak jinak to mám dělat? (Vykreslování hada.)
Nechápu, proč se nějomu nelíbí, že to napíši Anglicky - když chci aby to byla hra pro více států. (Takový malý projekt nemohu řešit nijak zvlášť dlouho - mám KOS...)
Zřejmě každých 180 ms překresluješ celý obrázek. To není dobrý nápad. Ani se mi to nespustilo.
Vykresluji jen hada a jídlo. (Pozadí je v CSS...) Jediné co mě napadá:
function drawFood() {
graphics.save();
gradient = graphics.createRadialGradient(tileSize / 2, tileSize / 2, 0, tileSize / 2, tileSize / 2, tileSize / 2);
gradient.addColorStop(0, 'rgb(47,60,255)');
gradient.addColorStop(0.8, 'rgb(27,20,225)');
gradient.addColorStop(0.99, 'rgba(4, 4, 4, 0.8)');
gradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
graphics.translate(foodPosition[0], foodPosition[1]);
graphics.fillStyle = gradient;
graphics.arc(tileSize / 2, tileSize / 2, tileSize / 2, 0, 2 * Math.PI);
graphics.fill();
graphics.restore();
}To jídlo si uchovává poslední barevnou stopu a tu přenáší do všech svých pozic. (po snězení je přesunuto) Dočasně jsem tedy jako poslední stopu dal průhlednou barvu, ale hodlám se toho zbavit skutečně.
V HTML5 máš možnost requestAnimationFrame. Animace se spustí samostatně a není ovlivněna stránkou. Pokud uživatel zrovna není na dané stránce, animace se stopne. Pokud ale budeš chtít i nějaký fyzikální model hry, asi nevyhneš se kombinaci setTimeout a requestAnimationFrame.
Co se týče výkonu, vykreslovat základní objekty canvasu jako je obdélník, kruh, ale i cesta je velmi náročné na výkon. Musí se totiž při každém překreslení načíst znovu. Mnohem lepší je, udělat si obrázek, načíst si ho někam, odkud si ho můžeš při dalším vykreslení vzít, a vykreslovat jen ten načtený obrázek. Prohlížeč si totiž vytvoří cache. Zároveň je dobré co nejvíc slučovat (ideálně mít vše v jednom velkém spritu, pak stačí jedno načtení obrázku a vykreslení je relativně dost rychlé). To samé u zvuků (vytvářet sound sprity). Tak dosáhneš skvělého výkonu, i kdybys měl kreslit nějaké extra velké obrázky.
Pokud by ani to nestačilo, můžeš použít víc pláten. Při překreslení pak opravdu překreslíš jen věci, které potřebuješ a nemusíš zatěžovat prohlížeč s překreslením celé hry. Můžeš se trochu inspirovat u mě, ale vývoji se už nevěnuji a kód taky není nic extra https://github.com/…/scripts/dge
Zobrazeno 10 zpráv z 10.