JavaScript 拡張チュートリアル - Cocos2d-JS 画面適応ソリューション

この記事は、H5EDU 組織の公式 HTML5 トレーニング チュートリアルです。主に以下を紹介します: JavaScript 強化チュートリアル - Cocos2d-JS の画面適応ソリューション

1 画面適応ポリシー (解像度ポリシー) を設定する

解像度を使用していない場合ポリシーはまだありません。ゲームの読み込みプロセスが完了した後 (cc.game.onStart 関数のコールバックで)、次のコードを呼び出すだけです。

cc.view.setDesignResolutionSize(320, 480, cc.ResolutionPolicy.SHOW_ALL); setDesignResolutionSize 関数の一部 最初のパラメータはコードで使用するゲーム解像度で、3 番目のパラメータは選択した適応スキームです。エンジンには 5 つの適応スキームが組み込まれており、それぞれに独自の動作があります。詳細については以下を参照してください。

デザイン解像度を設定している場合は、解像度ポリシーを直接設定できます:

cc.view.setResolutionPolicy(cc.ResolutionPolicy.NO_BORDER);
ネイティブ ゲームでは、ゲームは常に全画面スペースを使用しますが、 WEB 側では、Web ページにゲーム以外のビジュアル要素やテキスト要素が含まれている場合や、ゲーム用に美しい境界線をデザインする必要がある場合があります。したがって、Cocos2d-JS の Web エンジンの適応スキームは、デフォルトでゲーム Canvas 要素の親ノードに適応します。ゲーム シーンをブラウザ画面に適応させたい場合は、Canvas を直下に配置するだけで済みます。本文:


2. 解決ポリシーを使用する利点は明らかです。デバイスの画面サイズに関係なく、またはブラウザ ウィンドウのアスペクト比に応じて、ゲーム シーンは画面サイズに合わせて自動的に拡大縮小されます。さらに重要なのは、ゲーム コードでは、常に自分が設計したゲームの解像度を使用してゲーム シーンをレイアウトすることです。たとえば、デザインの解像度を 320 * 480 に設定した場合、ゲーム コード内のゲーム ウィンドウの右上隅の座標は常に (320, 480) になります (FIXED_WIDTH モードでは高さがスケーリングされる可能性があります)。 FIXED_HEIGHT モード 幅は拡大縮小できます。詳細は以下を参照してください)。

3. ブラウザーのウィンドウ サイズ変更イベントを監視する

新しい適応スキームにより、ブラウザーのサイズが変更されたときに適応を自動的に再試行できます。たとえば、ユーザーがブラウザのサイズを変更するためにドラッグするとき、またはより便利には携帯電話を回転するときです。この動作は、ゲーム内でいつでもオンにできます。cc.view の ResizeWithBrowserSize 関数を呼び出すだけです:

cc.view.resizeWithBrowserSize(true);
変更により柔軟に対応するために、 cc.view 関数を使用すると、setResizeCallback 関数を通じてコールバック関数を登録して、ブラウザーのウィンドウ サイズ変更イベントをリッスンできます:

cc.view.setResizeCallback(function() {
// ゲーム コンテンツ レベルで必要な適応操作を実行します。
// たとえば、ユーザーのモバイル デバイスの向きに基づいて適用する適応モードを決定できます
});
4. フルスクリーン API

フルスクリーン API は、ブラウザーが Web ページでユーザーの方向を取得できるようにする新しい形式です。フルスクリーンAPI。

Cocos2d-JS は、ユーザーにより良いゲーム体験を提供するために、モバイル ブラウザーで自動的に全画面表示を試みます (すべてのブラウザーがこの API をサポートしているわけではないことに注意してください)。

一方、デスクトップ上のほとんどすべての最新ブラウザはフルスクリーン API をサポートしています。この API を使用したい場合は、Cocos2d-JS を使用するとその使用も簡素化されます。

フルスクリーン モードに入ってみます (ユーザーの操作が必要です): cc screen.requestFullScreen(targetElement, onFullScreenCallback);
全画面モードかどうかを検出する: cc.screen.fullScreen();
4.4.3 重要な概念

1. ゲーム フレーム フレーム

ゲーム フレームは、ゲームの Canvas 要素の最初の親ノードです。通常、これは HTML ドキュメントの body 要素です。ただし、必要に応じて、DOM 構造内の任意のコンテナ ノードにすることができます。 Canvas 要素の初期サイズは重要ではありません。画面調整プロセス中に設定したフレーム サイズに合わせて自動的に拡大縮小されます。 繰り返しますが、ゲーム ウィンドウをブラウザ ウィンドウ全体に収めたい場合は、Canvas 要素を本文の直下に配置するだけです。

2. ゲームコンテナ コンテナ

Cocos2d-JS の初期化プロセス中に、エンジンは Canvas 要素を DIV コンテナに自動的に配置し、このコンテナは Canvas の元の親ノード (ゲームの外枠) に追加されます。真ん中。このゲーム コンテナは、画面適応ソリューションを実装するための重要な補助要素です。cc.container を通じてアクセスできます。

3. ゲームワールドのコンテンツ

ゲームワールドは、ゲームで使用されるワールド座標系を表します。

4. ビューポート

ビューポートは、ゲームのキャンバス要素の座標系に対する相対的なゲーム世界の座標とサイズです。

5.コンテナ適応戦略は、ゲーム フレームに合わせてゲーム コンテナとゲーム Canvas 要素をスケーリングする役割を果たします。

6. コンテンツ アダプテーション ストラテジー コンテンツ ストラテジー

コンテンツ アダプテーション ストラテジーは、ゲーム コンテナーに合わせてゲーム ワールドをスケーリングし、ウィンドウを計算して設定します。