CSS-tyylejä hyödyntävä 3D-peli
Tamm, Kasper (2026)
2026
All rights reserved. This publication is copyrighted. You may download, display and print it for Your own personal use. Commercial use is prohibited.
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-202604015528
https://urn.fi/URN:NBN:fi:amk-202604015528
Tiivistelmä
Insinöörityössä tutkittiin, miten CSS-tyylejä voidaan hyödyntää 3D-pelien tekemiseen. Työssä käytiin läpi kaikki tarvittavat pohjatiedot oman pelin tekemiseen sekä projektia koskevat rajoitteet. Peli rakennetiin kokonaan tyhjästä ilman mitään kirjastoja tai aputyökaluja. Se toimii myös yleisillä selaimilla (Chrome ja Firefox).
Työn alussa kerrottiin, miksi CSS-tyyleihin perustuva peli valittiin aiheeksi. Tämän jälkeen mentiin projektin struktuuriin sekä avataan minimivaatimukset projektin tekemistä varten. Pelin osalta käytiin myös läpi, mitä sillä yritetään saavuttaa.
Suurimmassa osassa työstä rakennettiin itse peliä. Demon alussa luotiin 3D-kamera, jota voi liikuttaa ja kääntää pelimaailmassa. Seuraavaksi tutkittiin, miten kamerasta voidaan laskea, mitä elementtiä pelaaja osoittaa. Näillä tiedoilla peliin lisättiin yksinkertainen tasonmuokkaustyökalu. Työkalulla voitiin luoda monimutkaisia maailmoja, joita voi tallentaa, ja myöhemmin maailman ja pelaajan välille lisättiin törmäyslaskennat.
Demon jälkeen käytiin läpi, missä projekti onnistui ja missä on vielä parannettavaa. Tässä vaiheessa avattiin, miksi tiettyjä valintoja tehtiin ja miten paljon CSS-tyylit rajoittivat pelintekoa. Samalla käytiin läpi selaimissa olevat virheet, jotka vaikeuttivat pelin tekoa. Työssä korostui, että rajoitteista huolimatta on täysin mahdollista toteuttaa toimiva 3D-peli käyttämällä CSS-tyylejä.
Olen käyttänyt Googlen Geminin versiota 3 Flash matriisi- ja vektorimatikan opiskelussa. Olen myös käyttänyt samaa työkalua tutkimustekstin kirjoitusvirheiden tarkistuksessa. Opinnäytetyön tekijänä olen vastuussa kaikesta opinnäytteeni sisällöstä.
Työn alussa kerrottiin, miksi CSS-tyyleihin perustuva peli valittiin aiheeksi. Tämän jälkeen mentiin projektin struktuuriin sekä avataan minimivaatimukset projektin tekemistä varten. Pelin osalta käytiin myös läpi, mitä sillä yritetään saavuttaa.
Suurimmassa osassa työstä rakennettiin itse peliä. Demon alussa luotiin 3D-kamera, jota voi liikuttaa ja kääntää pelimaailmassa. Seuraavaksi tutkittiin, miten kamerasta voidaan laskea, mitä elementtiä pelaaja osoittaa. Näillä tiedoilla peliin lisättiin yksinkertainen tasonmuokkaustyökalu. Työkalulla voitiin luoda monimutkaisia maailmoja, joita voi tallentaa, ja myöhemmin maailman ja pelaajan välille lisättiin törmäyslaskennat.
Demon jälkeen käytiin läpi, missä projekti onnistui ja missä on vielä parannettavaa. Tässä vaiheessa avattiin, miksi tiettyjä valintoja tehtiin ja miten paljon CSS-tyylit rajoittivat pelintekoa. Samalla käytiin läpi selaimissa olevat virheet, jotka vaikeuttivat pelin tekoa. Työssä korostui, että rajoitteista huolimatta on täysin mahdollista toteuttaa toimiva 3D-peli käyttämällä CSS-tyylejä.
Olen käyttänyt Googlen Geminin versiota 3 Flash matriisi- ja vektorimatikan opiskelussa. Olen myös käyttänyt samaa työkalua tutkimustekstin kirjoitusvirheiden tarkistuksessa. Opinnäytetyön tekijänä olen vastuussa kaikesta opinnäytteeni sisällöstä.