Käyttöliittymägrafiikan Perusteet Pelinkehityksessä

Abstract

Opinnäytetyö sisältää perustietoa ja teoriaa UI-grafiikasta sekä katsauksen siihen, miten peliin voidaan suunnitella UI-grafiikkaa. Opinnäytetyön alussa tutkittiin symboliikkaa, joita peleissä sekä nettisivuilla usein esiintyy. Myös väriteoria sekä saavutettavuus ovat tärkeässä osassa suunnitteluprosessia. Työ on rajattu visuaaliseen ilmeeseen sekä suunnitteluun, joten koodausta tai teknistä puolta ei työssä ole käsitelty. Opinnäytetyö ei ole toteutettu toimeksiantajalle, vaan tekijä on tutkinut ja toteuttanut työn perustuen omiin mielenkiinnon kohteisiinsa.

Teoriaosuudessa käsiteltiin UI-grafiikassa usein käytettyä symboliikkaa sekä erilaisia nappeja, jotka käyttäjä tunnistaa, ja pääsee sitä mukaa käyttämään tuotetta parhaalla mahdollisella tavalla. Jos tuote on huono, vaikuttaa se käyttäjän kokemukseen antaen hänelle negatiivisen käyttökokemuksen. Yleiseen käyttäjän kokemukseen vaikuttavat muun muassa fontit, värit, muodot sekä käytettävyys.

UI:n neljä erilaista tyyppiä käytiin läpi esimerkkien sekä kuvien kanssa. Tyypit jaoteltiin sen perusteella, miten ne esiintyvät pelissä, sillä eri UI-tyypit palvelevat erilaista tapoja antaa informaatiota pelaajalle. Pelaaja näkee pelissä olevat UI-elementit, mutta jotkut UI:t voi myös hahmo nähdä ja olla tietoinen niiden olemassaolosta.

Teoriaosuuden lopussa käytiin läpi perusasiaa väreistä. Myös väriyhdistelmät ja palettien eri tyypit käsiteltiin osiossa. Lopuksi tutkittiin värien symboliikkaa ja merkityksiä eri kulttuureissa sekä värisokeuden tyyppejä. Värisokeudella on kolme yleisintä tyyppiä, jotka kaikki vaikuttavat henkilön kykyyn havainnoida värejä.

Käytännön osuudessa toteutettiin mockup-kuvankaappaus 2D-pelistä käyttäen teoriatietoja hyödyksi keskittyen UI-suunnitteluun sekä väreihin tavoitteena luoda toimiva kokonaisuus. Osiossa tutkittiin prosessia peliartistin näkökulmasta käyttäen sekä opittua että aikaisempaa tietoa hyödyksi. Grafiikka suunniteltiin myös olemaan miellyttävän näköinen henkilölle, jolla on värisokeus.

This thesis consists of basic knowledge and theory of UI graphics in game development of how to design and make UI graphics in games. The beginning of the thesis covers symbolics used in both games and web design. Color theory and accessibility plays a big role in planning and designing. The work consists mostly of visual appearance, therefore the technical side such as coding are not addressed.

At the start of the theory part, symbols in UI graphics are studied alongside with buttons the user recognizes and is thereby able to use the product to its full potential. If the product has poor performance and usability, it negatively affects the user’s experience. Fonts, colors, shapes, and general usability all affect the user’s experience of the product.

Four different UI types alongside photos and descriptions are explained. Different UI types serve a different purpose and a way to give information to the player and they all are categorized based on their appearance inside the game. The player sees and is aware of all the UI appearing in the game, however in some cases the characters themselves are aware of them.

Lastly, basic color theory alongside various color palettes are reviewed. It includes symbolism in color as well as their meanings in different cultures around the world. Color blindness is a condition that affects people’s perception of colors, and three most common types of color blindness are studied.

In the practical part of the thesis, a mockup screenshot of a 2D -game has been made, focusing on UI design and colors to create a functional product. In this section the process is studied from the viewpoint of a game graphic artist using both learned and previous knowledge. The graphics are also aimed to be pleasing to view by a person with color blindness.