سؤال

what i am trying to do basically is making this animation http://jsfiddle.net/TLYZS/6/ in my box2d project but i am having some trouble in the drawing logic of each frame this is the result so far : http://jsfiddle.net/H8e9m/6/ how can i fix the body draw function to make the animation work ? as you can see i can only draw the first frame of the animation sprite and i can't find a way to make the exact same animation showing in the first jsfiddle where u can see the character is in his idle mode.any help appreciated

this is the drawing function and probably the issue is in here

 if (this.details.frame != null) {
            console.log("NotNull");
            context.drawImage(this.details.image, this.details.frame.x, this.details.frame.y, this.details.frame.width, this.details.frame.height, 
                             -this.details.width / 2, -this.details.height / 2,
                              this.details.width, this.details.height);

this is the animation variable and the update function

        var KenIdle = new Animation(10, [
        { x: 50 * 0, y: 0 * 100, width: 50, height: 100 },
        { x: 50 * 1, y: 0 * 100, width: 50, height: 100 },
        { x: 50 * 2, y: 0 * 100, width: 50, height: 100 },
        { x: 50 * 3, y: 0 * 100, width: 50, height: 100 },
        ]);

        function update(dt) {
            KenBody.details.frame = KenIdle.draw(dt);
        }

please check my jsfiddle to see the progress so far and tell me please how can i fix this problem

هل كانت مفيدة؟

المحلول

i found my problem finally :

  var KenIdle = new Animation(10000, [
                    { x: 50 * 0, y: 0 * 100, width: 50, height: 100 },
                    { x: 50 * 1, y: 0 * 100, width: 50, height: 100 },
                    { x: 50 * 2, y: 0 * 100, width: 50, height: 100 },
                    { x: 50 * 3, y: 0 * 100, width: 50, height: 100 },
                    ]);

the amount of time elapsed or dt was so small i couldn't see the animation moving so i made it big and it's working now http://jsfiddle.net/H8e9m/7/

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top