मैं अनिवार्य रूप से एक स्प्राइट शीट से एक शीर्षक स्क्रीन को चेतन करने की कोशिश कर रहा हूं। मेरे पास स्प्राइट शीट भरी हुई है, लेकिन मुझे यह पता नहीं लग रहा है कि एनीमेशन क्यों नहीं हो रहा है। मेरे पास एक अद्यतन फ़ंक्शन है जिसे चलाने के लिए किसी पैरामीटर की आवश्यकता नहीं है:

function update(){
     menu.update
}

मेरे पास मेरे कोड की शुरुआत में let frames = 0 भी है। मेरी समस्या तब होती है जब एनीमेशन या उन पंक्तियों के साथ कुछ चित्रित किया जाता है। यह एनीमेशन से 0वां फ्रेम खींचता है लेकिन पहला फ्रेम नहीं। मैंने एनिमेटर को 'if' स्टेटमेंट के तहत डालने की कोशिश की है, लेकिन कुछ प्रयासों के बाद, मैं इसे पैरामीटर और/या एक्सप्रेशन के लिए पूछना बंद नहीं कर सका। (मैंने कुछ तीर कार्यों की कोशिश की, लेकिन मैं उनका उपयोग करने के लिए अभ्यस्त नहीं हूं इसलिए मुझे नहीं पता कि मैंने जो किया वह सही था या गलत।)

const menu = {
    animation : [
        {sX: 27, sY: 295},
        {sX: 27, sY: 399},
    ],
    x : cvs.width/2 - 118/2,
    y : 100,
    w : 118,
    h : 84,

    frame : 0,


     // Animator
     update : function(){
         // Incrementation % incrementation period (speed)
        this.frame += frames%5 == 0 ? 1 : 0;
        // Iteration of animation--draws 0 then 1 then 0....       
        this.frame = this.frame%this.animation.lenghth;

    },



    draw : function(){
        let animCounter = this.animation[this.frame];

        if(status.current == status.Start){

            ctx.drawImage(sprite, animCounter.sX, animCounter.sY, this.w, this.h, this.x, this.y, this.w, this.h);
        }
    },

   
}

मुझे पूरा यकीन है कि समस्या 'if' स्टेटमेंट में है, मैं इसे इस स्प्राइट शीट पर एक और स्प्राइट के साथ काम करने के लिए प्राप्त कर सकता हूं; इसमें 'if' स्टेटमेंट नहीं है, लेकिन सोर्स पोजीशन को छोड़कर बाकी सब कुछ समान है।

1
AwesomeWrecker0 22 जुलाई 2020, 10:22

1 उत्तर

सबसे बढ़िया उत्तर

यह एक साधारण टाइपो के कारण हो सकता है:

this.frame = this.frame%this.animation.lenghth;

पढ़ना चाहिए:

this.frame = this.frame%this.animation.length; // removed the "h"

यहाँ एक वैकल्पिक हिप्पो के साथ एक डेमो है :-)

var sprite = document.getElementById('source');
var width = 600,
  height = 600,
  cvs = document.getElementsByTagName('canvas')[0],
  ctx = cvs.getContext('2d');
cvs.width = width;
cvs.height = height;

const menu = {
  animation: [{
      sX: 27,
      sY: 295
    },
    {
      sX: 27,
      sY: 399
    },
  ],
  x: cvs.width / 2 - 118 / 2,
  y: 100,
  w: 118,
  h: 84,

  frame: 0,
  frames: 0,

  // Animator
  update: function() {
    // Incrementation % incrementation period (speed)
    this.frame += this.frames % 5 == 0 ? 1 : 0;
    // Iteration of animation--draws 0 then 1 then 0....       
    this.frame = this.frame % this.animation.length;

        this.draw();
    window.setTimeout(function() {
      menu.update();
    }, 300);
  },

  draw: function() {
    let animCounter = this.animation[this.frame];
    //if (status.current == status.Start) {

      ctx.drawImage(sprite, animCounter.sX, animCounter.sY);
    //}
  }

}
menu.update();
<canvas></canvas>
<img id="source"
       src="https://mdn.mozillademos.org/files/5397/rhino.jpg"
       width="300" height="227" style="display:none;">
0
SaschaM78 22 जुलाई 2020, 15:06