【PlayCanvas×NCMB 勉強会+ハンズオン】HTML5ゲームにバックエンド機能をらくらく追加！ハンズオン(2017/09/05講演)
•
0 likes•429 views
2017/9/5公開
Recommended
More Related Content
What's hot
What's hot (20)
Similar to 【PlayCanvas×NCMB 勉強会+ハンズオン】HTML5ゲームにバックエンド機能をらくらく追加！ハンズオン(2017/09/05講演)
Similar to 【PlayCanvas×NCMB 勉強会+ハンズオン】HTML5ゲームにバックエンド機能をらくらく追加！ハンズオン(2017/09/05講演) (20)
【PlayCanvas×NCMB 勉強会+ハンズオン】HTML5ゲームにバックエンド機能をらくらく追加！ハンズオン(2017/09/05講演)
- 2. ハンズオン・アジェンダ • 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にする – パブリッシュ – 実行して終了
- 6. 3.PlayCanvas Editor Editorを起動すると右のような画面になります。 PlayCanvasはスクリプト作成以外の作業をこのEditor から操作することができます。 Editorの構成は右図のようになっています。 1. ビューポート(VIEWPORT) シーンビューには製作中のゲーム世界（シーン）が表示 され、自由な位置・角度から眺めることができます。 2. インスペクター(INSPECTOR) シーンの中で選択肢中のオブジェクトが持つ属性を表 示・編集するためのビューです。 属性には座標やメッ シュといった見た目上のものから、衝突判定や物理制御 に関するパラメーターなどもあり、その他ユーザー定義 のものもここに表示されます。 3. ヒエラルキー(HIERARCHY) シーン内に存在するオブジェクトの一覧が表示されます。 編集中のシーン内でオブジェクトをコピー/ペーストし たり、適切な名前をつけて整理することもできます。 4. アセット(ASSETS) 製作中のプロジェクト（ゲーム全体）に含まれるモデル、 スクリプト、グラフィックやサウンドなどのデータ、そ の他のリソースがファイル単位で表示されます。 5. メニュー(MENU) シーンのビューモードやプロジェクトセッティング等の 作業が行えます。
- 8. 5.ゲームプレイ • LAUNCHを選択すると別タブでゲームが実行されます – クリックするとゲーム開始、ボールを落とさないようにしてスコアを稼ぐミニゲームです • スマートフォンで実行 – 実行URLをスマートフォンに渡して実行します。 – タップでゲームを遊ぶことができます • 今回のハンズオンでは、 このゲームにランキング機能を実装します！
- 9. Section 2 . 環境構築
- 10. 6.ワークショップ用フォルダ作成 • 作業用のフォルダを作成します – Assetsから新規フォルダーを作成 – Inspectorから名前を「workshop」に変更します
- 12. 8.NCMBアカウント作成
- 13. 9.NCMBアカウント作成 • 利用登録が終わるとアプリの新規作成 画面が表示される • アプリ名を入力して新規作成します 「html5_1709」と 入力してください この2つのキーは 後ほど使います • アプリケーションキーとクライアントキーを使い、 サーバー接続の認証を行っている • ２つのキーがアプリ作成時に生成されます
- 16. 12.ncmb.min.jsダウンロード • 右記のURLより CloneまたはDLします • npmも使えます • DLが完了したら適当な フォルダに解凍します https://goo.gl/3gsR9U $ npm install ncmb -S
- 17. 13.プロジェクトへアップロード • NCMBのJavaScript SDKをプロジェクトにアップロードします – ncmb.min.jsをworkshopフォルダへドラッグ&ドロップ
- 18. 14.PlayCanvasでの外部JSライブラリの扱い • PlayCanvasでは外部JavaScriptライブラリが使用可能です！ – NCMBをはじめ、jQuery, Photonなどなど… – ライブラリ全体でアップロード可能なもののみ使用できます！ – playcanvas.com(開発環境)では<script>タグで外部参照することはできません！ • 外部ライブラリを使用する際は呼び出し順に注意 – Menu > Setting > SCRIPTS LOADING ORDER – ライブラリをまず先に呼び出す必要があります – ncmb.min.jsを#1に変更します
- 19. Section 3 . 実装
- 20. 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周りの制御
- 21. 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
- 22. 17.ランキング用スクリプト作成 • スクリプトを新規作成します – AssetsからAdd asset - > script – 名前を[ ranking.js ]に
- 23. 18.ランキング表示用のHTML, CSSを作成 • 表示のためのHTML, CSSを作成します – ASSETSの[+]からHTML, CSSアセットをそれぞれ作成 – 名前を変更 [New Html] -> [index] [New Css ] -> [style]
- 24. 19.作成したスクリプトのアタッチ • スクリプトを動作させる – HIERARCHYから[UI]を選択し、ADD COMPONENT -> SCRIPT – ADD SCRIPT から先ほど作成した [ranking]を追加します
- 25. 20.ランキングスクリプトの作成 • Editを選択し、ranking.jsを開きます – 基本的なメソッドは3つ • initialize 最初に実行 • update 毎フレーム実行 • swap ホットリローディング時 実行される – 以下ファイルをコピー&ペースト • ranking.js • index • style
- 26. 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()等オブジェクトを探すメソッドもあります
- 27. 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(); – 最後に保存処理を行います
- 28. 23.実行！ • 実行すると格納 & 表示が行われる – ランキングを更新するとハイライトで表示
- 30. Section 4 . パブリッシュ
- 31. 25.NCMBトークンを変更 • 参加者で同一トークンを利用してランキング作成 – ranking.jsの記載したキーを下記に変更します – アプリケーションキー: 829157cb2d1b452794fd4b2b6fa7f949cea0393c3812d09a9f9938b168aab7e3 – クライアントキー: 9f70e40b0b9227a921254a437f50959cbfeb62b0c9dc85853bf3244360ac5ea2
- 32. 26.パブリッシュ • ゲームを公開する – Manage Scene > PUBLISH > PUBLISHでPlayCanvas上で公開