{"id":21,"date":"2013-09-06T12:53:04","date_gmt":"2013-09-06T09:53:04","guid":{"rendered":"https:\/\/blogi.eoppimispalvelut.fi\/jonnetestaa\/?p=21"},"modified":"2013-09-06T12:53:04","modified_gmt":"2013-09-06T09:53:04","slug":"impactjs-html5-pelintekokehys","status":"publish","type":"post","link":"https:\/\/blogi.eoppimispalvelut.fi\/jonnetestaa\/2013\/09\/06\/impactjs-html5-pelintekokehys\/","title":{"rendered":"Impactjs – HTML5 pelintekokehys"},"content":{"rendered":"

Pelien tekemiseen l\u00f6ytyy lukuisia ty\u00f6kaluja. T\u00e4ss\u00e4 testiin p\u00e4\u00e4see Impactjs, jolla voi tehd\u00e4 html5 -standardin<\/a> mukaisia 2D pelej\u00e4. N\u00e4k\u00f6kulmana on taas tietenkin opetus, peliohjelmoinnin opetus.<\/p>\n

\"impact-logotype\"<\/a><\/p>\n

Mik\u00e4 ihmeen Impactjs?<\/strong><\/p>\n

Impactjs on oikeastaan kaksi asiaa: Kentt\u00e4editori Weltmeister sek\u00e4 JavaScript -ohjelmistokehys bittikarttapohjaisen pelin tekemiseen. Paketti maksaa 99 dollaria, ja sen l\u00f6yt\u00e4\u00e4 osoitteesta\u00a0http:\/\/impactjs.com\/<\/a>. J\u00e4rjestelm\u00e4n kehitt\u00e4j\u00e4 on Dominic Szablewski, ja h\u00e4neen saa hyvin yhteyden s\u00e4hk\u00f6postilla ja IRC:ll\u00e4. Sain neuvoteltua koulullemme ilmaisen lisenssi kokeiluk\u00e4ytt\u00f6\u00e4 varten, ja kun varmistui ett\u00e4 k\u00e4yt\u00e4mme t\u00e4t\u00e4 opetuksessa, ostin yhden lisenssin tukeakseni alustaa. Mik\u00e4li opiskelijat haluavat jatkaa Impactilla ty\u00f6skentely\u00e4 kurssin j\u00e4lkeen, joutuvat he ostamaan oman lisenssins\u00e4.<\/p>\n

Impactjs vaatii enemm\u00e4n tai v\u00e4hemm\u00e4n JavaScriptin <\/a>osaamista. “Ohjelmistokehys” tarkoittaa sit\u00e4, ett\u00e4 Impactiin on koodattu valmiiksi pelintekemist\u00e4 helpottavia funktioita ja metodeja, mutta ilman ohjelmointitaitoa ei pitk\u00e4lle p\u00f6tkit\u00e4. Valmiit funktiot hoitavat t\u00f6rm\u00e4ystenhallinnan, entiteettien piirt\u00e4misen, fysiikan mallinnuksen (kuten painovoiman) yms. Esimerkkin\u00e4 mainittakoon, ett\u00e4 painovoima on vain yksi muuttuja, jota voi luonnollisesti muuttaa peliss\u00e4 tarpeen mukaan vaikkapa k\u00e4\u00e4nteiseksi. T\u00e4m\u00e4n lis\u00e4ksi yksitt\u00e4isille entiteeteille voi m\u00e4\u00e4ritt\u00e4\u00e4 gravityFactorin, eli sen miten paljon painovoima n\u00e4ihin vaikuttaa.<\/p>\n

Perusidea<\/strong><\/p>\n

<\/strong>Impactissa peli koostuu kartasta (joka tehd\u00e4\u00e4n Weltmeisterill\u00e4) ja Entiteeteist\u00e4. Entiteettej\u00e4 ovat kaikki pelin toiminnalliset ja liikkuvat elementit, kuten pelihahmo, vastustajat, hissit, luodit tai vaikkapa puhekuplat. Pelien koodaaminen on oikeastaan entiteettien tekemist\u00e4. N\u00e4iss\u00e4 kannattaa hy\u00f6dynt\u00e4\u00e4 periytymist\u00e4 j\u00e4rkev\u00e4sti, jotta koodi pysyisi hallinnassa ja fiksuna.<\/p>\n

Impactjs on selv\u00e4sti tasohyppelypeleihin suunnattu kehys, vaikka se taipuu toki muuhunkin 2D-tekemiseen.<\/p>\n

Weltmeister – Kentt\u00e4editori<\/strong><\/p>\n

\"Capture\"<\/a><\/p>\n

Weltmeister erottaa Impactin (hinnan lis\u00e4ksi – muut ovat yleens\u00e4 ilmaisia) lukuisista ilmaisista HTML-frameworkeist\u00e4, kuten vaikkapa LimeJS:st\u00e4<\/a> ja Craftysta<\/a>. Weltmeisterill\u00e4 voi luoda nopeasti kentti\u00e4 peliins\u00e4, kunhan on piirt\u00e4nyt ensin grafiikka”tilet”. Weltmeisterill\u00e4 voi my\u00f6s sijoittaa kentt\u00e4\u00e4n entiteettej\u00e4, kuten vaikkapa hirvi\u00f6it\u00e4, kunhan ne on ensin koodannut henkiin. Weltmeister vaatii toimiakseen PHP:n ja web-palvelimen, ja web-palvelinta tarvitset tietenkin my\u00f6s itse pelin koodaamisessa ja testaamisessa.<\/p>\n

Ohjeita<\/strong><\/p>\n

Impactin documentointi on sivustolla tehty mainiosti<\/a>, ja Impactiin on jo tehty kaksi ohjekirjastakin. Itse tein tutoriaalin Jesse Freemanin erinomaisen kirjan pohjalta<\/a>, ja toinenkin kirja<\/a> on jo tilattu. Alla kuva Freemanin ohjeistuksen pohjalta tehdyst\u00e4 pelist\u00e4. Itse peli\u00e4 voit testata t\u00e4st\u00e4<\/a>. Jostain syyst\u00e4 juuri tuo tuotos ei toimi Firefoxilla eik\u00e4 Safarilla, mutta muut selaimet (kuten Opera, Chrome ja IE) toimivat, kunhan ovat melko uusia versioita.<\/p>\n

\"Capture\"<\/a><\/p>\n

Pelin julkaiseminen<\/strong><\/p>\n

Impactilla voi pelins\u00e4 julkaista sellaisenaan HTML5-muotoisena. Mit\u00e4 t\u00e4m\u00e4 sitten tarkoittaa? Yksinkertaistettuna sit\u00e4, ett\u00e4 peli on web-sivu, jonka voit laittaa web-palvelimelle, ja sit\u00e4 voi pelata jos omistaa uudehkon selaimen. Eli k\u00e4yt\u00e4nn\u00f6ss\u00e4 pelin levitt\u00e4minen ymp\u00e4ri maailman on todella yksinkertaista. Pienell\u00e4 kikkailulla pelist\u00e4\u00e4n saa julkaistua versiot kaikille merkitt\u00e4ville alustoille, vaikkapa cocoonjs -sivuston<\/a> yst\u00e4v\u00e4llisell\u00e4 avustuksella. T\u00e4ll\u00f6in tuotokselleen voi mietti\u00e4 my\u00f6s jotain ansaintalogiikkaa, kuten mainokset tai ostettavat lis\u00e4ominaisuudet.<\/p>\n

Kannattaako hankkia Impactjs<\/strong><\/p>\n

Itse en pid\u00e4 itse\u00e4ni kovin kummoisena koodarina, mutta koska perusasiat ovat hallussa, oli Impactjs:ll\u00e4 helppoa v\u00e4s\u00e4t\u00e4 pelej\u00e4. Oppilaani ovat my\u00f6s ohjelmoinnissa keskim\u00e4\u00e4rin melko noviiseja, mutta hyvin nopeasti he saivat pelin toimimaan ohjeiden mukaan. Koska pelien tekeminen on ehdottomasti paras ja innostavin tapa ohjelmoinnin opetteluun, Suosittelen ehdottomasti Impactia peliohjelmoinnin perusopetukseen. Impactista voi my\u00f6s k\u00e4tev\u00e4sti jatkaa opettelua astetta ammattimaisempaan Unity3D-ohjelmaan<\/a>, koska Unityss\u00e4kin voi hy\u00f6dynt\u00e4\u00e4 JavaScripti\u00e4 pelin ohjelmointiin.<\/p>\n","protected":false},"excerpt":{"rendered":"

Pelien tekemiseen l\u00f6ytyy lukuisia ty\u00f6kaluja. T\u00e4ss\u00e4 testiin p\u00e4\u00e4see Impactjs, jolla voi tehd\u00e4 html5 -standardin mukaisia 2D pelej\u00e4. N\u00e4k\u00f6kulmana on taas tietenkin opetus, peliohjelmoinnin opetus. Mik\u00e4 ihmeen Impactjs? Impactjs on oikeastaan kaksi asiaa: Kentt\u00e4editori Weltmeister sek\u00e4 JavaScript -ohjelmistokehys bittikarttapohjaisen pelin tekemiseen. Paketti maksaa 99 dollaria, ja sen l\u00f6yt\u00e4\u00e4 osoitteesta\u00a0http:\/\/impactjs.com\/. J\u00e4rjestelm\u00e4n kehitt\u00e4j\u00e4 on Dominic Szablewski, ja h\u00e4neen […]<\/p>\n","protected":false},"author":250,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[41764],"tags":[],"class_list":["post-21","post","type-post","status-publish","format-standard","hentry","category-yleinen"],"_links":{"self":[{"href":"https:\/\/blogi.eoppimispalvelut.fi\/jonnetestaa\/wp-json\/wp\/v2\/posts\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogi.eoppimispalvelut.fi\/jonnetestaa\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogi.eoppimispalvelut.fi\/jonnetestaa\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogi.eoppimispalvelut.fi\/jonnetestaa\/wp-json\/wp\/v2\/users\/250"}],"replies":[{"embeddable":true,"href":"https:\/\/blogi.eoppimispalvelut.fi\/jonnetestaa\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":3,"href":"https:\/\/blogi.eoppimispalvelut.fi\/jonnetestaa\/wp-json\/wp\/v2\/posts\/21\/revisions"}],"predecessor-version":[{"id":28,"href":"https:\/\/blogi.eoppimispalvelut.fi\/jonnetestaa\/wp-json\/wp\/v2\/posts\/21\/revisions\/28"}],"wp:attachment":[{"href":"https:\/\/blogi.eoppimispalvelut.fi\/jonnetestaa\/wp-json\/wp\/v2\/media?parent=21"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogi.eoppimispalvelut.fi\/jonnetestaa\/wp-json\/wp\/v2\/categories?post=21"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogi.eoppimispalvelut.fi\/jonnetestaa\/wp-json\/wp\/v2\/tags?post=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}