PlayCanvas運営事務局
富士通クラウドテクノロジーズ株式会社

ハンズオン・アジェンダ
• Section 1.導入
– プロジェクト作成
– PlayCanvas Editorの説明
– ゲーム実行
– スマホで実行
• Section 2.環境構築
– ワークショップ用フォルダ作成
– NCMBアカウント作成
– NCMBダッシュボードの説明
– ncmb.min.jsダウンロード
– プロジェクトへアップロード
– PlayCanvasでの外部jsライブラリの使用
– Script Loading orderの設定
• Section 3.実装
– KEEPY UPのイベントフローの説明
– ランキングのためのスクリプト新規作成
– ランキング表示用のHTML,CSS作成
– UIオブジェクトにスクリプトをアタッチ
– PlayCanvasスクリプトの基本説明
– スクリプト記述
– 簡単な実装の説明
– NCMBメソッドの説明
– 実行
– NCMBダッシュボードを確認して格納されている
ことを確認
• Section 4.パブリッシュ
– 共通のNCMBトークンに変更して同じDBにする
– パブリッシュ
– 実行して終了

Section 1. 導入

1.プロジェクト作成
• まず最初にプロジェクトをフォークします
– https://playcanvas.com/project/406050/overview/sample-game-keepy-upにアクセスして
右上のForkをクリック

2.エディターを開く
• EDITORを開きます

3.PlayCanvas Editor
Editorを起動すると右のような画面になります。
PlayCanvasはスクリプト作成以外の作業をこのEditor
から操作することができます。
Editorの構成は右図のようになっています。
1. ビューポート(VIEWPORT)
シーンビューには製作中のゲーム世界（シーン）が表示
され、自由な位置・角度から眺めることができます。
2. インスペクター(INSPECTOR)
シーンの中で選択肢中のオブジェクトが持つ属性を表
示・編集するためのビューです。 属性には座標やメッ
シュといった見た目上のものから、衝突判定や物理制御
に関するパラメーターなどもあり、その他ユーザー定義
のものもここに表示されます。
3. ヒエラルキー(HIERARCHY)
シーン内に存在するオブジェクトの一覧が表示されます。
編集中のシーン内でオブジェクトをコピー/ペーストし
たり、適切な名前をつけて整理することもできます。
4. アセット(ASSETS)
製作中のプロジェクト（ゲーム全体）に含まれるモデル、
スクリプト、グラフィックやサウンドなどのデータ、そ
の他のリソースがファイル単位で表示されます。
5. メニュー(MENU)
シーンのビューモードやプロジェクトセッティング等の
作業が行えます。

4.ゲームの実行
• VIEWPORT上部にあるLAUNCHからゲームが実行できます
– いくつかパラメータがありますが基本はデフォルトでＯＫ
– プロファイラなんかもあります

5.ゲームプレイ
• LAUNCHを選択すると別タブでゲームが実行されます
– クリックするとゲーム開始、ボールを落とさないようにしてスコアを稼ぐミニゲームです
• スマートフォンで実行
– 実行URLをスマートフォンに渡して実行します。
– タップでゲームを遊ぶことができます
• 今回のハンズオンでは、
このゲームにランキング機能を実装します！

Section 2 . 環境構築

6.ワークショップ用フォルダ作成
• 作業用のフォルダを作成します
– Assetsから新規フォルダーを作成
– Inspectorから名前を「workshop」に変更します

7.NCMBアカウント作成
• mBaaSで検索をしてNCMBの
Webサイトを開く
• NCMBアカウントの取得を行う

8.NCMBアカウント作成

9.NCMBアカウント作成
• 利用登録が終わるとアプリの新規作成
画面が表示される
• アプリ名を入力して新規作成します
「html5_1709」と
入力してください
この2つのキーは
後ほど使います
• アプリケーションキーとクライアントキーを使い、
サーバー接続の認証を行っている
• ２つのキーがアプリ作成時に生成されます

10.NCMBダッシュボードの説明
ダッシュボード
NCMBの管理画面
APIリクエスト数をグラフで閲覧
することや、各種設定を行うこ
とが出来る
今回NCMBを用いて作るものは
ランキング機能
つまり、データを保存するデー
タストアを利用します

11.NCMBダッシュボードの説明
データストア
まだデータを登録しておらず、
クラスもデータも存在しない
それではNCMBにデータを登録
していく作業を進めていきま
しょう！
空っぽ！

12.ncmb.min.jsダウンロード
• 右記のURLより
CloneまたはDLします
• npmも使えます
• DLが完了したら適当な
フォルダに解凍します
https://goo.gl/3gsR9U
$ npm install ncmb -S

13.プロジェクトへアップロード
• NCMBのJavaScript SDKをプロジェクトにアップロードします
– ncmb.min.jsをworkshopフォルダへドラッグ&ドロップ

14.PlayCanvasでの外部JSライブラリの扱い
• PlayCanvasでは外部JavaScriptライブラリが使用可能です！
– NCMBをはじめ、jQuery, Photonなどなど…
– ライブラリ全体でアップロード可能なもののみ使用できます！
– playcanvas.com(開発環境)では<script>タグで外部参照することはできません！
• 外部ライブラリを使用する際は呼び出し順に注意
– Menu > Setting > SCRIPTS LOADING ORDER
– ライブラリをまず先に呼び出す必要があります
– ncmb.min.jsを#1に変更します

Section 3 . 実装

15.KEEPY UPのイベントフロー
• KEEPY UPでは3つのイベントがあります
– game:start タイトルから、ゲームが始まったとき
– game:gameover ゲームオーバーになったとき
– game:reset タイトルに戻ったとき
• スクリプト
– game.js ゲーム進行を管理
– input.js 入力を制御
– ball.js ボールの物理を制御
– font.js フォントを管理
– sprite.js スプライトを表示
– ui-xxx.js ui周りの制御

16.KEEPY UPへランキングの実装
• KEEPY UPでは3つのイベントがあります
– game:start タイトルから、ゲームが始まったとき
– game:gameover ゲームオーバーになったとき
– game:reset タイトルに戻ったとき
• ランキング実装
– game:gameover時にスコアを送信
ランキングを取得、UI表示
– game:start時にUI非表示 TITLE INGAME RESULT
game:start game:gameover
game:reset

17.ランキング用スクリプト作成
• スクリプトを新規作成します
– AssetsからAdd asset - > script
– 名前を[ ranking.js ]に

18.ランキング表示用のHTML, CSSを作成
• 表示のためのHTML, CSSを作成します
– ASSETSの[+]からHTML, CSSアセットをそれぞれ作成
– 名前を変更
[New Html] -> [index]
[New Css ] -> [style]

19.作成したスクリプトのアタッチ
• スクリプトを動作させる
– HIERARCHYから[UI]を選択し、ADD COMPONENT -> SCRIPT
– ADD SCRIPT から先ほど作成した
[ranking]を追加します

20.ランキングスクリプトの作成
• Editを選択し、ranking.jsを開きます
– 基本的なメソッドは3つ
• initialize 最初に実行
• update 毎フレーム実行
• swap ホットリローディング時
実行される
– 以下ファイルをコピー&ペースト
• ranking.js
• index
• style

21.スクリプトの詳細
• L12 - username = window.prompt("Input your name");
– JavaScriptのwindowオブジェクトを使うことができます。
window.promptメソッドでテキストボックスつきのモーダルウィンドウを実装できます
• L14 - localStorage.setItem("name",username);
– Webブラウザから簡易的なストレージを使用するWebストレージにも対応しています。
セッションストレージ，ローカルストレージ両対応。くわしくはこちら
• L19 - this.app.on("game:gameover", function () {};
– イベントハンドラの作成も手軽にできます
• L22 - self.ranking(self.entity.children[2].script.uiGameover._score,6);
– 外部オブジェクトやスクリプト内の変数にアクセスすることができます。
– このほかにもthis.app.root.find()等オブジェクトを探すメソッドもあります

22.スクリプトについて (NCMB)
• L2 - var ncmb = new NCMB(“”, “”);
– アプリの新規作成時のAPIキーに置き換えます
APIキー発行画面を閉じてしまった場合は、「アプリ設定」＞「基本」で確認できます
• L35 - var TestClass = ncmb.DataStore("TestClass");
– データストアの保存先「TestClass」というクラスを作成します
– クラス名はRDBでいうテーブル名に該当します
• L39 - testClass.set(“score”, score);
testClass.set("name",username);
– 「score」というフィールドに score 変数、「name」というフィールドに username 変数をセットします
• L35 – testClass.save();
– 最後に保存処理を行います

23.実行！
• 実行すると格納 & 表示が行われる
– ランキングを更新するとハイライトで表示

24.NCMBのダッシュボード
• ダッシュボードのTestClassに確認して格納されていることを確認

Section 4 . パブリッシュ

25.NCMBトークンを変更
• 参加者で同一トークンを利用してランキング作成
– ranking.jsの記載したキーを下記に変更します
– アプリケーションキー:
829157cb2d1b452794fd4b2b6fa7f949cea0393c3812d09a9f9938b168aab7e3
– クライアントキー:
9f70e40b0b9227a921254a437f50959cbfeb62b0c9dc85853bf3244360ac5ea2

26.パブリッシュ
• ゲームを公開する
– Manage Scene > PUBLISH > PUBLISHでPlayCanvas上で公開

27.パブリッシュ
• パブリッシュするとリンクが発行されます！
– 発行されたリンクからゲームを配布可能