CreateJSではステージに表示オブジェクトを追加することでコンテンツを作っていきます。例えば、舞台の演劇を想像してみましょう。ステージに役者が登場して演目が披露されますが、CreateJSのステージと役者の関係も同じです。ステージとはその名の通りcreatejs.Stageが、役者は表示オブジェクトcreatejs.DisplayObjectになります。

表示オブジェクトcreatejs.DisplayObjectをプログラムで直接使うことはほとんどありません。なぜなら、表示オブジェクトは実態を持っていることがほとんどで、シェイプ・画像・テキストの3種類で使うことが多いからです。まずはシェイプを例に表示オブジェクトについて紹介します。

まずは役者を用意します。

var object = new createjs.Shape();
object.graphics.beginFill("DarkRed");
object.graphics.drawCircle(0, 0, 100);

このままでは役者はステージに登壇していないので、表示されません。表示させるためにはステージに登壇させる必要があります。プログラムではaddChild()という命令を使います。

stage.addChild(object);

配置座標

ステージ上の役者の配置場所を指示しなければ、ステージの原点位置にしかいません。CreateJSにはX軸(水平)とY軸(垂直)の二軸があります。.xと.yという形でドットをつなげて配置座標を指定します。

object.x = 100;
object.y = 100;

角度

.rotationで角度を指定することができます。角度は0度〜360度で一週を示します。

object.rotation = 45; // 45度傾ける

透明度

.alphaで透明度を設定することができます。1.0が通常の状態(100%見える状態)で、0.0が完全に透明な状態(0%見える状態)です。

object.alpha = 0.5; // 50%の透明度に設定する

表示/非表示

.visibleで可視性を設定することができます。trueが通常の状態(表示状態)で、falseが非表示になった状態です。

object.visible = false; // 非表示にする

スケール

.scaleXや.scaleYで大きさを相対的に設定することができます。1.0が等倍で、倍率を数値で指定します。

object.scaleX = 0.5; // 50%の幅に設定する
object.scaleY = 2.0; // 200%の高さに設定する

次の記事へ