Linköping University | Department of Computer Science Master thesis, 30 ECTS | Datateknik 2017 | LIU-IDA/LITH-EX-A--17/036--SE Optimization of graphical performance in a motion- based web game – Improving design and implementation of a game mea- sured by frame rate Oskar Therén Supervisor : Aseel Berglund Examiner : Henrik Eriksson Linköpings universitet SE–581 83 Linköping +46 13 28 10 00 , www.liu.se Upphovsrätt Detta dokument hålls tillgängligt på Internet – eller dess framtida ersättare – under 25 år från publiceringsdatum under förutsättning att inga extraordinära omständigheter uppstår. Tillgång till dokumentet innebär tillstånd för var och en att läsa, ladda ner, skriva ut enstaka kopior för enskilt bruk och att använda det oförändrat för ickekommersiell forskning och för undervisning. Överföring av upphovsrätten vid en senare tidpunkt kan inte upphäva detta tillstånd. All annan användning av dokumentet kräver upphovsmannens medgivande. För att garantera äktheten, säkerheten och tillgängligheten finns lösningar av teknisk och admin- istrativ art. Upphovsmannens ideella rätt innefattar rätt att bli nämnd som upphovsman i den omfattning som god sed kräver vid användning av dokumentet på ovan beskrivna sätt samt skydd mot att dokumentet ändras eller presenteras i sådan form eller i sådant sam- manhang som är kränkande för upphovsmannenslitterära eller konstnärliga anseende eller egenart. För ytterligare information om Linköping University Electronic Press se förlagets hemsida http://www.ep.liu.se/. Copyright The publishers will keep this document online on the Internet – or its possible replacement – for a period of 25 years starting from the date of publication barring exceptional circum- stances. The online availability of the document implies permanent permission for anyone to read, to download, or to print out single copies for his/hers own use and to use it unchanged for non-commercial research and educational purpose. Subsequent transfers of copyright cannot revoke this permission. All other uses of the document are conditional upon the con- sent of the copyright owner. The publisher has taken technical and administrative measures to assure authenticity, security and accessibility. According to intellectual property law the author has the right to be mentioned when his/her work is accessed as described above and to be protected against infringement. For additional information about the Linköping Uni- versity Electronic Press and its procedures for publication and for assurance of document integrity, please refer to its www home page: http://www.ep.liu.se/. c Oskar Therén Abstract This thesis uses Chrome Timeline tool, Firefox Canvas Debugger and an FPS module to evaluate performance issues in a motion-based web game built with the framework Phaser. For each issue an explanation of how it is found and a proposed solution is given. The game that is the basis of this work, gains input through a WebGL-based camera module that uses shaders to interpret the data. Some solutions might be specific for this particular project and some may be more generally applicable. A few pointers are given to what can be graphically demanding when developing in JavaScript. The game has different themes and features that are further developed which is done from a performance point of view, there are in total eight different improvements that are discussed. The used tools and metrics are further evaluated e.g. the Timeline tool is con- sidered a useful tool for web developers though it has some drawbacks related to WebGL. Acknowledgments I would like to thank Aseel and Erik Berglund for their help during this thesis work. I would also like to thank my family, classmates, the people I have worked with and all the wonderful friends i have met during these five years. Thanks for all the support, without you I would not have finished this program! iv Contents Abstract iii Acknowledgments iv Contents v List of Figures vii List of Tables 1 1 Introduction 2 1.1 Motivation . 2 1.2 Aim............................................ 2 1.3 Research question . 3 1.4 Delimitations . 3 2 Background 4 2.1 Themes . 4 2.2 Earlier work . 6 2.3 Frameworks . 7 3 Theory 9 3.1 Related work . 9 3.2 Designing motion based games . 9 3.3 Frustration without performance . 10 3.4 Frame rate . 11 3.5 Improving JavaScript . 11 3.6 Memory management . 12 3.7 Anti-aliasing . 12 4 Method 13 4.1 Finding and measuring . 13 4.2 Skipping pixels in collision detection . 15 4.3 Improving camera usage . 15 4.4 Draw calls . 16 4.5 Anti-aliasing . 16 4.6 Themes . 16 4.7 New features . 19 5 Results 20 5.1 Skipping pixels in collision detection . 20 5.2 Improving camera usage . 20 5.3 Draw calls . 22 v 5.4 Anti-aliasing . 22 5.5 Themes . 22 5.6 New features . 23 6 Discussion 24 6.1 Results . 24 6.2 Method . 26 6.3 The work in a wider context . 27 7 Conclusion 29 7.1 Future work . 29 Bibliography 30 List of Figures 2.1 The Bug game - A screenshot taken while playing the Bug game at its state be- fore this thesis, the white silhouette is the hands and body of the person that is currently moving. 5 2.2 The Night Theme - A screenshot taken while playing the Night Theme at its state before this thesis . 5 2.3 The Winter Theme - A screenshot taken while playing the Winter Theme at its state before this thesis . 6 4.1 Screenshots of the two different Night themes. 18 5.1 Three frames with different spawn rates of bugs and pixSkip values. 21 5.2 A frame when using camera shaders in phaser, the frame takes 50 ms (mostly GPU-time) that gives and FPS of approximately 20. 21 6.1 Timeline Tool - A screenshot of the timeline zoomed in on two typical frames . 27 vii List of Tables 5.1 FPS dependent on pixSkip values with ten times higher bug spawn rate than usual. 20 5.2 FPS dependent on how the camera is handled. ThreeJS was the original imple- mentation. 22 5.3 Amount of draw calls and FPS before and after the remake of the user interface. 22 5.4 FPS with and without anti-aliasing. 22 5.5 FPS dependent on the themes. 22 5.6 FPS dependent on the themes. 23 5.7 FPS dependent on pixSkip values during explosion mode and without as a ref- erence. 23 5.8 FPS during and outside of mushroom rush. 23 1 1 Introduction The purpose of the web has during its existence been rapidly changing. Web pages have in a few years gone from being limited to basically being formatted text to being able to render advanced 3D animations. When developing a web application there is no need to take into account the operating system. The user will be able to access the application on any device connected to the Internet without the need to install anything. The hardware on modern devices have gone so far that even though the performance is worse than a native application the benefits are in many cases worth it and the the performance difference does not even matter. One kind of application that might be one of the furthermost from being replaced by a web application is games. A reason for this is that in many games the graphical performance is a too important aspect, lag in a game can both make the player loose focus of the current task in the game and reduce the overall experience of the game. This is where this thesis comes in, it is an attempt to get good performance from a web game, let the user get the benefits from a web game while reducing the drawbacks. 1.1 Motivation When joining in on an existing software development project it is important to be able to quickly evaluate and get familiarized with the code relevant to the acquired assignment. In the case of this thesis a game that is developed by several programmers with different expe- riences and purposes may be lacking in some aspects. The developers have had quite narrow perspectives because of time limitations when doing a thesis work. This is reflected in the performance at the current state of the game. This thesis will not only be useful for people working on an existing project. It also con- tains good knowledge from someone before starting on a new project, to know what loop- holes to avoid and in extension creating a better code base from the start. 1.2 Aim This thesis will attempt to improve the performance of a game, while reworking existing and introducing new features to a existing motion-based web game. More specifically the 2 1.3. Research question main focus will be to improve frames per seconds by remaking certain features. As well as introducing new features that should have as low performance impact as possible. 1.3 Research question • What is a better design and implementation of a motion-based web game in respect of frames per second? 1.4 Delimitations The work will be done on an existing game that is created in the framework Phaser (section 2.3.2) and the WebGL library ThreeJS (section 2.3.1). It is not in the scope of this thesis to switch framework or programing language. Measurements will be with done code written by me and with freeware, mainly Chrome DevTools (section 4.1.1.1). The performance tests will be hardware limited to a “HP EliteDesk 800 G2 DM 35W” system with an “Intel(R) Core(TM) i5-6500T CPU @ 2.50GHz” and 8 GB RAM. 3 2 Background The game that this thesis evolves around, called the Bug game, is a motion based web game that takes input from a camera.