Tarayıcı tabanlı oyunlar oluştururken tuvale veya tuvale değil mi?

Arka plan: Kapsamlı bir geliştirme geçmişim var, ancak son kez bir oyunu kodladığımda yıllar önce oldu. Javascript becerilerim oldukça sınırlı ve basit bir oyun - Tetris, Pac-man veya bu karmaşıklık seviyesindeki bir şey inşa ederek onları geliştirmeyi düşünüyorum.

Soru: Bana öyle geliyor ki, yapmam gereken temel bir seçim bir <canvas>öğe üzerinde işlem yapmam gerekip gerekmediğidir .

Bir tuval ile, noktaları, çizgileri ve daha karmaşık şeyleri oluşturmak için temel araçlara sahibim. Muhtemelen bu konuda yardımcı olacak çeşitli çerçeveler vardır veya olacaktır.

Bir tuval olmadan, nesnelerimı DOM ağacında tutabilirim, normal bir web sayfası gibi, birbiriyle örtüşen birçok öğeye sahip, oldukça karmaşık.

Bir yaklaşım diğerinden daha mı iyi? Bunlar birbirini dışlar mı? Hangisini seçeceğimi nasıl bilebilirim?

Canvas ve DOM, birbirinden oldukça ayrı olmalarına rağmen, birbirlerini dışlamazlar. İyi bir yaklaşım, ana oyun alanını (örneğin Tetris'teki düşen parçaları) Canvas kullanarak oluşturmak ve tüm UI'yi (örn. Skor ekranı) tuval öğesiyle çakışan DOM öğeleriyle yapmak olacaktır.

Bununla birlikte, böyle bir yaklaşım Tetris gibi ilkel bir oyun için gerçekten gerekli değildir. Tuval, daha gelişmiş grafik efektleri için kullanışlıdır, ancak bunlar gerekli değilse DOM'ye yapışmak size daha geniş bir uyumluluk sağlayacaktır; tüm tarayıcılar HTML5 Canvas'ı desteklemez.

DOM Hakkında DOM
, eski 2D 2B için oldukça iyi çalışır, yani görüntü döndürme veya ölçeklendirme kullanılmaz. Aslında bu iki iş için de araçlar var, ancak iyi performans göstermelerine güvenemezsiniz.

Bir oyun için tarayıcı yerleşim motoruna olabildiğince az güvenmelisiniz, yani position:absolutenesneleri yerleştirmek için kullanın . DOM nesnelerini her zaman yaratmamaya ve yok etmemeye çalışın, çok değişken sayıda nesneye ihtiyacınız varsa, boş DOM öğelerinden oluşan bir havuzun display:nonegerektiğinde yeniden canlandırılmaya hazır olarak ayarlanmasını isteyebilirsiniz .

DOM vs canvas
IE8 pazar payı ile büzülen tuval giderek daha çekici bir seçenek haline geliyor, çoğu oyun için muhtemelen iyi bir seçim. Ancak bazı işler için DOM kullanımı daha kolay bir araçtır, gerekirse bazı belge akışlarını kullanabilirsiniz, doğrudan oluşturulan nesne tarafından tıklamaları yakalayabilirsiniz, kaydırma çubuklarını entegre etmek kolaydır.

Performans farkını karşılamak zordur, işe bağlıdır ve tarayıcıdan tarayıcıya çılgınca değişir.

Tamamen oyun türüne bağlıdır, ancak tuval bunların en çoğuna uyar.

DOM yönetimi belirli bir noktada korkunç hale gelir, ne kadar çok elemanınız o kadar yavaşlarsa, ÇOK YÜKSEK ÇEVRESİNDE daha fazla öğe hareket ettirirsiniz .

IMG öğeleriyle varlık yükleme sırasını yönetmek ... trival değil (resim etiketlerindeki bilerek kırık protokollerde kesme hataları: D).

Yine de, çoğunlukla statik görüntülere ve düşük efekt sayısına sahip oyunlar için yine de DOM ile devam edeceğim. Diğer her şey, tuval ilk tercihtir (Hitmap'ler farklı bir hikaye olmasına rağmen, Nokta ve tıklama öğeleri).

Tuval bu günlerde çok hızlı (iPhone'da bile), kullanmamak için neredeyse hiçbir neden yok.

Bir HTML5 oyunu yapıyorsanız, tuval çok daha iyi. İşte nedeni:

1. Hız - Tuvali bir görüntü olarak düşünün. Görüntüye çizim yaparsınız ve sonra çizdiğiniz şeyi unutur. Bu, DOM veya SVG'ye kıyasla performansı önemli ölçüde artırır. DOM ve SVG uygulamalarının yaptığı, ekrana yerleştirdiğiniz her nesneyi takip etmektir. Bu, ekranda, özellikle ekran dışında veya gizli birçok nesne ile büyük bir seviyeye sahipseniz, bunlar çizilir ve yine de izlenir.
2. Çizim özellikleri - DOM öğeleri güçlü CSS3 dönüşümlerine sahipken, bu tuvalin özelliklerine kıyasla hiçbir şey değildir. Tuval herhangi bir nesneyi çizebilir, güçlü degrade desteğine, 3B'de nesneleri görüntülemek için eklentilere, filtrelere vb.
3. Destek - DOM'u kullanırken, dönüşümler veya animasyonlar gibi deneysel özellikleri kullanmak istediğinizde, CSS'de -moz-, -webkit-, -o- ve -ms- öneklerini kullanmanız gerekir. Tuvalde bunun için endişelenmenize gerek yok. Sadece bir işlevle çizin ve işiniz bitti. Tuvalin destekle ilgili bir başka avantajı, uygulamanızın nasıl görüntülendiğidir. Bir web sitesi geliştiricisi olarak, tarayıcılar arasında DOM standardizasyonunun olmaması beni deli ediyor. Arka planlar, degradeler, dönüşümler vb. Ayrıntılı W3C spesifikasyonlarına rağmen tarayıcılar arasında farklı görüntüler. Tuvalde, sadece farklı olabilecek bir şeyle karşılaştım - arka planlar. Döşenmiş bir arka planı görüntülerken, bazı tarayıcılar döşemeyi x ekseninde 0 pikselde ortalarken "döşemeyi-x" olarak alırken, diğerleri döşemeyi döşemek üzere alır.
4. Kütüphaneler ve belgeler - Tuvalle oyun yapmak için belgeler üzerinde TON büyük kütüphaneler var. Bazı kütüphaneler: CreateJS, paper.js, fabric.js, KineticJS, libCanvas, Processing.js, PlotKit, Rekapi, PhiloGL, InfoViz Toolkit, Frame-Engine, CAKE, Raphaeljs, Tweenjs, vb. Bir ton daha listeleyebilirim, ancak anlamı yok.

Aşağı tarafı - Animasyon - Animasyon için birçok harika kütüphane olsa da, CSS3 animasyonlarını seviyorum. Yaratmaları, manipüle etmeleri ve tetiklemeleri çok kolay. CSS3 animasyonlarının tuvalle nesnelerle çalışmasını sağlamak için çeşitli kesmek var, ancak çoğu insanın bu yöntemi kullanmayı tercih etmediğinden şüpheleniyorum.

Oyununuzda iyi şanslar ve umarım ne yaptığınızı göreceksiniz!

Mobil tarayıcıları, özellikle Android'i hedeflemeyi düşünüyorsanız ve oyunda hareketli grafikler varsa, DOM animasyonundan kaçının. Webkit olmasına rağmen Android'deki stok tarayıcı işe yaramaz. Başlamadan önce bu Android sorun dizisine göz atın: "Tarayıcı ve WebView'da CSS3 ve Javascript animasyonlarının korkunç oluşturulması" .

Tuvalin kendisi daha hızlı olmayabilir, ancak tuval animasyonları için donanım hızlandırmayı çağıran çerçeveler vardır, örneğin CocoonJS . Sitede, çerçeveyi kullanarak elde edebileceğiniz performans kazanımlarını gösteren bir video bağlantısı vardır (ancak bir nedenden dolayı ikiden fazla bağlantı yayınlamama izin verilmiyor).

Basit cevap: Tuval yedekli WebGL.

Nuanced answer: Oyununuzda çok fazla metin varsa, bir HTML metin katmanının üzerine gelin. Pixi.js , bunun için iyi çalışan bazı yararlı ekstralara sahip savaşla sertleştirilmiş bir ekran çerçevesi.

Unutmayın DOM, belge nesne modelini temsil eder. Sadece çok nadir durumlarda oyun yapmak ve çoğu durumda tuvali tercih etmek için kullanmak isteyeceksiniz.

Oyununuz küçük grafik gereksinimlerine sahip olsa bile, DOM'da yapmak kötü bir performansa sahip olacaktır; Tetris'den başka bir şey muhtemelen kötü çalışacaktır.

Gerçek bir dünya örneğim var: Conway'in Hayat Oyunu'nun bir uygulamasını oluşturduğumda, hücrelerin arka plan rengini değiştirerek 500x500'lik bir tabloyla başladım. Bu versiyonda, bir Planör 30 fps'den fazla çalışmıyordu, daha büyük desenler 1'den neredeyse hiç sonuç vermedi. Bu oyunun tuval versiyonumda artık ~ 30 fps.

Ayrıca, SVG (Ölçeklenebilir Vektör Grafikleri) için de durum böyle olmalıdır , ancak bunu pratikte hiç denemedim.

Düzenleme : Benim örnek çok iyi olmadığını itiraf etmeliyim (çünkü tables = kötü). Ancak asıl nokta hala doğrudur: DOM manipülasyonu belgeler içindir. Tarayıcı, elemanlar üzerinde çalışırken CSS'yi aramalı ve daha fazla bellek ayırmalıdır. Tuvalden daha hızlı olmak gerçekten mantıklı değil.