Fundamentals of HTML5 game optimization

Abstract

This thesis studied optimization of HTML 5 game when using PixiJS game engine, which is currently most used game engine by Seepia Games. This work found Three different categories of optimization. These categories are rendering performance, JavaScript code performance and memory efficiency and package size. This work goes through theory and a few experiments of each of the three categories. In rendering gathering many draw calls into one draw call was found to have significant effect. In JavaScript JIT-friendly code was found to have better performance. Also, few techniques were identified that help with memory management. In size compressing asset was found have significant effect. Also found that file count can have effect on load speed. Lastly in a short comparison of a few HTML 5 game engines PixiJS version 4 was fastest at rendering sprites, while PixiJS version 5 produced smaller package size.

Tämä opinnäytetyö tutkii HTML 5 peli optimointia PixiJS pelimoottorilla, joka tällä hetkellä Seepia Games:n käytetyin pelimoottori. Työ löysi kolme optimointi kategoriaa. Nämä kategoriat ovat renderöinti nopeus, JavaScript koodin nopeus ja muistin tehokkuus ja paketin koko. Tämä työ käy läpi teorian ja muutaman kokeen, jokaisesta kategoriasta. Renderöinnissä löydettiin, että monen piirtokutsun kokoaminen yhteen piirtokutsuun olevan huomattava vaikutus. JavaScript:ssä JIT-ystävällisellä koodilla löydettiin olevan parempi suorituskyky. Löydettiin myös muutama tekniikka muistin hallintaan. Koossa löydettiin, että tiedostojen pakkaamisella on huomattava vaikutus kokoon. löydettiin myös, että tiedostojen määrällä on vaikutus lataus nopeuteen. Lopuksi lyhyessä HTML 5 pelimoottorien vertailussa PixiJS versio 4 oli nopein renderöimään spritejä, mutta PixiJS versio 5 tuotti pienimmän paketti koon.