必要条件

この記事に必要な予備知識

必要な知識

以前のバージョンの Flash Professional

 

必要なアドビ製品

ユーザーレベル

すべて

Flash Professional Toolkit for CreateJS(以下「Toolkit」と表記)はFlash Proの拡張機能で、オープンソースのJSライブラリであるCreateJSスイートと組み合わせて使用するためのアニメーションアセットをパブリッシュできます。これにより、リッチでインタラクティブなエクスペリエンスをHTML5で実現できます。

Toolkitは変換用のツールではないという点に注意していただく必要があります。既存のプロジェクトを、1回のボタン操作でHTML5に変換することを想定したツールではありません。これまでのFlashスキルを活用しながら、柔軟性と生産性を備えたワークフローを実現してHTML5で新規プロジェクトを作成することを目的に設計されています。

ここでは、単純なインタラクティブゲームを作成することで、ToolkitとCreateJSの総合的なクイックツアーにご案内します。

設定

Flash Proを起動し、サンプルのFLAを開きます。すべてが正しくインストールされていれば、「Window(ウィンドウ)/Other Panels(その他のパネル)」メニューから「Toolkit for CreateJS」パネルを開くことができます。表示されない場合は、上記のリンクからToolkitをダウンロードし、ただちにインストールしてください。

クイックヒント:Toolkitでは、パネルに加えて「Commands(コマンド)」メニューに「Publish for CreateJS(CreateJS用にパブリッシュ)」もインストールされます。このコマンドのキーボードショートカットを設定しておけば、「Flash/Keyboard Shortcuts(キーボードショートカット)」(OSX)または「Edit(編集)/Keyboard Shortcuts(キーボードショートカット)」(Windows)を使用して、作業結果を簡単にテストできます。

次に、デモファイルの中のPlatypusGame.flaを開きます。このファイルについては後で詳しく説明しますが、今はテストムービーを実行して、SWF出力を確認してみましょう。恐ろしいカモノハシが風船を使って空中攻撃を開始します。悪夢にも似たおぞましい光景です。

恐怖から立ち直ったところで、このFLAをCreateJSにパブリッシュしてみましょう。パネルを開き(再び「Windows/Other(その他)/Toolkit for CreateJS」を選択)、「Publish(パブリッシュ)」ボタンを押します。ボタンに「Wait(待機)」と表示され、しばらくするとデフォルトのブラウザーが開いて出力が表示されます。一見、SWFと変わりませんが、HTMLとJavaScriptが使用されています。なかなか秀逸です。

CreateJSのオーサリング

ここでFLAについて簡単に確認してみましょう。Toolkitを使用したコンテンツのオーサリングに関するベストプラクティスもいくつか紹介します。

メインのタイムラインには、スコアテキストフィールド、カモノハシ、そして背景に対応する3つのレイヤーがあることが分かります。

テキスト

scoreレイヤーには、scoreTxtというインスタンス名の1つのテキストフィールドがあります。インスタンス名は出力にも取り込まれるため、ちょうどActionScript 3のようにエレメントを参照するのに使用できます。ここではscoreTxtへの参照を使用して、JavaScriptでテキストを動的に更新してみます。

基本的には、テキストの表示にはHTMLを使用することをお勧めします。EaselJSとHTML5のキャンバスエレメント内のテキストに対するサポートは、かなり制限されているためです。この例では、単純なテキストを1行表示するだけなので、このままの状態にしておきます。

クイックヒント:テキストのフォントは、CSSと同じルールに従います。フォントは、パブリッシュ済みの出力には埋め込まれません。Web対応のフォントを使用するか、CSS用のWebフォントを使用してプロジェクトでフォントを使用できるようにする必要があります。

静的コンテンツ

背景をダブルクリックして、編集します。これは、3つのレイヤーに静的コンテンツのある、比較的単純なシンボルです。skyのレイヤーには、単純なベクターグラデーションのシェイプがあります。cliffのレイヤーにはビットマップイメージがあります。これにはベクターも使用できますが、画像はかなり複雑であり、ベクターグラフィックとして再生するのが難しいテクスチャも含まれています。最後に、cloudはすべて、1つの雲のシンボルを変形し、アルファ値を調整したインスタンスになっています。

ラベル、サウンド、およびタイムラインのスクリプト

ここでplatypus(カモノハシ)を見てみましょう。このシンボルには、アニメーションコンテンツが含まれています。すべてを確認することはしませんが、重要なエレメントをいくつか取り上げます。

最初のレイヤーには、idle、pop、fallという3つのラベルがあります。ActionScriptと同じように、これらのラベルを使用するとコードで記述されたアニメーション中の特定のフレームに移動することができます。また、EaselJSのフレーム番号は0から開始し、Flashは1から開始します(したがって、EaselJSのフレーム番号は必ず、Flash Proで表示される番号より1小さくなります)。以上のような理由から、最大限の汎用性を得るために、番号ではなくフレームラベルを使用することをお勧めします。

このレイヤーでは、フレーム60に風船が破裂したときに鳴るサウンドと単純なフレームスクリプトも組み込まれています。フレーム60のコードを見ると、/* jsで始まるコメントブロックがあるのが分かります。このブロック内のすべてのJavaScriptコードは、生成されるCreateJSタイムラインに挿入され、これ以外のコードはすべて無視されます。つまり、ActionScriptコードとJavaScriptコードを同じFLA内で使用できるということです。ToolkitからパブリッシュするコードではActionScriptが無視され、Flash Playerでは/* jsから始まるコメントブロック内にあるものすべてが無視されます。またJavaScriptコードは暗黙のスコープに対応していないため、ActionScriptでは単純にgotoAndPlay(10)と記述できる一方、JavaScriptでスコープを指定する場合はthis.gotoAndPlay(9)を使用する必要があることにも注意してください(フレーム番号は1小さくなります)。

Flash ProでJavaScriptコードを多用することは推奨しません。フレーム60および72のようにタイムラインを制御するコード、タイムラインで行われていることのフィードバックを戻すコード(例えば、フレーム65のように、ゲームにpopアニメーションの完了を知らせる関数を呼び出す)だけに限定するようにしてください。

アニメーション

2つ目のレイヤーには、カモノハシのムービークリップインスタンスを前後に動かすトゥイーンアニメーションがあります。Toolkitではクラシックトゥイーンしかサポートされず、一部制限が適用されます。特にモーショントゥイーンを伴うレイヤーには、全期間にわたってシンボルインスタンスを1つしか含めることができません。pop and fallのレイヤーが分けられているのはこのためです(シンボルがPlatypusIdleからPlatypusPopに変わります)。

最後のレイヤーには、風船が爆発して落ちるアニメーションに対応するGraphicインスタンスがあります。Toolkitでは、Graphicシンボルインスタンスが完全にサポートされます。

最初のフレームに戻って、idleレイヤーのカモノハシをダブルクリックします。このアニメーションは、Toolkitを使用したキャラクタアニメーションへの理想的なアプローチを示しています。体の各部分は、従来のトゥイーンを適用した別々のシンボルインスタンスになっています。これにより、フレームごとのアニメーションに比べ、パブリッシュ時間が大幅に短縮され、ファイルサイズも小さくなります。

なお、すべてのレイヤーに名前を付けておくと、パブリッシュ済みのJavaScriptがはるかに読みやすくなります。

クイックヒント:コンテンツの作成時に、ベクターグラフィックを使用するかビットマップを使用するかを決定する必要があります。ベクターアニメーションは通常、ファイルサイズが小さく、回転、スケール、ピクセル全体からの切り抜きを行うときに多少きれいにレンダリングされますが、レンダリングに大量のリソースを消費します(特にモバイル環境の場合)。静的(非アニメーション)コンテンツにはビットマップキャッシングを効果的に使用することにより、双方の利点を最大限に利用することができます。

CreateJS出力

FLAの説明の次は、CreateJSにパブリッシュしたときに何が生成されたかを確認します。出力ディレクトリ(デフォルトではFLAと同じフォルダー)を開くと、3つのディレクトリと2つのファイルが作成されているのが確認できます。

imagesとsounds

プロジェクトで使用する画像およびサウンドは、ここに書き出されます。書き出せるサウンドには制限がある点に注意してください。詳しくは、リリースノートを参照してください。

クイックヒント:FLAで出力画像やサウンドを頻繁に変更する場合は、これらのフォルダーに変更前のメディアが残った状態になります。最新のコピーだけをとっておく場合は、パブリッシュ前にこれらのフォルダーを削除します。

libs

このフォルダーには、パブリッシュしたコンテンツの実行に必要な最小限のCreateJSライブラリが格納されています。パブリッシュ時には、必要なライブラリのみインクルードされます(例えば、サウンドがない場合、SoundJSはインクルードされません)。

クイックヒント:パネルで「Hosted Libs(ホスト管理されたライブラリ)」オプションをオンにした場合は、コンテンツデリバリネットワーク(CDN)からライブラリがロードされます。これにより、同じバージョンのライブラリを使用するサイト間でキャッシュが利用できるようになります。

PlatypusGame.html

これは、ブラウザーで出力をプレビューできるようにToolkitによって生成されるシンプルなHTMLファイルです。ソースを見れば、きわめて簡単明瞭な構造になっていることがわかります。必要なライブラリを読み込み、PreloadJSを使用してメディアをロードします。そして、Canvas要素を指したEaselJSステージを設定し、そのステージにルートタイムラインのインスタンス(PlatypusGame)を追加しています。

最後に、Tickerにフレームレートを設定し、リスナーとしてステージを追加しています。これにより、アニメーション全体のハートビート(enterFrameに類似)が確立され、1秒間に20回ステージが更新されて再描画されます。

PlatypusGame.js

ここに出力の実質的な内容が存在します。このファイルについては深く掘り下げることはしませんが、簡単に見ただけでもいくつかのことが目に留まります。

まず、生成コードを人間が解読できるようにするために、多大な労力が費やされている点に注目してください。容易には変更できないブラックボックスの書き出しではありません。開発の経験があれば、このファイルに無理なく目を通し、必要に応じて手動で容易に編集できるはずです。

次に、Flash Proのライブラリ内に対応する、外部に非依存でインスタンス化可能ないくつかのJavaScriptクラスで構成されている点に注目してください。これにより、newキーワードを使用して、ライブラリ内のシンボルのインスタンスを作成して、表示リストに追加できるようになります。この点は、ActionScript 3での作業方法によく似ています。例えば、次のようにします。

var myPlatypus = new Platypus(); stage.addChild(myPlatypus);

クイックヒント:Toolkitは、ActionScript 3のクラス名として指定されている名前を使用して書き出しを行います(名前が指定されていない場合は、シンボル名に基づいた名前を使用します)。同様に、ドキュメントクラス名が指定されていればその名前を使用し、指定されていなければFLA名になります。

SWFへのパブリッシュと同じように、パブリッシュしたライブラリには、ドキュメントステージから参照されるシンボル、またはクラス名が指定されたシンボルのみ含まれます。

最後に、Platypusクラスに目を通して、コンテンツの表現方法を確認することをお勧めします。定義の最後を見ると、EaselJS MovieClipクラスの拡張(継承)であることがわかります。MovieClipクラスは、TweenJSタイムライン(アニメーションを処理する)をEaselJSコンテナ(子表示オブジェクトをまとめる)に関連付けます。

クラス定義の最上部には、タイムラインコードから生成されたタイムライン関数があります。下に目を移せば、作成されてステージに追加されたすべての子表示オブジェクトと、アニメーションの制御、サウンドの再生、関数の呼び出しを行う、MovieClipタイムラインに追加されたいくつかのTweenがあります。

インタラクションの追加

以上のように、再利用可能なシンボルのライブラリが存在します。これをゲームに変えるには、どうすればよいでしょうか。

理屈の上では、タイムラインJSを使用してFlash ProでのすべてのCreateJS開発をすることもできますが、一般的には最良の方法とは言えません。代わりに、Flash ProとFlashBuilderに似た組み合わせを利用できます。つまり、Flash Proでビジュアルアセットを設計してパブリッシュし、適切なJavaScript IDEでコーディングします。

通常は、新しいHTMLファイルを作成するところから始めることになります。生成されたHTMLを編集することもできますが、新しいファイルから始めれば、設計と開発をうまく分離することができます。

クイックヒント:生成されたHTMLから作業を始める場合は、パネルでHTMLのパブリッシュをオフにすることができます。Toolkitは、今までどおり既存のHTMLファイルを使用してプレビューを行いますが、HTMLファイルの上書きは行いません。したがって、新しいメディア(画像またはサウンド)は、手動で追加しないと正しくロードされないことに注意が必要です。

デザイナーは、1つ(または複数)のFLAで作業を行い、その作業内容を生成されたプレビューHTMLで表示する一方、開発者は、独自のHTMLファイルで作業を行い、プロジェクトにライブラリを読み込めます。デザイナーが大幅な変更を行っても、新しくパブリッシュされたライブラリを共有することで、開発者は作業内容の変更を直ちに確認できます。

クイックヒント:複雑なベクターは、書き出しに時間がかかる場合があります(当社ではこの点の改善に取り組んでいます)。これが問題になる場合は、アセットを複数のFLAに分割し、作業プロジェクトにすべてのライブラリを読み込むことを検討してください。

ここで、ブラウザーでGameDev.htmlファイルを開いてゲームをし、その機能を感じ取ってください。恐ろしいカモノハシが右側から浮かびながらやって来て、左側にあるおいしそうな菓子パンを盗もうとしています。ポイントを稼ぐには、カモノハシが到達する前に風船を割る必要があります。当然のことながら、ほかにもいろいろ追加できますが、ここではごく単純なものにしました。

重要:ゲームがクリックに反応しない場合、またはセキュリティエラーがスローされた場合は、サンプルに付属しているSECURITY_ERRORS.txtファイルをご覧ください。

ゲームのHTML

GameDev.htmlファイルは非常にシンプルです。現に作業内容は、生成されたHTMLファイルを複製し、GameDev.jsファイルにJavaScriptコードをコピーして、CreateJSライブラリと一緒に読み込まれるようにしただけです。もちろん、実際のプロジェクトでは、このゲームの周りにすばらしいUIも作成することになるでしょう。

クイックヒント:HTMLの長所の1つは、様々なAPIやライブラリを組み合わせてプロジェクトを構築できるという点です。例えば、ゲームを構築する場合、当社(gskinner.com)では通常、CreateJSでゲームエンジンを構築し、jQueryで周囲のUIのレイヤーを構築します。また、CreateJSには、この作業を容易にするすばらしい機能があります。例えば、EaselJSのドキュメントでDOMElementクラスを確認してみてください。

ステージの設定

お好みのJavaScriptエディターでGameDev.jsファイルを開き、簡単に目を通してください。

最上部には、HTMLファイルのonloadハンドラーで呼び出されるinit関数があります。この関数は、生成されたHTMLのバージョンと変わっていません。canvasタグへの参照を取得し、イメージアセットのホルダーを作成して、プリローダーを設定します。話を単純化するために、プリロード中は何も行っていません。ただし、グラフィカルな進行状況インジケーターが必要な場合は、PreloadJSを使用すれば、そのようなインジケーターをとても簡単に構築できます。

次に、生成されたHTMLに由来する、handleFileLoad関数があります。この関数は、ロード時にすべてのイメージの参照をイメージオブジェクトに渡すだけです。生成されたライブラリは、必要に応じてここでイメージにアクセスできます。playSound関数は、パブリッシュしたタイムラインでサウンドを再生する際に呼び出されます。これにより、プロジェクトでのサウンドの管理方法を簡単に変更できます(例えば、SoundJS以外のライブラリを使用する場合など)。

続いてhandleCompleteメソッドが来ます。これは、ステージにあったカモノハシのインスタンスが削除されているという点を除き、パブリッシュされた内容とほとんど同じです。また、ステージのタッチ対話が有効になっています。したがって、このゲームはiOSデバイスで実行できます。

クイックヒント:より複雑なプロジェクトでは、exportRootを取り除き、ステージに要素を直接追加するでしょう。これにより、表示リストからレイヤーが1つ削除されます。この結果、要素が参照しやすくなり、わずかですが、パフォーマンスが向上します。

その他の重要な変更点は、Tickerリスナーがstageからwindowに変更されたことです。これにより、tickメソッドをwindowに定義し、ステージで更新を呼び出す前にtickごとにゲームロジックを実行できるようになりました(ActionScript 3でenterFrameイベントにゲームロジックを配置するのと似ています)。

クイックヒント:ここでは話を単純化していますが、一般的には、グローバル(window)スコープを汚すのではなく、ロジックをカプセル化するクラスを作成し、Tickerに登録する必要があります。

ゲームロジックの追加

tick関数は、1秒間に20回呼び出され、ゲームのハートビートとなります。tick関数について順番に見ていきましょう。

まず、ランダム値が0.01(1%の確率)未満だった場合、新しいカモノハシを作成し、platypii配列に入れて、表示プロパティを設定します。そして、速度を指定して、ステージの子として追加します。ActionScript 3でコーディングしたことがある人なら、見慣れた動作のはずです。さらに、onClickイベントとonPoppedイベントのハンドラーを割り当てます。onClickイベントについては、カモノハシの子に埋め込み、風船に限定して追加します。

onClickは、すべてのEaselJS表示オブジェクトに組み込まれているイベントであり、ユーザーがオブジェクトをクリックするとトリガーされます。onPoppedハンドラーは、カモノハシのシンボルに特有のものであり、popアニメーションが終了するとタイムラインJavaScriptによって呼び出されます。

次に、アクティブなカモノハシをそれぞれ反復し、落下した場合は重力を適用して、速度に基づいてxyの位置を更新します。また、カモノハシが画面から消えたかどうかも確認します。画面から消えた場合は、ゲームから邪悪な輩を削除します。そして、スコアを調整し、scoreTxtテキストフィールドを更新するシンプルなupdateScore関数を呼び出してスコアを更新します。

最後に、とても重要なstage.update()を呼び出します。これは、キャンバスにシーンを再描画するようにEaselJSに指示します。これがなくてもゲームは実行できますが、画面が更新されないため、実行されているゲームを見ることができません。

インタラクションの処理

カモノハシにはonClickイベントハンドラーが追加されているため、既にイベントを伝えられる状態になっていますが、イベントを処理する必要があります。

このインタラクションはhandleBalloonClick関数で管理します。ハンドラーは単一のeventObjパラメーターを受け取るという点に注意してください。EaselJSは、MouseEventオブジェクトを使い、ターゲット表示オブジェクトなどの有益なデータをこの関数に渡します。

当たったかどうかは風船から判断しますが、ゲームをしている人の興味は、風船にくくりつけられたカモノハシにあります。ActionScriptと同様に、parentプロパティを使用して、表示リストを上にたどることができます。カモノハシの参照が見つかれば、後は簡単です。風船が割れるアニメーションを再生するように指示するだけです。

タイムラインとの統合

タイムラインは、play()、stop()、gotoAndStop()などのコマンドを使用して制御できます。また、タイムラインスクリプトを使用することで、タイムラインをゲームロジックと連携させ、重要なイベントが通知されるようにすることもできます。ここでは、風船が割れるアニメーションの最後に以下のタイムラインコードを含めました。

if (this.onPopped) { this.onPopped(this); }

これにより、onPoppedハンドラーがあれば、タイムラインがそれを呼び出すようになっています。コードの最初に確認することが重要です。確認しないと、アニメーションのプレビュー時にエラーが発生することになります。

このイベントを処理するためにhandleBalloonPoppedを割り当てました。これは、落下したカモノハシにフラグを立てるだけです。その他のすべての処理はtick関数が行います。

次のステップ

そう、これで Toolkit for CreateJSとCreateJSライブラリを使用して、簡単なHTML5ゲームを構築しました。カスタムコードは100行未満でした。もちろん、このゲームを拡張するためにほかにも多くのことができます。また、相当数の最適化を行えばグラフィックスのレンダリングをもっと速くできますが、これは別の記事のトピックになります。この記事が、Flash ProですばらしいHTML5コンテンツを構築するのに利用できる基本的な概念とワークフローの紹介になっていれば幸いです。

Toolkit for CreateJSの詳細およびドキュメントについては、Adobe Developer Connectionをご覧ください。

CreateJSライブラリの詳細およびドキュメントについては、CreateJS Webサイトをご覧ください。

Toolkit for CreateJSの基本的な使い方については、Flash Professional Toolkit for CreateJSの使用をご覧ください。