CreateJS実践講座

ShapeオブジェクトをStageオブジェクトに加える

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Shapeオブジェクトをつくって、Stageオブジェクトの子として加えます。
講師:
06:04

字幕

このレッスンでは EaselJS で Shape オブジェクトを作ります Shape オブジェクトには 絵を描くことができますが この段階ではまだ 何も描けませんので透明です ですから JavaScript の アラートで確認することになります そして Shape オブジェクトは Stage の上に Stage の子どもとしておきますので その点の確認も行います この html ドキュメントは EaselJS で Stage オブジェクトまで作っています まだ Shape オブジェクトは 作っていません 仕組みとしては まず 要素の onLoad 属性で 最初に呼び出す関数 初期化の関数を定義してありますので その中に canvas 要素を取り出して その canvas 要素を基にして Stage オブジェクトを作って 変数に入れています Stage オブジェクトも やはり 見えませんので alert で stage を渡して 実際に出来上がったかどうか 確認しています 現在の状態を確認しましょう 「ファイル」で 「ブラウザでプレビュー」します キャンバスの領域がここにあって JavaScript のアラートが出ています そして Stage を入れた 変数を渡しましたので そこには確かに Stage が 入っていると表示されています OK します Shape オブジェクトは 変数を入れますので 変数を宣言しておきます var myShape としましょう そして Stage を作った後に 作り方は Stage と基本的に同じです 変数は myShape new createjs.Shape () () の中には何も入れなくて結構です では 出来上がったかどうか 確認しましょう alert に渡す変数を 今 定めた myShape に変えました 「保存」して確認します 「ブラウザでプレビュー」です JavaScript のアラートが出ました 今度は「 Shape 」となっていますので Shape オブジェクトが 出来たことが確認できました ただ これだけでは 実際には Shape が使えません 変数に入ったままで 画面に登場しないのです 画面に登場させるためには Stage オブジェクトの 子どもにしなければなりません それをこの後 行いましょう Shape オブジェクトを Stage オブジェクトの 子どもとして加えるのですけれど その場合に 今 Stage オブジェクトの 子どもは何人なのか確認しておきましょう まだ Stage オブジェクトを 子どもに加える前です stage をコピーして ペーストして プロパティで調べられます numChidren です 子どもが何人かということなので これで Stage の 現在の子ども 当然0(ゼロ)のはずですけども それが確認できます また 「保存」を押して 「ブラウザでプレビュー」しましょう 「0」と確かに出てきました では 子どもを加えたいと思います Shape オブジェクトです Shape オブジェクトを Stage の子どもとして加えたいと思います メソッドは stage に対して呼び出します addChild 子どもとして加えてください まさにそのままです この中に加えて欲しいオブジェクト 今回は Shape 変数 myShape の中に入っている Shape オブジェクトを加えます すると Stage に子どもが加わった後 alert で確認していますから 子どもが増えているはずです では 確認しましょう 「ファイル」を「保存」して 「ブラウザでプレビュー」します 「1」と増えていますので 確かに Stage の子どもとして Shape オブジェクトが 加わったと確認できました 細かいことを1つ補っておきます JavaScript でオブジェクトを作る時は new の後にクラスを指定して () でオブジェクトを作ります これが JavaScript の原則で 勿論 CreateJS も同様なのですが CreateJS のクラスは必ず createjs. クラス名 という 指定の仕方をします 何故こうするかと言うと 例えばアニメーション描画の ライブラリを別の人が作った場合 Stage とか Shape というのは よく使われそうな単語なのです そういったものが もし 他のライブラリとぶつかってしまうと どちらかが使えなくなります それを避けるために そのライブラリの独特の名前― この場合は createjs ですけれど それをクラスの前に付ければ ぶつかるのを避けられます 「名前空間」というテクニックです そのやり方に従っていますので CreateJS のクラスを呼び出す時は 使う時は必ず 頭に createjs. を付けてください このレッスンでは Shape オブジェクトを作って Stage の子どもとして加えました Shape オブジェクトを作るのは new の後に createjs.Shape() です それを子どもに加えるのが stage に対してお願いする メソッド addChild () この () の中に 加えて欲しいオブジェクトを指定します これで Stage の上に Shape オブジェクトが出来ました

CreateJS実践講座

CreateJSは、これまでFlashでしかできなかったようなインタラクティブなコンテンツや多彩なアニメーションを作ることができるJavaScriptライブラリです。このコースではチャプターごとにJavaScriptコードのサンプルをひとつずつとりあげながら、その制作方法を一歩一歩段階的に解説します。

3時間26分 (37 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年07月07日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。