Tip:
Highlight text to annotate it
X
物理オブジェクトをやってみる
やぁ、みなさん LoqheartのDonです
このビデオで最新のSpriteloqの使い方について解説します。
つくったアニメーションをコロナの
シェープにするためです。
コロナに持っていって
物理法則を適用できます。
この機能の詳細については、アンスカ社のコロナのフォーラムの中の
Spriteloqのサブフォーラムをご参照ください。
または、私たちのspriteloqのサイトにある
ビデオや文書のセクションから
APIの情報や
ライブラリの情報を参照できます。
loq_sprite moduleのページにいって、例がここにあります。
物理属性(プロパティ)の追加を
addPhysics メソッドで行います
このメソッドが新規に
SpriteGroup のインスタンスに追加されました
またここには、サンプルコードも見つけることができます
これによって、どんなものかを
見てください。Flashの図形に物理を適用することが素早く簡単にできます
さて、このビデオでは
私が作ったサンプルアプリを使いながら
どのようにSpriteloqにFlashでつくった
図形を持っていくかを
解説します
衝突を判定する境界を指定し
簡単なアプリを作ってみたいと思います
始めにいくつかの異なった図形をFlashで作成してあります
ご欄のように
四角
円
長い長方形 板と呼びたいと思います
星
赤い三角形と紫の三角形
注意深くみるとわかるのですが、
レファランスポイントは
物体の基準が登録される座標は
それぞれのオブジェクトで少しずつちがっています
このレファランスポイントはとても大事です
図形をFlashで作成してSpriteloqで作業するにあたって
このレファランスポイントが
オブジェクトの物理計算での位置に影響します
コロナのアプリの動作です
では
いつものように最初にしたいことは
'Commands' から 'Export Library as SWFs'を選択します
そして
SWFsをSpirteloqで取り扱うことになります
ではやってみましょう
これらの図形をすべてここに展開します
では 描画されている図形に適用する新しいツールについて解説します
四角形に指定する物理オブジェクトの形を描いてみたいと思います
描画ツールはコントロールパネルのスクロールバーをドラッグすると下にあります
お気づきのように'Shape Controls' というのが新しくあります
これが最初のツールです
'shape mode'にすることによって、
物理図形を描画して、確認することができます
Flashの図形の上に描かれます
最初にすることは、shape modeをクリックすることです。
ここでは、四角のポリゴンを描画することになります
Flashの図形に合わせる物理図形です
クリックするとカーソルが変化します
それでは、こうやって
四角に合わせて、四角を描いてみます
こんなかんじで
四角が描けました
ここに deleteのアイコンが有効になりますので 削除することもできます
やってみましょう、そしてもう一回描画してみます
ok, 四角はできました
では、円wのほうをやってみます
'shape mode' をもう一回選択して
円のポリゴンツールをクリック
真ん中になるようにして
クリックして、ドラッグして
円にマッチするように円を描いてみます
ここで留意しておいていただきたいのが
コロナでは円の中心にレファランスポイントが設定されます
円の中心の設定がいつも役にたつわけではないでの 変更したい場合もあるでしょう
ここでも円の外に設定したいので
左上にレファランスポイントにします。ここです
こんな感じで
Spriteloqが円を作成したときには実際はポリゴンを作っています
なので、これらの全ての円はポリゴンのアンカーポイントです。
実際にエクスポートされるときには
三角形になります、この点はあとで
実例をみるとはっきりと分かると思います
結局のところこれらのポイントによって、円となっています
この板ですが
物理オブジェクトを描画することはしません
知っておいていただきたいこととして
何もこの矩形にたいして物理オブジェクトの描画をしなければ
矩形の境界がデフォルトで
物理オブジェクトの描画が
行われます
衝突判定できる物理オブジェクトとなります
というわけで特になにも描画はしません
それでは星型にいってみましょう
星型では、ポリゴンを描画することになります
ポリゴンは、ポリゴンツールを
使います。
このツールは凸型 凹型のポリゴンを作成sすることできます
スターは、凹型のボリゴンとなります
というわけで本当にさくっと作ることができます
各頂点をクリックします
お気づきのように
たった3回のクリックで三角形ができました
4回目のクリックでポリゴンが途中までできました
クリックをつづけて
星ができるまでやってみます
ok, 星ができましたが、これで終わりではありません。
ポリゴンツールとしては、ポリゴンの線を閉じることとなります
そうするためには
もう一回 'Create Polygon' ツールをクリックします
delete ボタンも有効になります
つまり、ポリゴンが完成して保存されているということです
アンカーポイントを示す頂点が表示されています
つまり、これらの点をクリックし、ドラッグすることができます
位置を調整して、頂点の座標を
移動することができます
おきづきかもしれませんが、
これらのアンカーポイントは、四角形のときには表示されていませんでした
ツールとしては四角形は例外です
四角形の物理オブジェクトのサイズを変更するには、
削除して再作成することになります
星型はここにできました
次にこの紫の三角形をちょっと見てみましょう
しかし見るだけで、この三角形の物理オブジェクト
の描画は行いません
次の赤い三角形に移ります
後で
この赤い三角形の物理オブジェクトを使って
紫の三角形の物理オブジェクトを取り扱う
方法について説明いたしますので
お楽しみを
一つの物理オブジェクトを他の物理オブジェクトにも適用する
事例です、いろいろな形に応用できます
三回のクリックで三角形ができました
そしてここをクリックして、保存します ちょっとここを調整しておきます
ok これでいい感じになりました
それではここで右クリックして、アセットリストの全てを選択してパックします
シートをエクスポートして
プロジェクトフォルダに格納します
保存します
プロジェクトを見てみましょう
こんな感じです 簡単にできました
ご覧のとうり、物理しています
さて
この円ですが
円として転がっています 三角形は三角形の動きです しかし
紫の三角形は少しおかしい動きになっています 星はあっというままにステージから消えてしまいます
ちょっと調整をしてみましょう 物理も遅くしてみます
動きを良くしてみましょう
スケールをきっかり60にします
すこし遅くしてみましょう
たぶんこれくらい
80にしてみます ok これでやってみましょう
星はもう少し下に配置してみます
これでどうでしょう
少し動きがよくなりました
ここでやってみることとして、通常の描画モードからハイブリットモードにしてみます
物理オブジェクトのポリゴンが表示されます
先ほど作成したものです
どの形も想定どうりのものと基本はなっているでしょう
板に注目してみてください
板も
物理オブジェクトです 三角形も同様に物理オブジェクトです
とくに設定していませんでしたが
ではコードを所々みてみましょう
かなり急ぎで解説します
最初に背景を青で表示しています
require physics モジュールを記述しています
ここで始まります
重力の値を設定しています
スケールをここで設定
'hybrid'の描画を指定
ここで'loq_sprite'をロードしています
モジュールとしてではなく、ファクトリ関数として生成しています
スプライトシートのロードをします
SpriteFactory を'sf' と短く呼ぶことにします
そして
一連の物理関連のオブジェクトがここで生成されます
最初にすることとして
円の図形を生成します
円ができたら、 'addPhysics'をコールします
physics moduleに
物理オブジェクトのタイプを
'dynamic'にします 属性 density, friction, bounceを指定
ロードされたspritesheetは、データとして
円の形状です。
'addPhyics' をコールすると自動的に参照して
SpriteGroupに適用します
ここで位置を指定しています
三角形、紫の三角形、四角、星、板と設定
ここで
注意していただきたいのが、紫の三角形です
これは 'kinematic' となっています 重力の影響を受けません
つまり
普通とは違います
何かが衝突しても速度が影響されません
この物理オブジェクトは
ちょっと正しくない形です ちょーど
スプライトシートのフレーム矩形となっています これは期待されいるものではありません
三角形の動きにする必要があります
覚えていると思いますが、Spriteloqのツールの設定中、物理オブジェクトの設定をしていません
赤い三角形の設定はしましたが
紫の三角形は設定しませんでした
ここで解説したいのは、物理オブジェクトの再利用についてです
この引数を設定して渡すことにします
紫の三角形の'addPhysics'の最後です
カンマをつけて
赤い三角形の
物理オブジェクトを使います
赤い三角形の物理オブジェクトが
ここで指定されていますが、これを紫の三角形にも適用します
保存します
もう一回動作を見てみましょう
お気づきのように
赤い三角形がスライドしていきます
いま紫の三角形は適切な
物理オブジェクトになったからです
最後に
板についてコメントします
板も物理オブジェクトを設定しませんでした
しかし四角い矩形の物理オブジェクトとなっています
注意してほしい点として
もしも
'addPhyics' のコールをすると なにも設定していなくても
デフォルトで
境界としての矩形を持っています
この矩形が
物理オブジェクトの形として適用されます
このデモの最後に
この紫の三角形は
'kinematic' なので、タッチイベントのハンドラーをつけました
この 'onTouch' です
ドラックができます 三角形と他のオブジェクトの衝突
の動きを見てみてください
ひとつ注意してください
この円は複数の物体でできています
多くの三角形の集まりです ハイブリッドモードで見てお分かりのように
もしかなり複雑なオブジェクト同士の衝突が起こった場合
複合的なオブジェクト同士
オブジェクトが固まってしまうようなことが起こるかもしれません
これは Box2Dのサイドイフェクト(制限)となります
この点は注意してください
複合的なオブジェクトに一般に言えることです できるだけシンプルに
最後にお伝えしておきたいこととしてプロファイラーがあります
これです、ソースコードにてすでにご存知でしょうか
ちょっと解説しておきますと
このような形でインスタンスを作成可能です ここの下のところです
loq_profilerをコールしています
loq_profiler は、'createProfiler'が必要です
これによって
FPSのグラフと
メモリの使用状況のグラフ
が表示されます これです
ロードされるスプライトシートのテクスチャーのメモリ
平均のFPSとともに 直近(リアルタイム)のFPSも表示されます
min と max 値もここに表示されます
以上となります。物理のデモとしては
手短かではありましたが、Spriteloqを使って
円などを使いながら解説しました
レファランスポイントが図形の外に設定されていても動作します
このSpriteloqの物理機能を使ってみてください。
何か感想やコメント等あれば
フォーラムにお願いします
また私たちのTwitter
のツイートもチェックしてください
ご視聴ありがとうございました