1

HTML5 キャンバス要素とネイティブ JavaScript を使用してゲームを開発しています。ゲーム オブジェクトにはさまざまなスプライトがあります。ネイティブの JavaScript を使用してスプライトを回転させることは可能ですか?

たとえば、次のようなスプライト画像があります。

ここに画像の説明を入力

このスプライトにはImageを使用します。

var image = new Image(...);

image.src = "...";

読み込み後、この画像を回転させ、さまざまな投影をローカル変数に保存します。

var sprite_left = rotate(image, 0),
    sprite_top = rotate(image, 90),
    sprite_right = rotate(image, 180),
    sprite_right = rotate(image, 270);

回転関数は次のようになります。

function rotate(sourceImage, angle){
...
}

回転関数を書くのを手伝ってくれる人はいますか?

編集：

スプライトのテストに使用したコードを共有することにしました。

    var wait = function (image, completed, count) {
        if (count == null) count = 0;
        if (!image.complete && count < 1000) {
            count++;
            window.setTimeout(function () {
                wait(image, completed, count);
                console.log('waiting...');
            }, 10);
        }
        else {
            completed();
        }
    },

    rotateW = function (image) {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;

        var p = document.createElement("p");
        p.innerText = "W: ";
        p.appendChild(canvas);
        document.body.appendChild(p);

        var context = canvas.getContext("2d");
        context.translate(canvas.width / 2, canvas.height / 2);
        context.rotate(Math.PI);
        context.translate(-canvas.width / 2, -canvas.height / 2);
        context.drawImage(image, 0, 0);

        var newImage = new Image();
        newImage.src = canvas.toDataURL("image/png");
        return newImage;
    },

    rotateE = function (image) {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;

        var p = document.createElement("p");
        p.innerText = "E: ";
        p.appendChild(canvas);
        document.body.appendChild(p);

        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0);

        var newImage = new Image();
        newImage.src = canvas.toDataURL("image/png");
        return newImage;
    },
    rotateS = function (image, frameCount) {
        var canvas = document.createElement("canvas");
        canvas.width = image.height * frameCount;
        canvas.height = image.width / frameCount;

        var p = document.createElement("p");
        p.innerText = "S: ";
        p.appendChild(canvas);
        document.body.appendChild(p);

        var context = canvas.getContext("2d");
        context.translate(image.height / 2, image.width / (2 * frameCount));
        context.rotate(Math.PI / 2);
        var i = frameCount;
        while (i--> 0) {
            context.drawImage(image, - image.width / 2 , - ( 0.5 + i ) * image.height);
        }
        var newImage = new Image();
        newImage.src = canvas.toDataURL("image/png");
        return newImage;
    },
    rotateN = function (image, frameCount) {
        var canvas = document.createElement("canvas");
        canvas.width = image.height * frameCount;
        canvas.height = image.width / frameCount;

        var p = document.createElement("p");
        p.innerText = "N: ";
        p.appendChild(canvas);
        document.body.appendChild(p);

        var context = canvas.getContext("2d");
        context.translate(image.height / 2, image.width / (2 * frameCount));
        context.rotate( 3 * Math.PI / 2);
        var i = frameCount;
        while (i-- > 0) {
            context.drawImage(image, -image.width / 2, (frameCount - i - 1.5) * image.height);
        }
        var newImage = new Image();
        newImage.src = canvas.toDataURL("image/png");
        return newImage;
    };
/*
        N
        |
   W----O----E
        |
        S
*/
getSprites = function (image, frameCount) {
    var sprite = {
        N: rotateN(image, frameCount),
        S: rotateS(image, frameCount),
        W: rotateW(image, frameCount),
        E: rotateE(image, frameCount)
    };
    return [      
        sprite.W, // left
        sprite.N, // up
        sprite.E, // right
        sprite.S] // down
};

$.sprite = {
    register: function (options) {
        var image = new Image();
        image.src = options.src;

        wait(image, function () {
            var sprites = getSprites(image, options.frameCount);
        });
    }
};

最終結果は次のとおりです。

ここに画像の説明を入力

4

4 に答える 4

3

次の関数は、img (画像またはキャンバス) から新しい Canvas を作成します。対応する回転の角度をラジアン、または 'N'、'S'、'W' で指定します。

function createRotatedImage(img, angle) {
     angle = (angle == 'N') ?  -Math.PI/2 :
             (angle == 'S') ?   Math.PI/2 :
             (angle == 'W') ?   Math.PI   :
              angle ;    
     var newCanvas = document.createElement('canvas');
     newCanvas.width  = img.width  ;
     newCanvas.height = img.height ;
     var newCtx = newCanvas.getContext('2d') ;
     newCtx.save      () ;
     newCtx.translate ( img.width / 2, img.height / 2) ;
     newCtx.rotate  (angle);
     newCtx.drawImage ( img, - img.width / 2, - img.height / 2) ; 
     newCtx.restore   () ;
}
于 2013-08-03T14:48:37.713 に答える
1

次のような関数を持つことはどうですか:

Image.prototype.rotate = function(angle) {
    var c = document.createElement("canvas");
    c.width = this.width;
    c.height = this.height;    
    var ctx = c.getContext("2d");    
    ctx.rotate(angle);
    var imgData = ctx.createImageData(this.width, this.height);
    ctx.putImageData(imgData);
    return new Image(imgData);
}

var img1 = new Image();
var img2 = img1.rotate(90);

もちろん、アイデアを提供するための簡単なサンプルです。

于 2013-08-03T14:51:35.690 に答える