10

iPhone用のHTML5キャンバスゲームを作成しています。網膜ディスプレイと非網膜ディスプレイの両方をサポートしたいと思います。

私の質問は、網膜ディスプレイと非網膜ディスプレイの両方をどのようにサポートするのですか？

IE、これを行うための一般的な実装は何ですか？iPhoneディメンションを使用してゲームを作成してから、網膜サポートを追加しますか？または、ゲームの網膜サイズを作成して、網膜以外のサポートを追加しますか？2つの画像、1つは網膜、もう1つは非網膜であることが最善ですか？または、網膜画像を縮小しますか？網膜と非網膜に別々のキャンバスサイズがありますか？マウス入力をスケーリングする必要がありますか？

基本的に、私は両方を実装するための一般的なアイデア/ロジックについてはわかりません。

乾杯、J

4

3 に答える 3

11

devicePixelRatioを使用して、Retinaディスプレイを通常のディスプレイから分離します

ゲームのロジック座標（スプライトの位置など）は、Retinaディスプレイで常に2倍になる画面座標とは独立して動作する必要があります。

グラフィックアセットには2つのバージョンが必要です。高解像度バージョンと50％縮小された通常バージョン。Retinaディスプレイを操作するときは、CSSでサイズ変更された2倍サイズのキャンバスを描画し、このキャンバスでは高解像度のアセットを使用します。

于 2012-09-02T17:50:57.747 に答える
7

これが古い投稿であることはわかっていますが、実装したソリューションで更新すると思いました。

1: 2 セットの画像を使用しました。

  • 1 つは非 Retina ディスプレイ用 (サイズ 1:1)、
  • 2倍の大きさの網膜用の別のセット。

どのデバイスが使用されているかによって、どのセットがロードされているかによって異なります。

2: 次に、キャンバスのサイズを変更します (これが重要です)。

非網膜

    var canvas = document.createElement('myCanvas');

    canvas.width = 320;
    canvas.height = 480;
    canvas.style.width = "320px";
    canvas.style.height = "480px";

網膜

    var canvas = document.createElement('myCanvas');

    canvas.width = 640;
    canvas.height = 960;
    canvas.style.width = "320px";
    canvas.style.height = "480px";

Retinaを使用しているかどうかに関係なく、 canvas.style.width&は同じであることに注意してください。height

それだけです。

于 2013-05-07T22:26:56.363 に答える