That Guy
Meubilair
- Lid geworden
- 28 nov 2006
- Berichten
- 5.010
Yo,
ik was even gaan *****n met de (html5-tag) canvas en javascript. Heel leuk allemaal.
Nu is het geval dit: ik was wat testjes aan het draaien met tiles (shocker ), en het viel me op dat na een bepaald aantal [keer|seconde] het steeds langzamer gaat...
{WAARSCHUWING: het kan je pc's cpu opzuigen, hier gaat ie tot iets van 50%, heel erg trage pc's, klik niet}
Kijk eens hier: [ http://void-studios.com/projects/bin/glory/ ]. Je kan bewegen met de pijltjes-toetsen.
Page-refresh eens (F5), en beweeg dan eens 3 of 4 keer naar rechts of onderen, meteen als je de map ziet. Als het goed is, zie je het beeld (flikkerend, dat wel) bewegen.
Als je echter een paar seconde (7 ofzo) wacht nadat de pagina geladen is, zal je zien dat het bewegen steeds langzamer gaat, en je de tiles daadwerkelijk 'ziet' opbouwen.
De map die je ziet is een json-opgebouwd bestand. Plaatjes staan als base64 opgeslagen in de 'images' rij. Zie [ http://void-studios.com/projects/bin/glory/games/littleroot.json ]
Deze wordt geladen, geparsed door een json-parser, en dan wordt het gehele object opgeslagen in een array:
Dit werkt correct. Als alles geladen is, wordt er een 'setmap(id)' functie aangeroepen om de map te laten zien:
De setmap(id) functie ziet er zo uit:
Met wat testjes ben ik erachter gekomen dat dit allemaal correct werkt.
De drawBase64 functie ziet er ongeveer zo uit:
Om het probleem wat duidelijker te maken wordt VOOR elke drawmap(id)-aanroep, eerst de clearRect() aangeroepen, wat het scherm dus weer leeg (wit) maakt.
Mijn vraag dus (eindelijk): wie weet er waarom het steeds trager wordt? Komt dit door de grote hoeveelheid 'bla = new Image();' calls die het script maakt? Of is het iets anders? Iemand een oplossing?
:thumb:
ik was even gaan *****n met de (html5-tag) canvas en javascript. Heel leuk allemaal.
Nu is het geval dit: ik was wat testjes aan het draaien met tiles (shocker ), en het viel me op dat na een bepaald aantal [keer|seconde] het steeds langzamer gaat...
{WAARSCHUWING: het kan je pc's cpu opzuigen, hier gaat ie tot iets van 50%, heel erg trage pc's, klik niet}
Kijk eens hier: [ http://void-studios.com/projects/bin/glory/ ]. Je kan bewegen met de pijltjes-toetsen.
Page-refresh eens (F5), en beweeg dan eens 3 of 4 keer naar rechts of onderen, meteen als je de map ziet. Als het goed is, zie je het beeld (flikkerend, dat wel) bewegen.
Als je echter een paar seconde (7 ofzo) wacht nadat de pagina geladen is, zal je zien dat het bewegen steeds langzamer gaat, en je de tiles daadwerkelijk 'ziet' opbouwen.
De map die je ziet is een json-opgebouwd bestand. Plaatjes staan als base64 opgeslagen in de 'images' rij. Zie [ http://void-studios.com/projects/bin/glory/games/littleroot.json ]
Deze wordt geladen, geparsed door een json-parser, en dan wordt het gehele object opgeslagen in een array:
PHP:
jtile_maps[jtile_maps.length] = json_parse(include(path));
PHP:
setmap(map1); //map1 is het id van de jtile_maps[] array, in dit test-geval 0.
PHP:
var mapdata = jtile_maps[id];
for(j=0;j<SCREEN_WIDTH/16;j++){
for(i=0;i<SCREEN_WIDTH/16;i++){
drawBase64Image(mapdata.images[mapdata.map[j+playerY][i+playerX].image],i*16,j*16);
}
}
De drawBase64 functie ziet er ongeveer zo uit:
PHP:
//... stuff
c = document.getElementById('mijn_canvas').canvas.getContext('2d');
//... stuff
drawBase64 = function(data,x,y)
{
var img = new Image();
img.src = "data:image/png;base64," + data;
img.onload = function(){
c.drawImage(img,x,y); //c is hier de canvas-handle.
}
}
Mijn vraag dus (eindelijk): wie weet er waarom het steeds trager wordt? Komt dit door de grote hoeveelheid 'bla = new Image();' calls die het script maakt? Of is het iets anders? Iemand een oplossing?
:thumb:
Laatst bewerkt: