HTML5 Tabanlı Oyunlar için Yapay Zekâ Kütüphanesi: DignityAI – 3

0
72
dignity
dignity

HTML5 ve WEBGL

HTML, kökleri neredeyse internete dayanan 1993 yılından bu yana kullanılan en köklü metin biçimlendirme dillerinden birisidir. HTML, 1999’a kadar 2.0, 3.0 ve 4.0 sürümlerini geçirmiş ve 1999’da son olarak 4.0.1 su ru mu ne ulaşmıştır. HTML’i bu sürümlerine World Wide Web Consortium (W3C) kuruluşunun HTML Working Group adıyla anılan grubu getirmiştir. Daha sonra aynı yıllarda grup HTML’i bırakarak bir başka web standardı olan XML ve buna bağlı olarak da XHTML’e yönelmişlerdir. Daha sonra yeni bir web standardı isteği içerisinde olan küçük bir grup insan Web Hypertext Application Working Group (WHATWG) adı altında 2004 yılında toplanarak HTML5’in şartnamesini çıkarmışlardır. (Lubbers vd., 2011)

HTML5 ile ilgili bu çalışmaların ardından W3C 2006’da çalışmalara başlamış ve 2008’de ilk çalışan su ru mu  ortaya çıkarmıştır. HTML5 genel olarak HTML5, CSS ve Javascript’in birleşimi ile oluşan yeni bir standartlar bu tu nu du r. HTML5 yeni elementleri ve etiketleriyle, CSS bu etiket ve elementlerin go ru nu m kısımlarıyla ve Javascript ise tu m bu yapının içerig ini işlemek, kullanıcıların aksiyonlarına cevap vermek ve yeni HTML5’in programatik avantajlarını kullanmak için kullanılmaktadır. (Freeman, 2011)

28 Eylu l 2014 yılında W3C tarafından bir standart olarak yayımlanmıştır. HTML5 ile Canvas(2D v 3D), Cross Document Messaging, Geolocation, Audio ve Video, Forms, SVG, WebSocket API, Local Storage, Offline Web Apps, Drag and Drop, Web Workers, Server-Sent Events, XMLHttpRequest Level 2 gibi yeni o zellikler gelmiştir. 

HTML5’te bir çok API geliştirilerek sistemin gu cu ne gu ç katılmıştır. Bunların en o nemlilerinden biri WebGL ile 3 boyutlu go rsellerin tarayıcı tarafında herhangi bir eklenti kurmaya gerek kalmadan go sterilmesi durumudur. WebGL aslında OpenGL’in HTML5’e uyarlanmış kısmıdır. Yani HTML5 içerisinde herhangi başka bir programlama dili kullanmadan Javascript ile 3 boyutlu nesneler oluşturabilmekte ya da bir karakter modeli import ederek animasyon gerçekleştirilebilmektedir.

WebGL ile birlikte geliştiriciler, bir tarayıcı u zerinden bilgisayarın tu m donanımsal grafik işleme gu cu nu  kullanabilmektedirler. WebGL’den o nce geliştiriciler, geliştirdikleri oyunları ya bir eklentiyi kullanıcılara yu kleterek (Adobe Flash Player gibi) ya da kendi hazırladıkları işletim sistemine o zgu  (.exe, .app, .deb, .apk vb.) uygulamayı cihazlarına indirip kurulmasını sag layarak donanımsal grafik işleme ve dig er o zellikleri kullanabilmektedirler. (Parisi, 2012).

Khronos Group WebGL’i OpenGL ES 2.0 u zerinde inşa ederek tıpkı dig er HTML5 API’leri gibi geliştirmiştir. Bu API sayesinde 3 boyutlu grafik uygulamaları, normal html elementleri ve alt seviye DOM ara yu zu nde kullanılabilir hale gelmiştir. Bununla birlikte WebGL ile u st seviye bilgisayar oyunları geliştirilebildig i gibi, 3 boyutlu web uygulamaları da oluşturulabilmektedir. WebGL’in OpenGL ES u zerine entegre edilmesinin bir başka getirisi ise OpenGL ES’in go mu lu  sistemler (embeded systems) için uyarlanmış olması nedeniyle lider tu m mobil işletim sistemlerinde dog ru kaynak yo netimi ile du şu k gu çteki cihazlarda ve mobil platformlarda (iPhone, iPad, Android Cihazlar vb.) çalışabilmesidir. Ancak WebGL, OpenGL gibi çok alt seviye (low-level) bir ku tu phanedir. Bu ku tu phaneyi kullanmak da OpenGL kadar karmaşık ve uzmanlık isteyen bir yapıdadır. Ancak bazı oyun motorları sayesinde WebGL’in de kullanımı daha kolay hale gelmiştir. Buna en gu zel o rnekler PlayCanvas, Three.js ve Babylon.js olarak verilebilir. Bu oyun motorları sayesinde tıpkı modern oyun motorları olan Unity, Unreal Engine ve CryEngine gibi 3 boyutlu oyunlar geliştirilebilmekte u stelik tu m bu işlemler bir internet tarayıcısı u zerinden gerçekleştirilebilmektedir.

HTML5 OYUN MOTORLARI

HTML5 ile oyun geliştirme noktasında iki seçenek bulunmaktadır. Bunlardan ilki 2D oyunların geliştirilebildig i Canvas, dig eri ise 3D oyunların geliştirildig i WebGL’dir. Oyun motorları sayesinde hem 2D hem 3D oyunları aynı platform altında geliştirilebilmektedir. Ayrıca, gerekli programatik o g elerin o nceden kontrol edildig i ve bazı fonksiyonların kolayca yapılmasını sag layan bir araçlar bu tu nu ne sahip olunmaktadır. Aşag ıdaki paragraflarda şu anda var olan HTML5 oyun motorları hakkında kısaca bilgi verilmiştir.

Construct2 oyun motoru, ilk olarak 2007 yılında bir grup o g renci tarafından hobi olarak geliştirilmiş ve Construct Classic ismi ile ortaya çıkmıştır. Contruct 2 ise, 2011 yılında HTML5 odag ında piyasaya çıkarılmış ve bir çok ko klu  deg işiklik yapılmış oyun motorudur. Çoklu platform desteg i, kolay o g renme ve go rsel programlama gibi çok o nemli o zellikleri bu nyesinde barındırmaktadır. (Subagio, 2014) Construct 2, 2 boyutlu oyunlar geliştirmek için tasarlanmış ve herhangi bir programlama bilgisi olmadan kullanıcıların oyun geliştirebileceklerini belirtmektedir. Construct 2 içerisinde DignityAI kütüphanesi kullanabilmek için, Construct’un sundug u SDK Template dosyası indirilmelidir. Bu template içerisine aktarılacak kodlar sayesinde kolaylıkla oyun motoru içerisindeki öğelere yapay zeka özellikleri katmak mümkündür.

ImpactJS, Dominic Szablewski tarafından 2010 yılında geliştirilmeye başlanan yine popu ler ve u cretli oyun motorlarından birisidir. Bu oyun motorunun en bu yu k artılarından birisi Entity yapısına sahiptir. Motor içerisinde bulunan, .draw() ve .update() metotları ile bag lı bulunan tu m Entity yapıları içerisindeki update ve draw metotları çag ırılarak bu tu ne etki etmektedir. DignityAI kullanılacak proje içerisinde

/libs/game/entities/ klasörü  bulunmaktadır. Bu klasöre https://github.com/berkanuslu/dignityai/releases/download/v1.0.0/dignityai.v1.0.0.min.js adresinde DignityAI 1.0.0 su ru mu  dosyası eklendig inde, index.html sayfası içerisinde <script src=”libs/dignityai.v1.0.0.min.js”></script> şeklinde kullanılması ile istenilen nesneye yapay zeka o zellikleri eklenebilir.

PixiJS, Good Boy Digital oluşumu tarafından hazırlanan, Node.js u zerine kurulu ve tamamen u cretsiz olarak Github u zerinden dag ıtılan bir oyun motorudur. Dig er 2D oyun motorlarının aksine, PixiJS eg er tarayıcının WebGL desteg i varsa oyunun daha performanslı olması için WebGL ile render etmektedir.

Ancak, WebGL desteg inin olmadıg ı tarayıcılarda normal Canvas u zerinden işlemine devam etmektedir. PixiJS, ImpactJS, Phaser, PandaJS gibi bir çok oyun motorunun da render kısımlarında kullanılan bir araç olarak da go sterilmektedir. DignityAI kullanılacak proje içerisinde bir /libs/ klaso ru  oluşturularak https://github.com/berkanuslu/dignityai/releases/download/v1.0.0/dignityai.v1.0.0.min.js adresinde DignityAI 1.0.0 su ru mu  dosyası bu klaso r içerisine eklendig inde, index.html sayfası içerisinde <script src=”libs/dignityai.v1.0.0.min.js”></script> şeklinde kullanılması ile istenilen nesneye yapay zeka o zellikleri eklenebilir.

PlayCanvas, dig er oyun motorlarından farklı olarak web u zerinde Cloud bir hesap ile oyun geliştirmeye olanak tanımaktadır. Kodları, PlayCanvas Code Editor adındaki bir edito r yardımıyla du zenlenebilmektedir. PlayCanvas’ın en o nemli o zelliklerinden birisi de kendine has bir level edito ru nu n olmasıdır. Bu edito r tıpkı bu yu k oyun motorları (Unity, Unreal Engine vb.) oldug u gibi tamamen 3 boyutlu sahne tasarımı yapmaya ve bu sahne u zerinde materyalleri du zenlemeye yardım etmektedir. PlayCanvas’ı dig er oyun motorlarından ayıran dig er bir o zellik ise, kullanıcıların bu tu n public projeleri kendi proje havuzları içerisine çatallayarak (fork) kullanabilmeleridir. DignityAI’ın kullanılacag ı proje içerisinde https://github.com/berkanuslu/dignityai/releases/download/v1.0.0/dignityai.v1.0.0.min.js adresinde yer alan DignityAI 1.0.0 su ru mu  dosyası idnriilerek bir Entity u zerine bu dosya link olarak verildig inde kurulum işlemi yapılmış olur. Bu sayede istenilen nesnelere yapay zeka özelliği eklenebilir.  

Three.js, WebGL u zerine odaklanan ve WebGL ile 3 boyutlu uygulamalar geliştirme konusunda belki de ilk adımları atan ve u cretsiz olarak dag ıtılan bir oyun motorudur. Three.js içerisinde WebGL, Canvas, SVG, CSS3D, DOM gibi bir çok renderer bulunmaktadır. Sahne, kamera, animasyon, ışık, materyal, shader gibi bir çok o g eye izin vermektedir. PlayCanvas’da oldug u gibi Three.js’de de bir edito r çalışması yapılmakta ve 3 boyutlu sahnelerin geliştirilen bu edito r yardımıyla gerçekleştirilmesi planlanmaktadır. DignityAI kullanılacak proje içerisinde bir /libs/ klaso ru  oluşturularak https://github.com/berkanuslu/dignityai/releases/download/v1.0.0/dignityai.v1.0.0.min.js adresinde DignityAI 1.0.0 su ru mu  dosyası bu klaso r içerisine eklendig inde, index.html sayfası içerisinde <script src=”libs/dignityai.v1.0.0.min.js”></script> şeklinde kullanılması ile istenilen nesneye yapay zeka o zellikleri eklenebilir.

Phaser, u cretsiz ve açık kaynak kodlu yayınlanan ve çok kullanılan bir HTML5 oyun motorudur. Phaser, 2D oyun geliştirme tarafına odaklanmıştır.  Render tarafında PixiJS kullanan Phaser, WebGL ve HTML5’e destek vererek 3 boyutlu uygulamalar da yapmaya olanak sag lamaktadır. Preloader, fizik sistemi, sprite, animation, particle, input, sound, tilemaps, cihaza go re o lçeklendirme, mobil tarayıcı desteg i gibi bir çok o zellig i bu nyesinde barındırmaktadır. (Bibat, 2015) Phaser içerisinde bir plug-in mantıg ı bulunmaktadır. Uygulamaya eklenen tu m ek o zellikler bu eklentiler yardımıyla gerçekleştirilmektedir. https://github.com/photonstorm/phaserplugins/blob/master/SamplePlugin/SamplePlugin.js adresinde bulunan o rnek plug-in dosyası zaten DignityAI’ın geliştirilme yapısına benzerlik go stermektedir. Buradaki gibi phaser-plugins içerisinde bir proje oluşturularak DignityAI dosyaları bu klaso r içerisine alındıg ında DignityAI bu oyun motoruna da uygun hale getirilebilecektir.

Kiwi.js, HTML5 u zerinde mobil ve masau stu  oyun geliştirmek için tasarlanmış ve açık kaynak kodlu olarak yayınlanan bir oyun motorudur. 2D ve 3D çizim o zellikleri için WebGL desteg i bulunmaktadır. Oyunları yayınlayabilmek için ise CocoonJS platformunu kullanmaktadır (Kashyap, 2015). Phaser gibi bir çok oyun motorunda da oldug u gibi eklenti (plug-in) sistemini desteklemektedir. DignityAI kullanılacak proje içerisinde bir /libs/ klaso ru  oluşturularak https://github.com/berkanuslu/dignityai/releases/download/v1.0.0/dignityai.v1.0.0.min.js adresinde DignityAI 1.0.0 su ru mu  dosyası bu klaso r içerisine eklendig inde, index.html sayfası içerisinde <script src=”libs/dignityai.v1.0.0.min.js”></script> şeklinde kullanılması ile istenilen nesneye yapay zeka o zellikleri eklenebilir.

enchant.js, oldukça sade bir Javascript ku tu phanesidir. Oyun ve uygulama geliştirmek için kullanılmaktadır. I lk olarak 2011 yılında, Tokyo’daki Akihabara Araştırma Merkezi’ndeki araştırmacılar tarafından geliştirilmiştir ve MIT lisansı ile açık kaynak kodlu olarak paylaşılmaktadır. Oyun geliştirmenin yanında sade ve basit kullanılabilir bir framework oldug u için uygulama geliştirmede de sıklıkla kullanılmaktadır. Canvas, DOM ve WebGL olmak u zere tu m çizim metotlarını desteklemektedir. DignityAI kullanılacak proje içerisinde bir /lib/ klaso ru  oluşturularak https://github.com/berkanuslu/dignityai/releases/download/v1.0.0/dignityai.v1.0.0.min.js adresinde DignityAI 1.0.0 su ru mu  dosyası bu klaso r içerisine eklendig inde, index.html sayfası içerisinde <script src=”libs/dignityai.v1.0.0.min.js”></script> şeklinde kullanılması ile istenilen nesneye yapay zeka o zellikleri eklenebilir.

Daha bir çok HTML5 oyun motoru her gu n geliştirilmeye devam etmekte ve bu listeye eklenmektedir. Babylon.js, GameMaker, Turbulenz, Cocos2d-X, Isogenic Engine, Panda.js, Crafty, voxel.js, MelonJS, stage.js gibi daha bir çok oyun motoru HTML5 ile oyun geliştirmek isteyenler için tasarlanmıştır. Bu oyun motorlarına ve API’lara bakıldıg ında grafik, ses, video, fizik gibi bir su ru  o g enin du şu nu lmu ş oldug u ve halihazırda HTML5 tabanlı oyunlarda kullanılabildig i go ru lmektedir. Ancak, yapay zeka ile ilgili herhangi bir ku tu phane barındıran oyun motoru ya da bo yle bir dış API olmadıg ı go ru lmektedir. DignityAI tam da bu noktada eksik olan boşlug u tamamlamak için geliştirilmiştir.

 

@berkanuslu

Facebook Yorumları