● マはマスコットのマ(MACLIFE誌1999年6月号掲載)

〜 第4回目 もっと面白いマスコットを作ろう!-後編 〜

  ダウンロード→第4回目添付サンプルデータ

●プロローグ

この原稿が印刷物になるころには、すでにWWDC'99(Worldwide Developers Conference 1999)も閉会しているはずです。今年の基調講演では、Jobsはいったい何を語ったのでしょうか?WWDCとは、年に一回USA/サンノゼで開催される世界中のMacintoshデベロッパーが一堂に会する会議です。Appleからの最新ソフトやハードの発表、最新テクノロジーやその活用方法の解説、開発ツールやマーケティングに関するQ&Aなどなど、会期の間には何十という興味深いセッションが開かれます。こう説明すると、なんだか堅苦しい雰囲気が漂うのですが、実際には毎夜毎夜ゲームやパティーなどが催されて、言い換えればMacintoshデベロッパーの年に一度の「お祭り」のような側面も持っています。(デベロッパーではない人が行っても結構楽しめると思う)

去年のWWDCでの最大の発表は「MacOS X」でした。ハード関連では、iMacがWWDC開催の直前に発表されていたこともあって、これといって大きな発表はありませんでした。ただ、iMacのデザインチームのチーフであるジョナサン・アイブが、iMacのボディを、色々なカラーや模様に変えて(キティちゃんバージョンもあった)紹介したセッションが好評でした。今思い出すと、これが5色のiMacの複線だったかもしれませんね(笑)昨年からは、アップルからも格安ツアーが提供され、ほとんどのセッションに日本語同時通訳が入るなど、日本からの参加もしやすくなっています。そうそう、参加者を募ってApple本社を訪れるツアーなどもありました。今年を見逃してしまった方は、ぜひ来年にチャレンジしてみてください。ただし、来年のWWDCが盛り上がるかどうかは、Appleのこの1年間のがんばりにかかっております。

●拡大表示とランダム移動

前回は、絵が描けなくてもマスコットは楽しめるという事実を紹介するために、別ファイルからの素材取り込みにチャレンジしました。また、複数のマスコットを同時に動かす方法や、背景の利用方法なども解説しました。今回は、今まで解説してきた機能をもう少し詳しく取り上げ、それらとからめるて「変数」「予定」「実行条件」「プログラム」などに足を踏み込んでみることにします。まずは「移動方向」の詳細からです。

移動方向を決めるのには、セルを選択して「黒猫」ボタンをクリックします。これで「移動方向」設定ウィンドウがオープンします。(図1)そう言えば「拡大」カラムについては、まだ詳しく説明していませんでしたね。ここには、セル表示の拡大や縮小方向を決める数値を入力します。ゼロが入力されていれば、マスコットの拡大&縮小表示は起こりません。このパラメータは、X,Y方向に対するZ方向(3次元的)だと考えると分かり易いかもしれません。単位はピクセルで、プラス値で拡大方向、マイナス値で縮小方向を指示します。これをうまく使えば、マスコットがモニターの奥からだんだんこちらに近づいて来る(拡大表示される)ような表現が可能です。ただし、この数字は絶対値ではなく相対値(X,Y方向と同じ)であることに注意してください。「拡大」にプラスを代入して、そのグループを表示させ続けると、マスコットはどんどん大きくなってしまいます(笑)(図2)途中にバランスよく(もしくはちゃんと計算して)マイナス値を与えてやれば、マスコットは一定の大きさに保たれます。また、X,Y方向や拡大への絶対値の入力は「プログラム」により可能なのですが、これに関しては今回は割愛いたします。

ここでは「固定方向」以外の移動方法についてお話します。まずは「ランダム」です。移動方法に「ランダム」を選択すると、ウィンドウからX,Y方向のカラムが消えます。(図3)マスコットの移動方向は、セルが表示されるたびにランダムに決められるようになります。例えば、ゲームなどで移動方向が定まらない敵キャラクター(マスコット)を作るような場合を想定してみてください。では、「どのくらいランダムに動くのか?」はどのように決めるのでしょうか?ウィンドウ上部の「オプション」ボタンをクリックしてみてください。「移動方向オプション」ダイアログが表示されます。(図4)このダイアログの「X最小」「最大」「Y最小」「最大」の4つのカラムに、ランダムに発生されるX,Y方向の最大値と最小値を入力しておきます。

言い換えれば、ランダム値のリミッタを設定しておくわけです。例えば、この値を大きく設定すると(最小-300、最大300とか...)マスコットは、モニタ上を飛び回るような動きをします。また、X最小に-20を、最大に20を入力し、Y最小と最大にはゼロを入力すると、マスコットは上下方向には動かず、左右に20ドットの範囲で「ゆれるような」動きをします。ランダムに左右に動く障害物(マスコット)を、宝の前に置くようなゲームでの演出は、こうした移動方向の設定で実現できます。また、左右に揺れながら攻撃してくる敵キャラクター(マスコット)の場合には、最小に-30を、最大に30、Y最小に20、最大に30といった感じでOKでしょう。かなりトリッキーな動きになると思います。(図5)ランダムの最大、最小値に色々な数値を代入して、マスコットがどんな動きをするか試してみてください。また、最大と最小値が等しい場合はゼロを代入したのと同じ意味になりますので注意してください。

●何かを追跡するマスコット

今度は「追跡する」です。移動方法として「追跡する」を選ぶと、X,Y方向カラムの位置に「追跡する対象」メニューが表示されます。(図6)これにより、マスコットの移動方向は、選ばれた追跡対象物との位置関係から、その都度決定されます。追跡対象物として選択できるのは「マウスカーソル」と「別マスコット」(自分以外)です。ただし、マスコット Jr.の場合には、同時に一体のマスコットしか起動できませんので、対象はマウスカーソルのみとなります。対象をマウスカーソルにすれば、出来上がったマスコットはバックグランドにあってもマウスカーソルを追いかけ、カーソルと重なった時点で停止します。どんな感じで追跡するのかは、移動方向ウィンドウの動作確認ボタン(黒猫アイコン)をクリックして、その場で確認してみると良いでしょう。この場合、対象が別マスコットであってもマウスカーソルで代用されます。(図7)

例えば、ボンダイブルーとストロベリーの2体のiMacマスコットを作成して、ボンダイブルーがストロベリーを追いかけるような設定にします。ボンダイブルーがストロベリーに追いつくと、衝突イベントを受け取り「愛の告白」をするような演出をしてみましょう。その後、ストロベリーがちゃんと告白を受けるのか?ランダム移動で遠くへ逃げてしまうのか(笑)ストーリ展開にいくつかの分岐を持たせると楽しいかもしれません。(図8)ところで、マスコットが iMacのように方向性のないオブジェクトならば問題はないのですが、「動物」や「乗り物」などのように進行方向を考慮しなければいけないオブジェクトの場合には動きが不自然になります。では「進行方向の考慮」とはどういうことでしょうか?

例えばモニター画面を空に例えて、UFOマスコットがマウスカーソルを追跡するようにしてみます。UFOは上下左右どういう方向へ動いても違和感がありません。極端な話、セル1コマでも追跡マスコットとして成り立ちます。では、追跡するマスコットをロケットに変えてみます。とすると、自分より上にあるマウスカーソルを追跡するのには、ロケットが上昇するアニメーションでないと不自然なわけです。これを実現するために、マスコット++には、追跡する方向を制限するオプションがあります。移動方向オプションダイアログで「方向を個別に選択」をチェックした後に、そのグループ(アニメーション)に適切な方向を選んでください。追跡方向は8方向から任意に選ぶことが可能です。(複数も可)(図9)ロケットなどの進行方向を考慮しなければいけないマスコットに自然な追跡をさせるには、各方向に対応した8グループ(最低4グループ)を作画しておく必要があるわけです。

追跡マスコットにはもうひとつ重要なポイントがあります。「方向を個別に選択」がONの場合、どれかグループが呼ばれた時に、その指定方向と同一方向に追跡物が無いと、そのグループは先頭の1コマを表示しただけですぐにキャンセルされます。よって、各グループの一番最初のセルには「ニュートラル」な方向を描いておく必要があります。例えば猫なら座っている絵とかですが、ロケットは難しいかもしれませんね。最後に、移動方向オプションダイアログの残りのオプションについても説明しておきます。「2回連続で表示を禁止する」は、そのグループを2回連続で表示することを禁止します。同じ動作が続いてしまうと演出上面白くない場合にはチェックしておいてください。次の「途中で割り込みを禁止」はグループ表示中にマウスクリックなどのイベントを受け取っても、すぐに別のグループへは切り替えません。最後までそのグループを表示した後に(ループ回数も有効)適切なグループへと切り替えます。


●愛のコマンド送受信

先ほどの例題では、2体のiMacマスコットが接触した時、「衝突イベント」を使って「愛の告白」を実現していました。では、2体のマスコットが離れていても「愛の告白」はできるでしょうか?こうした演出は、「コマンド受信イベント」と「プログラム」の「コマンド送信」ファンクションで実現可能です。

まずはコマンドの受け手の設定です。コマンドの受信で表示させたいストロベリーiMacマスコットのグループを選び、イベントボタン(マウスアイコン)をクリックします。イベント設定ウィンドウの一番上のセレクタボタンで「コマンド」を選び、「コマンド受信イベント」をチェックします。すると、その下の「内容」カラムに文字列が入力できるようになります。例えばここに「I love you」と入力してみてください。これが受信するコマンドとなります。(図10)コマンド文字列は日本語でもかまいません。英語の場合には大文字と小文字を区別しますので注意してください。その下の「AppleScriptに反応する」「音声認識に反応する」「TEXTドロップの反応する」の各オプションをチェックすると、それぞれの方法でコマンドを受け取ることが可能になります。これに関しては、別の機会にじっくりお話する予定です。

この設定により、他のマスコットから「I love you」というコマンドが送られてくると、特定のグループが表示されることになります。次はコマンドの送り手の設定です。こちらはボンダイブルーiMacマスコット側の仕事となります。コマンドの送信をしたいグループを選び、プログラムボタン(AppleScriptアイコン)をクリックします。これによりプログラム設定ウィンドウがオープンします。ウィンドウ上部には、5つのポップアップメニュー用アイコンが並んでいます。各ポップアップメニューの項目は、プログラム言語で言うところのファンクション(関数)だと考えてください。左から「全般」「変数」「マスコット」「背景」「音楽」と対象が分類されています。各ポップアップメニューには、各対象に関連したファンクションが準備されています。現在ハイライトで利用できない物は、その対象(変数、背景、音楽など)がまだ登録されていないことを意味します。

マスコット++でのプログラムとは、これらのポップアップメニューで実行したい項目(ファンクション)を選択して、このウィンドウに登録していくことです。さて、ウィンドウ上部の左から三番目の「マスコット」ポップアップメニューから「コマンド送信」を選択してください。(図11)するとプログラムウィンドウに「コマンド送信」セルが登録されます。真ん中のメニューでコマンド送信の相手を選んでください。コマンドを一度に全部のマスコットに送ること(ブロードキャスト)も可能です。その右側のカラムには送りたいコマンドの文字列を入力します。今回は「I love you」ですね。(図12)これでウィンドウを閉じれば、プログラム完了です。ボンダイブルーは、このグループの表示が終了した時点で「I love you」というコマンドをストロベリーに送ります。サンプルではマウスクリック時に、ボンダイブルーが「I love you」メッセージを送るようにしてみました。どうですか、うまくいったでしょうか?


●予定セル(黒子さん)の役割

さて、コマンドを送信するという簡単なプログラムを体験したところで、次は「予定」(スケジュール)セルの使い方をちょっとだけ体験してみましょう。ここで取り上げるサンプルは、背景フォルダに複数の画像を登録して、それらを一定時間で順次切り替えていくスライドショーです。まずは背景フォルダをオープンして、スライドショーに使いたい画像を登録します。スライドショーで表示する画像の順番は登録順となりますので、先んじて調整しておいてください。(図13)次に予定フォルダーをオープンして、新規ボタンをクリックします。時計の絵柄のセルがひとつ登録されたことがわかります。これが何も設定されていない空の「予定」セルです。(図14)

予定セルは、マスコット++でどんな役目をするのでしょうか?以前、マスコット++の環境を演劇に例えたことがありました。マスコットが役者さんや小道具、背景が舞台や大道具、音声はオーケストラといったところでしょうか?こうした例えからすると、予定セルはズバリ「黒子さん」と言うことになります。黒子は時間を見計らって、大道具や小道具の切り替えを行ないます。幕間には幕を下ろしたり、役者さんに声をかけてスケジュールの再確認をしたりします。また、出番の終わった役者さんにおしぼりを配ったりするかもしれません。(笑)これとまったく同様に、マスコット++の予定セルは、時間経過、マスコットや背景の表示開始と終了、音声の演奏開始と終了などを逐次監視していています。そして「実行条件」で設定されているタイミングを見計らって、独自の「プログラム」を実行することができます。

新規登録した予定セルを選択し、実行条件ボタン(ifアイコン)をクリックしてください。どんなタイミングでプログラムを実行するのかを決めるための、実行条件設定ウィンドウがオープンします。タイミングの対象は「経過」「変数」「マスコット」「背景」「音楽」の5種類から選べます。(日付と時刻は利用できません)このうち「経過」以外は、対象(どのマスコットか?どの背景か?)を個別にメニューから選択します。まず「経過」ボタンをクリックしてください。ウィンドウに時間を入力するためのセルが登録されます。このカラムに5(単位は秒)を入力してください。その横のメニューからタイミングの種類を選びます。「指定時間」「定期的に」「ランダム」の3種類のうち、今回は「定期的に」を選択します。(図15)

次は、この予定セルが実行するプログラムです。マスコットセル同様にプログラム設定ウィンドウをオープンしてください。スライドショー用の背景が登録されていれば、右から2番目の背景メニューが利用できるはずです。背景メニューから「次の背景へ」を選択してください。予定セルのプログラミングは、これで完了です。(図16)もし背景の切り替え時にビジュアルエフェクト(ワイプ)が必要なら、登録されたセルの右隅にあるアイコンをクリックして好みのエフェクトを選択します。(図17)たったこれだけの設定で、5秒ごとに背景が切り替わるスライドショーの完成です。(図18)つまり、黒子(予定セル)が、一定間隔で幕を下ろし大道具を切り替えるという大仕事をせっせと実行しているわけですね(笑)

●ゲーム用の変数を用意する

では、ゲームのように複数のマスコットがからむような状況では、予定セルはどんな役割をになうのでしょうか?次の例題では「砲台」「ミサイル」「UFO」の3体のマスコットを用いて、「予定」「変数」「実行条件」「プログラム」を駆使した簡単なゲーム(?)を作成してみることにします。まずは「砲台」「ミサイル」「UFO」の3体のマスコットを準備してください。背景は黒色の単色カラーの背景を一つ用意します。(図19)ゲームなどの実行条件では、必ず「変数」がからんできます。まず最初に「変数」について説明しておきましょう。マスコット++では、マスコット、背景、音楽の挙動を制御するために「数値」や「文字列」といった可変パラメータを持つことができます。これを「変数」と呼びます。変数には初期値があり、それが数値であれば、それの増減等をプログラムからコントロールすることもできます。また変数内容を実行条件で比較することで、表示のON/OFFやプログラムの実行もコントロールできます。まあ、マスコットにちょっとした「脳味噌」があると考えてください(笑)

今回は、UFOを撃墜するまでの制限時間と、ミサイルがUFOに命中した時のダメージを変数として用意します。ゲームでは、ミサイルがUFOに命中したらダメージを増加させます。それがある一定値を超えたら、UFOを墜落させてゲームを終了します。逆に制限時間が過ぎてしまった場合は、砲台が爆発してゲームが終了します。変数セルは、変数フォルダをオープンして新規ボタンで登録します。白い矩形エリアの中をマウスクリックすることで、その場で数値やテキストを入力することが可能です。2つの変数の名称を「制限時間」と「ダメージ」に変更して、初期値として、制限時間には「30」を、ダメージには「ゼロ」を代入しておきます。(図20)最初に入力された内容が、数値なのか一般的な文字列かは、マスコット++が自動に判断します。プログラムでの数値変数に対しての加減乗除等の演算は許されますが、文字列変数に関しては意味を持ちません。

●ゲーム進行の制御の仕組み

2つの変数を初期化したら、次は「予定」です。予定セルを一つ作成して「制限時間制御」という名称にします。まずは、実行条件ウィンドウをオープンして「経過時間」セルを登録して、カラムに「1」秒を入力し、種類を「定期的に」に設定してください。(図21)続いて、プログラムウィンドウに移り、変数ポップアップメニューから「増減する」を選択します。登録されたセルでは、対象となる変数の名前をメニューで選べます。対象として「制限時間」を選び、カラムに「-1」を代入します。この設定により、予定セルは1秒ごとに制限時間から1を引く処理を実行します。つまりUFO爆破までの制限時間は30秒と言うことになります。(図22)

ついでに、制限時間とダメージを背景上に表示するプログラムもここへ加えておきましょう。全般ポップアップメニューから「文字表示」を選んでください。大きなカラムには「#1」と記載してください。これは「リストの1番目の変数の内容」という意味になります。同様に頭に「&」を付け「&制限時間」と記載すると、「名称が制限時間という変数の内容」という意味になります。マスコット++には、これ以外にも変数値にランダム値を代入する等の(ゲームでは必需品)有用な機能がいくつも用意されています。こうした変数のより深い利用方法については、また別の機会に解説いたします。その横の2つのカラムには、その文字列を表示する位置(X,Y座標値)を入力します。(図23)最後に一番右側の「A」アイコンをクリックして、表示する文字のフォント、サイズ、スタイル、カラーを決定しておいてください。背景が黒ですから、文字カラーは明るい色が良いでしょう。(図24)

さて次は、ミサイルがUFOに命中した時にダメージを増加させる処理です。これは、前回の「衝突イベント」を使います。ミサイルとの衝突イベントが起こった時にプログラムでダメージを「+10」増加させます。ダメージが指定値(今回は100)を越えたかどうかは、もうひとつの予定セル「UFO制御」を登録し、それに判断させることにします。指定値を超えていれば、予定セルからUFOに「Explosion」コマンドが送られます。そして「Explosion」コマンドを受けたUFOは墜落してゲームオーバーとなります。最後は、制限時間を越えた時の処理です。制限時間を判断する予定セル「砲台制御」を作り、制限時間がゼロになった時に砲台に「Explosion」コマンドを送信します。これを受け取ると砲台は爆発して、やはりゲームオーバーとなります。(図25)

さて、もう一度処理をまとめてみましょう。砲台をマウスクリックをすると、砲台から「Fire」コマンドがミサイルに送られミサイルが発射されます。もしミサイルがUFOと命中(衝突イベント発生)するとダメージを増加させます。ダメージが100を超えると(10回命中すると)UFOが墜落してゲームオーバーとなります。ゲームと同時進行で、予定セルの「制限時間制御」は刻々と制限時間を減らしていきます。制限時間がゼロにると、今度は砲台が爆発してゲームオーバーです。ダメージが上限を越えたかどうか?制限時間を越えたかどうか?は、UFO制御と砲台制御の2つの予定セルが逐次チェックをしているわけです。範囲を超えた場合には、プログラムにより各マスコットに「Explosion」コマンドが送信され、ゲームオーバーを知らせます。(図26)


●エピローグ

どうでしたか?言葉だけの解説では少しわかりにくいと思いますので、CD-ROMに添付されているサンプルドキュメントをオープンして、各処理内容をじっくり眺めてみてください。「予定」「変数」「実行条件」「プログラム」といった言葉を聞くと、何かとても難しい事をするように感じてしまいます。でも、意外に簡単だと思いませんか?特に、CやBASICなどを使うのとは異なり「言語の文法」を覚える必要がありませんので、プログラムとしての敷居はかなり低いと思います。でも変数や実行条件を用いてマスコットを制御する概念は、一般的に言うところの「プログラミング」と何ら変わらないわけです。そういう意味ではプログラミングって簡単なんですよね。自身を持って次回に進みましょう。

さて、次回はちょっと一息「インターネットとマスコット」という題目で、マスコットとインターネットとの関係についてお話いたします。マスコットからインターネット経由でURLをオープンする方法などを紹介したいと思います。そうそう、キーウェアの作成方法も解説いたしましょう。その後、作成したマスコットを、lug-inデータやWired Sprite Movieに変換してみることにします。「Wired Sprite Movieって何?」という方には必見であります。お楽しみに!

copyright 2000 Ottimo, Inc. All rights reserved
無断転載・引用禁止
Contact Us: koike@ottimo.co.jp