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

〜 第2回目 インターラクティブ・マスコットを作ろう! 〜

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


● プロローグ

今(この原稿を書いている時点で)テレビの中では、5色のかわいいiCandyがダンスを踊っています。ほんとうに美味しそうですね。まさに「Yum .Yum.」です。私もショップへ出向き5色のiMacを見て来ました。ストロベリーがいいですね!!かわいい娘さんがいる「Macな父さん」だったら、娘のために思わず衝動買いをしてしまいそうな雰囲気を持っています。

今回のMACWORLD Expo/San Franciscoで、ジョブズは「色」という形で「Think different」を実践してくれました。こんな調子で半年に一度くらい、iMacは何か新しい「Think different」を我々に見せてくれるのでしょうか?ジョブズの次の一手を読んでみましょう。もうCPUのクロックアップ、ハードディスクの増量、グラフィックアクセレータの能力アップでは、誰も驚かないでしょう。ハード的には、新しいG3(白と青のG3)に搭載されたFireWireの搭載でしょうか?液晶パネルを使ったiMacも考えられますね。無線によるネットワークの拡張なども予定されているかもしれません。

ソフト屋の私としては、ハードウェア(色もこれに入るかな?)の「Think different」だけでなく、ソフトウェアの「Think different」も見せてほしいものです。昔々、Macには、Macにしかできない事が沢山ありました。Macはハードウェアスペックでは他のパソコンと比べて見劣りしていましたが、革新的なソフトウェアの存在が多くのファンを魅了してきたわけです。斬新なGUI、Finderと言うすばらしい概念、最初からバンドルされていたMacPaintやMacWrite、ほんとうに新鮮でした。そうそう、HyperCardも忘れてはいけません。多くのユーザがスタック集めに奔走し、私なども、徹夜してスタック作りに没頭したものです。

現在のiMac、外見以外で他のパソコンと大きく区別できる点があるでしょうか?確かにMacOSのアドバンテージはいまだに健在です。でもMac Onlyなソフトも少なくなってしまいました。実質、他のパソコンとそれほど差違はないのかもしれません。OpenDocもQuickDraw GXも消えました。(ちょっと残ってますけど)Newton OSの未来も怪しいです。(復活はあるか?)、今回のOpen GL採用の発表で、QuickDraw 3Dもどうなるかわかりません。日本語版のSpeech Recognition(音声認識)の開発もストップしたままです。何か一発、「Sherlock」で示したようなソフトウェアの「Think different」を、iMac上で見せてもらいたいものです。Appleはソフト分野でも健在で、今でも未来を見つめている事実を、ぜひ我々にアピールしてほしいわけです。


●プロジェクトウィンドウ

さて、前回はキューティマスコットの歴史や機能について、簡単に説明いたしました。今回はもう少し詳しく各機能を紹介し、ユーザの「ちょっかい」(イベント)によって、何か「芸」(アクション)をするインターラクティブなマスコットを作成してみます。

マスコット++の起動時に、一番最初にオープンするウィンドウを「プロジェクトウィンドウ」と呼びます。(図1)これは、作品を作るための素材を登録&管理するためのウィンドウです。ウィンドウの上部には、色々な機能を実現するボタンがあり、その下の白い部分に順次素材が登録されていきます。マスコット++には、アニメセル以外に「背景」「音声」「変数」「予定」を登録するためのフォルダが用意されています。ウィンドウ右上部のフォルダアイコンボタンをクリックしてみてください。フォルダ一覧が表示されます。(図2)現在は、ひとつだけマスコットフォルダが登録されていることが分かります。2体目、3体目のマスコットを利用する場合は、ここでマスコットフォルダを新規追加します。ただし、その他のフォルダ(背景フォルダなど)は新規追加することはできませんので注意してください。各フォルダをダブクリックすると、その中身が表示されます。各フォルダがどんな素材を管理し、どんな役目を持っているのかを一覧にして示しておきます(表1)

では、「マスコット-1」(名称は好きに変更できます)フォルダをダブルクリックしてアニメセル一覧に戻ってください。マスコットフォルダに新しいアニメセルを登録する方法は5つあります。ウィンドウ上部の「新規」ボタンで空セルを登録する方法、カット&ペーストでPICT画像を登録する方法、ドラッグ&ドロップでウィンドウ上に画像ファイルをドロップする方法、ファイルメニューの「別ファイルから」を利用して画像をインポートする方法、ライブラリメニューの「ビデオから」を利用して画像をキャプチャする方法です。今回は、他の登録方法の説明は割愛し、「新規」ボタンで空セルを作る方法を取ります。「表示」ボタンの右となりの「i」ボタンはそのマスコットの情報設定ウィンドウをオープンします。(図3)このウィンドウでこれから編集するマスコットの描画サイズ、拡大サイズ、初期表示位置、表示範囲、その他いくつものオプションを設定することができます。今回はとりあえず128X128ドットのマスコットを作ることにします。

「新規」ボタンで空セルをリストに登録し、それをマウスでクリックすると(選択するわけですね)上部のボタン機能が利用できるようになります。(図4)ちなみに、マスコットJr.では「実行条件」と「プログラム」ボタンはありません。また、これらボタンによる機能はすべてメニューからも実行できます。


●ペイント機能を使う

空きセルをダブルクリックするとペイントウィンドウがオープンします。現在、描画エリアが何倍で表示されているのかは、ウィンドウタイトル部分に(x2)とか(x4)と表示されています。128X128ドットの初期状態は2倍(x2)表示です。描画エリアの左横にはお馴染みのペイントツールが並んでいます。各ツールの機能一覧を示しておきましょう。(図5)これらツールの初期値(ペンの太さとか形状など)はペイントメニューの「ツール設定...」で変更できます。(図6)ここでは、WACOM社の感圧タブレット使用のON/OFなども設定できます。また、いちいちこのダイアログをオープンしなくても、ペンの太さなどは、ツールパレットをダブルクリックして表示されるメニューで変更できます。

この中で一番面白い機能は、一番左下のデスクトップコピーツールです。ツールを選んで描画エリア内をクリックしてください。クリックしたままの状態でデスクトップの別の場所へマウスカーソルを移動(ドラッグ)すると、ほ〜らディスクトップ上の画像が描画エリアにコピーされてきます。(オプションキーを押しながら実行すると2倍コピーになります)ゴミ箱やフォルダなどのアイコン、他のアプリの一部をマスコットで使う場合には便利な機能ですね。(図7)ペイントツールの左横は、ペイントパタンの選択パレットです。下の小さな矢印で12種類のパレットを切り替えることが可能です。選択されたパタンはブラシやフィル(塗りつぶし)ツールに反映されます。

描画エリアの上部はカラー選択パレットです。マウスで好みのカラーを選択すると、そのカラーがブラシやペンツールに反映されます。カラーを描画図形のどの部分に反映させるかは、一番左上の「枠と中身」「フォアカラーとバックカラー」の切り替えパレットで選択します。(図8)一度利用したカラーは順次その横のパレットに登録されていきます。(15まで可能)これにより、以前に使ったカラーをすぐに再利用できるわけです。カラーを好みの物に変更したい場合には、指定カラーをダブルクリックしてください。MacOS標準のカラー選択ダイアログで好みのカラーを選ぶことができます。それでは、まずは一枚だけセル画像を描いてみましょう。(図9)

●下絵機能を使う

マスコット++には、セルを描く時の便利な補助機能として下絵機能があります。下絵とは前や後のセルを描画エリアに薄く表示しておく機能です。つまり、前のセルからちょっと変化を付けたセルを描く目安に利用するわけです。下絵機能を使うか?どのセルを下絵にするか?は下絵描画メニューで選びます。(図10)下絵は前と後、その両方、「下絵セット」で選んだ任意のセルの4種類から選べます。また下絵の色は、下絵カラーメニューで選べます。見やすい色を選んでおきましょう。また。各ドットの位置関係を分かりやすくする補助機能として、下絵に市松模様を表示することも可能です。下絵描画メニューの「格子を表示」をチェックしてください。ただし、市松模様が表示されるのは4倍表示(x4)以上の場合だけとなります。(図11)

顔の表情を少し変化させたセルをどんどん描いてみましょう。1枚描き終わったら「登録」ボタンでアニメーションセルに登録します。その横の「追加」ボタンは、重ね描きではなく、新規セルを作りそこへ画像を登録するものです。とりあえず、同じセルを沢山登録しておき、後からちょっとずつ手直ししていく方法も取れるわけですね。もし、描いているセルがグループ化(後述参照)されていれば、「確認」ボタンでアニメーションの確認もできます。「登録」ボタンの左側にある左右の矢印ボタンは、プロジェクトウィンドウに戻ることなく描画セルを切り替えるためのものです。切り替え時にいちいち登録確認ダイアログを表示させたくない場合は、「環境設定...」の「登録で確認ダイアログ表示」のチェックを外しておいてください。

今回は、簡単な方法でマスコットの動きに変化をつける「技」も紹介しておきます。まずは編集メニューの「全てを選択」で描画矩形領域をすべて選択します。そこでペイントメニューの「回転」から「右90度」を選びます。画像が回転したら「追加」で新しいセルに登録してください。これを3回繰り返せば、回転するマスコットのできあがり。次に右側にちょとかたむいているマスコットをペイントメニューの「反転」で「左右反転」させてやります。マスコットが右側へ移動する時は、左側に傾いたセルを使い、左側へ移動する時には、右側に傾いたセルを使うと臨場感が出るわけです。(図12)

どうですか、アニメセルを増やしていくのは割と簡単でしょ。そして、とても楽しい作業です。昔々、MacPaintを愛用されていた方は、マスコット++のペイント機能を使っていると、懐かしい感覚が蘇ってきませんか?所詮、普通の人が使いこなせる描画機能はMacPaint以上は必要ないんじゃないかと思う今日この頃です(笑)

●グループ化と優先度

さて、セル描画が一段落付いたら、次に「グループ化」を行いましょう。これは幾つかのセルをまとめて、ひとつのグループを作る作業です。このグループが、マスコットの「動作」の単位になります。例えば、ぐるぐる回転する動作を表現するには、4つのセルをすべて選択し、ウィンドウ上の「G」ボタンを押します。(マスコットメニューの「グループ」でも可)すると、グループ化されたセルの番号表示部分はすべて同色となり、グループの先頭セルだけにパーセント表記がされ、残りのセルには青い矢印が表示されます。これでグループ化は完了です。グループ化のために、セルの順番を変更したい場合があります。そうした場合には、番号の部分をクリックし、ドラッグ&ドロップで別の場所へ移動できます。グループを解除したい場合には、同様に「U」(アングループ)ボタンを押します。(図13)

次に、このグループのプライオリティー(優先度)を設定してみましょう。通常マスコットは、すべてのグループの中からランダムに1つのグループをピックアップして表示していきます。優先度とは、そのピックアップの確率を上げたり下げたり調整する機能です。グループの先頭を選択し、イベントボタン(マウスアイコン)をクリックしてください。イベント設定のウィンドウがオープンします。(図14)今回はイベント設定はしません。その代わりイベント種類ボタンの下の優先度ボリュームを利用します。その数値をゼロから100の間で調整するわけです。例えば最初のグループの優先度が100、その次のグループも100とすると、どちらのグループも表示される確率は1対1で同等です。最初のグループの優先度が100、その次のグループが20だと、最初のグループが5回表示される間に、もう一つのグループが1回表示される確率となります。例えば、マスコットが寝てしまうグループは、そんなに頻繁に表示されては困ります。ですから優先度を20ぐらいに低く設定しておきます。

イベント(例えばマウスクリック)で起動するグループの設定は後述しますが、イベント対応のグループがひとつしかない場合には優先度は意味を持ちません。マウスクリックで必ずそのグループが表示されます。しかし、例えばマウスクリックで表示されるグループを2つ作った場合には、どちらを表示し易くするかを優先度で調整できます。つまるところ、たま〜〜にしか表示してほしくないグループ(幻のグループとか秘密のグループ)は優先度を小さくしておけばOKということです。ご理解いただけたでしょうか?

●移動方向の決定

さて、グループ化と優先度の設定ができたら、次は各グループの「動き」を決定します。セルを選択して、移動方向ボタン(黒猫アイコン)を押すか、グループ先頭セルの「黒猫アイコン」をクリックしてください。移動方向を決定するためのウィンドウがオープンします。(図15)まずは、移動方法が「固定方向」になっていることを確認してください。(それ以外の方法は別の機会に...)ラフに動きを決めるのならば、真ん中に表示される小さめのセル画像をマウスドラッグで移動すればOKです。

正確な動きを指定したい場合には、「X方向」「Y方向」のカラムに直接数値(ピクセル数)を代入します。モニターの上方向へ移動させるには、Y方向にマイナスの値を代入することになるので注意しましょう。「待ち」は、そのセルがどのくらいの間表示されているかを決定します。単位は1/60秒です。つまりこのカラムに60を代入すれば、そのセルは1秒間表示されることになります。この「待ち」をうまく調整することによりマスコットにメリハリのある挙動をさせることができます。(今回は拡大パラメータは省略します)

上記の作業は、先頭セルのX方向、Y方向、待ちパラメータを決定しただけです。グループ内の次のセルの移動パラメータを決定するには、番号表示がある「左右の矢印ボタン」で対象セルを切り替えてください。その横の「Copy」ポップアップメニューは、グループ内セルの各パラメータをすべて同じ値に合わせるのに便利です。例えば、全セルが同じX方向、Y方向へ移動するなら、ひとつのセルの値を代入した後に、メニューから「XY」を選択します。

移動設定に欠かせない最後のパラメータが「ループ回数」です。ループ回数では、一度の表示でグループ動作を何回繰り返すのかを決定します。例えば、右へ10ドット移動するグループのループ回数が5ならば、一度の表示で50ドット移動することになります。また、回転表示グループのループ回数に3を代入すると、一度の表示でマスコットは3度回転することになります。

●ちょっかい(イベント)に反応する

次は、ユーザからのちょっかい(イベント)で登場するグループを設定してみましょう。例えば、イベントとしてマウスクリックを設定したグループは「ユーザがマスコットに対してマウスクリックを実行した時のみ」表示されます。まずはここで、マスコット++がどんなイベントに反応するを一覧で示しておきます。(表2)今回のマスコットは、マウスクリック、マウスエンター、マウスアウト、キー入力の4種類のイベントに反応させてみることにします。

マウスクリックで表示させたいグループの先頭セルを選び、イベントボタン(マウスアイコン)をクリックします。先ほど優先度の話で出てきたイベント設定ウィンドウがオープンされます。一番上のセレクタボタンで「マウス」を選び、いくつかのイベント種類のなかから「マウスクリックイベント」をチェックします。チェックにより「特殊キー」「回数を指定」「背景クリックにも反応」などが利用できるようになりますが、今回は使いません。(図16)マウスクリックイベントの設定はこれで終わりです。マウスエンター、マウスアウトも同じ容量で設定します。

次は、キー入力で表示させたいグループを選んで、イベント設定ウィンドウで「キー入力」を選びます。「キー入力イベント」をチェックすると、その下の入力キーカラムが利用できるようになります。そこに好きなアルファベットを1文字入力しましょう。例えばiMacの「i」ですね。これでユーザが「i」キーを押した時にだけ、このグループが表示されます。その横の「大小文字を区別しない」をチェックしておくと、「i」でも「I」でも反応します。こうしてイベント設定を行いプロジェクトウィンドウに戻ると、それぞれのイベントに対応したアイコンがセル上に表示されます。これにより、どのセルにどんなイベントを設定したかが簡単に識別できます。以後は、このアイコンをクリックしてイベント設定ウィンドウをダイレクトにオープンできます。

●芸(アクション)をさせる

さあ、最後の仕上げです。次はマスコットにアクションを付けましょう。アクションには、「サウンド」「スピーチ」「吹き出し」の3種類があります。これらのアクションはグループの先頭セルだけでなく、どのセルにも付けることができます。アクションを付けたいセルを選択して、アクションボタン(吹き出しアイコン)をクリックします。これによりアクション設定ウィンドウがオープンします。

まずはサウンドを付けてみましょう。眠てしまうグループには「いびき」の音なんかが良いですね(笑)(図17)まずは「サウンドを鳴らす」をチェックしてください。サウンドはその場で録音することもできますが、方法メニューで「ファイルから」を選択すれば、AIFFファイルやMovieファイルを取り込めます。今回は株式会社データクラフトから発売されている著作権フリーデジタル音楽素材集「音・辞典」VOL.1「アニメ・ゲーム効果音」のいくつかの音を利用させていただきました。AIFFファイルを読み込んだらメニューの横の「スピーカ」ボタンで取り込んだ音を確認しましょう。自作マスコットをネットにアップしたりCD-ROMで大量配布するよな場合には、利用したサウンドや画像が著作権を侵害していないか?くれぐれも注意してください。

次は「i」キーを押した時に表示されるグループに喋らせてみましょう。スピーチはMacのシステムに「English Text-to-Speech」(Speech Manager v1.4以上)がインストールされていないと実行できませんので注意してください。「English Text-to Speech」はMacOS 8.5の「Mac OS特別付録」フォルダには入っています。(図18)アクション設定ウィンドウをオープンしたら、セレクタボタンで「スピーチ」を選びます。(図19)喋らせたい文字列(英語)を入力して、ボイスの種類、声の高さ、喋る速さを色々変えて試してみてください。「唇」ボタンを押すと、実際のスピーチを確認することができます。日本語を喋らせたい場合にはローマ字表記でごまかします。また擬音も(プクプク、ボンボン、ハハハなど)スピーチを利用すると割と簡単に実現できますので試してみてください。

最後は、吹き出しです。(図20)これはマスコット本体とは別の画像を、デスクトップ上に表示する機能です。マスコットは矩形領域内(例えば128x128)にしかセルを描けません。それよりはみ出したところに「せりふ」などを表示したい場合に、この機能を利用します。今回はマスコットの右上に「ハートマーク」を表示してみます。アクション設定ウィンドウで「吹き出し」を選びます。まずは「吹き出しを表示する」をチェックしてくださ。吹き出しに表示する画像は、ファイルから持ってきたり、カット&ペーストやドラッグ&ドロップで登録することもできます。今回は「ペイント」ボタンをクリックして描画してみます。ダイアログで縦横サイズを決めれば、後はセルを描くのと同じ要領です。描画が完了してペイントウィンドウを閉じると、アクションウィンドウに吹き出し画像が表示されます。この画像をマウスドラッグして好みの位置(セル画像からの相対位置)に移動してください。(数値入力も可)最後に吹き出しの表示時間(単位は1/60秒)を入力します。「置き去りにする」や「白色は透明にする」オプションに関しては次の機会にお話しすることにします。

アクションを付けた時の注意は、次に同種類のアクションが開始されると、前のアクションは停止すると言うことです。ただし、吹き出しだけは「置き去りにする」をチェックしておけば消えません。サウンドやスピーチを最後まで鳴らしたい場合には、マスコットの表示時間を考慮してうまく調整する必要がります。アクションを設定すると、それぞれに対応したアイコンがセル上に表示されます。(図21)以後は、このアイコンをクリックしてアクション設定ウィンドウをオープンできます。また、オプションキーを押しながらクリックすると、サウンドやスピーチならその再生を、吹き出しならペイントウィンドウをオープンすることができます。

●マスコットの動作確認とアプリ化

さて、グループ化、動作方向、イベント、アクションなどのすべての設定が終了したら動作確認を行ってみます。動作確認はウィンドウ右上部の「R」ボタンをクリックするか、プロジェクトメニューから「動作確認...」を選択することで開始されます。今回は話の流れで、ほぼ完成時点で動作確認をしていますが、この機能はアニメセルを描きながら、イベントやアクションを設定しながら、その都度どんどん活用してください。楽しい作品を作るためには試行錯誤が重要です。ちなみに、編集メニューの「環境設定...」で「動作確認でダイアログを表示しない」をチェックしておくと、いちいちダイアログを表示しなくなります。あなたのマスコットは思ったとおりにちゃんと動いていますか?うまくいったら、とにもかくにもファイルメニューから「保存...」を選んで、大事なデータをファイルに保存いたしましょう。

動作確認が終了し、作品にOKが出たら(だれが出すんだ...)さっそく単独で動くアプリケーションにコンバートしてみましょう。この作業も動作確認と同様に何回でも繰り返せます。作成途中でも気軽に試してみてください。その前にせっかくですから、アプリ化したマスコットにオリジナルのアイコンとアバウトを付けてみましょう。まずアイコンです。プロジェクトウィンドウでアイコンに用いたいお気に入りのセルを選択します。プロジェクトメニューのオプションから「アイコン...」を選びます。(図22)表示されたダイアログでは「ディフォルトアイコン」が選択されていますので「選択セルの画像を利用」に切り替えてください。左側の窓に選択セルの画像が表示されればOKです。

次はオリジナルのアバウトボックスです。まずはアバウト用画像を用意しましょう。例えばデジタルカメラから取り込んだ画像ファイルなどです。そのファイルをプロジェクトウィンドウの背景フォルダに登録します。登録はドラッグ&ドロップで行えます。(図23)登録が済んだらダブルクリックでペイントウィンドウに表示し、タイトルでも書き込んで編集しましょう。画像を選択し、オプションから「アバウト..」を選びます。ダイアログで「選択セルの画像を利用」を選択して、OKボタンを押せば完了です。(図24)

いよいよアプリケーション化です。マスコットのアプリ化はプロジェクトメニューの「アプリ作成...」で行います。(図25)ダイアログが表示されたら「登録されている背景は使わない」をチェックしてください。こうしないと、アバウト画像の上でマスコットが動くことになります。(これはこれで面白い)ダイアログの一番上の動作スピードは、マスコット自体の表示スピードではなく、マスコット表示がどのくらいMacのCPUパワーを使うかの目安です。「低速」は、あまりCPUパワーを使いません。ゆっくりとしか動かないマスコットはこれに設定してください。バックグランドで動いても、他のアプリケーションにあまり迷惑をかけません。逆になるべく設定スピードを出したい場合には「高速」を選んでください。その横の「超高速」はハイライト(薄く)になっていますが、これは背景上でマスコットを起動する時のみ(ゲームの時などですね)利用できます。ダイアログの「OK」ボタンをクリックし、アプリ名を入力するとコンバートが開始されます。デスクトップにアイコンが現れたら、ダブルクリックでマスコットを起動してみましょう。うまくいきましたか?(図26)

●エピローグ

今回の話もアプリ化以外はデモ版で実現できます。ぜひ試してみてください。今月からCD-ROMにはキーウェアになったキューティマスコットJR.とキューティマスコット++が添付されています。起動してダイアログの「続ける」、その後「同意します」ボタンをクリックし表示されるダイアログで「デモ版で試す」をクリックすればデモ版として起動します。購入をご検討されている方は「コーシンストア(インターネット)」ボタンをクリックしてください。ご愛用のMacに「インターネット設定機能拡張」がインストールされていれば、自動でインターネットにアクセスし,、購入方法を解説したサイトにリンクします。

今回の原稿を書いている時期は、MACWORLD Expo/Tokyo 開催の少し前です。(1月末)ちまたでは、ジョブズが基調講演で新型のPowerBook G3を発表するのではないかと言う噂が流れていますが、私は、ひょっとして新しいコンシューマポータブル機を発表するのではないかと思っています。この機種のメインターゲットは間違いなく日本でしょうし、先んじて発表したところで、Appleの現状商品構成でこれとぶつかる製品はありません。つまり、iMacとまったく同じ戦略が取れるわけです。時期的にもぴったりのような気がします。 Expo/Tokyoでは、ジョブズは初めての基調講演だそうですね。多くの日本の聴衆の前で話すのは、きっとNEXTの日本発表以来でしょう。(私は見に行った)日本嫌いという噂もありますし(本当かしら?)なのに、わざわざやって来ると言うことは、相当な理由があるわけでして...(笑)はてさて、MACWORLD Expo/Tokyoで「Think different」は実践されたでしょうか?

次回は「もっと面白いマスコットを作ろう-前編」という題目で、イベント、アクション、プログラムをガンガン駆使したマスコット作りにトライしてみます。複数のマスコットを同時に動かす方法や、背景の利用方法なども解説いたします。また、マスコットは絵が描けなくても楽しめるという事を紹介するために、別ファイルからの素材取り込みにもチャレンジしてみます。

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