HTML5 Oyunu için Sanal Joystick Nasıl Oluşturulur - AYAKLAR

Pek çok dokunmaya dayalı HTML5 oyunu sanal bir kumanda çubuğu mekanizması kullanıyor. Kullanıcı girişi başlatmak için ekrana dokunduktan sonra girdi sağlamak için kaydırır. Sola doğru hızlıca kaydırma, sadece bir joystick'in sola kaydırılması gibi okunur. Kullanıcı kaydırdığında, giriş değeri o kadar büyük olur. SimpleGame kütüphanesinde, dokunmatik tabanlı cihazlarınızda sanal bir kumanda çubuğu uygulamayı kolaylaştıran bir sanal kumanda çubuğu nesnesi vardır.

Sanal kumanda çubuğu sayısal verileri döndürerek çalışır. Görsel bir öğeye eşlemeden önce sayısal çıktıya bakarak, bunun nasıl çalıştığını anlamak çoğu kez en kolay olur.

joystick Test var oyunu; var çıktı; var joystick; işlevi init () {game = yeni Sahne (); çıktı = belge. getElementById ("çıkış"); if (game. Touchable) { joystick = yeni Joy (); } else { alert ("Bu test dokunmaya dayalı arayüzü gerektiriyor"); } oyun. start ();} / / bitiş init işlevi update () { if (oyun. dokunabilir) { jx = joystick. getMouseX (); jy = kumanda çubuğu. getMouseY (); jdx = kumanda çubuğu. getDiffX (); jdy = joystick. getDiffY (); result = "joystick x:" + jx + "

"; result + = "joystick y:" + jy + "
"; result + = "joystick dx:" + jdx + "
"; result + = "joystick dy:" + jdy + "
"; çıktı. Burada hiçbir şey yok

Sanal kumanda çubuğu kullanımı oldukça kolay:

1. Joystick için bir değişken oluşturun.

   Sen ona kumanda çubuğu diyebilirsin. Aklı başında bir şey.

2. Mümkünse joystick'i oluşturun.

   Oyunu kullanın. Dokunabilir bir özellik olup olmadığına karar vermek için dokunmatik özellik. Değilse, kullanıcıya bir mesaj gönderin.

3. Fare pozisyonunu alın.

   Sanal Joystick nesnesi ekranda bir dokunuş tespit ettiğinde, mouseX ve mouseY değerlerini tetikler. Dokunun X ve Y konumlarını belirlemek için joystick'in getMouseX () ve getMouseY () yöntemlerini kullanın. Bu şekilde, dokunmatik arayüz geleneksel fare gibi çok daha fazla etkiye sahiptir.

4. Kumanda çubuğundan bir diffX ve diffY okuması yapın.

   Kullanıcı ekrana dokunduğunda, kitaplık ilk dokunun koordinatlarını izler. Ardından, kullanıcının ne kadarının üstesinden geldiğini ölçer. X'deki farka diffX denir ve Y'deki farka diffY denir. Kullanıcı ekrana dokunduğundan beri X ve Y'de kaç piksel taşıdığını belirlemek için sanal joystick nesnesinin getDiffX () ve getDiffY () yöntemlerini kullanın.

5. Mevcut değerleri gösterin.

   Bu ilk geçişte, joystick'in ne olduğunu anlamak önemlidir, bu nedenle değerleri alın ve ekran çıktısına basın.

Elbette sanal bir kumanda çubuğu, ekranda bir şeyler hareket ettirmektir.

İşte kod:

joystick Test var oyunu; var top; var joystick; işlev init () {game = yeni Sahne (); top = yeni Sprite (oyun, "redBall. png", 50, 50); if (game. touchable) {joystick = yeni Joy ();} else {alert ("Bu oyun bir dokunmatik ekran gerektirir");} // end if ball. (0) setspeed; top. setPosition (400, 300); oyun. start ();} / / bitiş init işlevi update () {oyun. açık(); eğer (oyunca dokunulabilir) {top} setDX (kumanda çubuğu. getDiffX ()); top. setDY (joystick.getDiffY ());} // dokunulabilir topu sonlandır. update ();} // son güncelleme

Bu örnek bile bir öncekinden daha basittir.

1. Basit bir ball sprite oluşturun.

   Bu örnekte basit bir top kullanılır. Diğer temel sprite gibi oluşturun.

2. Bir kumanda çubuğu nesnesi oluşturun.

   Sanal bir kumanda çubuğu nesnesi yapın.

3. Joystick'in diffx ve diffY değerlerini topun dx ve dy değerlerine eşleyin.

   Bu son derece hassas bir hareket verir, bu nedenle hassasiyeti, bazı farklı ölçek faktörlerine göre diffX ve diffY bölüterek ayarlamak isteyebilirsiniz.