HUD-editori web-sovelluksena : Case: ToonHUD.com

Abstract

Opinnäytetyön aiheena oli kehittää web-sovellus Windows-työpöytäsovelluksesta. Toteutettu sovellus oli editori Toonhudille. ToonHUD on opinnäytetyön tekijän toteuttama HUD Team Fortress 2 -peliin. Opinnäytetyöllä ei ollut erillistä toimeksiantajaa, vaan se toteutettiin henkilökohtaisena projektina.

Opinnäytetyön teoriaosuudessa avataan ensin projektin lähtökohdat: mikä on Team Fortress 2, HUD ja ToonHUD. Sen jälkeen kerrotaan työpöytäsovelluksen ominaisuudet ja syyt miksi sovellus haluttiin toteuttaa uudelleen web-sovelluksena. Lopuksi siinä käydään läpi web-sovelluksen tekoon käytetyt tekniikat ja kirjastot esimerkkien kera.

Opinnäytetyön käytännönosuudessa keskitytään web-sovelluksen kahteen tärkeimpään ominaisuuteen: käyttäjien tunnistautuminen sovellukseen Steam-palvelun kautta sekä sovelluksella tehtävien teemojen hallinta. Teemojen hallinnasta käydään läpi eri toimintojen logiikka: minkälaisia asioita tehdään, missä järjestyksessä ja miksi.

Tekijällä oli ennestään kokemusta web-sivustojen ohjelmoinnista. Uusina asioina opittiin kuitenkin mm. sovellusmaisen sivuston teko, kirjautuminen kolmannen osapuolen palvelun kautta sekä erilaisten JavaScript-kirjastojen käyttö.

Työn lopputuloksena saatiin toimiva ja tavoitteet täyttävä web-sovellus, jolla on jo kymmeniä tuhansia rekisteröityneitä käyttäjiä. Työpöytäsovellukseen verrattuna web-sovelluksen ylläpito todettiin helpommaksi ja mielekkäämmäksi, vaikka työpöytäsovelluksessa oli myös omat puolensa.

The goal of this thesis was to recreate a Windows desktop application as a web application. The application that was recreated was an editor for ToonHUD. ToonHUD is a custom HUD for a game called Team Fortress 2 that was created by the author of this thesis. This project did not have a client as it was a personal project of the author.

The theoretical section of this thesis explains the background information that is needed to understand the concept of this work: what is Team Fortress 2, HUD and ToonHUD. Then it explains the features of the desktop application and reasoning why it was chosen to be replaced with a web application. Lastly it goes through the techniques and JavaScript libraries that were used to make the web application. It also provides small code examples of each technique.

The practical section focuses on the two main features of the web application: user authentication through Steam and theme management. The theme management part explains the logic of each action: what is done in which order and why.

Before writing this thesis, the author had some previous knowledge on web development. New things that were learned during the project was how to create application-like websites and how to add third-party authentication to them. Usage of a few new JavaScript libraries was learned as well.

The result of this project is a fully functional web application which fulfilled the given requirements. It has already tens of thousands of registered users. Compared to the desktop application, the web application was considered easier and more pleasant to maintain, even though the desktop application had its own great features as well.