HTML5 Oyunu (Tuval) - UI Teknikleri?

PhoneGap ile mobil (Android / iPhone / WebOS) için bir JavaScript / HTML5 oyunu (Canvas kullanarak) oluşturma sürecindeyim. Şu anda, kullanıcı arayüzünün ve oyun tahtasının nasıl inşa edilmesi gerektiğini ve nasıl etkileşime girmeleri gerektiğini tasarlamaya çalışıyorum ama en iyi çözümün ne olduğundan emin değilim. İşte düşünebildiğim şey -

DrawIlge ve fillText gibi şeyleri kullanarak UI'yi doğrudan tuvalin içine yerleştirin. Düzenli DOM nesnelerini kullanarak UI'nin parçalarını tuvalin dışında oluşturun ve UI öğelerinin oyun tahtası tuvaliyle üst üste gelmesi gerektiğinde, tuval üzerinde bir div yüzün. Düşünmediğim oyun kullanıcı arayüzünü oluşturmak için kullanabileceğim başka teknikler var mı? Ayrıca, bunlardan hangisinin “standart” bir yol olduğu düşünülür (HTML5 oyunlarının çok popüler olmadığını ve bu nedenle muhtemelen henüz “standart” bir yol olmadığını)? Ve son olarak, hangi yolu önerirsiniz / kullanırsınız?

Şimdiden çok teşekkürler!

Her iki çözüm (kanvas VS'nizde çizim. Geleneksel HTML / CSS) tamamen geçerlidir ve gayet iyi çalışacaktır. Dikkate alınması gereken bazı şeyler:

• Zaten tuval tabanlı bir kütüphane kullanıyorsanız, UI için ek (DOM tabanlı) yöntemler kullanmak yerine tuval kullanmaya devam ederek kodunuz daha temiz / daha düzenli olabilir.
• Kullanıcı arabiriminiz aşırı derecede metin ağırlıklıysa (iletişim kutuları vb.), HTML / CSS aracılığıyla uygulanması daha kolay olabilir. Örneğin, metnin bir DOM öğesinde akması çok önemlidir (sarma ve paragraf aralığı gibi) ve tuvalde uygulanması nispeten zordur.
• Kullanmakta olduğunuz kütüphaneye büyük ölçüde bağlı olarak, DOM öğelerinde tıklama işleme uygulamak tuvalinizde daha kolay olabilir. Örneğin, bir "Tamam" düğmesini tıklamak isterseniz, bu HTML / JS dünyasında önemsiz bir görevdir. Ancak tuvalde, tıklamayı farklı bir öğede dinlemeniz ve tıklamanın nerede gerçekleştiğini görmek için koordinatlarını kontrol etmeniz gerekir.
• Metin içeren DOM öğelerini kullanırken bazı kullanıcı aracıları (özellikle mobil cihazlar) aldatıcı olabilir. Örneğin, Mobile Safari, kopyalamak / yapıştırmak için araçlarla modal oluşturmak isteyebilir. Bu davranışın önlenmesi zor olabilir ve tuval arazisinde muhtemelen daha kolay olacaktır.

Bunlardan bazıları öznel olacaktır; Bildiğim bir geliştirici her zaman o sadece DOM çirkin ve ayrıntılı olmasını bulur beri tuval kullanarak tercih ediyor. Her iki çözüm de iyi sonuç vereceğinden, uygulamanızdaki basit bir tek ekranı seçer, her iki yöntemi de kullanarak hızlı bir şekilde geliştirir ve hangisinin daha kolay / daha iyi hissettiğini görürüm.

İyi şanslar!

Tuval etkileşimi için easeljs kullanıyorum .

Oldukça iyi ve sağlam tasarımı kolaylaştırıyor. Beni seçmemdeki en önemli özelliklerden biri, tuval nesnelerinizin ve dom elemanlarınızın konumunu senkronize etme olanağıydı.

Bu, CSS konuşma balonları ve hud çerçeve ve benzeri şeyler gibi statik UI öğeleri yapmayı kolaylaştırır.

Bunun tarayıcılar için sağladığı avantaj, zengin tuvali elde etmen, ancak performansı kontrol altında tutabilmek için küçük ve statik şeyleri kanala çevirmen.

Tuval mobil platformlarda yavaştır, en azından mobil safari zaten, bu yüzden nesnelerin CSS tabanlı konumlandırmasını kullanmak isteyeceksiniz. Nesnelerin donanım hızlandırmalı görüntülemesini açacak olan "translate3d" yi özel olarak kullanın.

Tuval için CAAT kütüphanesine bakın, hızlı ve CSS destekli "aktörler" i kullanabilir ve oyun mantığını değiştiremezsiniz.

Henüz link gönderemiyorum ama işte bazı sahte linkler http://labs.hyperandroid.com/animation

İPhone 4'te tuvalin yavaşlığı konusunda hemfikir olmalısınız. Oldukça emin safari tuvali GL tarafından desteklenmiyor. Benim çılgın oyun iPhone 3GS ve android hızlı çalışır ama iPhone 4 üzerinde retina ekran çok fazla piksel olduğunu düşünüyorum ya da tuval GL sürmüyorsa, bu neden sürüklendiğini açıklar. Tuval geliştirme modelini beğendim, henüz css translate3d seçeneğini denemedim. Özellikle, GWT ve gwt-g2d tuval sarmalayıcı (optimizasyon / şaşırtma) kullandım. http://www.photonjunky.com/shootout.html

Kontrollerinizi, erişilebilirlik nedenleri gibi menuve html öğeleri olarak saklamanızı tavsiye ederim command. Bir bit CSS kullanarak, öğeleri bir tuval üzerinde görüntüleyebilir ve önceden oluşturulmuş HTML işlevselliğini kaybetmezsiniz.

Bunun eski bir soru olduğunu biliyorum ama bugün (Mart 2013) daha iyisini biliyoruz. Burada benim gibi başka birinin tökezlemesi durumunda cevap vermeye karar verdim. Diğer cevapların çoğuna katılmıyorum. Muhtemelen web tarayıcı gelişimi için geçerlidir, ancak mobil cihazlar için geçerli değildir. Seçtiğiniz yolu (DOM veya tuval animasyonu) büyük bir fark yaratır. Android web görünümü başlı başına tamamen yararsızdır (yavaş, kekemelikli), şu anda yalnızca tuval animasyonu ve uygun bir çerçeve kullanarak mümkün olan donanım hızlandırmayı uygulayamazsanız, Android oyununu Phonegap'ı gereksiz kılar. Daha fazla bilgi için bu cevaba bakınız .

Milyonlarca yolla yapabilirsiniz. Bununla birlikte, kendinizi en rahat hissedersiniz ve mühendisleriniz en güvende hisseder.

O zaman ilham veya kod örneği arıyorsanız, işte bunu yapmamın bir yolu. Bir düğmeye basılana kadar tekrar tekrar menü çizen bir işleve sahibim. Düğmeye basıldığında, oyun yüklenir ve eski menüde tıklatma olayı dinleyicileri kaldırılır ve yeni oyuna tıklatma olayı dinleyicileri eklenir. Ayrıca menünün eski beraberlik döngüsünü sonlandırıyorum ve yeni bir oyun beraberlik döngüsü başlatıyorum. İşte size nasıl yapıldığına dair bir fikir vermek için seçili snippet'lerden bazıları:

Game.prototype.loadMenu = function() {
  var game = this;
  var can = this.canvas;

  // now we can use the mouse for the menu
  can.addEventListener('click', game.menuClickEvent, false);
  can.addEventListener('touchstart', game.menuClickEvent, false);

  // draw menu
  this.loop = setInterval(function() { game.drawMenu() }, 30);
};

Game.prototype.drawMenu = function() {
  // ... draw the menu
}

Game.prototype.loadLevel = function(levelstring) {
  // unload menu
  var can = this.canvas;
  var game = this;
  can.removeEventListener('click', game.menuClickEvent, false);
  can.removeEventListener('touchstart', game.menuClickEvent, false);

  if (this.loop) clearInterval(this.loop);

  // ... other level init stuff


  // now we can press keys for the game
  //can.addEventListener('click', game.gameClickEvent, false);
  can.addEventListener('touchstart', game.gameClickEvent, false);
  can.addEventListener('keydown', game.gameKeyDownEvent, false);

  this.loop = setInterval(function() { game.tick() }, 30);
}

// called from tick()
Game.prototype.draw = function(advanceFrame) {
  // ...
}

Bu sayede oyun çizimi ve oyun olaylarını menü çizim ve menü olaylarından ayırabilirim. Ayrıca, menülerimde oyun / animasyon öğelerini kullanmam için bana yol veriyor.