Designing and Implementing a browser RTS Joao˜ Pedro Lopes Ferreira Thesis to obtain the Master of Science Degree in Information Systems and Computer Engineering Supervisor: Prof. Pedro Alexandre Simoes˜ dos Santos Examination Committee Chairperson: Nuno Joao˜ Neves Mamede Supervisor: Prof. Pedro Alexandre Simoes˜ dos Santos Member of the Committee: Joao˜ Miguel De Sousa de Assis Dias June 2019 Acknowledgments I would like to thank my parents and my sister for every support and care they gave since I was born, my thesis coordinator for having an immeasurable patience with the development of this project and supporting me until it’s conclusion, my closest colleagues who gave me the support to reach this point of my academic studies, and my friends who are part of my life which shared some of the good and bad moments of it. To all of them a big Thank You. Abstract The video game genre that is recognized as Real-Time Strategy (RTS) had many stages of evolution since the beginning of it’s creation. As the technology evolved, this type of game can nowadays be played in different types of devices. There is still few RTS games that can be played with more than one different device. This document presents the solution to design and create a RTS Game that is playable on both per- sonal computers and mobile devices. The game conceived on this project uses HTML5 and JavaScript as programming languages and is playable in multiplayer mode. Multiple players compete between themselves in 1 versus 1 game matches. This game also contains the 4X elements present in the traditional RTS games (”eXplore, eXpand, eXploit and eXterminate”). Keywords RTS, Multiplayer game, Phaser.io, Client-Server networking, Cross-platform. iii Resumo O genero´ de video jogos que e´ conhecido como Estrategia´ em tempo real (RTS) teve varios´ estados de evoluc¸ao˜ desde o in´ıcio da sua criac¸ao.˜ A` media que a tecnologia foi evoluindo este tipo de jogo pode hoje em dia ser jogado em diferentes tipos de dispositivos. Existem ainda poucos jogos RTS que podem ser jogados em mais que um dispositivo. Este documento apresenta a soluc¸ao˜ em desenhar e criar um jogo RTS que e´ jogavel´ tanto em computadores pessoais como em dispositivos moveis.´ Este jogo usa as linguagens de programac¸ao˜ HTML5 e Javascript e e´ jogavel´ em modo multi-jogador. Multiplos´ jogadores competem entre si em jogos de modo 1 contra 1. Posteriormente este jogo contem´ os elementos 4X presentes nos jogos RTS tradicionais (”eXplore, eXpand, eXploit and eXterminate”). Palavras Chave RTS, Jogo multijogador, Comunicac¸ao˜ cliente-servidor, Phaser.io, Multiplataforma. v Contents 1 Introduction 1 1.1 Motivation.............................................2 1.2 Objectives.............................................3 1.3 Contributions...........................................3 1.4 Structure of this document....................................3 2 Related Work 5 2.1 RTS game elements.......................................6 2.1.1 Theme...........................................6 2.1.2 Units............................................6 2.1.3 Structures.........................................7 2.1.4 Resources........................................8 2.1.5 Fog of War........................................8 2.1.6 Player Actions......................................9 2.1.7 Interface..........................................9 2.1.8 4X............................................. 10 2.1.9 Player archetypes.................................... 11 2.2 RTS History and Examples................................... 12 2.2.1 Stonkers......................................... 12 2.2.2 Dune II.......................................... 12 2.2.3 Warcraft: Orcs & Humans................................ 13 2.2.4 Command & Conquer.................................. 13 2.3 Technologies used........................................ 14 2.3.1 Mobile platforms..................................... 14 2.3.2 HTML........................................... 16 2.3.3 JavaScript......................................... 17 2.3.4 Advantages of using HTML5 to make games..................... 17 2.3.5 HTML5 Game Framework................................ 18 vii 2.4 Discussion............................................ 19 3 Game Design and Architecture 21 3.1 Game Design........................................... 22 3.1.1 Races and Objectives.................................. 22 3.1.2 Perspective........................................ 22 3.1.3 Features......................................... 23 3.1.4 Economy......................................... 24 3.1.5 Units............................................ 25 3.1.6 Structures......................................... 26 3.1.7 Monsters......................................... 27 3.1.8 Upgrades......................................... 28 3.1.9 Super Power....................................... 28 3.1.10 4X............................................. 29 3.1.11 Progression........................................ 29 3.1.12 Planetary Conquest Concept Map........................... 30 3.1.13 Interface.......................................... 31 3.2 Architecture Design....................................... 32 3.2.1 Technical Limitations................................... 32 3.2.2 Client-Server Networking................................ 33 3.2.3 Phaser.io......................................... 39 3.2.4 File Structure....................................... 40 3.3 Discussion............................................ 42 4 Implementation 45 4.1 Development Process...................................... 46 4.1.1 Starting Tutorials..................................... 46 4.1.2 Spritesheets....................................... 47 4.1.3 Game Map........................................ 49 4.1.4 Isometric plugin..................................... 50 4.1.5 A-Star movement..................................... 51 4.1.6 Spatial Hashing...................................... 56 4.1.7 Device orientation.................................... 58 4.1.8 Server authoritative................................... 59 4.1.9 Performance optimization................................ 61 4.2 What went wrong......................................... 63 4.3 Discussion............................................ 65 viii 5 User Tests 67 5.1 Conditions............................................. 68 5.1.1 Focus Group....................................... 68 5.1.2 Where it was tested................................... 68 5.1.3 How it was tested.................................... 69 5.2 Alpha Prototype......................................... 70 5.3 Beta Prototype.......................................... 73 5.4 Discussion............................................ 76 6 Conclusion 77 6.1 Conclusions............................................ 78 6.2 Future Work............................................ 79 A Annexes 87 A.1 RPS................................................ 87 A.2 Unit Combat Formula...................................... 88 A.3 Combat Value Tables....................................... 89 A.3.1 Orghz Units and Tower................................. 90 A.3.2 Human Units and Tower................................. 90 A.3.3 Monster Units....................................... 90 A.3.4 Orghz Strucutres..................................... 91 A.3.5 Human Structures.................................... 92 A.3.6 Orghz Weapons and Armor Upgrade.......................... 92 A.3.7 Human Weapons and Armor Upgrade......................... 93 A.3.8 Orghz Unique Upgrades and Super Power...................... 93 A.3.9 Human Unique Upgrades and Super Power...................... 93 A.3.10 Unique Upgrades Resource Costs and Combat Value Increases.......... 94 A.4 Technical Design......................................... 95 ix x List of Figures 2.1 Starcraft 2 game interface.................................... 10 2.2 Generic RTS diagram...................................... 11 3.1 Planetary Conquest Concept Map............................... 30 3.2 Planetary Conquest Interface for Computer platforms..................... 32 3.3 Simplified Game Networking.................................. 35 3.4 Client-Server game communication............................... 38 3.5 State diagram of Planetary Conquest.............................. 40 3.6 Planetary Conquest file structure................................ 41 3.7 Diagram of Phaser Game state logic.............................. 42 4.1 Dijkstra shortest path calculation - IST AIG Class....................... 52 4.2 A-Star distance heuristics - - IST AIG Class.......................... 53 4.3 Differences between smooth path application - IST AIG Class................ 54 4.4 Differences between straight-line smooth path application - IST AIG Class......... 55 4.5 Example of Hash spacing application.............................. 58 4.6 Different starting screen texts.................................. 59 5.1 Number of game objects produced (Alpha).......................... 72 5.2 Monster options chosen and resources gathered (Alpha)................... 72 5.3 Number of game objects produced (Beta)........................... 75 5.4 Monster options chosen and resources spent (Beta)..................... 75 xi xii List of Tables 2.1 HTML Game Frameworks comparison............................. 19 A.1 Orghz Units and Tower attributes................................ 90 A.2 Human Units and Tower attributes............................... 90 A.3 Monster attributes.......................................