Recommended
More Related Content
What's hot
What's hot (19)
Similar to Next2D
Similar to Next2D (20)
Next2D
- 2. ⾃⼰紹介 • Toshiyuki Ienaga • Webの制作会社でプログラ マー/マネージャーしてます。 インフラ > バックエンド > フロントエンド > アプリ @ienagatoshiyuki @ienaga
- 4. Next2Dとは Next2D（ネクストツーディー）は、JavaScriptで書かれた 2Dレンダリングエンジン「Next2D Player」、Model- View-ViewModel（MVVM）アーキテクチャを採⽤した 「Next2D Framework」、Webブラウザ上で動作する オーサリングツール「Next2D NoCode Tool」など、開発 者の⽣産性を上げることを⽬的としたツール・ライブラリ です。 Next2D Player Next2D Framework Next2D NoCode Tool
- 5. Next2D Player JavaScript FlashPlayer「swf2js」から派⽣ したプロジェクトで、2D最速エンジンを提 供することを⽬的としています。 WebGL 、 WebGL2を完全にサポートしており、開発 者は、ブラウザやデバイスの互換性対処を 気にすることなくリッチでインタラクティ ブなWebコンテンツ、およびゲームを作成 することができます。
- 6. Next2D Framework 従来のCanvas/WebGLアプリケー ションでは困難だったURLによる Single Page Application（SPA）で のシーン管理を可能にしました。ま た、開発パターンを固定化すること で可読性・共有性をシンプルにし、 効率的な開発を⾏えるNext2D専⽤ フレームワークです。
- 7. Next2D NoCode Tool ノーコード開発を主体としたWebブ ラウザ上で動作するオーサリング ツール。 イメージしたアニメーショ ンを直感的に作成することができ、 書き出したデータはWebにアップ ロードすることで簡単に公開するこ とができます。 https://tool.next2d.app
- 10. Framework Quick Start npx create-next2d-app app-name cd app-name npm start
- 11. Chart Flow
- 13. 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の設定
- 14. src/config/config.json設定 { "local": { "api": { "endPoint": "/" }, "content": { "endPoint": "/" } }, "prd": { "api": { "endPoint": "/" }, "content": { "endPoint": "/" } }, "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と、区切られており local、dev、stg、prdは任意の環境名なので、環境に合わせて変更、もしくは追加が可能です。 国内のメジャーなプラットフォームであればgreeやmobageなどがありますが こういった、複数のプラットフォームでゲームをリリースする際などの 個別の環境変数として書き出しの出しわけが可能です。 allに設定した変数はどの環境でも使える共有変数となります。 allの固定設定
- 16. Chart Flow
- 18. 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に格 納されます
- 19. 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のときのみ起動します）
- 21. シーン遷移(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; const areaName = this.query.get("areaName");
- 23. NoCode Toolの連携① • routing.jsonの設定例 名前 値 説明 type content contentを指定します。 path {{ content.endPoint }}content/sample.json NoCode Toolで書き出したJSONデータが保管されているURLを追記します。 name MainContent cacheを利⽤する、もしくは、レスポンスデータを任意のクラスで取得し たいケースの時は設定してください。 cache true jsonファイルのアニメーションデータは静的なデータなので、⼆度⽬から はキャッシュから再利⽤する事を推奨しています。但し、シーン数やアニ メーションの数が多い場合はメモリリークする可能性がありますので、使 い過ぎはお気をつけください。再利⽤性の⾼いものはキャッシュし、状況 などで変化するようなアニメーションはfalseに設定するのがいいかと思い ます。
- 24. NoCode Toolの連携② export class TopContent extends next2d.fw.Content { get contentName () { return "MainContent"; } get namespace () { return "TopContent"; } } get namespaceとget contentNameのgetter設定は必須となります。 contentNameでどのJSONデータかを判別させる為、routing.jsonのnameと⼀致させる必要があります。 namespaceで設定した⽂字列は、NoCode Toolで設定したシンボル名と⼀致させる必要があります。
- 25. NoCode Toolの連携③ Controller AreaのLibraryタブを開き 新しいMovieClipを追加します。 追加した、MovieClipのSymbol部分をダブルクリックして get namespaceで設定した⽂字列と同じ⽂字を追記します。 アニメーション単体で管理するのもいいですが シーン単位でアニメーションを管理した場合などに便利です。 また、クリエイターとプログラマーがシンボル名を共有していれば お互いに⼲渉する事なく作業を進められ、結合まで進められます。
- 27. Chart Flow
- 29. View メインコンテキストにアタッチされるコンテナの 役割を担うのがViewクラスの役割です。 その為、記述は⾄ってシンプルで、routingで設定 した値のキャメルケースでファイルを作成し、 next2d.fw.Viewを継承するのが基本のスタイルで す。特殊な⽤件がない限り、Viewでロジックを組 む事はありません export class TopView extends next2d.fw.View { constructor () { super(); } }
- 30. 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) { /** 処理をかく **/ } }
- 31. bindの記述例 (Promise) ⾮同期に表⽰オブジェクトを追加していく Frameworkには読み込み演出もあるため、ユー ザーの多くは待機ストレスなく画⾯遷移を⾏える と思います。 また、PC/スマホの処理可能なタイミングでプロ グラムを実⾏する事で、端末にかかる負担を軽減 できるのではないかと思います。 bind (view) { return new Promise((resolve) => { // 処理を書く resolve(value); }) .then((value) => { return new Promise((resolve) => { // 処理を書く resolve(value); } }) .then((value) => { return new Promise((resolve) => { // 処理を書く resolve(value); } }); }
- 34. Chart Flow
- 35. callbackの記述例 next2d.fw.Modelを継承する事で、Frameworkが 所持してる各種のgetterにアクセスする事が可能 になります。 constructorにはrouting.jsonのrequestsで取得し たレスポンスデータがセットされ、その後、 execute関数がコールされます 例) src/model/callbackにSample.jsを作成 export class Sample extends next2d.fw.Model { constructor (response) { this.response = response; } execute () { /** 処理をかく**/ } }
- 36. Chart Flow ⼤きく2つのフロー機能があり ⼀つは、シーン遷移とリクエストのフロー もう⼀つは、View-ViewModelのフロー View-ViewModel シーン遷移とリクエスト
- 37. ご清聴ありがとうご ざいました。