24 Saatte Tarayıcı Tabanlı Oyun Geliştirmek (Bug Room)

OYUNU OYNAMAK ISTIYORUM YAZIYI SONRA OKURUM
Herkese merhabalar,

Geçtiğimiz günlerde ilki gerçekleştirilen SabancıDx Code Challenge etkinliğini, dolu dolu geçen 24 saatlik bir oyun geliştirme maratonunu geride bıraktık! 3 kişilik bir ekiple, Berk Özcan, Ata Gülalan, kısıtlı süre içerisinde daha önce geliştirme tecrübemiz olmayan bir alanda güzel bir çıktı üreterek birinci olduk. Birinci olmak bizi çok mutlu etse de birinci olmasak da yaşadığımız deneyim çok keyifliydi. Şimdi sizlere, elimizde hazır hiçbir şey olmadan, tamamen sıfırdan nasıl tarayıcı tabanlı bir oyun ortaya çıkardığımızı anlatmak istiyorum.

Oyun oynamak gözümde çok keyifli bir aktivite olsa da oyun geliştirmek gözümde büyüttüğüm bana çok zor gibi gelen bir süreçti. Bu yazıyı yazma motivasyonum da aslında bu sürecin nasıl işlediğini benim gibi merak edenleriniz için bir rehber oluşturmak.

Yarışma Hakkında

Yarışmanın konusu aşağıdaki

• Doğa ve Hayvan Sevgisi
• Sürdürülebilirlik
• Gelecekte Yaşam

üç alandan bir veya birkaçını konu alan oyunlar ortaya çıkartmaktı. Yarışmada hazır kaynak kodlar kullanılmaması konusunda uyarılar yapılmıştı. Oyunlar geliştirildikten sonra hazır oynanabilir bir yere yüklenecekti.

Kısacası 24 saat içerisinde;

• Eğlenceli ve 24 saat içerisinde tamamlanabilir bir oyun fikri bulmak.
• Oyunun döngü tasarımını oluşturup, akışına karar vermek.
• Bu fikri hayata geçirebileceğimiz altyapıya karar vermek.
• Oyunun karakter ve ortamlarının tasarlanması.
• Tasarımın fonksiyonalitesini oluşturmak.
• Çıktıyı herkesin erişebileceği bir ortama yükleyip çalıştırmak.

yukarıda bahsettiğim bütün işlemleri yapmamız gerekiyordu.

Fikir Aşaması

Projeye üzerinde çalışmaya 14.00'te başladık. Bu süreçte iyi yaptığımızı veya kötü yaptığımızı düşündüğüm şeyleri de paylaşmaya çalışacağım. En iyi yaptığımız şeylerden birisinin, öncelikle oyun geliştirme araçlarını araştırıp onların kapsamına göre ne geliştirebiliriz diye düşünmek yerine. Önce fikir üretme çalışması yaptık sonrasında bu fikri hangi araçları kullanarak geliştirebiliriz diye düşündük.

1 saatimizi birbirimizden etkilenmeden serbestçe fikir üretmeye ayırdık. Ürettiğimiz fikirleri de aşağıdaki 4 temel parametreye göre puanlandırıp fikirler üzerinde konuştuk. Bu aşamada yaşadığımız bir başka zorluk da şuydu. Oyun üretiyoruz ürettiğimiz oyunun amacı eğlenceli olması diye düşünmüştük başta sonra şu ikilemde kaldık. Yapılabilirliği yüksek, eğlencesi düşük bir oyun mu; yapılabilirliği düşük, eğlencesi yüksek bir oyun mu yapmalıyız? Bu aşamada yapılabilirliği yüksek oyunu tercih edip süreç içerisinde aklımıza gelecek fikirlerle oyunu daha eğlenceli hale getirme kararı aldık. Bu da verdiğimiz bir diğer doğru ve önemli kararlardan biriydi.

Oyun Akışı (Game Loop)

Oyun fikrine karar verdikten sonra oyunun akışına ve mekanizmalara karar verme aşamasına geldik. Bu aşamanın varlığından, Ata bahsedene kadar haberim bile yoktu fakat anlattıktan sonra çok gerekli bir aşama olduğuna karar verdim. Bu aşamayı kısaca anlatmam gerekirse oyun oynanırken yapılacak davranışların oyunun içindeki karakter veya ortamları nasıl etkileyeceğine karar verilen bir yer. Burada diyagramlarla etkilenilen kısımları netleştirip, yazılıma başlamadan bütün iş akışını tamamladık. Bu bizim ilerleyen süreçlerde zaman kaybetmemizin önüne geçti.

Server Room Game

Campus Game Loop

Campus Gameloop

Fail Conditions

Kısaca neler olduğunu anlatmama izin verin;

Server Odası: Server odasında serverların durumunu kontrol edebiliyor kullanıcı. Bu durumlar sıcaklığı etkiliyor eğer gelen istekler serverların karşılayabileceğinden fazlaysa sıcaklık artıyor. Kullanıcı belli bir süre bunları kontrol altında tutmazsa serverlar yanmaya başlıyor. Kullanıcı bunu söndürmezse yangın dağılıyor.

Kampüs: Kullanıcı server odasında kaldıkça modu düşüyor. Modunu yükseltmek isterse kullanıcının server odasından kampüse geçmesi gerekiyor. Kampüste dolaşarak veya kampüste bulunan hayvan dostlarımızı severek modunu yükseltebiliyor.

Süre: Bu iki akışı dengede tutmak temel amaç bunu koyduğumuz süre boyunca yapmayı başardığında turu başarıyla tamamlamış oluyor. Süre kısmı süreç içerisinde eklediğimiz başta diyagramları oluştururken koymadığımız bir parametreydi.

Karbon Ayak İzi: Aynı şekilde enerji seviyesini düşünmüş olsak da bunu karbon ayak izi olarak eklemek yine süreç içerisinde yaptığımız bir değişiklikti.

Teknik Altyapı

Oyun, oyunun akışı hazır şimdi geldi oyunu hayata geçirmeye bunun için ne kullanalım diye biraz tartıştıktan sonra hepimizin aşina olduğu Vue.js framework’ünü kullanmaya karar verdik. Bu sayede tarayıcı tabanlı her cihazdan erişilebilen bir oyun ortaya çıkartmış olacaktık. Bu sebeple sıfırdan bir proje template’i oluşturup kolları sıvadık.

Verdiğimiz bir başka iyi karar, mükemmellik peşinde koşmak yerine basit bir akışı tamamlayıp oyunu canlıya erkenden çıkmaya karar vermek oldu. O kısımdan sırası geldiğinde bahsedicem şimdilik devam edeyim.

Karakter ve Ortamların Tasarlanması

Elimizde hiçbir şey olmasa da kullanabileceğimiz araçlar olduğunu hepimiz biliyorduk. Ata’nın öncülüğü ile ücretsiz olarak Microsoft Designer tarafından sağlanan Image Creator hizmetini kullanmaya karar verdik. Karakterimizi ve istediğimiz ortamları detaylıca tasvir ettik ve ücretsiz bir hizmete göre gerçekten iyi bir sonuçla karşılaştık.

Initial view

Bu aşamada tasarımla alakalı işlerin bir kısmını bitirmiş olduk. Server odası ve kampüs alanlarının tasarımları eksikti fakat her şeyin bir sırası vardı.

Tasarımı Fonksiyonel Hale Getirme

İşte geldik işin kilit kısmına tasarımda bir şeylerin tıklandığında çalışması. Bunun için butonlar oluşturmamız gerekiyordu. Burada iş bölümü yaptık. Fotoğrafta gördüğünüz basamaklara karşılık gelecek sayıda buton yapıp bunların çalışma prensiplerini kodladık. Butonların basamaklardaki gibi üç boyuta sahip olabilmesi için ise css transformation özelliği olan perspective property’sini kullandık. Bu sayede butonlar sadece iki boyutta değil üç boyuttaymış gibi çalışmaya başladı.

Sıra sıra bütün odadaki tıklanmasını istediğimiz şeyleri bu şekilde giydirdik. Server’a benzeyen şeylere tıklandığında server arayüzüne giriş yapılacaktı. Aynı şekilde kapıya tıklandığında kampüse çıkılacaktı.

Oyun Dosyalarının Canlıya Çıkılması

Oyunu size gösterdiğimiz şekliyle en basit haliyle canlıya çıktık. Bunun için vue.js üzerinden build aldıktan sonra ekip arkadaşımın sahip olduğu sunucu üzerinden oyunu yayınladık. Bunun için konfigürasyon dosyalarıyla da biraz uğraşmak gerekti doğrusu. En sonunda oyunumuz en temel haliyle de olsa canlıdaydı. Ve bizim hala 9 saatimiz vardı.

Oyunu Neden Erkenden Canlıya Çıktık?

Bu aşamadan bahsedeceğimi söylemiştim. Oyun geliştirme sürecinin bambaşka dinamikleri olduğuna eminim ilk defa oyun geliştiriyoruz bu da tamam ama en nihayetinde süre kısıtı olan bir yarışmadayız. En büyük gerginlik ve moralleri olumsuz etkileyecek olay, bir şeylerin ters gitmesi düşüncesidir. Biz aslında oyunu en basit haliyle canlıya çıkartarak bütün süreçlerin üzerinden bir kez başarıyla geçmiş olduk. Şimdi geriye kalan özellikleri önceki maddelerde bahsettiğim süreçleri tekrarlayarak oyunun içerisine eklemek olacaktı. Nitekim o şekilde de oldu.

Son Canlıya Çıkış

Saat 09.30'da oyunu son kez canlıya çıktık önümüzde 4.30 saat daha olsa da bu yarışmanın en zorlu kısmı olan yorgunluk ve uykusuzluk bizi aşırı derecede etkilemişti. Oyunu son kez canlıya çıktığımızda oyunun içerisine progress barlar, server arayüzü, kampüs gibi birçok şey eklemeyi başarmıştık. Fikir aşamasında bize pek de eğlenceli gelmeyen oyun hepimize keyifli gözükmeye başlamıştı. Oluşturduğumuz tasarımdaki alanların şirketteki bazı binalarla benzerliğinin olması veya oyunun içerisine sesler de eklemiş olmamız bizi oyuna biraz daha bağladı. Hatta aramızda kalsın serverlar yandığında, eğer ateşin üzerine tıklarsanız oyunda benim üfleme sesimi duyabilirsiniz. :)

Her Zaman Mükemmel Olmaya Gerek Yok

Yarışmanın bir evresinde sunuculara fazla yük bindiğinde sunucuların ısınması akışı üzerinde çalışıyorduk. Yarışmanın en keyif aldığım kısımlarından birisi olsa da bu aşamada yanlış karar verdiğimizi düşünüyorum. Süreci anlatıyım son kararı yine siz verin tabiki.

Sunuculara fazla yük binerse sunucuların ısısı artmaya başlıyor. Bu ısı artışının parabolik olması gerektiğini düşündük başta yani eğer sıcaklık 25 ise bir anda yük artışı yaşanırsa sıcaklık başta yüksek hızda artacak ve sıcaklık artışıyla bu eğim azalsa da artış devam edecek. Aynı şekilde soğuma senaryosu için de aynısı geçerli. Bu tutarlılığı sağlamak için yaklaşık 2 saat kafa patlattık en sonunda da buraya harcadığımız zamanı geliştirebileceğimiz diğer özelliklerden çaldığımızı fark ettik ve normal bir hızda artırmaya karar verdik.

Yine de yaptığımız grafiklerin bir fotosunu atayım tabi :)

Son Düşünceler

Evet işte tüm ayrıntılarıyla anlatmaya çalıştığım oyunumuz “Bug Room” bu şekilde ortaya çıktı. “Bug Room”, sürdürülebilirlik ve çevre bilinci üzerine kurulu bir oyun. Kendimizce bazı düşüncelerimizi de oyunun içerisine ekledik. İşte bunlardan bazıları;

1. Kendinize ve Canlılara Özen Göstermek:

• Sunucularla meşgulken kendinizi yormamalı ve dinlenmeye zaman ayırmalısınız. Ayrıca, oyun içindeki canlılara da özen göstermelisiniz. Eğer bu dengeyi sağlamazsanız, hem şirketiniz hem de siz kaybedersiniz.

2. Şirketi Ayakta Tutmak:

• Sunucuları gerektiğinde kapatıp maksimum verimle çalıştırmalısınız. Sunuculara gelen ekstra yük, ısınmalarına neden olabilir ve kontrol edilemezse, sunucular yanabilir. Eğer tüm sunucular kaybedilirse, oyunu kaybedersiniz.

3. Sürdürülebilirlik İlkesine Uymak:

• Tüm sunucuları sürekli çalıştırmak, karbon ayak izinizi artırır. Bu, sürdürülebilirlik açısından olumsuz bir etki yaratır. Bu nedenle, sunucuları gerektiğinde kapatmalı ve sürdürülebilir bir işletme stratejisi benimsemelisiniz. Aksi takdirde, şirketinizin geleceği tehlikeye girer ve oyunu kaybedersiniz.

Şirket içerisinde gerçekleşen bu yarışma ile sadece birinci olmanın zevkini yaşamakla kalmadık. Aynı zamanda çevre bilinci, ekip çalışması ve yaratıcılıkla dolu bir başarı hikayesine imza attık. Bu süreçte oyun geliştiren emek veren bütün arkadaşların ellerine sağlık diyorum ve bu yarışma fikri için KEMAL ELÇİ’ye ve Oğuzhan Yıldız’a özellikle teşekkür ediyorum.

Eğer oyunu oynamak isterseniz bu link üzerinden oyunu oynayabilirsiniz. :)

Kendinize iyi bakmayı ve sevgiyle kalmayı unutmayın..