Applying real-time user interface practices to game

Reaaliaika sovellukset ovat entistä yleisempiä, koska internettiin kytkettyjen laitteiden määrä kasvaa. Myös peliala on kasvussa ja eri järjestelmät yhdistelevät pelien ominaisuuksia käyttöliittymiin. Koska laitteiden määrä kasvaa, on tärkeää, että käyttöliittymät optimoidaan suurelle määrälle laitteita. Opinnäytetyön tavoitteena oli kehittää reaaliaika sovellus ja selvittää mitä pitää ottaa huomioon kun kehitetään reaaliaika sovelluksia. Toisena tavoitteena oli selvittää, kuinka samoja menetelmiä voisi käyttää muiden sovellusten kehittämisessä kuten esimerkiksi peleissä. Työ oli www-sovellus, jota käytettiin junien monitorointiin ja ohjaukseen. Eri teknologioita verrattiin ja React valittiin käytetäväksi teknologiaksi. Käyttöliittymän ja palvelimen välisessä viestinnässä käytettiin Server-Sent Events-teknologiaa. Työssä huomattiin, että on tärkeää tehdä mahdollisimman vähän muutoksia käyttöliittymässä. Ruudulla olevien elementtien määrä tulee pitää pienenä, jotta suuria määriä dataa pystytään käsittelemään ilman, että käyttökokemus huononee. Yhteydet palvelimeen tulisi pitää avoimina, jotta nopeasti muuttuva data voidaan lähettää käyttäjälle ilman viivettä. Yhteyksien määrä tulisi pitää pienenä. Saatu data ja siitä johdettu data tulisi tallentaa väliaikaisesti, jotta sama data voidaan päivittää käyttöliittymään nopeammin silloin kun data ei ole muuttunut. Samat tekniikat toimivat myös pelien käyttöliittymissä.Real-time applications are becoming more common in the industry because the number of devices that are connected to internet is increasing. The game industry is also growing and different systems start to integrate game elements to user interfaces. Because of the large number of devices, it becomes increasingly more important for systems to have an optimized user interface. The objectives of the thesis were to create real-time user interface and to figure out the best practices when developing real-time user interfaces and how they could be used in similar projects and games. Another objective of this thesis project was to create an web application that would be used to monitor and control trains in real-time. The available technologies were compared and React was chosen for the webapplication. The application also used server-sent events to communicate between client and server. In conclusion, it is important to minimize the number of changes in the client that are performed when new data is received. The number of elements should be minimized in the screen so that large datasets can be managed without affecting the user experience. When communicating with the server, the number of connections should be minimized and connections should be kept open so all the relevant data can be communicated without delay. The received and computed data should be cached so that the same data can be rendered more quickliy when there are no changes to the data. Similar techniques can be used in games that have user interfaces