HTML5 Tuval: EaselJS'de ok tuşlarıyla dünyayı gezme/kaydırma

Question

Bir yıl boyunca deneme-yanılma yoluyla deneme ve deneme yaptıktan sonra, JavaScript'i biraz daha anlamaya başladığımı hissediyorum. Şimdi, elimde basit bir 2D platform oyunu yazarken elimi denemek istiyorum (Super Mario World veya Sonic the Hedgehog'u düşünün). Bunun için EaselJS kütüphanesini kullanacağım.

Sol ve sağ ok tuşlarını kullanarak bir tuvalin içindeki 'dünyayı' nasıl taşıyabileceğimi/kaydırılabileceğimi bulmaya çalışıyorum. Ok tuşunun keydown üzerine nasıl çalışabileceğimi biliyorum, ancak hareketli/kaydırmaya nasıl yaklaşacağım konusunda emin değilim. Bir tuşa basıldığında

Ben tuval içinde her şeyin konumu/koordinatlarını ayarlamak gerekir? Veya belki de her şeyi bir konteynere koymalı ve kabın konumunu/koordinatlarını taşımalı mıyım?

Beni doğru yöne çeviren her şeyi takdir edeceğim. Tyvm :)

cevap The chosen answer below ile güncellendi Ben gerçekten bunu kabın konumunu ayarlayabilirsiniz böylece container her şeyi koymak zorunda olduğunu doğruladı. Bu benim çizdiğim kod ve işe yarıyor.

// Canvas 
var stage = new createjs.Stage('game'); 
createjs.Ticker.addEventListener('tick', tick); 
function tick(event) { 
    stage.update(); 
} 

// Cave 
var cave = new createjs.Bitmap('img/cave.png'); 
cave.x = cave.y = 0; 

// World 
// Pans World if the left or right arrow keys are pressed 
var world = new createjs.Container(); 
world.x = 0; 
world.y = 0; 
world.addChild(cave); 
stage.addChild(world); 
$(window).keydown(function(e){ 
    switch (e.which || e.keyCode){ 
     case 39: // right arrow key 
      world.regX += 10; 
      break; 
     case 37: // left arrow key 
      world.regX -= 10; 
      break; 
    } 
}); 

Ben world.regX yanı sıra world.x güncellemeye çalıştık. Her nasılsa, world.regX daha yumuşak görünüyor.

Answer 1

http://melonjs.org Ben en iyi yolu (belki lifebar gibi statik öğelerin var) bir scrollableObjectContainer içine kaydırılması edilecek tüm görüntüleme nesneleri koymak olduğunu düşünüyorum.

Bu nedenle, taşıdığınızda, yalnızca scrollableObjectContainer.regX dosyasını güncelleştirin.

Daha sorunsuz bir kaydırma yapmak için tweenJS'yi kullanabilirsiniz.

Answer 2

Sadece bir fikir ... ancak tuval çevirme işlevine bir göz atın ve her yeniden çizimin başlangıcında, her şeyi çizmek için bağlamı ayarlamak için kullanın.

http://www.html5canvastutorials.com/advanced/html5-canvas-transform-translate-tutorial/

Answer 3

Genellikle en tuval ilgili projeler için EaselJS, sen melonJS için daha uygun olacağını inşa etmek isteyen oyunun ancak tip ile kabul eder.

dışarı atın

Answer 4

Aşağıda, bir oyuncuyu takip eden 2d yukarı aşağı kaydırma ve döndürme örneği verilmiştir.

https://jsfiddle.net/StaticDelvar/bt9ntuL5/

Ama aşağı kaynar: çalar gibi

world.regX = player.x; 
world.regY = player.y; 
world.rotation = -player.rotation; 

Sonra her şey Dünya kabın içine gider ve oyuncu hamle olarak döndürülür. GUI dünyadan sonra olmalı, bu yüzden üstüne çekiyor.

• Sahne
  • Dünya
    • Nesneler
    • Oyuncu
  • Gui