Unityと吉里吉里でSLGとかRPGを作るブログ

今まで作ってきたエフェクト処理を多少修正してまとめてみた。
正直、忙しい最中に作ったので、結構直した方が良い部分も多かった、やっぱ最初に設計をカチッとした方が良いんだろうな。


///エフェクトの概要
■エフェクト処理の流れ
エフェクト処理概要図
エフェクト処理の中で、クリップ方式のアニメーションを行った場合の処理。

■エフェクト概要図
エフェクト概要図
セル方式もクリッピング方式も基本的にぱらぱら漫画の要領である事には変わり無いので、呼び出される度に次の画像を表示すれば良いわけだ。
原理は以下になる。

①予め画像をエフェクト用レイヤにロードし、レイヤを非表示にしておく。
②setSizeで1コマ分のサイズに変更する。
③最初に呼び出されたら、所定位置にレイヤを移動させ表示する。
③次から呼び出される度にsetImagePosで表示領域を上にずらし下の画像が表示される様にする。
④全部のコマが表示されたらレイヤを非表示にする。

①~②は簡単、起動時にエフェクト用のレイヤを用意する。エフェクト用の画像をロードし、重ね順序などを設定する。
簡単に言うと後は表示だけ!って状態にしておく。

そして、③~④を制御するのがエフェクト情報になる。
どんなエフェクトが、何処に、秒間何コマで、何ミリ秒表示されるかをまとめたクラスを作り、それを配列で管理する。
その配列に情報があった場合は、表示したいエフェクトがあると言う状態になる。それをコンティニュアスハンドラで監視する。
あったら、その情報を元にエフェクトを表示、削除する。


///エフェクト情報
エフェクト情報とは簡単に言えば、エフェクトを表示する為の情報。
情報用のクラスを作成し、それを配列で持つ事で管理する。
基本的な情報はCSVで起動時にロードしておく、例えばその時鳴る効果音とか、どのエフェクト用レイヤを使用するのかとか。
■エフェクト情報概要図
エフェクト情報概要図
この情報の詳細は、以下を参照してほしい。

モード
どのエフェクト用レイヤを使用するか?と言う情報。これとエフェクト用レイヤを直接関連付ける方法として、エフェクト用レイヤを配列にして、こいつをその添え字と同じにしておく。

X補正
 エフェクトはレイヤにロードした画像をsetImagePosで表示領域を換える事で表現する。
 この補正値分setImagePosで指定する位置を変更する。

Y補正
 上に同じ

タイル番号1
 エフェクトの対象となるユニット番号。例えばダメージならダメージを受けているユニットになる。

タイル番号2
 上の予備みたいなもの、例えば回復役が1で、回復されるユニットが2とかにする。

カウント
 ぱらぱら漫画が何コマかを表す。下の画像例なら5が入る。
 ■画像例
 アニメ画像

ウェイト
 コンティニュアスハンドラは秒間何回か固定して稼働させる為、(実際には何ミリ秒以上立ったら処理する様にする)それ上でのウエイト。
 簡単に言うと何回に1回しかコマが変わらなくする為の設定。上の画像例なら1回に1コマ変わると秒間50コマのコンティニュアスハンドラなら、0.1秒で終了してしまう。この値を10とする事で10回に1コマしか変わらず1秒かけてアニメーションする様になる。

現在ウェイト
 上の更新用。コンティニュアスハンドラから何回呼び出されてるか管理。

単独
 エフェクト情報は配列で処理し、上から順にエフェクトを起動する。この時単独フラグがたっているエフェクトが来るまで、全て同時にエフェクトを実行する。
 例えば、ダメージの場合、攻撃エフェクトは単独で、ダメージの数は1桁目から4桁目まで同時で表示するとかの制御の為。

初期稼動ウェイト
 エフェクトが開始されるまでのウエイト。ダメージエフェクトみたいに、1桁目に遅れて2桁目が出るとかの演出の為。

終了後ウェイト
 アニメーションは終ってるけど、最後の画像を暫く表示したい時なんかに使うウェイト。
 レイヤを非表示にするのをこの値だけ待つ。

初期配置left
 画面上の何処に表示するか。上のタイル番号とこれを元にエフェクトの表示位置を決定する。

初期配置top
 上に同じ。

効果音
 エフェクトが表示された場合にならす効果音。

初回稼動フラグ
 エフェクト用レイヤなどの位置や表示(非表示からの切り替え)などは1回でいいので、そのフラグ。簡単に言うとぱらぱら漫画の1コマ目かを表す。

表示領域位置X
 setImagePosで指定する表示領域。呼び出されるたびにここを更新してアニメーションさせる。

表示領域位置Y
 上に同じ。

アニメフラグ
 エフェクトかどうかを表すフラグ。エフェクト以外の効果もエフェクト情報で管理した方が楽なんで(HPなどの増減はエフェクトに連動して変わった方が良いから)。




今回はここまで、相変らずの文章力で自分でも嫌になるが、これにかまけてゲーム作成が疎かになっては意味もない(言い訳終了)


スポンサーサイト
2009.02.27 / Top↑
三匹が斬るを越えそうな勢いだけど、今日で戦闘エフェクトは一応の終了。
今回は、レイヤの移動エフェクトを作成する。重要なのは今まで使用した「エフェクト情報」で移動出来る様にする事。


///移動エフェクト概要
別にそんなに問題はない。クリップ方式と同様に1回単位の移動量と移動方向さえあればOKのはず。
これをエフェクト情報で再現する場合、描写位置はそのまま、表示領域の更新部分を移動量にすればOK。
なんだ割りと簡単。


///アクション表現エフェクト
なんかメンドイ名前が付いてるけど、攻撃などのアクションを起こしているユニットを明示するエフェクトを作成する。
元ゲーではユニット絵と2枚程度のアクション画像だった。こっちもそれにちなんで、アクション絵+アクション名で行こうと思う。
つまり、「攻撃してますよって絵」と「通常攻撃とかのスキル名」で表現。

問題なのは「攻撃してますよって絵」、他のアクションレイヤは起動時に読み込んでるけど、ユニット毎に全部読み込むと膨大になるし、かといってアクション毎に読み込むと画像の展開が頻発してしまう。
そこで、戦闘開始時に全ユニット(12)個分読み込んでおく事にする。


///実際に動かしてみる
■レイヤ移動画面
レイヤ移動画面
アクション名(スキル名)出てないじゃんとか、なんじゃこの画像はとか突っ込みもあろうが、スキル周りが出来てないので仕方ない。
画像は、適当な大きさの画像をコピって元絵を塗りつぶしてる為、カラフルなのはある程度容量のある画像じゃないと、速度が分からんと思った為。
※わかりにくいけど、下の赤い矢印方向に画面の外側から移動させている

速度については、秒間60コマで動かしてみた。私が実施したテストではレイヤを移動するのは、クリップ方式よりも処理的に安定しなかった。(コンティニュアスハンドラの呼び出しが不安定)それでも、この程度なら問題ない様だ。




今回はここまで、実際は結構ソース直したんだけど、実質的な追加機能はこいつだけ。
複雑になったので、あとからだけど仕様書を作成しておく。今後必ず役に立つはず。


2009.02.25 / Top↑
前回に引き続き、戦闘エフェクトを作成する。今回は数字エフェクト。ダメージ受けたり回復したりする時にでる奴。
取り合えず、4桁最大で、左から順に少しずつずれてアニメーションする様に設定してみる。


///数字エフェクトの概要
今まで作成したエフェクトと基本は同じ。画像は下の画像を使用する。
■画像例
damage_num.png
一番したにMがあるのは、MISSってのを作る可能性があるから。

今まで作成したエフェクト処理で同様に処理する。
①4桁なので、4レイヤ作成し全部に画像を読み込んでおく。
②桁数分エフェクト情報を表示する。
③エフェクト情報を元に表示領域を左にずらしてアニメーションする。

ここは今までと同様。ただし、数字エフェクトの場合、以下の処理が必要になる。
①桁数が固定ではない
 1桁ダメージから最大9999ダメージまである訳だから、桁数を取得してエフェクト情報を制御する必要がある。

②桁数に合わせて表示場所が違う
 4桁なら、一番左のレイヤは左端に表示されるけど、1桁なら中央に表示しないといけない。

③任意の数字を出す
 今までのエフェクトは決まったアニメーションだったが、今回はダメージや回復量にあわせる必要がある。

④徐々に表示
 1桁目が表示されてから、数フレーム後に次の桁が出る様にしたい。

まあ、だいたいこんな感じ。



///処理方法
①桁数が固定ではない
 これは桁数を取得して、その分レイヤを表示すればOK。数字エフェクト用レイヤを配列でもっておけば簡単に出来るだろう。

②桁数に合わせて表示場所が違う
 エフェクト情報に初期配置を作成しておき、ユニットの情報画像の幅から桁数X文字幅を引いて、2で割った値を全部に足せば真ん中に表示出来る

③任意の数字を出す
 画像例を見て貰えば分る様に、数字高さX実際の数字の位置に表示領域のY軸を設定すればOK。

④徐々に表示
 アニメーションを始めるまでのウェイトをエフェクト情報に設定すればOK。

結構メンドイな。

■実際に動かしてみる(4桁)
四桁
こんな感じ。数字は1234と表示してみてる。

■1桁
一桁
1桁の場合、ちゃんと中央に表示。勿論2桁3桁も中央表示になってる。




今回はここまで、やっと仕事のピークが終了。次回はアニメーション機能の充実とまとめを実施。
ここまでちょこちょこ増設してるので、仕様にもソースにも無駄が多い。

2009.02.23 / Top↑
引き続き、エフェクト処理の作成。今回はいよいよアニメーション部分を作る。


///エフェクトアニメーション
■画像
mikata_damage_ef.png
この画像をコンティニュアスハンドラで呼び出される度に上から順に表示する。
やり方としては、以下の手順になる。

①予め画像をエフェクト用レイヤにロードし、レイヤを非表示にしておく。
②setSizeで1コマ分のサイズに変更する。
③最初に呼び出されたら、所定位置にレイヤを移動させ表示する。
③次から呼び出される度にsetImagePosで表示領域を上にずらし下の画像が表示される様にする。
④全部のコマが表示されたらレイヤを非表示にする。

割と面倒。


///実際に動かしてみる
■こんな感じ
ダメエフェ
ちとわかりにくいけど、ピカピカ点滅している。
ダメージ受けた時に光るあれの表現として使う予定。

■ダメージ(数字)追加
ダメージ(数字)
数字エフェクトも同様に追加してみる。まだ、数字に合わせて出せないので全部0。




今回はここまで、次回はダメージの数字を表示する部分を作っていく。アニメーション部分は現在と同じでよいけど、今は数字が指定出来ない。
数字を変えるのはいろいろ面倒なんで次回に繰越。

2009.02.20 / Top↑
前回に引き続き、戦闘処理のエフェクト部分を作っていく。
来週になれば仕事も落ち着くので、本来の速度を取り戻すはず(言い訳終了)


///シャドウエフェクトの設定
左右に味方と敵が分かれて表示されるタイプのRPGやらSLGではわりとポピュラーなエフェクトに、行動するキャラクター以外にシャドウをかけて、行動するキャラクターを明確にする奴がある。
今日はそれを作成する。
まず、行動キャラクターのみシャドウがかからない状態になり、続いて攻撃やら回復の対象となったユニットのシャドウが解除される。
前回まで作っていったエフェクトの処理に、行動ユニット対象ユニットのデータを追加するだけでOK。

■行動ユニット
対象ユニット

■行動ユニット+対象ユニット
行動+対象ユニット

重要なのはシャドウがかかっている事ではなくて、これがユニットの行動順にあわせて表示される事と、表示時間を自由に弄れる事。
行動順はそんなに問題ない、実際行動する順番がはっきりしてるんだから、それにあわせればよい。
時間は開始までのウェイト処理でよいだろう。行動ユニット行動ユニット対象ユニットでシャドウ処理走るだけで誰が誰に対して行動を起こしたか解りやすく表現出来る。



すすまねぇ。
でも、来週には落ち着くし、休みも取れる。次はダメージ表現エフェクトと出来ればダメージ(数字)のエフェクトが出る様にしたい。
その後は、このエフェクト周りをまとめてみる予定。

2009.02.19 / Top↑
前回の仕様に若干の問題があったので、そこらを修正。
土日出勤と言う底辺の仕事らしい状況だったので、そっから全く進んでいない(言い訳終了)


///エフェクト情報管理修正
前回は、下記の状況だった。
①モード
 ダメージ、AP消費など行動に合わせてIDを設定

②カウント
 アニメーションなら、そのセル数(クリッピングの場合でも)

③ウェイト
 20ミリ秒に1回コンティニュアスハンドラを動かすとして、その内、何回単位で動かすかと言う設定。


しかし、これでは上のエフェクトAが終わったら、エフェクトB、Cが同時に流れるなどを制御する事が出来ない。
そこで、更に単独フラグを設定する。基本は並列で動く様に考えてたんで、これで単独で動く奴を作ればOK。
簡単に言うと、単独フラグが立ってるエフェクトデータが着たら、以下の処理を実施しないとする。

■エフェクトデータの管理
エフェクトデータ
ここの数字エフェクトはダメージの1~3桁目を現す。これだと同時にダメージが出る訳。
更に開始ウエイトをかければ、1桁目が数ミリ秒前に出て続いて2桁目なんて事も可能。この手のダメージ表現は、ゲームでは良くあるので、その辺を想定して作って見た。




今日はここまで、明日は休みだが老体にはキツイので恐らく進まない。
まずは、スキルを!と考えてたけど、もう少しまともなエフェクトを実際に動かしてみて、速度やこのシステムの使い勝手を考えてみたい。

2009.02.15 / Top↑
前回、アニメーション関連を調べたので、それを実行する機能を作る。
取り合えず、アニメーションは置いておいて、行動値を消費する処理を作って全体の流れを把握。


///処理概要
戦闘処理は以下の流れで制御
①行動ユニットの決定
 ユニットの能力であるスピードと乱数(今の所0~10)でユニットの行動順を設定する。

②行動ユニットの行動
 攻撃とか防御とか回復とか。
 ユニットの能力がHPとスピードしかないので後回し。

③行動内容のエフェクト情報設定
 ダメージ表現とか。今回は行動回数(AP)の消費のみ。
 エフェクト情報テーブルからエフェクト情報を取得し登録する。

④エフェクトの実行
 アニメーションとか画面の更新とか。
 ③で登録された情報が無くなるまで、コンティニュアスハンドラでエフェクトを実行。

⑤終了判断⇒①に戻る
 行動するユニットが残ってるなら①、残ってないなら終了。

・・・・・めっさめんどくさいな。


///エフェクト情報管理
テーブルは何時もの様にCSV形式でデータを持つ。
内容は下記
①モード
 ダメージ、AP消費など行動に合わせてIDを設定

②カウント
 アニメーションなら、そのセル数(クリッピングの場合でも)

③ウェイト
 20ミリ秒に1回コンティニュアスハンドラを動かすとして、その内、何回単位で動かすかと言う設定。
 ウェイトが2なら、40ミリ秒に1回セルが変わる。


///取り合えず動かしてみる
■1秒後画像
1秒後

■7秒後画像
7秒後

これだと分らんけど、実際は行動回数(赤い■)は1秒毎に1個ずつ減っている。




今回はここまで、次はユニットの行動を制御する。ユニットに能力とかスキルとかの概枠が必要。もうゲーム仕様に直結する場所だな。


2009.02.13 / Top↑
KAGでアニメーションを行うにはセル方式とクリッピング方式がある。
これらの解説はこのサイトなどを見て理解して頂きたい。

問題はこれらをTJSで使用する場合である。
その為には、この2つの方式の本質を理解しないといけない。


///セル方式とクリッピング方式
■セル方式&クリッピング方式の概要
無題

上は同じ画像を使って、2種類のアニメ方式を再現した場合。
セル方式は、画像を切って貼り付ける様なイメージ。クリッピング方式は、ノートに穴を空け、下に連続した絵を入れて動かす事で、穴から覗く絵が動く方式になる。

2D画像を処理する場合、一般的にはセル方式で行う物と思われる。
現在、大抵のゲームではダイレクトXを使用しており、最近のPCの性能と合わせると2Dで速度を気にする必要は全くない。
しかし、吉里吉里ではダイレクトXは使用出来ない。恐らくその点を考慮して画像をコピーしない分軽いクリッピング方式を作成した物と思われる。
※現在では、公式はもとより、ダイレクトX用のプラグインも公開されていない様子。一部ゲーム会社では独自に作成したプラグインを使ったとの情報あり


///TJSでのアニメーション
KAGで2つのアニメ方式を解説している所では、セル方式が簡易でクリッピング方式がやや面倒だが動作が軽いとしている。
しかし、TJSで使用する場合、KAGスクリプトをTJSから呼ぶ出す様な使い方をしない限り、基本的には同じで、コンティニュアスハンドラで一定間隔で画像を変更する事になる。
※戦闘画面などの状況に応じてアニメーションを行う場合は、これ以外だと凄く大変

そうなると、基本的なアニメーションは全てクリッピング方式を採用し、セル方式はレイヤの移動や回転などの場合のみにすれば、一番軽くなるはず。

まず、コンティニュアスハンドラだけど、これは「TJSに挑戦!」のレイヤの自動移動に詳しく載っているのでそちらを参照して欲しい。
次にクリッピング方式だが、これはAnimationLayer.tjsを参考にsetImagePosメソッドで表示領域を変更すればOK。
※AnimationLayerをそのまま使うのはしんどそう


///アニメーションの速度
コンティニュアスハンドラの回数などは、上で紹介した「TJSに挑戦!」に詳しく載っている。
このサイトでは、毎秒2000回ほど呼び出されている事に驚いていたが、小さな画像を回転させるだけで、この程度の回数なのは非常に不安。
実際、テストしてみた所、一切の画像なしの場合、1万から1万5千程度呼び出しがあった。
実際、上のサイトでも2個で1000ちょっとまで落ちている。

そこで私は、秒間60回動く様に作成したコンティニアスハンドラで、クリッピング方式とセル方式でアニメーションさせて見た。

■PCの性能
CPU:Celeron(R) 3.20GHz
RAM 500
平均よりは2つほど堕ちるPCになると思うが、2Dでは特に問題はない性能。

■使用画像
アニメ画像

■テスト内容
秒間:60回で随時アニメーション
秒間:50回で随時アニメーション
その上で、最大どの位遅れたかでテストを実施。
例えば、秒間50回なら、前回稼動から20ミリ秒以上たったら稼動させる、これで1秒間(1000ミリ)でどの位遅れがでるかを調査する。
トライ回数は60回(1分)

■テスト結果
 ①セル方式
  毎秒50回:最大15ミリ秒
  毎秒60回:最大30ミリ秒

 ②クリッピング方式
  毎秒50回:最大13ミリ秒
  毎秒60回:最大18ミリ秒

あくまでも限定された調査だが、数回調査した段階でもはっきりとした差が出た。
1つはやはりクリッピング方式の方が軽い事。
もう1つはセル方式の場合、秒間の稼動数が増えると安定度が一気に下がる事。
また、平均的な安定度でもセル方式は不安定だった。クリッピング方式が平均では非常に安定しており、ズレ0ミリ秒が基本だったのに比べ。セル方式では常に何ミリかのズレが生じた(60回の場合)。



今回はここまで、実際どの程度のアニメーションが出来るかは作りながら調査する事にした。
そんな訳で、アニメーション用の機能を作成予定。



2009.02.11 / Top↑
前回の続き、敵のユニットのランダム出現。
後は一部のソースの最適化を実施した。よって今日は必要以上に短いよ(言い訳終了)


///戦闘画面の敵ユニット
■1回目
ランダム1
■2回目
ランダム2
きっちりランダムで出現している。更に敵1~5までしか出てない。ちゃんと敵の幅を絞れている。



次回から戦闘画面のエフェクトを作っていく。再び速度の問題が発生しそうなので、まずは調査が必要そう。


2009.02.09 / Top↑
戦闘画面を作る前に敵戦力の設計を考えてみる。
要求される能力は1点、「自国が進軍する、または敵が進軍してきた場合に敵のユニットが適切である事」。


///要求される機能の洗い出し
まず、前提として、このゲームでは敵は最大6ユニットで構成される。戦闘が発生するのは以下3点になる。
①こちらが敵エリアに進軍する
②敵がこちらのエリアに進軍する
③イベント

③は色々あるだろうから後回しとして、これらの戦闘でどういう振る舞いをすればOKなのか。それを一覧にしてみる。

1.プレイヤー側の成長に合わせて成長する。
  最初に攻略した国と最後に攻略した国が同じ強さではプレイヤー側は成長する必要がない。

2.プレイヤー側の攻撃で弱体化する。
  RPGのエンカウントの様にいくら倒しても無限に湧き出る訳にはいかない。

3.出て来るユニットが固定で無い事。
  常に同じ構成で戦闘すると飽きる。

次、敵勢力の戦力情報をどう管理するか。
プレイヤー側の様に実態を管理すると大変なので、ユニット数とその種類で管理する。
例えば、敵国Aの戦力がユニット数10だとすると、強敵5、雑魚5と言う形で管理する。これをその時の国レベルで出撃ユニットを代えればよい。
これでが確保出来る。
については、強敵の中でランダムにすればよいわけだ。


///ランダムでのユニット配置
国、国レベル、エリア、配置場所(前衛とか後衛とか)でテーブルIDを取得して、そこからランダムの内訳を決定するテーブルに検索しにいける。
■相関図
無題
まあ、こんな感じでやってみる予定。弱気なのは作るまで良いか今一分からん所、最早設計とはいえんけどw
テロメアは同じユニットが一杯やられたら、その生産が追いつかない仕様を入れる予定。




今週は仕事が忙しくて全くすすまない。敵がランダムで配置出来る様になったら、ダメージ表現なんかを作っていく予定。

2009.02.06 / Top↑
取り合えず、仮の戦闘画面を作成する。
トランジションして、背景画像を変更。その後、ユニットを表示する。
表示するユニットは、出撃ユニット選択画面で設定したユニット。


///戦闘画面の表示
■出撃ユニットの設定
出撃ユニット
このユニットが表示されればOK。

■戦闘画面(仮)
戦闘画面(仮)
背景は適当だし、自国のユニットしか出て無いけど、出撃ユニット選択画面の状態のまま、表示されたからOK。


///戦闘画面から戻る
戦闘画面から元のマップ画面に戻る所を作る。
この時重要なのは、出撃ユニット選択画面で行った内容をアンドゥ制御から開放する事。
まあ、様は元の画面に完全に戻ればOK。




亀の様な進み具合だけど、どうにか毎日更新に戻れた。
次は敵ユニットの制御になるけど、これは結構かかりそう。まずは仕様をきめていこうと思う。



2009.02.05 / Top↑
2日もあけてしまったけど、決してサボってた訳じゃない。
ユニット周り作成をするにあたり、必要な仮画像を作成しておりた。
見た目については、後で変更可能だが、やはりウィンドウサイズ等は後で変更した場合、戻りが大きい。また、マウスが移動する距離など、ユーザーの使い勝手に直結するので、出来るだけサイズ等は完成品と同様にしたい。(言い訳終了)


///ユニット制御ウィンドウ(戦闘ユニット設定画面)
敵エリアに攻撃を仕掛ける時や、攻撃を受けた際に反撃をするユニットを選ぶウィンドウを作成する。
ウインドウの仕様は下記を参照。
■ウィンドウ設計
ユニット制御画面①

ぶっちゃけ、元ネタである戦○ランスのパクリであるが、右クリックによるアンドゥに対応している。

■実際の画面
(実)ユニット制御画面①

①ステータスウィンドウ 向かって左上のウィンドウがステータスウィンドウ。
 リストウィンドウユニットウィンドウの各ユニットにカーソルが乗った場合、そのユニットのステータスを表示する。

②リストウィンドウ
 向かって右側がリストウィンドウ。
 戦闘で使えるユニットを全て表示する。クリックした場合、カーソルを合わせる青枠が固定される。

③ユニットウィンドウ 
 向かって左下がユニットウィンドウ。
 リストウィンドウをクリックした後に各配置場所をクリックすると、そのユニットが配置される。
 リストウィンドウが固定されていない常態で、配置されたユニットをクリックすると、配置が解除される。
 右クリックした場合、配置1つ分がアンドゥされる。

※この画像はこちらのサイトのツールを使用しております。




画像作ってた割りに名前はみでてるじゃんとか、のっぺりしすぎとか色々突っ込み所もあるけど、まだ、ユニットがどんな能力値かが決定していないので、いったんここまで。

2009.02.03 / Top↑