0

さて、私は JavaScript でゲームを開発しています。ゲームのすべての部分をさまざまな JavaScript ファイルにまとめました。したがって、これは Player.js ファイルです。これをブラウザーで実行するたびに (もちろん html ファイルから実行します)、Player オブジェクトが画像から透明な四角形にちらつくという問題が発生します。コードは次のとおりです。

function Player() {
this.frames = [];
this.right = true;
this.currentFrame = 0;
this.currentAction = "WALKING";
this.image = new Image();
this.x = 0;
this.y = 0;

this.setPosition = function(x, y) {
    this.x = x;
    this.y = y;
};
this.setVector = function(x, y) {
    this.x += x;
    this.y += y;
};
this.setAction = function(action) {
    this.currentAction = action;
};
this.setRight = function(bool) {
    this.right = bool;
}
this.draw = function(context) {
    if(this.right == true) {
        if(this.currentAction == "WALKING") {
            this.frames = [ "res/playerRight.png" ];
        }
    } else if(this.right == false) {
        if(this.currentAction == "WALKING") {
            this.frames = [ "res/playerLeft.png" ];
        }
    }
    if(this.currentFrame < this.frames.length) {
        this.currentFrame += 1;
        this.image.src = this.frames[this.currentFrame - 1];
        context.drawImage(this.image, this.x,
            this.y, 32, 32);
    } else {
        this.currentFrame = 0;
    }
};

}

それが何をするかのいくつかの画像をここに示します： http://i.stack.imgur.com/1RcOC.png http://i.stack.imgur.com/fxbNY.png

4

2 に答える 2

0

バグは次のとおりです。

if(this.currentFrame < this.frames.length) {
    this.currentFrame += 1;
    context.drawImage(); // <---------------- draw an image
} else {
    this.currentFrame = 0; // <-------------- draw nothing!
}

それでは、このロジックを実行してみましょう。現時点では、フレームの長さは 1 です。

currentFrame = 0
    so we increment currentFrame
    we draw the image

currentFrame = 1
    currentFrame is not less than frames.length
    we do not draw anything
    we set current frame to 0

currentFrame = 0
    so we increment currentFrame
    we draw the image

repeat....

結果：ちらつき！フレーム長が 2 の場合は 33% の確率でちらつき、フレーム長が 3 の場合は 25% の確率でちらつきます。

これを処理する正しい方法:

this.currentFrame += 1;
if(this.currentFrame >= this.frames.length) {
    this.currentFrame = 0;
}
this.image.src = this.frames[this.currentFrame]; // **
context.drawImage();

// **note: no need for -1 because currentFrame here is always
//         less than frame.length

または、数学の場合：

this.currentFrame = (this.currentFrame + 1) % this.frames.length;
this.image.src = this.frames[this.currentFrame];
context.drawImage();
于 2013-10-18T22:47:07.640 に答える
0

すべての画像をプリロードして、自分の状態で正しい画像を選択してみてはいかがでしょうか。現在、ソースを設定するたびに画像がリロードされ、準備が整う前に描画しています。

// you can improve this part for your needs
var image1Loaded = false;
var image2Loaded = false;

this.preLoadImages = function (){
    this.image1.onload = function (){
         image1Loaded = true;
    }
    this.image2.onload = function (){
         image2Loaded = true;
    }
    this.image1.src = "res/playerRight.png";
    this.image2.src = "res/playerLeft.png";
}

draw メソッドで画像を直接使用できるようになりました。

this.draw = function(context) {
    var currentImage = "image1";
    if(this.right == true) {
        if(this.currentAction == "WALKING") {
            currentImage = "image1";
        }
    } else if(this.right == false) {
        if(this.currentAction == "WALKING") {
             currentImage = "image2";
        }
    }
    if(this.currentFrame < this.frames.length) {
        this.currentFrame += 1;
        var image = this[currentImage];
        context.drawImage(image, this.x,
            this.y, 32, 32);
    } else {
        this.currentFrame = 0;
    }
};

キャンバスに描画するために画像を使用する前に、画像が既に読み込まれていることを確認してください

于 2013-10-18T22:21:18.040 に答える