stage.jsの紹介

Stage.jsは、クロスプラットフォーム2D HTML5ゲーム開発用の軽量のオープンソースJavaScriptライブラリです。 DOMのようなモデルを使用してキャンバスを操作し、アプリケーション自体のレンダリングサイクルを管理します。このチュートリアルでは、Stage.jsのコア機能を紹介して、簡単に開始するのに役立ちます。

キーポイント

• Stage.jsは、Cross-Platform 2D HTML5ゲーム開発用の軽量のオープンソースJavaScriptライブラリであり、DOMのようなモデルを使用してキャンバスを処理し、アプリケーションのレンダリングサイクルを独立して管理します。
• ライブラリは、ノードポジショニング（ノードが親ノードに付着する方法を決定する）、インタラクティブアップデート用のマウスおよびタッチイベント、スムーズなトランジションのためのアニメーション、グラフィックディスプレイやアニメーションテクスチャコレクション用のグラフィックディスプレイとアニメーションなどの複数の機能を提供します。
• stage.jsは使いやすく直感的であり、複雑なコーディングやWebグラフィックスの広範な知識なしにインタラクティブなWebアプリケーションまたはゲームを作成したい開発者に適しています。 NPM（ノードパッケージマネージャー）を使用してインストールでき、レスポンシブデザインのおかげで、デスクトッププラットフォームとモバイルプラットフォームと互換性があります。

インストールして

を使用します

最初に、stage.jsライブラリをダウンロードします。 GitHubリポジトリから最新バージョンを入手できます（初心者の例がいくつか含まれています）。必要に応じて、CDNから直接ロードすることもできます。コアファイルを含めた後、独自のJavaScriptファイルを追加する必要がありますが、ライブラリの前にアプリケーションファイルを含めないように注意する必要があります。

ステージでアプリケーションを作成することは、コールバック関数を

<code class="language-html">
</code>

に渡すことにより達成されます。ライブラリには、必要なすべてのコンポーネントがロードされます。最後に、コールバック関数を呼び出して、すべてを画面にレンダリングします。作成する各アプリケーションにはツリーがあり、ステージはそのツリーの根元にあります。画像や文字列などの他のすべての要素がノードになります。各レンダリングサイクル中に、ノードが更新されると、アプリケーションツリーが再描画されます。

Stage()

ノードポジショニング（ピン留め）

ノードの位置決めにより、ノードが親ノードに添付されている方法が決まります。ノードポジショニングを使用して設定できる多くのオプションがあります。それらのいくつかは、サイズ、位置、アライメント、および変換です。これが簡単な例とその説明です。

最初にビューポートのサイズを指定します。 「ホイール」と呼ばれる画像wheel.pngをステージに取り付けます。その後、「ハンドル」を使用して、この画像またはノードの初期位置を設定します。任意のノードで「ハンドル」し、親ノードのアライメントポイントで指定されたオフセットに自分自身を配置します。 「ハンドル」と「整列」の両方が相対単位として指定されています。たとえば、0は左上隅、1は右下隅です。上記のコードは、ビューポートの中央にホイールを配置します。

<code class="language-javascript">Stage(function (stage) {
    stage.viewbox(700, 700);
    Stage.image('wheel')
        .appendTo(stage)
        .pin('handle', 0.5);
});

Stage({
    name: 'wheel',
    image: 'wheel.png'
});</code>

センターから特定の水平距離に画像を配置するには、以下に示すように「OffsetX」を使用できます。

<code class="language-html">
</code>

上の距離は300ピクセルではなく、ビューポートの3/14倍のサイズであることに注意してください。スケーリング、傾斜、回転などのノードの他の値を設定することもできます。特定の方向（Horizo​​ntalなど）でスケーリングするには、Scalexを使用できます。次のコードスニペットは、ホイールを水平方向に1.4回スケーリングします。

<code class="language-javascript">Stage(function (stage) {
    stage.viewbox(700, 700);
    Stage.image('wheel')
        .appendTo(stage)
        .pin('handle', 0.5);
});

Stage({
    name: 'wheel',
    image: 'wheel.png'
});</code>

回転、ズーム、およびチルトは、デフォルトでは回転点としてノードの中心になります。次の方法を使用して、ノードの異なる回転ポイントを設定することもできます。

<code class="language-javascript">Stage.image('wheel')
    .appendTo(stage)
    .pin({
        handle: 0.5,
        offsetX: 300
    });</code>

全体として、固定要素を使用すると、それらを動かしてスケーリングまたは回転させることができます。

マウスとタッチイベント

ユーザーインタラクションでノードを更新するには、さまざまなマウスとタッチイベントを使用できます。上記のホイールの例を続けて、次のコードを書くことができます：

<code class="language-javascript">Stage.image('wheel')
    .appendTo(stage)
    .pin({
        handle: 0.5,
        scaleX: 1.4
    });</code>

または

などのこれらのイベントを定義できます。更新されたコードは次のとおりです Stage.Mouse.CLICK = 'click';

別の例は

<code class="language-javascript">node.pin({
    pivotX: x,
    pivotY: y
});</code>

です。

Stage.Mouse.MOVE = 'touchmove mousemove';

Tween Animation（Tweening）Tween Animationは、ノードの位置決め値にスムーズな遷移を適用します。これにより、関連するノードの位置またはサイズの突然の変化が防止されます。たとえば、以下のコードは、Pi Radiansでホイールを突然回転させ、クリックするたびにその位置を600に変更します。 ただし、Tweenメソッドを追加すると、遷移が滑らかになる可能性があります。

緩和方法、期間、遅延など、多くのオプションが利用可能です。上記のコードでは、期間を3000ミリ秒に設定し、緩和機能をバウンスしました。さらに、線形、クワッド、キュービック、クォートなど、さまざまな緩和関数を使用できます。遅延を設定すると、指定された遅延後に遷移が開始されます。アニメーションが完了した後にノードが不要な場合は、

<code class="language-javascript">var wheelNode = Stage.image('wheel').appendTo(stage);
wheelNode.pin({
    'handle': 0.5
});
wheelNode.on('click', function () {
    // 在此处对轮子执行某些操作。
});</code>

に電話してノードを削除できます。他のアクションを実行するには、Tweenアニメーションが完了した後、次のコードスニペットを使用してコールバック関数を実行できます。

<code class="language-javascript">wheelNode.on(click, function () {
     // 在此处对轮子执行某些操作。
 });</code>

テクスチャatlas

tween.remove();

テクスチャは、ツリーノードによって使用されて、キャンバスにグラフィックを描画します。キャンバスにグラフィックを表示するには、「テクスチャギャラリー」とも呼ばれるスプライトテーブルを使用できます。テクスチャアトラスの名前を設定することはオプションです。 Spriteテーブルには、名前付きテクスチャのセットが必要です。アプリケーションでそれらを使用するには、名前でそれらを参照できます。テクスチャアレイをフレームとして使用して、アニメーションを作成できます。アニメーション自体はノードです。アニメーションの戦士の例は次のとおりです

<code class="language-javascript">var wheelRotation = Math.PI;
var wheelPosition = 300;

wheelNode.on('click', function () {
    wheelRotation = -wheelRotation;
    wheelPosition = -wheelPosition;
    this.pin({
        rotation: wheelRotation,
        offsetX: wheelPosition
    });
});</code>

戦士をアニメーション化するには、次のコードが必要です。それを速くするために、FPSを増やすことができます：

など、他にも多くの方法があります。これにより、

<code class="language-javascript">wheelNode.on('click', function () {
    wheelRotation = -wheelRotation;
    wheelPosition = -wheelPosition;
    this.tween(3000)
        .pin({
            rotation: wheelRotation,
            offsetX: wheelPosition
        })
        .ease('bounce');
});</code>

n

フレームに直接移動します。

n

<code class="language-javascript">tween.done(function () {
    // 在此处执行您的操作。
});</code>

の値に応じて、

nanimフレームを前方または後方に移動することもできます。 gotoFrame(n) 概要

この入門チュートリアルでは、stage.jsを開始するために必要なすべてをカバーします。議論されている概念は、基本的な文字アニメーションを作成し、Spritesを使用してユーザーと対話するのに役立つはずです。このライブラリの詳細については、公式Webサイトからご覧ください。また、GitHubページからファイルをダウンロードすることもお勧めします。ダウンロードファイルに含まれるデモは、問題をさらに明確にします。

（FAQセクションをここに追加する必要があります。コンテンツは入力テキストのFAQセクションと同じですが、必要に応じて少し書き直して調整できます）

以上がstage.jsの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。