Tutorials

シンプルなゲームを作る - その6

完成されたプロジェクトはこちらです。先にその1, その2, その3, その4, その5を読んでください。

ユーザインターフェース

ゲームのユーザーインターフェースはユーザが最初に触れるものですが、開発の際には後回しにされがちです。優れたユーザーインターフェースは、ゲームに個性を与えるだけでなく、ゲームをプレイすることができる人数に影響を与えます。

PlayCanvasアプリケーションでユーザインタフェースを構築する方法はいくつかあります。HTMLやCSSのアセットを使用するか、メインシーンでレンダリングされるWebGLのジオメトリを使用することができます。今回は後者を使用します。PlayCanvas Githubのページから入手できるSprite libraryFont libraryを使用します。

ユーザインターフェースのエンティティ

階層

ユーザーインターフェースをメニュー、ゲーム内、ゲームオーバーの3つのゲームの状態に分けました。各状態には、そのインタフェース画面のグラフィックを含む親エンティティがあります。ユーザーのインタラクションや、その他のゲームイベントを処理する各インタフェース画面用のスクリプトもあります。

Spriteの設定

Sprite

スクリプトを追加するには、プロジェクトに上記のSpriteライブラリからsprite.jsを追加して、Spriteコンポーネントを追加します。Spriteコードは、シーンで2DのSpriteをレンダリングするために使用する属性を公開します。Spriteスクリプト属性は[Githubページ]に記載されています6

ユーザインターフェースのスクリプト

メインメニューのスクリプトを見てみましょう。

var UiMenu = pc.createScript('uiMenu');

// initializeコードが各エンティティで一度のみ呼ばれる
UiMenu.prototype.initialize = function() {
    this.on('enable', this.onEnable, this);
    this.on('disable', this.onDisable, this);

    this.onEnable();
};

UiMenu.prototype.onEnable = function () {
    // プレイボタンのクリックをリッスン
    this.app.mouse.on("mouseup", this.start, this);
    if (this.app.touch) {
        this.app.touch.on("touchend", this.start, this);
    }
};

UiMenu.prototype.onDisable = function () {
    // イベントへのリッスンを止める
    this.app.mouse.off("mouseup", this.start, this);
    if (this.app.touch) {
        this.app.touch.off("touchend", this.start, this);
    }
};

UiMenu.prototype.start = function (e) {
    this.app.fire("ui:start");
    // タッチとマウスイベントを防ぐ
    e.event.preventDefault();
};

エンティティが有効の場合、マウスやタッチイベントをリッスンし始め、エンティティが無効の場合は、イベントのリッスンを停止します。 イベントがトリガされると、メインのゲームスクリプトがリッスンしゲーム状態の変更をトリガする "ui:start" イベントを発動します。

ゲームのイベントにリッスンしたり、UIイベントを発動させる他の二つのUIスクリプトでも、同様の動作を繰り返します。

ゲーム完成

シリーズの最後に到達しました!PlayCanvasを使用してゲームを構成および構築する方法について説明をしました。チュートリアルに関するご意見はフォーラムから連絡ください。

This site is translated by the community. If you want to get involved visit this page