Next2Dで始めるゲーム開発 - Game Development Starting with Next2D
•
0 gefällt mir•115 views
CEDEC2022に応募したのですが、見事に落選しました。 が、折角作った資料なので公開します。 I applied for CEDEC2022, but was not selected. However, I am publishing this document because I made it at an opportunity.
Empfohlen
Weitere ähnliche Inhalte
Ähnlich wie Next2Dで始めるゲーム開発 - Game Development Starting with Next2D
Ähnlich wie Next2Dで始めるゲーム開発 - Game Development Starting with Next2D (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (10)
Next2Dで始めるゲーム開発 - Game Development Starting with Next2D
- 2. ⾃⼰紹介 • Toshiyuki Ienaga • Webの制作会社でプログラ マー/マネージャーしてます。 インフラ > バックエンド > フロントエンド > アプリ @ienagatoshiyuki @ienaga
- 4. Next2Dとは
- 5. Next2D Next2D（ネクストツーディー）は、JavaScriptで書かれた 2Dレンダリングエンジン「Next2D Player」、Model- View-ViewModel（MVVM）アーキテクチャを採⽤した 「Next2D Framework」、Webブラウザ上で動作する オーサリングツール「Next2D NoCode Tool」など、開発 者の⽣産性を上げることを⽬的としたツール・ライブラリ です。 Next2D Player Next2D Framework Next2D NoCode Tool
- 6. Next2D Player FlashPlayeをJavaScriptでエミュレートす る「swf2js」から派⽣したプロジェクトで、 2D最速エンジンを提供することを⽬的とし ています。 WebGL 、 WebGL2を完全にサ ポートしており、開発者は、ブラウザやデ バイスの互換性対処を気にすることなく リッチでインタラクティブなWebコンテン ツ、およびゲームを作成することができま す。
- 7. Next2D Framework 従来のCanvas/WebGLアプリケー ションでは困難だったURLによる Single Page Application（SPA）で の画⾯遷移を可能にし、開発パター ンを固定化することで可読性・共有 性をシンプルにし、効率的な開発を ⾏えるNext2D専⽤フレームワーク です。
- 8. Next2D NoCode Tool ノーコード開発を主体としたWebブ ラウザ上で動作するオーサリング ツール。 イメージしたアニメーショ ンを直感的に作成することができ、 書き出したデータはWebにアップ ロードすることで簡単に公開するこ とができます。 https://tool.next2d.app
- 9. プロジェクトを始める
- 10. プロジェクトを開始する(Hello, World.) npx create-next2d-app sample-app
- 14. HOME画⾯ ①SPA(Single Page Application)に対 応しており、URLでの直接的なアク セスを可能にしてます。 ②キャラクターをマウス・タップで 移動させる フル画⾯モードがOnになっているの で、画⾯のどこへでも移動が可能で す。 ③Hello, World.のテキストをタップ して⽂字を変更する
- 15. 機能解説
- 20. 設定ファイル
- 22. src/config/stage.json設定 { "width": 240, "height": 240, "fps": 12, "options": { "base": ".", "fullScreen": true } } 名前 型 初期値 詳細 width number 240 表⽰領域(Stage)の幅を設定します height number 240 表⽰領域(Stage)の⾼さを設定します fps number 12 1秒間に何回描画するかを指定します 名前 型 初期値 詳細 base string . 相対パスの場合、ここで設定したURLがroot として適⽤されます。絶対パスの場合はここ で設定したURLは適⽤されません fullScreen boolean false Stageクラスで設定した幅と⾼さを超えて画 ⾯全体に描画されます tagId string null IDを指定すると、指定したIDのエレメント内 で描画を⾏います bgColor array null 背景⾊の[R,G,B,A]の配列は0〜255で指定で きます。falseは無⾊透明です optionsの設定
- 23. src/config/config.json設定 { "local": { "api": { "endPoint": "/local/endpoint" }, "content": { "endPoint": "/local/static" } }, "prd": { "api": { "endPoint": "/prd/endPoint" }, "content": { "endPoint": "/prd/static" } }, "all": { "spa": true, "loading": { "callback": "Loading" }, "gotoView": { "callback": ["callback.Background"] } } } 名前 型 初期値 詳細 spa boolean true Single Page Applicationとして、URLで シーンを制御することができます loading.callback string Loading 画⾯遷移の準備が完了するまでの間、ロー ディング画⾯を表⽰するかどうかを設定し ます。コールバックとして設定されたクラ スのstart関数とend関数を呼び出します gotoView.callback string|array ["callback.Background"] gotoView関数が終了した後にコールバック するクラスを指定できます 初期はlocal、dev、stg、prd、allと、区切られています。 これらの区切りは任意の環境名なので、利⽤環境に合わせて変更、もしくは追加が可能です。 複数のプラットフォームでゲームをリリースする際の 個別環境変数として、管理・書き出しが可能です。 但し、allに設定した変数はどの環境でも使える共通変数となります。 allの固定設定
- 24. 書き出しのコマンド npm run build -- --env=prd --env=***に、書き出したい環境の値を設定する
- 25. src/config/routing.json設定 ルーティング名で設定できる値は 英⼩⽂字と数字([a-z0-9])、スラッシュ(/)、ハイフン(-)、アンダースコア(_)です。 スラッシュ、ハイフン、アンダースコアをキーに分割しCamelCaseに変換してViewクラスにアクセスします。 例) 下記のサンプルの場合 URLは、https://example.com/quest/listで 関数ではthis.gotoView(“quest/list”)でアクセスが可能になります。 { "quest/list": { "private" : false, "requests": [] } }
- 26. routing.jsonの2階層のプロパティ設定 名前 型 初期値 詳細 private boolean false SPAモードで、直接のアクセスを制御をし たい時に利⽤します。trueに設定し直接ア クセスすると、redirectで設定したViewが 読み込まれます redirect string empty privateがtrueの時、ここで設定したページ を読み込みます。設定がない場合は TopViewが読み込まれます。 requests (次のページへ) array null Viewにアクセスする前に、指定したURLに リクエストを送信します。受け取った情報 は、nameをキーにnext2d.fw.responseに格 納されます
- 27. requests配列のObject設定 名前 型 初期値 詳細 type string content json、content、image、customの固定値が利⽤可能です path string empty {{***}}で囲むと、config.jsonの変数を取得できます。 例）{{ api.endPoint }}path/to/api name string empty nameを設定すると、設定した値をキーとして取得したデータを next2d.fw.responseに格納します。 cache boolean false nameで設定した値をキーにして、取得したデータをキャッシュします。 callback string|array null リクエスト完了後にコールバックするクラスを指定することができます。指定 したクラスのコントラクターの第⼀引数に取得した値が設定されます。model ディレクトリ直下のクラスが対象となります。 class string empty リクエストを実⾏するクラスを指定することができます。modelディレクトリ直 下のクラスが対象となり、DirName.ClassNameで設定できます (typeがcustomのときのみ呼び出されます。） access string empty リクエストを実⾏する関数へのアクセスを指定できます。publicあるいはstatic を指定することができます。 (typeがcustomのときのみ呼び出されます） method string empty リクエストを実⾏する関数を指定することができます。 (typeがcustomのときのみ起動します）
- 28. requests配列の役割 画⾯遷移前のリクエスト処理 レスポンス格納 画⾯表⽰前に外部APIやコンテンツを取得し、ResponceMapに格納します。 ⑨のbind関数で利⽤する事を想定しています。
- 29. リクエスト後のcallback
- 31. routing.jsonの設定例 { "home": { "requests": [ { "type": "json", "class": "{{ api.endPoint }}api/top.json", "name": "TopText", "callback": ["callback.Sample"] } ] } } src/model/callbackにSample.jsっというクラスを作成した場合 下記のようにアクセスが可能です。
- 32. Classの記述例 export class Sample extends next2d.fw.Model { constructor (response) { this.response = response; } execute () { /** 処理をかく**/ } }
- 33. リクエストのカスタマイズ
- 34. カスタム設定の解説 カスタム機能を利⽤する事で、Auth認証や外部APIとの複雑な連携を⾏う事ができます。 名前 型 初期値 詳細 type string content json、content、image、customの固定値が利⽤可能です class string empty リクエストを実⾏するクラスを指定することができます。 modelディレクトリ直下のクラスが対象となり、 DirName.ClassNameで設定できます (typeがcustomのときのみ呼び出されます。） access string empty リクエストを実⾏する関数へのアクセスを指定できます。 publicあるいはstaticを指定することができます。 (typeがcustomのときのみ呼び出されます） method string empty リクエストを実⾏する関数を指定することができます。 (typeがcustomのときのみ起動します）
- 35. routing.json設定例 { "home": { "requests": [ { "type": "custom", "class": "api.HomeText", "access": "static", "method": "get" } ] } }
- 36. classの設定例 export class HomeText extends next2d.fw.Model { static get () { return fetch(`${next2d.fw.config.api.endPoint}api/home.json`) .then((responce) => { return responce.json() }) .catch((error) => { console.error(error) }); } } src/model/apiにHomeText.jsを作成します。 src/modelに設置したクラスはmodelディレクトリ階層以下は分解され.で連結されて next2d.fw.packagesに登録されます。 src/model/api/HomeText.jsにアクセスするにはapi.HomeTextとする事でアクセス可能です。
- 37. cacheの特性
- 40. 画⾯遷移
- 42. QueryString Next2D FrameworkではQueryStringが利⽤できます。 QueryStringの値はnext2d.fw.queryに格納され、親クラスを継承している場合はthis.queryから取得可能です。 [URLでの遷移] https://example.com/quest/list?questId=10&areaName=sample [関数での遷移] this.app.gotoView("quest/list?questId=10&areaName=sample"); Queryの取得 性質上、全ての値をStringとして格納するので、numberなどはキャストして利⽤するのがお勧めです。 例) const questId = this.query.get("questId") | 0;
- 44. 表⽰画⾯のフロー
- 47. View メインコンテキストにアタッチされるコンテナの 役割を担うのがViewクラスです。 その為、記述は⾄ってシンプルで、routingで設定 した値のキャメルケースでファイルを作成し、 next2d.fw.Viewを継承するのが基本のスタイルで す。 特殊な要件がない限り、Viewでロジックを組む事 はありません export class TopView extends next2d.fw.View { constructor () { super(); } }
- 48. ViewModel 表⽰の開始時に、bind関数がコールされ、画⾯遷 移する前にunbind関数がコールされます。 Viewに任意のDisplayObjectをbindするのが、 ViewModelの役割です。 今回のサンプルアプリは、ドメインロジックなど はsrc/modelで管理し、UIはsrc/componentで管 理するサンプルとなります。 export class TopViewModel extends next2d.fw.ViewModel { constructor (view) { super(view); } unbind (view) { /** 処理をかく**/ } bind (view) { this .factory() .then(() => { /** 処理をかく **/ }); } }
- 52. config.json設定例 { "all": { "gotoView": { "callback": ["callback.Background"] } } }
- 53. Classの記述例 export class Background extends next2d.fw.Model { constructor () { /** 処理をかく**/ } execute () { /** 処理をかく**/ } } gotoViewのcallbackは、constructorへは何もあ値を渡しません。
- 54. フローチャート解説
- 56. NoCode Toolとの連携
- 59. routing.jsonの設定例 { "top": { "requests": [ { "type": "content", "class": "{{ content.endPoint }}content/sample.json", "name": "MainContente", "cache": true } ] } } typeにcontentを設定する事で、呼び出すことができます。 静的なファイルなので、他の画⾯でも利⽤するのであれば、cacheをtrueにする事で重複取得を防げます。
- 60. classの設定例 export class TopContent extends next2d.fw.Content { get contentName () { return "MainContent"; } get namespace () { return "TopContent"; } } contentNameにroutingのnameに設定した値をセットします。 NamespcaseにNoCode Toolで設定したシンボル名をセットします。 1シンボルに1クラスが必要となります。
- 61. Unit Test
- 63. まとめ • ViewとViewModelがあれば画⾯の構築ができる • 設定ファイルで変数管理や、簡易的なAPIやコンテンツは動的に取得可能 • ドメインロジックはsrc/model配下で管理 • UIはsrc/component配下で管理 • NoCode Toolと連動するとエンジニアとアニメーターで役割分担が可能 • 単体テストは__tests__/model/配下に追加する
- 64. Q&A