キャラクターファイルとは
キャラクターイベントで使用するキャラクター画像の素材作りについて解説します。
swfAdvで読み込み対応している画像形式は以下の通りです。
- SWF
- 非プログレッシブ JPEG
- 非アニメーション GIF
- PNG
しかしながら、swfAdvは以下の点によりSWF形式でのキャラクター素材作りを強く推奨しています。
- 立ち絵の輪郭の外側を見えなく（透過）させて背景と綺麗に馴染ませるには、通常の画像形式では難しい。
（png, gifならば可能）
- 頻度が高いであろう表情変更の毎に画像読み込みをしていては非効率的。あらかじめ幾つかの表情パターンの
をパッケージしたファイルをロードする方がプレイもスムーズになる。
- まばたき、口パク、立ち絵自体が動く、などのキャラクターアニメーションが容易に実装できる。
- ファイル数が減れば管理が楽になる。
本稿では、SWF形式でのキャラクターファイル制作について解説していきます。
キャラクターファイルの作り方
- １．キャラクターイメージの制作
- まずはキャラクターの絵素材を用意しましょう。
- Flash上のグラフィックエディタで直接ペイントするか、PhotoShopなどのツールで制作した画像ファイルを使用します。
- 図1-1. Flashでペイント中の画面
画像ファイルを使用する場合、背景とキャラクターの体を馴染ませるためには輪郭の外が透過された画像を使う必要があります。- 透過画像にはGIFとPNGが一般的ですが、GIFだと輪郭にジャギが出てしまうのでPNGを使うことをお勧めします。
- 絵が用意できたら、これをムービークリップインスタンスに変換します。変換してできたムービークリップを、ここでは
- 「表情ムービー」と呼ぶことにします。
- 複数の表情パターンを用意したい場合には、下のように各表情ごとに表情ムービーを制作していきます。
- 図1-2. 「平静」と「怒った」顔の表情ムービー
- ２．表情の定義
- 次は、手順１で制作した表情ムービーをswfAdvで使えるように準備します。
- swfAdvはキャラクターファイルのrootのタイムラインを移動することで表情の切り替えを行っています。
- では具体的にどう作業するかというと、下図のようにrootのタイムラインに表情の数だけキーフレームを切り、フレームラベルに
- 任意の表情名を記述するだけです。
- 図2-1．表情ごとに切られたキーフレーム
あとは手順１で制作した表情ムービーを、対応した表情のキーフレームに配置すれば完了です。- 配置の際に注意しなければならないのは、表情ムービー内のキャラクターの仕草によって画像の幅に違いがある場合です。
- 図2-2．違う横幅同士のイメージ比較
上図は横幅がばらばらのイメージを縦に同じ座標で並べたものです。その上から一番上のキャラクターの背骨の位置を基準に- 赤い線を引きました。見てわかる通り、幅に差がある画像ほど背骨の位置がずれています。
- この状態で各表情を同じ座標に全部配置してしまうと、表情が変わるたびにガクガク立ち居地がブレて見栄えが悪くなるでしょう。
- なので、どこかの座標を基準に表情ムービーの位置を微調整する必要があります。
- 図2-3．座標を調整された表情ムービー
上図はx:0, y:0の座標を基準に、背骨の位置に調節されたものです。- これで綺麗に表情切り替えできるキャラクターになりました。
- 制作できる表情の数は、Flashの仕様()に依存しますが、数が多くなるだけ容量も大きくなります。
- 数メガ単位まで膨れ上がってしまった場合は、複数のキャラクターファイルに分けるなど工夫する
- 必要がでてきます。
- （例えば、同じキャラクターで違う衣装の絵がある場合、同一場面で服装を変えることは稀でしょうから
- ファイル分けし易いと言えるでしょう。）
- ３．表情の定義
- 今度は、シナリオファイルのテキストイベントから呼ばれる口パク機能を追加します。
- この機能は無くてもシナリオ自体は動作しますので、必須ではありません。
- ではまずはじめに、口の部分だけを切り抜いたアニメーションムービークリップを作ります。
- これを口パクムービーと呼ぶことにしましょう。
- swfAdvのテキストイベントでは、テキスト表示している最中に口パクムービーをループ再生しテキストが表示し終わったら
- 口パクムービーの１フレーム目で停止します。その点を留意してアニメーションを作っていきましょう。
- 図3-1．口パクムービー製作中のタイムライン
だいたい0.3～0.4秒くらいで一回口を開閉させる動きにすると良い具合になると思います。- コマ数は多ければそれだけなめらかになりますが、閉じた状態と全開の状態と、その間を取った３コマでも
- それなりに綺麗になります。
- できたアニメーションはムービークリップに変換し、表情ムービーとは別のシンボルにします。
- 次に、表情ムービー内に口パクムービーを追加します。
- 口パクムービーを作ったことで、口の部分は別のパーツになっているため、元の絵から口だけ削除した状態で
- 画像を用意します。
- 図3-2．口の無いイメージ
この上階層に、先程作った口パクムービーを重ねればアニメーションの準備は完了です。
- 最後に、swfAdvがどのインスタンスが口なのかを特定するために、インスタンス名を設定しておきます。
- 口パクムービーと、その上の階層である表情ムービーの二つに下記の名前でインスタンス名を入力します。
| 指定箇所 |
インスタンス名 |
| 表情ムービー |
expression |
| 口パクムービー |
mouth |
- 表3-1．インスタンス名対応表
- 図3-3．表情ムービーへインスタンス名入力
- 図3-4．口パクムービーへインスタンス名入力
以上で口パク機能の実装が完了します。
Flash8以前(ActionScript2.0以前)でキャラクターファイルを制作する際の注意点
Flash9(ActionScript3.0)で制作されたFlashコンテンツは、Flash8以前の設定でパブリッシュされたFlashコンテンツと直接連携することができません。
Flash8以前で作られたキャラクターファイルをswfAdvで使うには、
LocalConnectionオブジェクトを介して通信する必要が有ります。
通信するために、キャラクターファイル側に実装しなければならない機能として以下の二点が挙げられます。
- コネクション名の生成、送信機能
- 各アクションに対応した処理を行う機能
作成例を以下に記述します。
- 1. コネクション名の生成
- LocalConnectionで通信する際、同じコネクション名が使われているものがあると全てに送信されてしまいます。
- キャラクターのように個々で表情を変えたり、口パクさせる必要のある場合は、ユニークなコネクション名である必要が有ります。
- よってまず、swfAdvに対し読み込まれたキャラクターが、どんなコネクション名で通信するのかを知らせなければなりません。
- swfAdvは、キャラクターを画面に表示した直後に「_PrototypeConnectName」という名前でコネクションを張るので、それに対しユニークなコネクション名を送信します。
- 接続後「onConnectionName」というメソッドに、コネクション名の文字列を引数で渡せば完了です。
- 2. アクション処理機能の実装
- swfAdvからキャラクターに対して送信するアクション動作の処理を、スクリプトで記述します。
- swfAdvがアクセスしてくるメソッドは以下の二種類です。
| メソッド名 |
内容 |
| expression |
表情変更(<chr action="face" id="1">表情名</chr>) |
| lip |
口パク{true:口パクオン, false:口パクオフ} |
| quit |
キャラクターが画面から取り除かれる際に実行されるメソッド |
- ※具体的な処理内容はキャラクターファイル側での実装となるので、必ずしもキャラクターファイルの作り方に記載した手法で作る必要はありません。
- 例：キャラクターファイルの1フレーム目に下記のようなスクリプトを記述します（サンプルダウンロード）
var swfadvconnect:LocalConnection = new LocalConnection();
//現在時刻+ランダム数値によるユニークになりそうな値を生成
var date:Date = new Date();
var date_str:String = (String(date.getDate())
+ String(date.getHours())
+ String(date.getSeconds())
+ String(date.getUTCMilliseconds()));
//コネクション名
var realName:String = "_maidConnectionName" +date_str;
//生成したコネクション名でキャラクター自身にコネクションを張る
swfadvconnect.connect(realName);
//swfAdvにコネクション名を送信
swfadvconnect.send("_PrototypeConnectName", "onConnectionName", realName);
var _this = this;
//表情メソッド
swfadvconnect.expression = function(name:String)
{
_this.gotoAndStop(name); //特定のフレームへジャンプ
}
//口パクメソッド
swfadvconnect.lip = function(flag:Boolean)
{
//口パクアニメーションのMovieClipを再生するか、1フレーム目で停止させるかの処理
if(flag){ _this.expression.mouth.play(); }
else{ _this.expression.mouth.gotoAndStop(1); }
};
参考資料
- 画像形式について
- 開発blog ゲーム制作記事
最終更新：2009年06月07日 11:13
