ゲーム制作記とゲーム制作に役立つ画像素材や情報記事を公開しています

以前に下記の紹介記事を書いていたのですが、その後「NAnimEditor」の作者IVatuさんが作られた「NAnimEditor」の後継「TukunEditor」は触る機会がなかったので、特に記事にすることはありませんでした。

ウディタ用アニメーション制作ツール「NAnimEditor」導入編

今回、自分のゲーム制作に「TukunEditor」で作成したアニメデータを導入しようと思い、また導入編だけになっちゃうかもですが、簡単に記事にしてみようと思います。

まずは「TukunEditor」＋WOLF RPGエディター(ウディタ)でどんなものが作れるのかこちらの動画をご覧ください。



画像部分の動きはもちろんですが、画面のフラッシュと効果音の設定も「TukunEditor」側でオーサリングしたアニメーションデータに含まれています。

「TukunEditor」の概要についてはこちらの記事を参考にするのがいいと思いますので、割愛させていただきます。
RPGツクールシリーズのアニメーション編集画面と同じようなかんじでアニメーションが作成でき、ウディタとRPGツクール(2000,2003?,XP,VX,VXAce)用のアニメーションデータとして出力することができます。
Vector 新着ソフトレビュー 「TukunEditor」 - 「WOLF RPGエディター」などとともに使える、簡単操作の“パラパラアニメ”作成ソフト

では、さっそくウディタに「TukunEditor」を導入していきましょう。
まだウディタ＋「TukunEditor」は始めたばかりで間違いや非効率的なところもあると思いますが、現状の使用できている内容ということでご理解ください。


■ 準備その１

まずは、IVatuさんのWEBサイトより「TukunEditor」をダウンロードさせてもらいましょう。
TukunEditor - ココがスミです

解凍するとこのようになっています。


作成したものを即ウディタに反映できるように、ここから「TukunEditor.exe」、「config.ini」、「dllフォルダ」をご自分のウディタのフォルダにコピーします。
必要に応じて、テキストやマニュアル類もコピーしてください。
こちらの「Dataフォルダ」の中にはまだ使うものがあるので削除しないでください。


さらにウディタの「Dataフォルダ」内に「Animation」フォルダを作成しておきます。


これで第一準備完了！


■ 準備その２

さきほど「TukunEditor」のアーカイブを解凍した中にある「Dataフォルダ」からウディタ用のコモンイベントファイルを導入していきます。


「wolfrpg_commonフォルダ」の中には
「CDB1_Tukune.dbtype」、「Common4_Tukune.common」という２つのファイルが入っています。
それぞれ、ウディタに読み込むことができる可変データベースファイルとコモンイベントファイルです。


ウディタのエディターを起動して、この２つのファイルを読み込んでいきます。
可変データベースエディタを開き、タイプに適当な空きを作って、「CDB1_Tukune.dbtype」のファイルアイコンをドラッグ＆ドロップをして読み込みます。
もちろんウィンドウ下部の「読み込みボタン」からでもOKです。


現在、データ数が0と1の２つですが、これは「TukunEditor」で作成したアニメデータを同時に２つ再生できるということなので、５つぐらいに増やしてもいいかもしれません。
後々実装してみての処理の重さ加減を見つつがいいですかね。
「OKボタン」を押して可変データベースエディタを閉じます。


次にコモンイベントエディタを開いて、同じように空いているところに「Common4_Tukune.common」のファイルアイコンをドラッグ＆ドロップをして読み込みます。
４つのコモンイベントが読み込まれるので、スペースに注意しください。


「TukunEditor」のマニュアルにも書いてありますが、
コモンイベント「[A]Tukune_Frame」の内容をご自分の環境に合わせて、少し編集します。


必須なのはこちらのデータベース番号の変更です。

▼ [！] 使用する CDB番号 を記入してください (0以外)
■変数操作: CSelf51[◆cdb_type] = 1 + 0

さきほど、「TukunEditor」のデータベースファイルを可変データベースの24番に読み込んだので、24に変更しておきます。

■変数操作: CSelf51[◆cdb_type] = 24 + 0

変更できたら、「OKボタン」を押してコモンイベントエディタを閉じます。

これで２つの準備は完了です！
あとは「TukunEditor」でアニメーションをぽこぽこ作って、ウディタで再生させるのみ。


■ TukunEditorの準備

ウディタ環境への「TukunEditor」の導入は完了したので、これからは「TukunEditor」側での作業になります。
ウディタ環境のフォルダ上にある「TukunEditor」を起動します。

どこから手を付けたらいいのか…ってかんじですよね。


まずはエディタの設定を変更していきます。
上部メニューの「その他」＞「エディタ設定」を選択します。


「読込タブ」ではウディタの「Dataフォルダ」に合わせていきます。
ウディタのデフォルト環境ならば、「音声フォルダパス」を「SE」と変更するぐらいですね。


「初期設定タブ」では、「編集形式」を「角度(w)」(アニメーションの編集で画像の「角度」と「拡大率(縦横同じ)」を編集可能)に変更するのが無難なところかと思います。


「表示タブ」の方はお好みで。
ウディタのゲーム画面サイズを320×240や800×600にしている場合は「範囲[x,y]」をゲーム画面サイズに合わせておきましょう。
今回の記事では320×240画面サイズのウディタ初期状態サンプルゲームに実装していくので、画像内では変わっていませんが320×240に変更しておきます。


「OKボタン」を押したら、「TukunEditor」を終了して再度起動します。

これで「TukunEditor」の準備も完了です。
いよいよアニメーションを作成していきます。


■ TukunEditorでアニメーションを作成

では、さっそくアニメーションを作成していきましょう。

「TukunEditor」の起動初期状態なら必要ありませんが、一応上部メニュー「ファイル」＞「新規作成」で編集状態を初期化します。


上部メニュー「編集」＞「プロジェクト」を選択します。


アニメーションの名前も特につける必要もなかったりしまが、さきほど設定した「初期設定」と違う内容でアニメーションを作っていきたいときは、必要に応じて変更しましょう。
詳しい内容は「TukunEditor」のマニュアル「画面説明(編集)　プロジェクト項目」をご確認ください。
ウディタですと、「編集形式」を「角度不能(角度変更不可・拡大率縦横別々設定可能)」に変更したいときなどあると思います。


最初の準備は以上です。
場合によっては飛ばしてもいい作業です。

では、さっそくアニメーションに使う画像データを読み込んでいきましょう。

「リスト画面」で「画像タブ」になっていることを確認し、一番上のスペースをタブルクリックします。


ファイル選択画面になるので、ウディタ環境の「Dataフォルダ」の「BattleEffectフォルダ」を選択します。
初期状態では「TukunEditor」の「Dataフォルダ」が選択されている場合があるので注意してください。


今回はウディタのサンプルゲームの同梱素材から「[Attack]Slash01_panop.png」を読み込んでみます。


画像の設定画面が表示されるので、画像コマの「分割数」を入力します。
「色相」はRPGツクール向けの機能でウディタでは反映されないので無視します。


「リスト画面」に画像が読み込まれました。
ウディタ用では画像ファイルは２枚まで登録可能です。たくさんの画像ファイルを使いたいときは使用できる２枚の画像ファイル中にうまくまとめる必要があります。


「パレット画面」に読み込んだ画像が表示されています。


もし「リスト画面」、「パレット画面」が表示されていない場合は、上部メニュー「表示」＞「リンスト画面を表示」のチェック等を確認してください。


続けて効果音を読み込みたいと思うので、「リスト画面」の「演出タブ」を選択し、画像と同じように一番上の空いているスペースをダブルクリックします。


「効果画面」が表示されますので、「効果音」と「フラッシュ」の設定をしていきましょう。
「効果音」のチェックボックスをチェックして、「参照ボタン」で効果音を読み込みます。
今回は同じくウディタ同梱素材の「[Effect]Attack1_default.ogg」を読み込んでみました。
「音量」「周波数」を調整して、「再生ボタン」で視聴することができます。
「バランス」は左右のスピーカー音量みたいですけど、ウディタでは機能しないのではと思います。
「フラッシュ」はそのまま画面をピカッとフラッシュさせる機能ですね。
同じようにチェックボックスをチェックして、表示にかかる「フレーム数」と「対象」「描画」を設定していきます。
「対象」が「通常」で「描画」が「通常」、「対象」が「通常」で「描画」が「一字消去」の設定はウディタでは機能しません。
あとはフラッシュする色を設定して、「適用ボタン」を押します。
一番上の「起動フレーム」はこれから作るアニメーションの内容を見てから設定するので、とりあえず保留で。


「リスト画面」に演出設定が追加されました。
演出設定の上限は999のようで、効果音は255ファイルまでとのことです。実装しての処理の重さとバランスを見ながら調整していきましょう。


まだまだ準備段階なかんじですが、いよいよ本格的にアニメーション作りです。
「リスト画面」で「キーフレーム」タブを選択します。
縦軸がセル(画像)、横軸がフレーム(時間)で、セル(画像)のフレーム(時間)ごとの変化(座標・拡大率・回転率など)をどんどん設定してアニメーションさせるというかんじですね。
アニメーション編集作業では、主にこの「キーフレーム」の画面と「メイン画面」、画像を読み込んである「パレット画面」を行き来してアニメーションを作っていきます。


もし画像ファイルを２枚読み込んでいる場合は「キーフレーム」の左の数字部分「1[0]、2[0]…」などをダブルクリックすると使用する画像番号を変更できます。
もしくは「メイン画面」の上部メニュー「編集」＞「セル番号と画像」からも変更することができます。


「セル」というのは、RPGツクールのアニメーション編集画面に準拠した呼び方だと思いますが、画像編集ソフトで言うところの「レイヤー」みたいなものですね。
今回は８枚のセルを使っていますので、１コマのアニメ中に８枚の画像を表示することができます。
セル番号0が一番下、セル番号7が一番上に重なって表示されますので、複雑なアニメを作る場合はこっちのセルにあっちのセルにと行き来することになると思います。

それでは「キーフレーム」のセル0番、フレーム0を選択し、「パレット」から「メイン画面」に画像をドラッグ＆ドロップします。
「メイン画面」上でセルをドラッグすることで、自由に動かすことができます。


また、セルと画像が関連付けられているので、「リスト画面」上の任意のフレームで右クリックメニューを表示し、「新規」を選択からでもセルに画像を追加することができます。


このエフェクト画像素材は背景が透過ではなく黒なので、加算表示に設定してやる必要があります。
その前にわかりやすくするために背景にエネミー画像を読み込んでみましょう。
上部メニュー「その他」＞「対象画像」を選択し、「ターゲット画面」が表示されますので、そこで画像を読み込み配置座標と不透明度の調整などして「適用ボタン」を押します。
配置座標などを変更したいときは再度「ターゲット画面」を表示して、調整して「適用ボタン」を押せば変更できます。
画像を消したいときは「消去ボタン」です。
今回はウディタ同梱素材のドラゴンの画像を読み込んでみました。



「メイン画面」上のセルをダブルクリックすると「セル編集画面」が表示されます。
ここで「Brend」を加算にして「適用ボタン」を押します。
ドラゴンの画像に加算表示されましたね。


アニメーションを作っていくのに、現在最初の1フレームしか有効な編集範囲がないので、フレームを増やしていきます。
「次のフレームへ」のアイコンをクリックしていくと、どんどんフレームが増えていきます。10フレームぐらい確保しておきましょうかね。
フレームの追加は上部メニュー「フレーム」＞「挿入」などからも行えます。


それでは再びフレーム0を選択し、セルをアニメの１コマ目にしたい位置に調整します。
今回は単純なアニメで斬撃がそのままドラゴンにズバっといくってものにします。
ちなみに「Aキーを押しながらドラッグするとセルを回転」、「Sキーを押しながらドラッグするとセルを拡大縮小」させることができます。


次に最後のコマを作るため、１コマ目をコピーして調整していきます。
「キーフレーム」上で１コマ目の上で「Ctrl＋C」を押してコピーし、最後のコマにしたいフレームを選択、「Ctrl＋V」を押してペーストします。


最後のコマの位置を調整し、セルをダブルクリックして「セル編集画面」で「パターン」を画像の最後のコマ5番にします。


最初のコマと最後のコマの位置と表示画像が決まりましたので、ここから中間のコマを自動で作成することができます。
「キーフレーム」で最初のコマから最後のコマまでドラッグして範囲選択します。


選択範囲上で、右クリックメニューから「フレーム補完」を選択します。


「Cell」が現在編集中の00にチェックが入っています。
編集したい内容を「Param」でチェックしていきます。
今回は「パターン」「座標X」「座標Y」をチェックします。
これで「実行ボタン」を押すと、中間のコマが自動生成され、画像の変化、座標の変化も反映されています。


シンプルですが、これでアニメーションになっているので、再生してチェックしてみましょう。
ツールバー上の「最初から再生」「再生/停止」ボタンを押すと、アニメーションを確認できます。
右の方にあるボタンでループ再生することもできます。
前に設定した効果音や画面効果が邪魔なときは「再生/停止ボタン」から右の方にあるスピーカーとEFのアイコンをそれぞれオフにしましょう。


少しアニメの速度が早いかんじでしたので、フレームごとの表示ウェイトを調整します。
ツールバー上にある「インターバル」で1フレームごとに調整することができますが、今回は複数のフレームを一括で変更していきます。


上部メニューの「ツール」＞「インターバル一括設定」を選択します。
「フレーム」を0～9全部のフレームですね。「インターバル」を2にして、「実行ボタン」を押します。
またアニメーションを再生して、必要に応じて微調整していきましょう。


基本のアニメが大体いいかんじにできたところで、他のセルにもどんどんアニメを追加してみましょう。
今回は「キーフレーム」上でセル0番の最初のコマをコピペでセル4番まで追加してみました。


追加したセルも最初に作ったアニメと同じように、動きを作っていきます。
拡大したり回転させたりと。
それぞれ最初と最後のコマができたら、セル1～4番まで全部のフレームを範囲選択して、右クリックメニューで「フレーム補完」、「方法」を「中割」(セルが設定されているフレーム「キーフレーム」と「キーフレーム」の間に自動で中間のコマを生成)に設定し「実行ボタン」を押すと、全部のセルに一括して中間のコマを生成することができて便利です。


ドラゴンの画像が邪魔だなぁ、というときにはツールバー上の「対象を表示」ボタンを押せば表示/非表示を切り替えられます。


同じように前後のフレームの表示なども表示/非表示切り替えられるので、作業ごとに編集しやすい状態にしていきましょう。


あとは色々と微調整していきます。
セルごとの表示タイミングをずらしたい場合にはずらしたいセルを範囲選択し、「Ctrl＋X」でカットして、フレームを選び「Ctrl＋V」でペーストして移動させます。
編集可能なフレームが足りないときは適度にフレームを増やしていきましょう。


最後に「演出」の調整をしていきます。
通常の斬撃が４回続いて、最後に強い斬撃がドカンというアニメーションにしたので、斬撃がヒットするたびに効果音を鳴らしたり、フラッシュさせたりしたいですね。
まずは「演出」を入れるフレームを決めていきましょう。
「メイン画面」の右下に選択している「フレーム番号」が表示されているので、テキストエディタでも実物のメモ帳でもいいので、メモって行きます。


「リスト画面」を「演出」に切り替えて、通常斬撃用の演出と最後の強い斬撃用の演出をコピペして増やしていきます。


それぞれダブルクリックして、「効果編集画面」の「起動フレーム」に、
さきほどメモしておいたフレーム番号を入力していきます。


ちょっと毎回フラッシュさせるのはうるさかったので、通常斬撃はフラッシュなしに、効果音も若干調整してこんなかんじになりました。


完成したものはこちら。


あとはこれを保存して、ウディタ側で表示させます。
一応、余分なセルがあるので、「編集」＞「プロジェクト」でセルを減らしておきます。


保存は「ファイル」＞「名前をつけて保存」です。
ウディタ環境の「Dataフォルダ」内の「Animationフォルダ」を選択して、ファイル名をつけて保存。




■ 作ったアニメをウディタで表示

ウディタに戻って、まずは簡単にマップイベントを作って、そこから「TukunEditor」で作成したアニメーションデータを再生するコモンイベントを呼び出してみましょう。

以下の２行だけでOKです。

■文字列操作：S0[[サンプル]一時文字列] = "Data\Animation\slash5.dat"
■イベントの挿入[名]： ["└Tukune_Play"] <コモンEv 222> / -1:Auto / 100 / 160 / 120 / S0[[サンプル]一時文字列] / S0[[サンプル]一時文字列]

イベントコマンドの内容は簡単で、文字列変数にアニメーションデータのファイル名"Data\Animation\slash5.dat"を格納し、そのあとアニメーション再生用のコモンイベント「Tukune_Play」を呼び出しているだけです。

「Tukune_Play」の設定を簡単に見ていくと、
「cdb」は「-1」に、
「pic」は「適当なピクチャ番号」を、
「x,y」はアニメーションを表示する中心の座標で「160,120」、
「file」がアニメーションデータのファイル名になり「文字列変数0」から呼び出しています。
「file」の右側のチェックボックスをチェックすれば、直でファイル名の入力もできるので、お好みでどうぞ。
「option」は今回の記事では省略します。
「option」の内容含め、詳しくは「TukunEditor」のマニュアル「WOLFRPGで再生する」のページに記載されていますので、そちらをご確認ください。


で、さっそくテストプレイ。


実際にアニメーションをゲーム画面上で再生してみて、調整したい箇所がでてきたら、「TukunEditor」に戻って調整～ファイル保存すれば、再読込など必要なくすぐにウディタ側に反映されます。


次は戦闘画面で技のアニメーションとして設定してみましょう。
ウディタの基本システムの内容に合わせて作っていきます。

アニメーション再生を呼び出すコモンイベントを適当に作ります。
マップイベントの内容をそのままコピペして基本はこれだけで、パラメータなど調整していきます。


x,y座標やピクチャ番号ですが、
基本システムのコモンイベント「183:X[戦]技能エフェクト描画」に技のアニメーションがコモンイベントの場合の記述がありますので、ここを参考にしていきます。


「アニメ番号」が「コモンセルフ変数0」、
「X座標」が「コモンセルフ変数1」に、
「Y座標」が「コモンセルフ変数2」に代入されている。
「ピクチャ番号」は「18000」。

「アニメ番号」はアニメーションをどんどん追加していき、アニメ番号によってどのアニメーションを再生するか分岐させるのに使えますが、今回は１つのアニメーションだけなので使いません。
面倒でしたら、１コモンに１アニメーションでもOKですしねw

これで必要な情報は揃いました。

先程のコモンイベントの編集に戻って、まずはコモンセルフ変数の名前をしておきましょう。
アニメーションファイル名の指定もせっかくなので、コモンセルフ変数に変更しちゃいます。


イベントコマンドはこのようになります。

■文字列操作：CSelf5[ファイル名] = "Data\Animation\slash5.dat"
■イベントの挿入[名]： ["└Tukune_Play"] <コモンEv 222> / -1:Auto / 18000 / CSelf1[X座標] / CSelf2[Y座標] / CSelf5[ファイル名] / CSelf6[オプション]

アニメーション再生の「Tukune_Play」の設定は、
「cdb」は「-1」、
「pic」は「18000」、
「x,y」はこのコモンセルフ変数1の変数呼び出し値「1600001」と、このコモンセルフ変数2の変数呼び出し値「1600002」、
「file」は「このコモンSelf5」、
「option」は「このコモンSelf6」とします。
アニメーションを画面の中央に表示したい場合は「x,y」は変数呼び出し値ではなく、画面中央座標の固定値にすればOKです。


これでコモンイベントは完成です。

技アニメーションのユーザーデータベースを開きます。
今回は「1:斬り2」のアニメーションを先程のコモンイベントに指定します。


他、簡単に確認できるようにごにょごにょとして、戦闘を発生させるマップイベントを配置して確認してみます。


問題なく再生されましたね！
アニメーションをもう少し上に表示させたほうが良さげではありますがｗ


ただ、戦闘のアニメーションでコモンイベントを使用する場合には、「ユーザーデータベース　アニメーション」の「表示オプション」も効かなくなるので、通常のアニメーションだと「表示オプション」で「中央固定」を指定すれば、画面中央にアニメーションが１回だけ表示されて、敵全体にダメージ表示となりますが、コモンイベントを使用した場合には敵の数分アニメーションが表示されてしまいます。
これを解決するには基本システムの戦闘部分のコモンイベントを少し改造する必要があります。

簡単な改造例の紹介になります。
基本システムのコモンイベント「183:X[戦]技能エフェクト描画」を改造していきます。

まずは下の画像の赤枠で囲ったイベントコマンドをまとめて切り取ります。


切り取ったイベントコマンドをこちらの画像の位置にペーストして移動させます。


次に移動させたイベントコマンド内の2箇所を書き換えます。
下の画像の赤枠の箇所、
「Cself1[対象X座標]」を「Cself20[表示元X]」に、
「Cself2[対象Y座標]」を「Cself21[表示元Y]」に書き換えます。


これで「ユーザーデータベース　アニメーション」の「表示オプション」の設定がコモンイベントによる演出の呼び出しでも有効になり、通常のアニメーションと同じような挙動になります。



これでウディタでもRPGツクール並の派手なアニメーションを使っていくことができますね！



おまけ。
「TukunEditor」でのアニメ作成の流れを動画にしてみました。

関連記事

• ウディタ基本システムを改造『敵隊列変更システムセット』 2016/10/30
• ウディタ基本システムをプチ改造『戦闘コマンド調整・敵隊列変更』 2016/10/29
• TukunEditorで作ったアニメデータをウディタで使ってみよう！ 2016/10/09
• ウディタ関連ツールメモ 2016/09/18
• ウディタ用変数呼び出し値とかグラデ色とかのプチツール(CF2.5製) 2016/09/05

カテゴリ ： ウディタ ｜ Comments (4) ｜ Trackbacks (0) ｜ 【記事編集】