21 Ağustos 2012 Salı

Node.js, Socket.IO, Express.js ile HTML5 Oyun Geliştirme - Bölüm 1

Herkese Merhaba,

Node.js, Socket.IO, Express.js ile HTML5 Oyun Geliştirme, NodeJS Türkiye sitesindeki ilk makalem olacaktır. Bu makalenin temelini jstanbul 2012'de yapmış olduğum sunum oluşturmaktadır. Sunumun tamamını ve kodlarını aşağıdaki linklerde bulabilirsiniz:

Sunum: http://slidesha.re/Nezd9N
Kodlar: http://bit.ly/NcxzGj


Makalemizi 3 parça olarak tamamlamayı planlamaktayım. Makalelerin bütününde anlatılacak konu olarak aşağıdaki sıralamada olacaktır:



  1. Bingo Oyunu (Bölüm 1)
  2. Bingo Oyununun Tasarımı (Bölüm 1)
  3. Bingo Oyununun Yazılım Mimarisi (Bölüm 1)
  4. Node.js ve Neden Node.js? (Bölüm 2)
  5. Express.js ve Neden Express.js? (Bölüm 2)
  6. Socket.IO ve Neden Socket.IO? (Bölüm 2)
  7. HTML5 Canvas (Bölüm 3)
  8. Oyunun İmplementasyonu (Bölüm 3)
  9. Sonuç (Bölüm 3)
Bölüm 1:

Oyunumuzun yapılışı için öncelikle oyun tasarımıyla analizi çıkarılacak, ardından mimarisi çizilecek, daha sonra da kullanılacak teknolojiler teker teker anlatılıp neden multiplayer bir oyun için gerekli olduğundan bahsedilecektir. İlk olarak, bingo oyununu tanıyalım ve oyun tasarımından bahsedelim.


Bingo Oyunu:

Bingo oyunu aslında bizim her sene yılbaşında oynadığımız Tombola oyunundan hiçbir farkı yoktur. Ancak Bingo oyununun belirli çeşitleri bulunmakta ve bizim bildiğimiz Tombola oyunu, Kara Avrupa'sında aynı stildedir. 

Resim 1: Tombola Oyunu


Bingo oyununun oynanışını adım adım belirtirsek:
  1. Her oyuncuya Bingo kartları dağıtılır.
  2. Daha sonra içi kapalı Bingo torbasından sayılar rastgele bir şekilde seçilir. 
  3. Seçilen sayının kartlarda bulunması sonucu, o kart üzerindeki o sayı kapatılır.
  4. Kartındaki bütün sayıları ilk kapatan oyuncu, oyunu kazanır.
Oyunun temel oynanışı yukarıdaki gibidir. Ayrıca, bazı oyun kuralları da mevcuttur:
  • Bingo kartlarının her bir sütunu 10'un katlarındaki sayıları belirtecek şekilde ayarlanır.
  • Çekilen rastgale sayılar 0 - 90 arasında olmalıdır.
Şimdi az-çok oyunumuzun nasıl oynandığı ve hangi kurallar dahilinde oynanacağı belirtmiş olduk. Artık, oyunumuzu bilgisayar ortamında nasıl tasarlayacağımız konusunda temel bilgilere sahip olduk ve şimdi oyuncuların nasıl oyuna giriş yapacağını belirlemek için bazı yapılardan bahsedeceğim:


Resim 2: Oyuncu Alanları


Salon: Bütün oyuna bağlanan oyuncuların, ilk olarak bağlanacağı alandır.
Oda: Oyuncuların oyun oynamak için salondan giriş yapacağı alanlardır. Odaların oyuncu limiti gibi bir kısıtı olmalıdır. Böylece, oda dolu olduğu zaman oyunun başlaması için temel kural tamamlanmış olacaktır.

Yani temel olarak oyuncumuz öncelikle salona giriş yapacak, ardından boş olan odalardan herhangi birine girdikten sonra odanın dolmasını bekleyecek, oda dolduğu zaman oyun başlayacaktır. Oyunun sonunda oyuncu isterse oda da kalıp diğer oyunun başlamasını bekleyecek veya salona geri dönüp herhangi bir odaya giriş yapabilecektir.


Resim 3: Oyuncu Durumu
Bingo Oyununun Yazılım Mimarisi:

Artık, oyunumuzun kurallarını belirledikten sonra, geriye kalan oyunumuzun yazılım mimarisinin nasıl olacağını belirlemek kaldı. Oyun mimarisi, multiplayer oyunlar için benzerlikler göstermektedir. Aşağıdaki resimde bizim Bingo oyunumuzda kullanacağımız mimariyi göstermektedir.


Resim 4: Oyun Yazılım Mimarisi

Öncelikle yazılım mimarimiz, iki parçaya ayrılmış durumdadır. Birincisi, Server tarafı yani bütün kullanıcıların bağlanacağı taraf, diğeri ise Client tarafı, her bir kullanıcıyı(Oyuncuyu) temsil eden birimdir. Ayrıca her ikisinin arasında mesaj iletimini gerçekleştiren bir yapıda bulunmaktadır. Açıklamalara, server tarafıyla başlamak istiyorum:


  • Server Tarafı:  Bütün kullanıcıları kontrol eden taraftır. Bu tarafta veri tabanı(Kalıcı ve Geçici veritabanları) ile ilişkiler, modeller, mesaj kuyruk yapıları ve ana kontrol yapısından(Front Controller) oluşmaktadır Bu yapımız tamamen Node.js tabanını kullanmaktadır.
    • Front Controller: Kullanıcıya iletilen bütün mesajların kontrollerini ve karar mekanizmasını, ayrıca modeller aracılığıyla veritabanı ile haberleşmeleri kontrol eden mekanizmadır. 
    • Models: Normal bir uygulamadaki gibi, Business Logic diye anlattığımız yapıların olduğu, Player, Room, Saloon gibi objelerin olduğu ve bunların birbirleriyle etkileşimlerini ve veritabanları ile kontrolleri sağlayan bölümdür.
    • MySQL(Persistent Storage): Modeller içerisinde oluşan verilerin kalıcı bir şekilde tutulmasını sağlayan, hepimizin web uygulamarda oldukça fazla kullandığımız veritabanıdır. Örnek olarak, oyuncunun geçmiş oyunlarda kazandığı puanlar, kişilik bilgileri gibi kalıcı olarak tutulmasını istediğimiz bilgileri MySQL tarafında tutmamız gerekmektedir.
    • Redis (Temporary Storage): Modeller içerisinde oluşan ancak geçici bilgileri tutacağımız  ve tamamen memory tabanlı, hızlı ve ölçeklenebilirlik konusunda, bize ve MySQL'e yardımcı olacak bilgileri Redis üzerinde saklamayı planlıyoruz. Mesela, oyuncu oyuna girdiği zaman, oyuncu ile ilgili bilgileri ve o anki oyundaki bilgileri Redis üzerinde tuttuğumuz zaman, verilere ulaşmamız en hızlı ve ölçeklenebilir bir şekilde gerçekleşecektir.
    • Message Queue: Mesaj kuyruğu yapısı, Server tarafından Client tarafına iletilecek ve geri gelecek bütün mesajların ölçeklenebilırliği konusunda yardımcı olacaktır. Ayrıca, bu mesajların, mesaj kuyruğunda takip edilmesi kolaylaşacak ve implementasyonunda oluşacak hataları mimimuma indirmeye yardımcı olacaktır.
  • Client Tarafı: Her bir kullanıcıyı temsil eden taraftır. Bu tarafta oyun arayüzünün yapıldığı, tamamen kullanıcının etkileşimine açık taraftır.
    • HTML 5 Rendering: Kullanıcıyı etkileyici bir arayüzle, animasyonlarla karşılamak ve bütün gelişmiş Browser'larda gösterebilmek için kullanabileceğimiz en iyi yapı, şu anda 2 boyutlu grafikler için HTML 5 Canvas ve 3 boyutlu yapılarda HTML 5 WebGL'dir. 
  • Socket.IO Tarafı: Server ve Client arasında mesaj iletimini gerçekleştiren protokole sahip ve elimizdeki bütün Browser'lara iletimi gerçekleştiren API'ye sahip Node.JS'te bulunan en iyi kütüphane Socket.IO'dur. Socket.IO sayesinde IE5'e bile anlık olarak(real-time communication) mesajlaşmaları gerçekleştirmekteyiz. Daha detaylı bilgiyi bir sonraki bölümde anlatmayı planlıyorum. 
Artık, oyun mimarimizi de oluşturduktan sonra kullanacağımız teknolojileri, teker teker anlatmaya başlayabiliriz. Bu teknolojiler sırasıyla Node.JS, Express.JS, Socket.IO ve HTML5 Canvas olacaktır. Bir sonraki bölumde teknolojileri anlatmaya başlayacağız. 

Herkese Iyi Bayramlar,




1 yorum: