学ぶインタラクションデザインCreateJSでES2015のclassを利用する(継承)目次JavaScriptではオブジェクト指向としてのクラスが利用できます。クラスを利用すると、CreateJSを構造的に設計しやすくなります。カーゲームを想像してみましょう。カーゲームには様々な表示物が登場します。自機、敵機、コース、背景など。これらを一つのJavaScriptファイルで管理するのは難しいと言わざるを得ません。一つのソースコードに異なる表示物のプロパティーや変数が乱立し、管理が大変になるでしょう。クラスだと、自機を一つのクラス、敵機を一つのクラス・・・と分離することができます。すれば、自機を開発しているときは、他のオブジェクトのことを気にせず安心して開発に取り掛かれます。2015(略称:ES2015、ES6)仕様のclassキーワードを利用します。クラスの仕様の説明は割愛しますので、知らない人は別途参考資料を読んでください。メッシュのサブクラスを作るクラスの手軽な使いみちとして、シェイプのサブクラスを作ってみましょう。次のサンプルでは適当なシェイプを表示したものです。サンプルを再生するサンプルのソースコードを確認するこのサンプルでは、自作のMyStarクラスのメッシュをcreatejs.Shapeクラスのサブクラスとして作成しています。createjs.Shapeと記述します。すれば、自作のMyStarクラスはcreatejs.Shapeを継承したクラスとして定義されます。シェイプを継承した自作の星のクラスです。{}コンストラクターconstructor()では、適当な図形を描きます。このクラスはシェイプクラスを継承しているので、this.graphicsというようにthisで参照するのが重要です。super()メソッドはconstructor()メソッド内で必ず実行する必要があります。MyStar()と記述するだけで図形を表示できるようになります。ステージに配置するstage.addChild(myStar);サンプルのソースコードを見ると、init()関数の中身がシンプルになり、読みやすくなりましたね。Stageオブジェクトを作成。表示リストのルートになります。stage.update();}コンテナーのサブクラスを作るクラスのよくある利用方法として、CreateJSのコンテナーにもクラスを使ってみましょう。次のサンプルは複数のシェイプを一つのコンテナーにまとめたものです。createjs.Containerと記述します。すると、このクラスはcreatejs.Containerクラスを継承したものとして定義されます。コンテナーを継承したサブクラスです。{}コンテナー化したい内容をコンストラクターへ記述していきます。このサンプルだと、円と星を作成してグループに追加しています。追加するときは、createjs.Containerクラスを継承しているので、this.addChild()メソッドを実行します。addChild()メソッドで追加する場所はthisであることに注目ください。コンテナーを継承したサブクラスです。MyContainer()と呼び出すだけです。ステージに自作のコンテナーを追加するscene.addChild(myContainer);これもinit()関数の中身がシンプルになり、読みやすくなりましたね。Stageオブジェクトを作成。表示リストのルートになります。stage.update();}この解説はCreateJSでES2015のclassを利用する(メソッド)に続きます。平成31年1月8日現在最新のリビジョン100を元に執筆しています。作例をみてCreateJSで実現可能な表現のインスピレーションを得ましょう。4つのライブラリからなるJavaScriptフレームワークです。コミュニティーわからないことがあれば、フォーラムで質問してみましょう。CCAnimateとはCreateJSとの連携(1)CreateJSとの連携(2)タイムラインスプライトシート。