＜第５回＞

2003/09/28

重なり判定

兵庫県立西宮香風高等学校　松本吉生

ymatsumoto@hyogo-c.ed.jp

「重なり判定」とは、画面上で二つのオブジェクトが重なっていることを知る方法です。例えばドラッガブルオブジェクトでパズルを作ったとき、動かしたオブジェクトが正解の部分に重なったかどうかを知るために、重なり判定を使います。オブジェクトの位置を判定する方法はいろいろ考えられますが、ライブモーションのオブジェクトは、指定する他のオブジェクトと重なっていることを判定するプロパティ値を持っているので、これを使うと簡単です。

次の例を見てください。「１」「２」「３」のオブジェクトがありますが、それぞれ上の大きな丸い部分にドラッグして重ねてみてください。

「ステート」のウィンドウを見てください。「ステート」というのは、オブジェクトの状態をあらわすもので、複数の状態を登録して名前を付けておくと、その状態をスイッチのように切り替えることができるものです。オブジェクトを作ったときは、最初ただひとつの状態、「ｎｏｒｍａｌ」だけがあります。

右下の「新規ステート」ボタンを押すと、下のように新しいステートが加わります。名前は「ｏｖｅｒ」になっているはずです。

「ステート」のウィンドウが画面上にないときは、「ウィンドウ」メニューの「ステート」をチェックしてください。

新しく作ったステートの名前を変えます。名前の右側にある黒い下向きの三角をクリックして「カスタム」を選びます。すると名前を変更するウィンドウが出るので、「ｃｏｒｒｅｃｔ」という名前に変えます。

名前が「ｏｖｅｒ」のままでは、このステートに対してＬｉｖｅＭｏｔｉｏｎが自動的にスクリプトを書いてしまっています。このままでは後の作業に支障が出るので、必ず「カスタム」に変更してください。

「ｃｏｒｒｅｃｔ」ステートの色が変わりましたか？これでオブジェクトに「ｎｏｒｍａｌ」と「ｃｏｒｒｅｃｔ」の二つの状態が設定できました。ステートが変更されると、このオブジェクトは色が変わるようになります。これで「正解」を判定することにしましょう。

スクリプトでオブジェクトを操作するとき、オブジェクトにわかりやすい名前を付ける習慣をつけましょう。オブジェクトの数が増えてくると、名前をきちんと付けておかないと、どのオブジェクトが操作対象になるのか混乱してきます。

オブジェクトの名前変更はタイムラインで行うのがわかりやすいです。タイムラインを見ると、「レッド楕円形（ｃｏｒｒｅｃｔ）という名前のオブジェクトができています。このオブジェクトが選択された状態で、「ＥＮＴＥＲ」キーを押すか、「オブジェクト」メニューの「名前の編集」をクリックすると「名前」ウィンドウで名前を変更することができます。

ここで書いた文字は「テキスト」として扱われますので、ワープロソフトと同じように、文字のフォントスタイルや大きさを変更できます。文字のプロパティを変更するのは「プロパティ」タグです。

「プロパティ」タグが表示されていないときは、「ウィンドウ」メニューの「プロパティ」をチェックします。

ここで気をつけないといけないことは、すでに画面に書いた文字のプロパティを変更するには、その文字を選択しておかないといけないところです。これはワープロソフトの場合も同じですよね。

文字の部分を注意深く狙って選択してください。選択した状態では、下のように文字の色が反転しています。

文字が大きくなりましたが、色を白に変えると、文字が見えなくなりました。これは選択した状態で色が反転して表示されているからです。

ツールボックスで「選択ツール」をクリックし、下に書いた黒い小さな丸に文字を重ねます。黒色のオブジェクトが後ろに来ると、白い文字が読めるようになります。

オブジェクトのグループ化は「オブジェクト」メニューの「グループ化」です。

タイムラインでグループ化されたオブジェクトを確認しましょう。

このグループ化オブジェクトはドラッグできるようにしたいので、ムービークリップにします。ムービークリップにするには、タイムラインウィンドウの左下にある「オブジェクトをムービークリップにする」ボタンをクリックします。

オブジェクトがムービークリップになると。オブジェクト名の前にムービークリップであることを示すアイコンが表示されるようになります。

では次に２つめの黒色の円を描きましょう。ツールボックスの「楕円形ツール」をクリックし、「ＳＨＩＦＴ」キーを押しながら画面をドラッグします。

しかし画面に円が見えません。これは先に「カラー」を白に変えたからですね。「カラー」タグでスライダを全部左に動かし、色を黒に戻すと描いた円が見えるようになります。

下に作った３つの円を、ドラッガブルオブジェクトにしておきます。ドラッガブルオブジェクトにするには、「ｏｎＢｕｔｔｏｎＰｒｅｓｓ」イベントに「ｓｔａｒｔＤｒａｇ」のメソッドを、「ｏｎＢｕｔｔｏｎＲｅｌｅａｓｅ」イベントに「ｓｔｏｐＤｒａｇ」のメソッドを設定します。

ドラッガブルオブジェクトの設定は、前回に説明しましたが、簡単に手順を再掲すると、

（１）対象のオブジェクトを選択する

（２）スクリプトエディタを開く

（３）イベントハンドラのリストから「ｏｎＢｕｔｔｏｎＰｒｅｓｓ」を選ぶ

（４）ｔｈｉｓ．ｓｔａｒｔＤｒａｇ（）　と書く

（５）イベントハンドラのリストから「ｏｎＢｕｔｔｏｎＲｅｌｅａｓｅ」を選ぶ

（６）ｔｈｉｓ．ｓｔｏｐＤｒａｇ（）　と書く

（７）スクリプトエディタを閉じる

となります。

今回は少し説明が長くなってしまいましたが、肝心な部分は最後のスクリプトを書くところです。次は、ドラッガブルオブジェクトを一定の位置で固定する「スナップ」について説明します。スクリプトとしては難しくないものですが、操作感の良いユーザインタフェースとして必須の技法です。

このシリーズは全部で７回を予定しています。筆者への感想もお待ちしています。筆者のメールアドレスは、ymatsumoto@hyogo-c.ed.jpです。下の部分をクリックしてもいいですよ。