CreateJSの勉強をはじめました①

前置き

canvasタグ案件に関わっていたこともあり、現在はフロントエンドエンジニアとして、Angular案件に関わることが多いです。
ふとCreateJSを使ってみようと思いました。おそらくp5.jsと同じようなことは大抵できるんだろうと思います。
まずは公式に沿って勉強をしてみます。また、自分用メモみたいなものだけど、初歩の初歩から記述していこうと思います。

導入

まず最初に公式サイトにアクセスして、インストール手順通りにhtmlにcreateJSを追加します。

test.html

<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>

とっても簡単！　コピーアンドペーストでインストールは完了です！

次にbody内にcanvasを用意。

test.html

<canvas id="canvas_01" width="800" height="600"></canvas>

createJSのGetting Startedでは、bodyタグに直接onloadされていましたが、ここはjQueryを使用したいので、createJSの上にjQueryを設置し、下にtest.jsを設置。

test.html

<script src="js/jquery-3.4.1.min.js"></script>
<script src="https://code.createjs.com/1.0.0/createjs.min.js"></script>
<script src="js/test.js"></script>

test.jsの中に以下のコードを記述。

test.js

$(window).on("load", function() {
    console.log("code here");
});

無事にchromeの開発モードで確認。

この段階ではまだ画面は真っ白。
何もありません。

stageの作成

次にstageを作成する。()の中には上で用意したcanvasのidを記述します。
このstageという概念は、createJSではじめて聞く概念ですが、公式によると全ての表示オブジェクトを保持する視覚的コンテナとのことです。

test.js

$(window).on("load", function() {
    var stage = new createjs.Stage("canvas_01");
    console.log(stage);
});

console.logで見た中身はこのようになっていて、確かにあらゆる情報が格納されるよう。

shapeの作成

図形を作成します。
公式通りに記述しますが、この時点では画面はまだ真っ白です。
また、console.logで中身を見てみます。

test.js

var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
console.log(circle);

graphicsの中に記述した内容の多くが含まれている。
beginFillは皆さんご存知かもですが、塗りつぶす色です。

またaddChild()をしたのでparentの中に親であるstageの情報が含まれる。

描画をするために、updateを行う。

test.js

stage.update();
console.log(circle);

すると以下のように、xが100,yが100の位置に円が描画されます。
ここでの距離は、左上から考えての距離になります。

ここで、色々な改造を追加してみます。
まずはstageを黒くしたいが、どうすればできるのかわからなかったので、長方形を作成してみました。widthとheightをcanvasと揃えたかったので、stage.canvas.widthとstage.canvas.heightを指定。色指定はRGBで行いたかったのでbeginFill("0, 0, 0")を設定。

test.js

var background = new createjs.Shape();
background.graphics.beginFill("0, 0, 0").rect(0, 0, stage.canvas.width, stage.canvas.height);
stage.addChild(background);
stage.update();

そこに先ほどの円を表示させたい。
x、yの代入はせずにひとまとめに記述を行う。

test.js

var stage = new createjs.Stage("canvas_01");

var background = new createjs.Shape();
background.graphics.beginFill("0, 0, 0").rect(0, 0, stage.canvas.width, stage.canvas.height);
stage.addChild(background);
var circle = new createjs.Shape();
circle.graphics.beginFill("DeepSkyBlue").drawCircle(100, 100, 50);
stage.addChild(circle);

stage.update();
console.log(stage);

黒い背景の中に円が現れました。

console.logの中身を見ると、childrenの中に追加した順番で長方形と円が格納されます。

今回はここまでです！

参考URL

https://createjs.com/
https://ics.media/
https://api.jquery.com/
https://qiita.com/AkihikoIkeda/items/9dda2dda70b77c8eeca4