Skip to content

Commit 6230ac8

Browse files
ics-ikedaics-ikeda
committed
表示リストの解説を追加
1 parent 0c0ee2e commit 6230ac8

3 files changed

Lines changed: 195 additions & 10 deletions

File tree

‎docs/nest.md‎

Lines changed: 146 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,176 @@
11
# CreateJS の表示オブジェクトの親子構造
22

3-
シェイプやテキスト、ビットマップなどの表示オブジェクトは、親子構造を使うことでまとめて管理することができます。
3+
シェイプやテキスト、ビットマップなどの表示オブジェクトは、親子の入れ子関係をつくり、その**階層全体を「表示リスト」（ディスプレイ・リスト）としてまとめられます**。表示リストはアニメーションやインタラクションを扱うのに便利な仕組みで、多くのプログラム言語で採用されています。
44

55
親子関係を構築すると、親の位置、角度、スケール、カラー、ブレンドなどの設定が、子孫にも継承されるようになります。表示オブジェクトは親のプロパティーによって、子の表示も影響を受けるので、グループ化して表示の制御を行いたい場合に便利です。
66

7-
`createjs.Container`クラスを使うことで表示オブジェクトの親子構造を作ることができます。`createjs.Container`のインスタンスの中に、別の`createjs.Container`インスタンスを追加することもできるので、何重にもネストすることが可能です。
87

9-
`createjs.Container`（およびそのサブクラス）が子の表示オブジェクトを管理する仕組みをディスプレイリストと呼ばれます。
8+
## 使い方
9+
10+
`createjs.Container`クラスは次のようにして利用します。`createjs.Container`インスタンスの`addChild()`メソッドで、任意の表示オブジェクトを追加できます。
1011

1112

1213
書式
14+
15+
```js
16+
var コンテナ = new createjs.Container();
17+
stage.addChild(コンテナ);
18+
コンテナ.addChild(表示オブジェクト);
19+
```
20+
21+
このクラスを使うことで表示リストを作れるのですが、上記のコードの場合、表示リストは次の構造になります。
22+
23+
```
24+
□ stage
25+
└□ コンテナ
26+
└□ 表示オブジェクト
27+
```
28+
29+
## サンプルで表示リストを理解しよう1 (シンプルな移動)
30+
31+
赤と青の2つの円を、右方向に移動させるサンプルを試してみましょう。同時に2つの円を動かしたい場合、赤と青のそれぞれの円の`x`座標を変更する必要がありました。しかし、`createjs.Container`を使うことで、親の座標を変更することで、同時に赤と青の2つの円を、右方向に移動させています。
32+
33+
34+
![](../imgs/container_simple.html.png)
35+
36+
- [サンプルを再生する](https://ics-creative.github.io/tutorial-createjs/samples/container_simple.html)
37+
- [サンプルのソースコードを確認する](../samples/container_simple.html)
38+
39+
40+
このサンプルの場合、表示リストは次の構造になります。
41+
42+
```
43+
□ stage
44+
└□ container
45+
├□ shape1 (赤い円)
46+
└□ shape2 (青い円)
47+
```
48+
49+
50+
コードを読み解きながらサンプルを理解していきましょう。まずは、親となる入れ物(`container`インスタンス)を用意します。
51+
1352
```js
53+
// Stageの作成
54+
var stage = new createjs.Stage("myCanvas");
55+
56+
// コンテナー(グループの親)を作成
1457
var container = new createjs.Container();
15-
container.addChild(表示オブジェクト);
16-
stage.addChild(container);
58+
container.x = 0;
59+
container.y = 0;
60+
stage.addChild(container); // 画面に追加
61+
```
62+
63+
64+
そこに2個の`createjs.Shape`オブジェクトを上下に配置するように`addChild()`メソッドを使って追加しています。２つの円を直接`stage`インスタンスに追加するのではなく、`container`インスタンスに追加していることがポイントです。
65+
66+
```js
67+
// 1つ目の円を作成
68+
var circle1 = new createjs.Shape();
69+
circle1.graphics.beginFill("DarkRed").drawCircle(0, 0, 50);
70+
circle1.y = 100;
71+
72+
// 2つ目の円を作成
73+
var circle2 = new createjs.Shape();
74+
circle2.graphics.beginFill("Blue").drawCircle(0, 0, 50);
75+
circle2.y = 300;
76+
77+
// 2つの円を親に追加
78+
container.addChild(circle1);
79+
container.addChild(circle2);
80+
```
81+
82+
`tick()`関数では`container`インスタンスの`x`プロパティーのみ変化させます。そうすると、`container`インスタンス内に追加した`createjs.Shape`オブジェクトがまとめて右方向に移動することが確認できます。親となる`container`インスタンスだけしか制御していませんが、このように子供の表示オブジェクトも、まとめて移動制御ができるのです。
83+
84+
```js
85+
createjs.Ticker.addEventListener("tick", handleTick);
86+
function handleTick() {
87+
// 親だけを移動
88+
container.x += 1;
89+
if (container.x > 960) { // 画面端まで移動したら、元に戻す
90+
container.x = 0;
91+
}
92+
stage.update();
93+
}
1794
```
1895

19-
サンプルでは、親となる入れ物(`container`インスタンス)を用意して、そこに10個の`createjs.Shape`オブジェクトを円周上に配置するように`addChild()`メソッドを使って追加しています。`tick()`関数では`container`インスタンスしか`rotation`プロパティーを変化させていませんが、`container`インスタンス内に追加した`createjs.Shape`オブジェクトがまとめて移動しています。このように表示オブジェクトをネストさせることで、まとめてオブジェクトの移動や回転、拡縮の制御が容易にすることができます。
96+
## サンプルで表示リストを理解しよう2 (回転挙動)
2097

98+
`createjs.Container`でグループ化できるのは座標だけではありません。角度やスケールなど、表示に関するほとんどの属性を継承します。次のサンプルで角度に対して表示リストが適用されていることを確認していきたいと思います。複数のShapeオブジェクトが円周上を移動しています。
2199

22100
![](../imgs/container_nest.html.png)
23101

24102
- [サンプルを再生する](https://ics-creative.github.io/tutorial-createjs/samples/container_nest.html)
25103
- [サンプルのソースコードを確認する](../samples/container_nest.html)
26104

105+
サンプルのコードを読み解きながらサンプルを理解していきましょう。まずは、親となる入れ物(`container`インスタンス)を用意します。画面の中央に配置されるように、`x`と`y`座標のみを設定します。
27106

28-
複数のShapeオブジェクトが円周上を移動している
107+
```js
108+
// コンテナー(グループの親)を作成
109+
var container = new createjs.Container();
110+
container.x = 300;
111+
container.y = 300;
112+
stage.addChild(container); // 画面に追加
113+
```
29114

115+
次に親となる入れ物(`container`インスタンス)に、10個の`createjs.Shape`オブジェクト（子供）を`addChild()`メソッドを使って追加しています。円周上に配置するように、`for`文を利用しつつ、子供の座標は三角関数を使って計算しています。
30116

31-
※`createjs.Container`クラスの詳しい使い方は「[公式ドキュメント(英語)](http://createjs.com/docs/easeljs/classes/Container.html)」を確認ください。
117+
```js
118+
119+
// ループ分で10回
120+
for (var i = 0; i < 10; i++) {
121+
// 円を作成し
122+
var ball = new createjs.Shape();
123+
ball.graphics
124+
.beginFill("DarkRed")
125+
.drawCircle(0, 0, 50);
126+
// 円周上に配置
127+
ball.x = 200 * Math.sin(i * 360 / 10 * Math.PI / 180);
128+
ball.y = 200 * Math.cos(i * 360 / 10 * Math.PI / 180);
129+
// グループに追加
130+
container.addChild(ball);
131+
}
132+
```
133+
134+
この処理によって、表示リストは次の構造になります。
135+
136+
```
137+
□ stage
138+
└□ container
139+
├□ ball (0個目)
140+
├□ ball (1個目)
141+
├□ ball (2個目)
142+
├□ ball (3個目)
143+
├□ ball (4個目)
144+
├□ ball (5個目)
145+
├□ ball (6個目)
146+
├□ ball (7個目)
147+
├□ ball (8個目)
148+
└□ ball (9個目)
149+
```
32150

33-
[次の記事へ](displayobject_remove.md)
34151

152+
`tick()`関数では`container`インスタンスの`rotation`プロパティーのみを変化させます。`rotation`プロパティーしか制御していないにも関わらず、`container`インスタンス内に追加した`createjs.Shape`オブジェクトがまとめて移動します。
35153

154+
```js
155+
createjs.Ticker.addEventListener("tick", handleTick);
156+
function handleTick() {
157+
// 親だけを回転
158+
container.rotation += 1;
159+
stage.update();
160+
}
161+
```
162+
163+
このように表示リストにまとめることで、まとめてオブジェクトの移動や回転、拡縮の制御が容易にすることができます。
36164

165+
## 補足
166+
167+
- `addChild()`メソッドで後に追加されたものほど上に表示されます。子オブジェクトはインデックスで管理され、インデックス `0` が最背面のオブジェクトになります。
168+
- `createjs.Container`のインスタンスの中に、別の`createjs.Container`インスタンスを追加することもできるので、何重にもネストすることが可能です。
169+
- `createjs.Container`（およびそのサブクラス）が子の表示オブジェクトを管理する仕組みを表示リスト（ディスプレイ・リスト）と呼ばれます。
170+
- `createjs.Container`クラスの詳しい使い方は「[公式ドキュメント(英語)](http://createjs.com/docs/easeljs/classes/Container.html)」を確認ください。
171+
172+
[次の記事へ](displayobject_remove.md)
37173

38174
<article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
39175
<article-date-published>2015-11-22</article-date-published>
40-
<article-date-modified>2015-12-27</article-date-modified>
176+
<article-date-modified>2016-10-24</article-date-modified>

‎imgs/container_simple.png‎

29.1 KB
Loading

‎samples/container_simple.html‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<link rel="stylesheet" href="css/base.css">
6+
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
7+
<script>
8+
window.addEventListener("load", init);
9+
function init() {
10+
// Stageの作成
11+
var stage = new createjs.Stage("myCanvas");
12+
13+
// コンテナー(グループの親)を作成
14+
var container = new createjs.Container();
15+
container.x = 0;
16+
container.y = 0;
17+
stage.addChild(container); // 画面に追加
18+
19+
// 1つ目の円を作成
20+
var circle1 = new createjs.Shape();
21+
circle1.graphics.beginFill("DarkRed").drawCircle(0, 0, 50);
22+
circle1.y = 100;
23+
24+
// 2つ目の円を作成
25+
var circle2 = new createjs.Shape();
26+
circle2.graphics.beginFill("Blue").drawCircle(0, 0, 50);
27+
circle2.y = 300;
28+
29+
// 2つの円を親に追加
30+
container.addChild(circle1);
31+
container.addChild(circle2);
32+
33+
createjs.Ticker.addEventListener("tick", handleTick);
34+
function handleTick() {
35+
// 親だけを移動
36+
container.x += 1;
37+
if (container.x > 960) {　// 画面端まで移動したら、元に戻す
38+
container.x = 0;
39+
}
40+
stage.update();
41+
}
42+
}
43+
44+
</script>
45+
</head>
46+
<body>
47+
<canvas id="myCanvas" width="960" height="540"></canvas>
48+
</body>
49+
</html>

0 commit comments

Comments
 (0)