7

HTML<canvas>とJavaScriptを使用してWebゲームを開発しています。ゲームは iPad でも機能する必要があり、できれば Retina ディスプレイと非 Retina ディスプレイの両方で機能する必要があります。このゲームでは、スプライト シートの png を使用します。このスプライトシートは、幅 3500 ピクセル、高さ 3700 ピクセルです。

私のゲームのロジックでは、キャンバスを使用しcontext.drawImage()てスプライトを取得し、キャンバスに描画しています。デスクトップ ブラウザーでは、これは問題なく動作し、すべてが優れています。Retina iPad では、イメージはそのサイズの 4 分の 1 しかロードされないためdrawImage()、ロードされたイメージの境界外のピクセルを取得しようとしていると考えて、多くの呼び出しが失敗します。(位置 1200、1400 でスプライトを取得し、iPad が画像がそれよりも小さいと判断した場合、INDEX_SIZE_ERR エラーがスローされます。)

たとえば、以下に記述されたコードは、私のプロジェクトにあるものです。幅と高さを警告すると、幅 875 ピクセル、高さ 925 ピクセルの結果が得られます。これは、元の画像のサイズのちょうど 1/4 です。

spritesheet = new Image();
spritesheet.onload = function() {
    splashInterval = setInterval(renderFrame, 30);
    alert(spritesheet.width); // returns 875 on retina iPad
    alert(spritesheet.height); // returns 925 on retina iPad
};
spritesheet.src = "/spritesheet.png";

Retina ディスプレイでこれを解決する通常の方法は、サイズを大きくした画像を作成して、iPad が画像を縮小したときに問題なく動作するようにすることです。ただし、上記で報告されているサイズを使用すると、幅と高さが 4 倍のサイズの画像を作成する必要があります。これにより、幅 14,000 ピクセル、高さ 14,800 ピクセルの画像が作成されます。純白の jpg であっても、この画像は Photoshop での保存に失敗し、Gimp では 1.9GB の大きさであると報告されています。当然、これは解決策ではありません。;)

したがって、私の質問は次のとおりです。iPad Retina ディスプレイが Javascript を介してロードされた画像を縮小しないようにする方法はありますか? 3500x3700 ピクセルの画像を読み込むときは、3500x3700 ピクセルのままにする必要があるため、context.drawImage()呼び出しが意図したとおりに機能します。

あらゆるアイデアを歓迎します。ありがとう！

4

1 に答える 1

1

次を使用して、ディスプレイが網膜であるかどうかを確認できます。

var retina = window.devicePixelRatio > 1 ? true : false;

if (retina) {
    // the user has a retina display
    // do something

}
else {
    // the user has a non-retina display
    // do something else 
}
于 2012-07-19T16:31:13.157 に答える