PlayCanvas を使用して簡単なコイン落としゲームを作成するチュートリアル

本チュートリアルの動画をYouTubeから試聴しながらの学習をお奨めしております。

PlayCanvasを使用して簡単なコイン落としゲームを作成するチュートリアルです。

完成したプロジェクトはこちらからご覧いただけます。

概要

このチュートリアルでは、以下の機能を持つコイン落としゲームを作成します。

コインの枚数制御
一定間隔でコイン増加
タッチした場所にコイン複製
得点増加
床に触れるとコイン消滅

目的

PlayCanvas でスクリプト操作方法を学ぶ
PlayCanvas 製ゲームをウェブサイトに公開する方法を学ぶ

プロジェクト準備

PlayCanvas プロジェクトのフォーク機能を利用し、ハンズオンシーンからコイン落としゲームを作成していきます。まだ、PlayCanvasのアカウント登録をしていない方は「アカウントの作成」をして下さい。

プロジェクトのフォーク

こちらからプロジェクトにアクセスし、「Fork」ボタンをクリック。プロジェクト名を入力し、FORK（複製）ボタンをクリック。

プロジェクトを開く

フォーク後、新規プロジェクトのページにリダイレクトされる。「EDITOR」をクリックし、プロジェクトを開く。

シーンの選択

シーンの選択画面で「ハンズオン」を選択。

ハンズオンプロジェクト

HIERARCHY (ヒエラルキー)には、シーンビュー内のエンティティ一覧（Coin、Field、Castle、Camera）が表示されます。ASSETS（アセット一覧）には、このハンズオンで使用するアセットが含まれています。

プロジェクトの起動方法

▶ の Launch をクリックし、プロジェクトを実行。

1 枚だけコインが落ちる状態からゲーム作成を進めていきます。

Chapter 1: アニメーションする床を設定

現在のシーンにはコインとステージのみが配置されています。コインを落とすためのエンティティである Pusher（アニメーションする床）をシーン上に配置します。

ASSETS → ハンズオン資料 → 3 → 3-1 にある「Pusher」テンプレートアセットをシーン上にドラッグアンドドロップ

HIERARCHY（ヒエラルキー）に Pusher が追加されていることが確認できます。次に、エンティティの位置を調整します。

エンティティの位置を INSPECTOR 上で以下の値に変更:

Position	x	y	z
変更前	0	0	0
変更後	0	1.3	0

次に、このエンティティを前後に動くようなアニメーションを再生するために、今回はスクリプトコンポーネントを設定します。

スクリプトコンポーネントの追加は下記の手順で行います。

ADD COMPONENT をクリック
Script（スクリプトコンポーネント）を追加

次に、スクリプトコンポーネントにPusher.jsという名前のPusherを動かすスクリプトを追加します。

スクリプトコンポーネントに Pusher.js を追加:

ADD SCRIPT をクリック
「Pusher」を選択して追加

こちらが追加した「pusher.js」のスクリプトです。


class Pusher extends pc.ScriptType {
    initialize(){
        // エンティティの現在位置を取得する
        const {x, y, z} = this.entity.getLocalPosition();
        // 1.5秒ごとにz方向にエンティティを現在位置から動かすtweenを作成する
        const tween = this.entity.tween(this.entity.getLocalPosition()).to({x:x , y: y, z: z + 1}, 1.5, pc.Linear);
        // tweenをループで再生する
        tween.yoyo(true).loop(true).start();
    }
}
pc.registerScript(Pusher);

追加された「pusher.js」のスクリプトは、tween.yoyo(true).loop(true).start()でPusher の動きを開始して1.5 秒ごとに z 方向の移動を繰り返す処理となっています。

Chapter 2: コインを落としてみよう

マウスをクリックしたときにコインを生成し、コインを落とすように設定しましょう。

Rootエンティティにコインを生成するスクリプトを追加します。

Root エンティティを選択し、ADD COMPONENT から Script を追加
ADD SCRIPT をクリックし、coin-pusher.js を追加

次に、スクリプト属性を利用し、生成するコインの設定を行います。

ハンズオン資料 → 3-2 → Coin にあるコインを選択し、スクリプト属性に Coin をドラッグアンドドロップ

続いてヒエラルキーにある Camera を選択し、スクリプト属性に Camera をドラッグアンドドロップします。

Launch を押してゲームを起動し、マウスでクリックしたところにコインが出現するようになります。

coin-pusher.jsについて


class CoinPusher extends pc.ScriptType {
    // マウスの押下イベントをリッスンしてスクリプトを初期化する
    initialize() {
        this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onPress, this);
    }

    // コインテンプレートからコインを作成する
    createCoin(x, y) {
        const coin = this.Coin.resource.instantiate();
        coin.setLocalPosition(x, y, 0);
        this.app.root.addChild(coin);
    }

    // マウスが押された時、マウス位置をワールド空間に変換し、その位置にコインを作成する
    onPress(event){
        const {x, y} = event;
        this.createCoinAtMousePosition(x, y);
    }

    // マウス位置をワールド空間に変換し、その位置にコインを作成する
    createCoinAtMousePosition(x, y) {
        const position = this.Camera.camera.screenToWorld(x, y, this.Camera.getPosition().z);
        this.createCoin(position.x, position.y);
    }
}
pc.registerScript(CoinPusher);
CoinPusher.attributes.add("Coin", { type: "asset", assetType:"template" });
CoinPusher.attributes.add("Camera", { type: "entity" });

追加された「coin-pusher.js」のスクリプトはマウスのボタンがクリックされたときに「screenToWorld」でクリックされたポジションと、PlayCanvas上の位置を合わせてコインを新規追加しています。

Chapter 3: 床に触れたコインの消去

現在のプロジェクトはコインが床に触れても消えません。

床に触れたコインを消すように設定しましょう。

ヒエラルキーから Field → Floor を選択し、ADD COMPONENT → Script を追加

次に、スクリプトコンポーネントに「floor.js」を追加します。

ADD SCRIPT をクリックし、Floor(floor.js) を追加

ここで、Launchを押してゲームを起動してみましょう。コインが床に触れるとコインが消えるようになりました。

floor.jsについて


class Floor extends pc.ScriptType {
    initialize() {
        // ターゲットが床の当たり判定に触れた場合にエンティティを削除する。
        this.entity.collision.on('triggerenter', this.onTriggerEnter, this);
    }

    onTriggerEnter(entity) {
        entity.destroy();
    }
}
pc.registerScript(Floor);

追加された「floor.js」のスクリプトは、コインと床が接触したことを検出するリスナーを設定しています。当たり判定に触れた場合、this.onTriggerEnter関数が呼び出され、触れたコインを削除する処理 ( entity.destroy() )が行われます。

Chapter 4: タイマーとスコアを表示する

次にタイマー（コインが増えるまでの時間）とスコア（現在持っているコインの数）を表示するために、PlayCanvasの2D ScreenとElementコンポーネントを組み合わせて実装します。また、この組み合わせを利用することで、文字の表示以外にも画像やスクロールバーなどの実装に応用もできます。

※ PlayCanvasではビルトインのフォントがないため、フォントをアセットとしてインポートする必要があります。

ASSETS → 4-1 → 2D Screen をドラッグアンドドロップ

ドラッグアンドドロップ操作で2D Screenのエンティティが追加されます。

このエンティティには、「Score」と「Time」の2つのエンティティが子要素として含まれています。

ScoreとTimerのエンティティには、Elementコンポーネントが追加されています。

このコンポーネントは、2Dスクリーン上にテキストや画像を表示するために利用されるコンポーネントです。

それぞれ、Score、Timerのエンティティで「0」「0」とテキストが表示されていることが確認できます。

次に、2Dスクリーンの位置を調整します。

2Dスクリーンの位置を変更しても、実行時の表示位置は変わりません。

開発中は、メインのエンティティと重ならない場所に移動させます。

今回はこの表のように配置しています。

Position	x	y	z
変更前	0	0	0
変更後	30	0	0

この状態でゲームを起動すると、タイマーとスコアのテキストがゲーム画面に表示されることが確認できます。

Chapter 5: タイマーとスコアの初期設定をする

次に、「coin-pusher.js」のスクリプトを書き換えて、タイマーとスコアの初期設定をします。

ハンズオン資料「3-2」→ 「coin-pusher.js」を選択し、インスペクター上のEditをクリックしてcoin-pusher.jsを開きます。

コードエディタが開かれたらコードを書き換えます。


class CoinPusher extends pc.ScriptType {
    // マウスの押下イベントをリッスンしてスクリプトを初期化する
    initialize() {
        // スコアを50に設定する
        this.app.score = 50;
        // タイマーを3秒に設定する
        this.app.timer = 3;
        // マウスクリックをリッスンする
        this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onPress, this);
    }


    // マウスが押された時、マウス位置をワールド空間に変換し、その位置にコインを作成する
    onPress(event) {
        const { x, y } = event;

        // スコアが0より大きい場合
        if (this.app.score > 0) {
            // コインを作成する
            this.createCoinAtMousePosition(x, y);
            // スコアから1を引く
            this.app.score -= 1;
        }
    }

    // マウス位置をワールド空間に変換し、その位置にコインを作成する
    createCoinAtMousePosition(x, y) {
        const position = this.Camera.camera.screenToWorld(x, y, this.Camera.getPosition().z);
        this.createCoin(position.x, position.y);
    }

    // コインテンプレートからコインを作成する
    createCoin(x, y) {
        const coin = this.Coin.resource.instantiate();
        coin.setLocalPosition(x, y, 0);
        this.app.root.addChild(coin);
    }

    // フレームごとに呼ばれる更新処理
    update(deltaTime) {
        // タイマーを更新する
        this.updateTimer(deltaTime);

        // スコアの表示を更新
        this.Score.element.text = this.app.score;
    }

    // スコアを更新する処理
    updateScore() {
        // スコアに1を加える
        this.app.score += 1;
        // Score要素のテキストをスコアに設定する
    }

    // タイマーを更新する処理
    updateTimer(deltaTime) {
        // タイマーからデルタタイムを引く
        this.app.timer -= deltaTime;
        // タイマーが0より小さい場合
        if (this.app.timer < 0) {
            // タイマーをリセットする
            this.app.timer = 3;

            // スコアをプラスする
            this.updateScore();
        }
        // Timer要素のテキストを四捨五入したタイマーに設定する
        this.Timer.element.text = Math.round(this.app.timer);
    }
}

pc.registerScript(CoinPusher);
CoinPusher.attributes.add("Coin", { type: "asset", assetType: "template" });
CoinPusher.attributes.add("Score", { type: "entity" });
CoinPusher.attributes.add("Timer", { type: "entity" });
CoinPusher.attributes.add("Camera", { type: "entity" });

「coin-pusher.js」の変更点は主に2つです。

1つ目は、スコアとタイマー機能の追加です。PlayCanvasでこれらの値を保持するために、スクリプト初期化( initialize )に、初期値としてthis.app.scoreとthis.app.timerを宣言します。
2つ目は、文字の書き換え処理の追加です。スクリプト属性を使って、スコアとタイマーのエンティティをそれぞれ操作できるようにします。テキストを書き換えるには、それぞれのエンティティのElementコンポーネントの値（this.Timer.element.text、this.Score.element.text）を書き換えることで表示される文字を変更できます。

コードを変更した場合には、「Ctrl」 + 「s」で保存してください。

次に、エディターでスクリプト属性を設定します。

まず、「PARSE」ボタンをクリックし、コードの変更をエディターに反映させます。

「スクリプト属性」にヒエラルキー上にあるScoreとTimerのエンティティを追加します。

これで、ゲームを起動すると、初期状態に設定したタイマーとスコアが表示されるようになります。

Chapter 6: コインが床に触れたらスコア増やす

このままでは、コインを落としてもスコアが増えません。

コインの受け皿（Saucer）に触れたらスコアが増えるようにしましょう。

コインの受け皿もテンプレートアセットを利用して作成します

ASSETS → 4-3 → Saucer をドラッグアンドドロップ

ヒエラルキーから Saucerエンティティの位置を調整します。

今回はこの表のように配置しています。

Position	x	y	z
変更前	0	0	0
変更後	0	0.5	4.5

このエンティティはCOLLISIONコンポーネントのみを持っているエンティティとなり、当たり判定のみ設定するため、実行されたゲームシーン上には表示されません。

次に、受け皿にコインが当たったら、現在のスコアに加算する処理を追加します。

「ADD COMPONENT」から「SCRIPT」を選択し、Saucer.js を追加します。

これで、Launchをクリックすると、コインが受け皿に当たったらスコアが増えるようになりました。

また、受け皿に当たらず横にコインが落ちた場合にはスコアは増えません。

Saucer.js のコードは以下のようになります。


class Saucer extends pc.ScriptType {
    // スクリプトが初期化されたときに実行される処理
    initialize() {
        // エンティティのCOLLISIONコンポーネントでtriggerenterイベントをリスナーに登録する。
        this.entity.collision.on("triggerenter", this.onTriggerEnter, this);
    }
    // triggerenterイベントが発生したときに実行される処理
    onTriggerEnter() {
        // スコアを1増やす
        this.app.score += 1;
    }
}
pc.registerScript(Saucer);

このコードでは、エンティティのCOLLISIONコンポーネントでtriggerenterイベントのリスナーを追加しています。コインが受け皿に当たった場合にスコア( this.app.score )を1増やす処理を実行しています。

これでコイン落としゲームの基本的な動きが作れました！

次に、作成したゲームを公開します。

コイン落としゲームを公開しよう

作成したコイン落としゲームを公開しましょう。

PlayCanvasのPublish機能を使って簡単にゲームを公開できます。

メニュー（MENU)の「Publish / Download」をクリック

「PUBLISH TO PLAYCANVAS」をクリックします。

「PUBLISH NEW BUILD」ウィンドウが表示され、ここでプロジェクトの詳細を入力します。

タイトル、サムネイル、説明、バージョン、リリースノート、シーンなどを設定できます。

「PUBLISH NOW」をクリックするとURLが発行されます。

「BUILDS」をクリックをして「Primary Build」のURLからゲームを遊ぶことができます。

PlayCanvasを使ったプロジェクトの作成が終わりました。

この発行されたURLは誰でもアクセスすることができます。

ぜひ、TwitterやFacebookなどのSNSでシェアして、たくさんの人に楽しんでもらいましょう！

このセクションの記事

チュートリアル - PlayCanvasでコイン落としを作る

PlayCanvas を使用して簡単なコイン落としゲームを作成するチュートリアル

目次

概要

目的

プロジェクト準備

プロジェクトのフォーク

プロジェクトを開く

シーンの選択

ハンズオンプロジェクト

プロジェクトの起動方法

Chapter 1: アニメーションする床を設定

Chapter 2: コインを落としてみよう

Chapter 3: 床に触れたコインの消去

Chapter 4: タイマーとスコアを表示する

Chapter 5: タイマーとスコアの初期設定をする

Chapter 6: コインが床に触れたらスコア増やす

コイン落としゲームを公開しよう

コメント

このセクションの記事

PlayCanvas を使用して簡単なコイン落としゲームを作成するチュートリアル

目次

概要

目的

プロジェクト準備

プロジェクトのフォーク

プロジェクトを開く

シーンの選択

ハンズオンプロジェクト

プロジェクトの起動方法

Chapter 1: アニメーションする床を設定

Chapter 2: コインを落としてみよう

Chapter 3: 床に触れたコインの消去

Chapter 4: タイマーとスコアを表示する

Chapter 5: タイマーとスコアの初期設定をする

Chapter 6: コインが床に触れたらスコア増やす

コイン落としゲームを公開しよう

関連記事