एचटीएमएल 5 कैनवास: EaselJS

Question

परीक्षण और त्रुटि के माध्यम से अध्ययन और प्रयोग के एक वर्ष के बाद, मुझे लगता है कि मैं जावास्क्रिप्ट को थोड़ा और समझना शुरू कर रहा हूं। तो, अब, मैं एक साधारण 2 डी प्लेटफार्म गेम लिखने पर अपने हाथ की कोशिश करना चाहता हूं (लगता है कि सुपर मारियो वर्ल्ड या सोनिक द हेजहोग)। इसके लिए, मैं EaselJS लाइब्रेरी को नियोजित करूँगा।

मैं यह पता लगाने की कोशिश कर रहा हूं कि मैं बाएं और दाएं तीर कुंजियों के उपयोग से कैनवास के भीतर 'दुनिया' को कैसे चला सकता/सकती हूं। मुझे पता है कि मैं तीर कुंजी के keydown पर फ़ंक्शन कैसे चला सकता हूं, लेकिन मुझे यकीन नहीं है कि मुझे चलती/पैनिंग से कैसे संपर्क करना चाहिए।

मैं जब एक कुंजी दबाने कैनवास के भीतर हर एक बात की स्थिति/निर्देशांक को समायोजित करना चाहिए? या क्या मुझे शायद सब कुछ एक कंटेनर में रखना चाहिए और कंटेनर की स्थिति/निर्देशांक को स्थानांतरित करना चाहिए?

मैं कुछ भी सराहना करता हूं जो मुझे सही दिशा में घुमाता है। Tyvm :)

जवाब The chosen answer below के साथ अपडेट किया पुष्टि की है कि मैं वास्तव में एक container में सब कुछ डाल करने के लिए तो मुझे लगा कि कंटेनर की स्थिति सेट कर सकते हैं कि था। यह कोड मैंने तैयार किया है, और यह काम करता है।

// 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; 
    } 
}); 

मैं world.regX के साथ ही world.x को अद्यतन करने की कोशिश की। किसी भी तरह, world.regX चिकनी जाना प्रतीत होता है।

Answer 1

मुझे लगता है कि सबसे अच्छा तरीका है सभी प्रदर्शन वस्तुओं जो एक scrollableObjectContainer में स्क्रॉल किया जाएगा (शायद आप lifebar की तरह स्थिर तत्वों है) डाल करने के लिए है।

तो जब आप आगे बढ़ते हैं, तो बस स्क्रॉल करने योग्य ऑब्जेक्ट कॉन्टेनर.रेगएक्स अपडेट करें।

आप एक चिकनी स्क्रॉल के लिए tweenJS का उपयोग कर सकते हैं।

Answer 2

बस एक विचार ... लेकिन कैनवास अनुवाद समारोह पर एक नज़र डालें और संदर्भ को सेट करने के लिए प्रत्येक रेड्रा की शुरुआत में इसका उपयोग करें जिससे सभी चीजों को आकर्षित किया जा सके।

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

Answer 3

आमतौर पर मैं सबसे कैनवास से संबंधित परियोजनाओं के लिए EaselJS, हालांकि खेल के प्रकार आप का निर्माण करने के लिए बेहतर melonJS के लिए अनुकूल होगा चाहते हैं के साथ सहमत होगा।

इसे देखें http://melonjs.org

Answer 4

यहां एक खिलाड़ी के बाद 2 डी शीर्ष डाउन स्क्रॉल और रोटेशन का नमूना है।

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

लेकिन यह करने पर निर्भर करता:

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

तो खिलाड़ी सहित सब कुछ विश्व कंटेनर में चला जाता है और खिलाड़ी चाल के रूप में घुमाया जाएगा। जीयूआई दुनिया के बाद होना चाहिए ताकि यह इसके ऊपर खींच सके।

• स्टेज
  • विश्व
    • वस्तुओं
    • प्लेयर
  • गुई