StarlingフレームワークによるStage3Dを使った2次元表現

インスタンスのクリックを確かめる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Touch.phaseプロパティの値とDisplayObject.hitTest()メソッドでマウスクリックを確かめます。
講師:
08:56

字幕

Staring フレームワークで インスタンスを クリックした時の扱い これをどの様に処理をしたら良いのか ということを考えてみたいと思います 現在の Starling ルートクラスは この処理が途中までは できています このルートクラスの マウス操作に関する部分について 簡単に確かめておきましょう 先ずステージに置いたインスタンスは 変数に入れてあります プライベートなプロパティに入れてあります そのインスタンスに対して addEventListener で マウス操作についてのイベントを登録し そこに Listener を加えます この時 Starling フレームワークでは マウス操作全て TouchEvent. TOUCH というイベントで登録します そして Listener メソッドを定めました それをプライベートなメソッドとして ここに書いてあります 先ずはどんな操作が行われたのか 確かめなければいけませんので Event オブジェクト TouchEvent の Event オブジェクトから getTouch というメソッドで Touch オブジェクトを取り出します その時そのマウス操作を 表示リストのどこから調べるのかという階層 それから第 2 引数 もしその操作のある特定の段階だけ 1 個だけ調べたいのであれば 今回の場合はマウスボタンを離した ENDED なんですけれども それを 2 つ目に引数として渡すと この時だけ このイベントの phase の時だけ TouchEvent が Touch オブジェクトが取られます もし このイベントでなければ Touch オブジェクトは空っぽになりますので if 条件で判定をし 空っぽの場合は この中の処理はスキップされます 空っぽでなければ それはマウスボタンを 離した操作ということになりますので インスタンスに対する処理を行います ここでは rotation 回転角を PI の半分 90 度ですね 回転するような処理にしています この処理で概ね良さそうなんですが 1 点問題があります それを確かめてみましょう では fla ファイルの方に切り替えまして 制御メニューから ムービープレビューで動作を確かめます インタラクティブな操作については できるだけ細かく 確かめてみる必要があります 普通にインスタンスの上で回すボタンを押し 離すと イベントが処理されて 90 度回転します これは OK です 問題は インスタンスの上でマウスボタンを押し 押したまま外に出し離した場合 これも phase で言うと ENDED という風に 扱われてしまうんですね ですから これをなんとかしなければいけません 具体的にどうするかと言うと マウスボタンを離した時 この座標が インスタンス上にあるのかどうかを 確かめなければいけません そのためのメソッドを使って 処理を加えましょう ではウインドウを閉じて Starling ルートクラスに切り替えます スクリプトをフルスクリーンにしますので ファンクション 4 番を キーボードから 2 回押します ステージに置かれたオブジェクトと 座標が重なっているかどうかというのは DisplayObject の hitTest というメソッドで 調べることができます ですから Touch オブジェクトがあって いきなりインスタンスを 操作するのではなくて もう一段階 if 文を かませるということになります 1 段下げまして そして括弧閉じと この括弧の中に hitTest の メソッドを呼び出します 呼び出す対象は このインスタンスに対して 座標が重なっているかどうかを調べたいので このインスタンスを持っていきます コントロール若しくはコマンド ドラッグでコピーです そして hitTest と この括弧の中に Point で座標を Point オブジェクトで 座標を指定します その座標は マウスポインタの座標ですので mousePoint にしましょう この変数は未だ定めていません mousePoint と Point で型指定です さて この Point オブジェクトをどうやって 拾ってくるかというのが次の課題です mousePoint の座標は Touch オブジェクトに聞きます myTouch これが Touch オブジェクトですね コピーします コントロール若しくはコマンドドラッグ そして getLocation です これでマウスポインタの座標が調べられます 括弧の中には 誰から見た座標かという指定します ここは 1 つポイントです hitTest で調べる時 この Point の座標は hitTest を呼び出したインスタンスから見た 座標でなければいけません ですから この getLocation には インスタンスという変数を コピーして持っていきます コントロール若しくはコマンドドラッグです これで myTouch Touch オブジェクトが取れた つまりマウスボタンが離された その時 マウスポインタの座標が どこにあるのかというのが Touch オブジェクトに対する getLocation で取れます 基準は インスタンスですね そのマウスボタンを 離したかどうかを調べたい インスタンスを基準に座標を取ります その座標を渡して インスタンスに対して hitTest を呼び出せば もし重なっていれば その重なっているインスタンス自身 オブジェクトですね これが変わります オブジェクトが変われば この if 条件が true となって中の処理が行われます もし座標が外である場合 この hitTest は もう重なっているオブジェクトは ありませんよということで null が返ります null が返ればこの if 条件は スッキプされるので 何も起こらないということになる訳です 動作を確かめますので 先ずファイルは保存します そして fla ファイルの方に切り替えて 制御メニューから ムービープレビューを確かめます 先ず普通にインスタンスの上で回す ボタンを押して離す これは もう問題がなかったですね 問題があったのはマウスポインタを インスタンスの上で押して 押したまま外に持ってきて離した場合 これで回転してしまうとまずいんですが 大丈夫ですね 押してインスタンスの上で 離した場合は回転します 押してインスタンスの外に出して離すと 回転しません これでクリックが ちゃんと取れる様になりました では swf のウインドウは閉じて Starling ルートクラスの方に切り替え ファンクション 4 番を 2 回押して まとめにしましょう 先ず TouchEvent の Touch というイベントに EventListener を登録したら その Listener が受け取った Event オブジェクト TouchEvent のオブジェクトに対して getTouch というメソッドを呼び出して オブジェクト Touch オブジェクトを取り出します その時第 2 引数で ENDED の phase の時だけ オブジェクトが欲しい ということにしましたので ENDED の時だけオブジェクトが入ります その場合 if 文を通りますし もし ENDED でなければ この if 文はスキップして何も起こりません ここからがポイントですね では Touch オブジェクトがありました マウスボタンが離されたんですが その離された場所を Touch オブジェクトの getLocation で調べます この時調べる基準は クリックをしたかどうか調べたい このインスタンス自身の ーから見た座標ということで 調べなければいけませんので 引数はインスタンスを渡します そうするとインスタンスから見た 座標が Point オブジェクトで返ります そうしたらインスタンスに対して hitTest のメソッドを呼び出し 今受け取ったインスタンスから見た マウスポインタの座標を渡します この 2 つが重なっていれば このインスタンス自身が返されて if 条件は true と評価され この中のインスタンスを 回転する処理が行われます インスタンスの上に座標が無い場合には hitTest は null を返しますので この if 条件はスキップされ 何も起こらずに終了する ということになる訳です

StarlingフレームワークによるStage3Dを使った2次元表現

StarlingはFlash Player 11の新しい描画機能Stage3Dに基づいて作られた2次元の描画用フレームワークです。このコースではStarlingフレームワークによるクラス定義の基礎から、トゥイーンアニメーションやマウスインタラクション、そして最近のバージョンで実装された新しい機能まで解説していきます。

5時間09分 (40 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
カテゴリー
プログラミング
価格: 3,990
発売日:2014年01月26日

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

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

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