サンプル制作 その2

続いてFlashでのキャラクターオーサリングに入る。

前回最後は一枚絵で保存していたが、本稿では「表情付け」を見越し、パーツごとに分割して画像ファイルを用意することにする。
最近のスタンドアローンで動くアドベンチャーゲームは表情を一枚絵でたくさん分用意しているのがほとんどだ。そのおかげで、一見なんて事ないアドベンチャーなのに矢鱈と容量を食う作品が多い。スタンドアローンなら問題が無いが、swfAdvはネットごしに動作するので容量はできるだけ抑えなければならない。なので、似たデザイン同士ならパーツを使いまわしてなるべく無駄を省くようなキャラクターファイル制作が必要。


1.パーツ分割

このように、目、口、眉、体の4パーツに分解した。レタリングの段階でレイヤー分けしていればこういった作業も簡単になる。


2.Flash上で結合

Flash上でレイヤー分けして再結合する。各パーツのビットマップは、当然グラフィックインスタンス化し無駄を抑えるようにする。
インスタンス化したときに、稀にビットマップが歪む現象が起こるケースがある。その場合、中心点を右下に(つまりビットマップの座標を{x:width * -1, y:height * -1})すると改善できるみたい。バグかな。


3.目のアニメーション
キャラクターにまばたきアニメをさせたいので、目のイメージだけをムービークリップにした。
コマ数は「開,閉,半目」の3パターン。多ければそれだけ綺麗になるが、この程度でもそこそこ良い品質になる。


タイムラインに配置。各コマのフレーム数はフレームレートから計算する。今回は60fpsでパブリッシュするので、20フレームでアニメーションを作ると0.2秒でまばたきすることになる。
さらに、まばたきする周期をランダムにさせたいので頭のキーフレームに適当なタイマーを入れる。

1フレーム目

  var time = Math.floor(Math.random() * (10-1+1))+1;
  time *= 1000;
  var overTime = getTimer() + time;

5フレーム目

  if(getTimer() >= overTime)
  {
    //経過
  }else{
    gotoAndPlay(this._currentframe - 1);
  }

上記は1〜10秒の間でランダムに待ち時間を設け、経過したら続きを再生するというスクリプト。これをまばたきアニメーションより前のフレームに書いておけば、数秒待った後一回まばたき→最初に戻ってまた数秒待ってまばたき・・・というループが行われる。
わざわざこれをタイムラインだけのアニメーションで実現すると面倒だが、ASを書くことで大幅に楽になる。


4.口パクのアニメーション
口も目と同様にアニメーションさせる。
口パクのon/offはswfAdv側で制御するので、こちらは単にループアニメにしておいた。


5.表情に実装
最後に、できたキャラクターをムービークリップインスタンスにまとめる。
同様の方法で3種の表情を作り、root階層のタイムラインに配置する。

各表情が配置されているフレームのフレームラベルに表情の名前を書く。swfAdvからはこの名前で表情へアクセスすることになる。


・完成したキャラクター(通常表情)直接貼れないのが面倒:-(
http://www22.atwiki.jp/swfadv/pub/source/sample/sample.swf

・flaサンプル
http://www22.atwiki.jp/swfadv/pub/source/sample/maid.lzh