Cocos2d-JS ile ilk adımlar

Video oyunları şu anda dijital ekonominin en önemli bileşenlerinden biri, her yıl video oyunlarının tasarımı, geliştirilmesi ve bakımına milyarlarca dolar yatırım yapılıyor ve aynı zamanda bu tür tüketen insanlar tarafından daha fazla para alınıyor. içerik.
Video oyunlarının sadece çocuklar için veya o dünyada olan insanlar için olduğunu düşünmek çok basit, ama gerçek farklı, tüm oyunlar çocuk değil ve herkesin iyi bir oyundan zevk alması için hayran olması gerekmiyor, binlerce oyun var. vakaların ancak iki örnek olabilir şeker ezmek ve Simler, birincisi, sosyal ve mobil ağlardaki oyunlar alanında, günlük olarak çok para üreten bir devrimdi ve ikincisi, çok daha eski, PC oyunlarında bir devrimdi, çünkü hiç düşünmemiş birçok insanı içeriyordu. video oyunlarına ilgi.

BÜYÜT

Tüm bu girişler bizi video oyunlarının yaratılmasını kolaylaştıran bir araca yönlendiriyor. Cocos2d-JSdestekleyen her tür cihaz için basit 2 boyutlu oyunlar oluşturmamıza izin veren bir çerçeveden başka bir şey değildir. JavaScript Y HTML5.
Bu çerçevenin tamamen içinde yapıldığı gerçeği sayesinde JavaScript, kullanım gereksinimlerini karşılamak o kadar da zor değil, hadi bu eğitimde projeler geliştirmek için neye ihtiyacımız olduğunu görelim. Cocos2d-JS:
Metin düzelticiUygulamalarımız için kod yazmamıza izin veren bir araca ihtiyacımız var, şu anda bir SDI memur o ne Cocos Kodu IDE ancak yalnızca pencereler Y MAC. Tabii ki tercih ettiğimiz editörü kullanabiliriz, bu yüzden yukarıdaki IDE ilk öneridir, bu eğitimde kullanılan editör durumunda Yüce metin sürüm 2'de, ancak gerekli değildir.
bir web sunucusuÇerçevenin farklı bölümleri nedeniyle, uygulamalarımızı oluşturmak için bir web sunucusuna ihtiyacımız var, genellikle bir ortam Apaçi bize olabildiğince hizmet edecek XAMPP, LAMBA veya WAMP, sunucu konfigürasyonu konusunda geniş bilgimiz olsa bile, aşağıdaki gibi bir sunucu kullanabiliriz. Nginx içeriğimize hizmet etmek için, ancak gerekli değildir.
HTML5 destekli tarayıcıBizim durumumuzda kullanacağız Firefox Geliştirici Sürümü web geliştirme için faydaları için, ancak tercih edilen bir tarayıcımız varsa, onu sorunsuz bir şekilde kullanmaya devam edebiliriz.
Yapmamız gereken ilk şey, mevcut kaynakları kullanabilmek için gerekli dosyaları indirmektir, bunun için resmi web sitesine erişebilir ve ilgili indirmeyi yapabiliriz, başlangıçta en güncel sürümü seçmeliyiz, özellikle bizim durumumuzda o 3.5Ancak daha fazla revizyon çıkabilir. İndirme alanının nasıl göründüğüne bakalım:

BÜYÜT

Çerçeveden sorumlu şirketten başka ürünlerimiz olduğunu görebiliyoruz, örneğin SDI ve bir geliştirme araç kiti, ancak şu anda yalnızca ilgileniyoruz Cocos2d-JS, ürünler listesinde ikinci sırada görebiliriz. Deşarjın daha fazla olduğuna dikkat etmek önemlidir. 350 MB bu yüzden bu dosya için bir alan hazırlamalıyız ama korkmamalıyız çünkü bu indirme çok miktarda malzeme içeriyor, yani gerçek motor o kadar ağır değil.
Bilgisayarımızda çerçeveye sahip olduğumuzda, dosyayı açmalı ve klasöre koymalıyız. çerçeveler klasörü bulacağız cocos2d-html5 ve projemizi başlatacağımız dizine kopyalayacağız, bu durumda çağrılacak ilk oyun, başlangıçta şöyle görünmelidir:

Ardından projemiz içinde adında bir klasör oluşturmalıyız. kaynak ve üç ek dosya; NS index.html uygulamamızın ana konteyneridir ve web sunucusundan tarayıcıda çağrılacak dosyadır. Dosya ana.js tüm kodumuzu içerecek JavaScript oyunumuzun mantığına karşılık gelen ve son olarak dosya proje.json Bu, oyunumuzun doğru çalışabilmesi için yapılandırma parametrelerini içerecektir. Son yapımızın nasıl görünmesi gerektiğine bakalım:

İlk kurulumumuzu yaptıktan sonra oyunumuzu yaratmanın zamanı geldi, elbette bir oyun karmaşık ve oluşturacağımız şey sadece ekranda bize bir mesaj göstererek çok temel bir işlevselliğe sahip olacak, rekabet edecek bir şey değil. Piyasadaki oyunlar ancak çerçevede işlerin nasıl yürüdüğünü görmek için bir başlangıç.
arşivimizde index.html kütüphaneyi dahil etmeliyiz CCBoot nın-nin Cocos2d-JS, dosyamızı da eklemeliyiz ana.jsve nihayet içimizde vücut bir etiket eklemeliyiz tuval Oluşturduğumuz örneğin bilgilerini almaktan sorumlu olan, örneğimizin kaynak kodunun nasıl göründüğüne bakalım:

 İlk Oyunumuz 

İlk adımı yaptığımız için şimdi dosyaya geçeceğiz ana.js, bu dosya genellikle zor oyun mantığı taşımaz, işlevselliği çoğu zaman motora bazı parametreleri belirtmek için bir yapılandırma dosyası görevi görmek ve projeye gerçek mantığı dahil edebilmek için içine yerleştireceğiz. aşağıdaki kod:

 cc.game.onStart = işlev () {cc.view.setDesignResolutionSize (320, 480, cc.ResolutionPolicy.SHOW_ALL); cc.director.runScene (yeni gameScene ()); }; cc.game.run ();

Burada oyun başladığında ne olacağını basitçe tanımladık, ana fonksiyonun içindeki iki satır çözünürlüğü ve başlaması gereken sahneyi ve son olarak son satırda oyunu başlatması gerektiğini belirtiyoruz. Kod başlangıçta biraz karmaşık görünüyor, ancak yavaş yavaş anlayacağız ve bununla birlikte karmaşıklık azalacaktır.
Şimdi projemizi yapılandıracağız, bunun için dosyayı değiştireceğiz. proje.json, içinde motoru, oyunun saniyedeki kare sayısını, yani kapsayıcısını ve oyunumuzun mantığını içeren dosyaların listesini tanımlayacağımız bir sonraki adımda ikincisini göreceğiz. Şimdilik dosyaya ilk olarak ne yerleştireceğimize bir bakalım:

 {"debugMode": 0, "showFPS": false, "frameRate": 60, "id": "gameCanvas", "renderMode": 0, "engineDir": "cocos2d-html5 /", "modules": [" cocos2d "]," jsList ": [" src / gamescript.js "]}

Bu dosyanın içeriğinin bir JSON geçerlidir, aksi takdirde uygulamamız başlamaz.
Bu yapıldıktan sonra, ilk örneğimiz için mantığı dahil etmenin zamanı geldi, bunun için klasöre gidiyoruz. kaynak dosyayı oluşturacağımız projemizin gamescript.js, eğer gözlemciysek, bunun tanımladığımız dosya olduğunu anlayacağız. proje.json ve parçaların nasıl birbirine uymaya başladığını görmeye başlıyoruz.
Bu yeni dosyada oyunumuzun sahnesini oluşturacağız, bununla başlayacağız, elbette gösterecek bir grafiğimiz yok, bu yüzden sadece konsolda bir şeyler yazdıracağız. JavaScript, eklememiz gereken kodu görelim:

 var gameScene = cc.Scene.extend ({onEnter: function () {this._super (); console.log ("Oyunumuz eğlenceli değil ama çalışıyor =)"); }});

Artık her şey yerli yerinde olduğuna göre, tarayıcıdan proje klasörümüzü çağırmalı ve geliştirici konsolunu veya konsolu görmemizi sağlayan bazı eklentileri açmalıyız. JavaScript tüm çalışmalarımızın sonucunu görmek için:

BÜYÜT

Gördüğümüz gibi ilk girişimimiz başarılı oldu, zaten üzerinde çalışmamız gereken belirli bir temelimiz var ve ilk adımlarımızı bu çerçevede atmış bulunuyoruz.
2D oyunlar neden yapılır?Ayrı bir notta, birçok kişi bugün 2 boyutlu oyun yapmanın avantajının ne olduğunu merak ediyor olabilir ve cevap çok basit: çünkü eğlenceliler ve düşük performanslı ortamlarda oyun yapma olasılığından yararlanmamıza izin veriyorlar. , bizi konsolu olmayan ancak doğru söz ve eylemlerle oyunumuzu satın alabilen veya topluluğumuzun bir parçası olmak için ücretsiz bir model olan büyük bir potansiyel oyuncu kitlesine yaklaştırabilir.
Bununla, bu öğreticiyi bitirdik ve özellikle mobil cihazlarda büyümeye devam etmesi beklenen, günümüzde en büyük büyüme ve rekabetin olduğu alanlardan birinin eğlenceli içerik oluşturma olduğunu söyleyebiliriz ve öyle bir beklentidir ki, büyük bir gibi video oyunlarından Nintendo bu platformlarla uğraşacak, bu yüzden bu pastanın bir parçasıyla ilgileniyorsak, aşağıdaki gibi araçlar Cocos2d-JS Pazara daha kolay girmemize yardımcı olacaklar.Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.