TypeScript ve yerel tarayıcı API'leri ile sıfırdan bir oyunun nasıl oluşturulacağına ilişkin eğitim serisindeki Bölüm III
Bölüm III'ün son kısmı olan "Çizim Izgarası" na hoş geldiniz! Bir önceki gönderi , mütevazı ancak güçlü bir işleme sisteminin uygulanması ve test edilmesiyle ilgiliydi . Bölümün bu son makalesinde, tüm yarım kalmış işleri çözeceğiz.
Oluşturma sistemine sahip olmak harika, ancak
NodeDrawComponentona nasıl erişebilirim? Biz örneğini geçmek zorunda mı
Canvashiç
Node? Eğer öyleyse, o zaman öncekiyle aynı problemi yaşıyoruz:
Nodebir çizim bağlamıyla eşleşiyoruz. Tek fark
Canvas, sorunu en aza indirmeyen, yerel bağlamdan ziyade bir referansta bulunmamız gerektiğidir. Bir şeyler kapalı.
Bölüm III "Çizim Izgarası" nda, sıra tabanlı oyunun temel bir parçasını uyguluyoruz: düğümlerin ızgarasını çiziyoruz. Diğer Bölümler burada mevcuttur:
Cevaplamamız gereken başka bir soru daha var. Tüm düğümleri aynı tuval üzerine çizmeyi kabul ettik. Peki ya diğer unsurlar, örneğin gemiler? Bu gif'e bir göz atın:
Uygulamaya çalıştığımız oyun bu. Bu daireler "Gemiler" dir ve bir sonraki bölümde onlardan bahsedeceğiz. Ancak şimdilik, bu "Gemilerin" Grid'in tepesinde olması gerektiğini unutmamalıyız. Her zaman.
Bunu ele almak için, Gimp gibi görüntü editörlerinde görmüş olabileceğiniz katman sistemine benzer şekilde, tuvallere bir katman kavramı " ekleyebiliriz . Katmanlara sahip olarak, bir tuvali diğerinin üzerine koyabiliriz. Örneğin,
Gridherhangi bir süslemeyle birlikte "alt" ("arka plan") katmanından birine yerleştirebiliriz. Ve sonra Gemileri başka bir "üst" ("ön plan") katmanına koyun. Bu yaklaşım, Gemilerin her zaman Grid'in üstüne çekilmesini garanti edebilir.
Şu anda, yerel Canvas API'nin "katmanları" yönetmenin kolay bir yolu yoktur. Orada
globalCompositeOperationtabii ki, ama adından da anlaşılacağı gibi, bu bir var küresel ayarı. Onunla çalışmanın çok sayıda sınırlaması vardır. Kendimize manevra alanı sağlamak için katmanlama sistemimizi tanımlayacağız.
CanvasLayerSınıfı tanımlayarak başlıyorum . Oyuna eklemeye karar verdiğimiz her katmana erişimi yönetecek:
Varil dosyasını unutmayalım:
Bu sınıf, oyunun her zaman belirli bir türden yalnızca bir tuvale sahip olmasını sağlayacaktır. Gerçi ne
Canvasde
CanvasLayervardır singletonların , statik
CanvasLayerolmasını sağlar
Canvassadece olanları başlatılır:
İlk olarak, arka plan için statik bir alan
Canvasve bir uyarı içeren standart bir genel alıcı tanımladım . Bu alıcı önce alanın boş olup olmadığını kontrol eder. Eğer öyleyse, bu, arka plan tuvalinin henüz somutlaştırılmadığı anlamına gelir ve önce alıcı onu inşa etmelidir.
CanvasLayerSadece statik bağlamda kullanacağız , bu yüzden
constructorherhangi birinin yanlışlıkla somutlaştırılmasını önlemek için özel yapıyorum .
Daha ileri gitmeden önce
CanvasLayer, testlerle ilgilenmek için bir saniyenizi ayıralım.
BackgroundKaç kez erişirsek erişelim , her zaman aynı olduğunu doğrulamalıyız :
Başlıyorum
Canvas. Ayrıca daha önce hiç aranmadığından da emin oluyorum:
Ardından
Backgroundkatmanı birkaç kez talep ediyorum ve kaç kez
Canvasörneklendiğini kontrol ediyorum :
Harika! Şu anda kodunuz başarıyla derlenmeli
npm start,ve tüm testler şunlarla geçmelidir
npm t:
Şimdi, nihayet,
NodeDrawComponentharika katman sistemimizi temizleyebilir ve kullanabiliriz:
Kodunuz aşağıdakilerle derlenmeli
npm startve oluşturmalıdır:
Dahası, geliştirme araçlarını kontrol ederseniz, artık yalnızca bir tuval görmelisiniz:
Mükemmel, tam da peşindeydik! Yine de, kapatılması gereken bir şey daha var. Bu noktada, yalnızca bir kez bir düğüm çizeriz:
NodeDrawComponentuyandığında. Bu işe yarıyor ve süper verimli, ancak ne yazık ki çok esnek değil.
Tuzağa düşmek ve ızgaranın biraz statik olduğunu ve ömür boyu yalnızca bir kez çekilmesi gerektiğini varsaymak kolaydır . Sonuçta, bu sadece oyunun bir arka planı , değil mi? Hem evet hem hayır.
Ekranda konumlandırma açısından kesinlikle bir arka plan . Ancak bu statik olduğu anlamına gelmez . Biz zorundayız etkileşim bu katmanla: düğüm tıklandığında aşağıdaki düğüme taşımak için bir oyuncunun gemiye sinyal olmalıdır:
Tüm bu yolculuğu, onları tuval üzerine çizmek yerine yaratmak
Gridve
Nodevarlıklar için yapmamızın nedeni budur . Ancak yukarıdaki gif'e daha yakından bakarsanız, ilginç bir şey daha fark edebilirsiniz. Renk
Nodenereye yardım oyunculara değiştirmek mümkün olmalıdır anlıyorum olabilir tıklayın.
Bu davranışı nasıl başarabiliriz? Tarayıcı tuvalinin çalışma şekli, şekil çizildikten sonra tüm kontrolünü kaybedersiniz. Renk özelliğine ya da başka bir şeye referans yoktur . Bir dikdörtgenin rengini değiştirmek
NodeDrawComponentiçin yeniden çizmek gerekir : temizleyip yeniden çizin, ancak yeni bir renkle.
Bunu yapmanın birkaç yolu var. Bunlardan biri
Updateyöntemi kullanıyor. Hatırlarsan, her
Componentvardır
Update, tarafından çağrılan bir yöntem
Entitybu
Componentaittir.
NodeDrawComponentbir istisna değildir ve
Updatebir süre boş tuttuğumuz kendi yöntemi vardır :
Bir kez
NodeDrawComponentuyandığında çizmek yerine, her birini çizeceğiz
Update. Bu şekilde, bir şey değişirse,
Nodeen alakalı temsile sahip olacağından emin olabiliriz .
Bunu yapmak için, biz taşıyabilirsiniz
Drawgelen yöntem çağrısı
Awakeiçin
Update:
Elbette önce ilgili alanı temizlemeliyiz. Neyse ki, küçük oluşturma motorumuzda uygun bir API hazırladık, şu
ClearRectyöntem:
İlk önce özel bir
Clearyöntem oluşturuyoruz. Sorumluluğu, tuvalin belirli bir alanına çizilen her şeyi, tam olarak bir dikdörtgen çizdiğimiz yeri temizlemektir. Sonra her karede tekrar temizler ve çizeriz.
“ Her kareyi yeniden çiziyoruz ??? Bu bile başarılı mı ?! ”diye sorabilirsiniz. Gerçekten de herhangi bir değişiklik olup olmadığını kontrol eden bir akıllı sistem uygulayabilirdik. Ve eğer öyleyse, ancak o zaman yeniden çizimi tetikleyin. Elbette bu daha performanslı olacaktır.
Ancak, muhtemelen fark ettiğiniz gibi, bu eğitimde aşamalı bir yaklaşım kullanmaya devam ediyorum. Basitten başlıyoruz, ilerledikçe daha fazla karmaşıklık ekliyoruz. Mevcut çözüm bizim için yeterince performanslı : düğüm sayısı sınırlı ve her düğümün çizimi oldukça ucuz. Mimarimiz, gelecekte performans darboğazlarıyla karşı karşıya kalırsak, yeniden gözden geçirmemizi ve iyileştirmemizi sağlar.
Ve yine, kodunuz başarıyla derlenmeli
npm startve tüm testler şununla geçmelidir
npm t:
Bu bölüme veda etmeden önce bu güzel pastanın üzerine bir kiraz ekleyelim.
NodeDrawComponentBazı testleri ele alalım !
İlk kurulum tanıdık gelmelidir:
Bununla birlikte, birçok başka
Nodebileşenimiz olacak. Ve her biri için aynı kurulumu yapmamız gerekecekti. Bizim kurtaracak biraz zaman ve çaba edelim ve oluşturmak sahte fabrika için
Nodebiz tekrar tekrar yeniden ve edebilirsiniz.
Mock factory kısaca
Nodebizim için belirtilen parametrelerle bir tane oluşturan bir fonksiyondur :
Biraz daha kullanışlı hale getirmek için varsayılan bir argüman oluşturabiliriz:
Varil dosyasını güncellemeyi unutmayın:
Şimdi,
NodeDrawComponentteste geri döndüğümde , Node'un kurucusunu doğrudan çağırmak yerine sahte fabrikayı kullanacağım:
Güzel! Geriye kalan her şey,
NodeDrawComponentuygun yöntemleri uygulayıp uygulamadığını kontrol etmektir
CanvasLayer. Örneğin,
NodeDrawComponentuyanır uyanmaz tuvali temizlemesi gerekir:
Benzer şekilde,
NodeDrawComponenther güncellemede temizlenmeli ve yeniden çizilmelidir:
Yine, kodunuz başarıyla derlenmeli
npm startve tüm testler şununla geçmelidir
npm t:
Bu gönderinin tam kaynak kodunu arşiv
drawing-grid-5 şubesinde bulabilirsiniz .
Harika! Bu, Bölüm III, "Izgarayı Çizmek" ile sonuçlanır. Bölümün bu son kısmında çok şey başardık!
layersOyunumuzda tuval kavramını tartıştık ve
Backgroundkatman için bir sağlayıcı oluşturduk . Artık her kareyi
NodeDrawComponent,sürekli olarak yeniden çizen
Node, herhangi bir değişikliğe tepki vermeye hazır bir şekilde kullandık.
Bu bölüm,
Gridoyunumuzun temel parçasını çizmeye adanmıştır . Bir an duralım ve geçtiğimiz yolu takdir edelim.
İlk emin olmayan adımlarımıza, tarayıcının canvas API'siyle ızgarayı doğrudan ve "kirli" çizerek başladık. Daha sonra
Gridve
Nodevarlıkları tanımlayarak oyunun yapısal bir hiyerarşisini oluşturduk . Biz makul üzerinde lojik belirli bir bileşenini çizim yapmak bulundu
Node:
NodeDrawComponent.
Vector2dYapı sayesinde koordinatlar ve boyutlar gibi tuple verilerinin kolayca aktarılmasını sağlıyoruz . Son olarak, küçük bir işleme motoru ve katman sistemi oluşturduk. Kesinlikle uzun bir yolculuk oldu, ama umarım onu beğenmişsindir!
Bir dahaki sefere yeni bir bölüm başlatıyoruz. Temel oyun mekaniklerine bir göz atacağız ve daha fazla varlık ve bileşen ekleyeceğiz . Seni orada görmek için sabırsızlanıyorum!
Herhangi bir yorumunuz , öneriniz , sorunuz veya başka bir geri bildiriminiz varsa , bana özel bir mesaj göndermekten veya aşağıya bir yorum bırakmaktan çekinmeyin ! Bu seriyi beğendiyseniz, lütfen başkalarıyla paylaşın . Bu gerçekten yardımcı olur beni onda çalışmaya devam. Okuduğunuz için teşekkürler, bir dahaki sefere görüşürüz!
Bu, "TypeScript ile Action'da Gamedev Patterns and Algorithms in Action" eğitimleri serisinin III.Bölümüdür. Diğer Bölümler burada mevcuttur:
Tarif Monorepo Hey! Ben Berkay Aydın, Jotform'da Mühendislik Direktörü ve Ön Uç Mimarıyım. Ön uç mimarimizi yeniden yapılandırırken öğrendiklerimi size anlatacağım.
Hey geliştiriciler, her şeyin doğru planlandığı ve uygulandığı ve sürümün sonunda sayfa Google'da 2. sayfada yer alan, büyüyen bir işletme için bundan daha kötüsü olamaz. Şimdi, bu tarihte herkes her şeyi Google'da araştırıyor ve ürününüzü Google arama sonuçlarının en üstüne çıkarmak, rekabette hayatta kalmak için çok önemli.
Yapay Zekaya Giriş Yapay Zeka (AI), endüstrilerde devrim yaratma, yaşama ve çalışma şeklimizi değiştirme ve topluma sayısız fayda sağlama potansiyeline sahip, hızla gelişen bir teknolojidir. Ancak, her yeni teknolojide olduğu gibi, dikkate alınması gereken etik hususlar da vardır.
Bir keresinde kocam çöplerimizi karmaşık çöp bidonumuza götürürken, dost canlısı, kayıp bir kedi yavrusuyla karşılaştı. Onu eve götürmeye ve ardından sahibini bulmaya karar verdi - ta ki kadın miyavlayana kadar.
Albert Einstein'ın ilk karısı olan Mileva Maric, kocasının fizik alanındaki çığır açan çalışmasına yaptığı potansiyel katkılarla ilgili olarak uzun süredir spekülasyon ve tartışma konusu olmuştur. Görelilik ve kütle-enerji denkliği teorileriyle evren anlayışımızı sonsuza dek değiştiren Einstein, geniş çapta 20. yüzyılın en etkili bilim adamlarından biri olarak kabul edilirken, Maric'in çalışmalarındaki rolü genellikle göz ardı edildi veya küçümsendi.
Bir süredir Cillian Murphy'nin çalışmalarının hayranıyım. Amerika Birleşik Devletleri'ndeki popülaritesindeki patlamadan çok önce İngiliz ve İrlanda film sahnesinde bir isim yaptı.