Tutorials

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

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

ユーザインターフェース

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

PlayCanvasではユーザインタフェースはScreen ComponentElement Componentを使用して構築されます。詳細は ユーザマニュアルでご確認ください

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

階層

ユーザインターフェイスをメニュー、ゲーム、ゲームオーバーの3つのゲーム状態に分けました。各状態には、状態が入力されたときにアクティブ化されるスクリーンエンティティがあります。 また、オーバーレイのためのスクリーンがあります。オーバーレイはメニューのボールの下に表示されるため、3Dスクリーンコンポーネントを使用して、ボールの後ろのワールドスペースにオーバーレイをレンダリングします。

イメージとテキスト

イメージ要素

画像やテキストは要素コンポーネントを使用してユーザーインターフェイスに追加されます。このコンポーネントは、テクスチャアセットの形式または画像をフォントアセットの形式で表示することができます。

イメージの属性

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

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

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

UiMenu.attributes.add("overlay", {type: "entity"});

// エンティティ毎に一度呼び出される初期化コード
UiMenu.prototype.initialize = function() {
    this.on('enable', this.onEnable, this);    
    this.on('disable', this.onDisable, this);
    
    this.onEnable();
};

UiMenu.prototype.onEnable = function () {
    // 背景のクリックをリッスンする    
    
    this.overlay.enabled = true;
    this.overlay.element.on("click", this.start, this);
    
    if (this.ball) {
        this.ball.model.meshInstances[0].material.depthTest = false;
    }
};

UiMenu.prototype.onDisable = function () {
    this.overlay.enabled = false;
    // イベントのリッスンをやめる
    this.overlay.element.off("click", this.start, this);
};

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

オーバレイ要素は、画面を緑色にするフルスクリーン要素です。また、ユーザがフルスクリーンをクリックすることが重要なので、入力を検出するためにも使用します。

エンティティを有効にした場合、フルスクリーンオーバーレイを有効にして表示し、次にクリックイベントのリッスンを開始します。エンティティが無効になると、イベントのリッスンを停止し、オーバーレイを非表示にします。イベントがトリガーされると、メインゲームのスクリプトがリッスンしているゲームの状態の変化をトリガーする"ui:start" イベントが発生します。

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

ゲーム完成

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

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