— ニチカ😈 (@maou_2chica) July 4, 2020
こういうのを作ります
必要なもの
グルグルに必要なもの
- DragonBones
- KELYEP_DragonBones
- DragonBones RPGMaker MV Demo
- DragonBones Event Pictures plugin(有料です)
- NRP_EvalPluginCommand
トランジションに必要なもの
このようにくるくるさせたい部分とさせたくない部分をレイヤー分けしてください。この際レイヤーの名前は必ず半角英数字にしてください。DragonBonesに読み込む際に日本語等ですと文字化けします。
DragonBonesで云々カンヌンする
参考にしにくいですが、操作方法等はこちらをご覧ください(熱い宣伝)。
とはいえ、今回は拡大縮小のみですので軽く紹介を。
すでに作成済みのファイルになりますが
ここがキャンバスです。中心にいるのが先ほどの絵です。
PSDファイルを読み込む
キャンバスにPSDファイルをドラッグアンドドロップするとこのような選択肢が現れます。
Import to new armature
新しいアーマーチュアを作成します。基本はなしでいいと思います。
Update image only
既存のプロジェクトに素材を読み込む際に使います。既存のプロジェクトを壊さず新しい素材のみ読み込みます。
Ignore hidden layers
非表示にされているレイヤーも読み込むかどうか。チェックが入った状態で取り除かれます。
Root position
読み込んで原点をどこにするかです。真ん中のマスで読み込むと絵が真ん中に置かれます。真ん中下のマスで読み込むと横の中心線の上、縦の中心線の真ん中に読み込まれます。
キャンバスのツール説明
右上
左から、マウス、回転ツール、ボーン作成ツール、ウェイトツールです。
左上
Armatureはモデルを作成する際に使います。Animationはアニメーションを作成する際に使います。
左下
横の一番上の欄:目のマークは表示、マウスのマークは操作、なんか謎のマークは自由移動と垂直と水平のみ移動の切り替え
間にあるものはそれぞれの切り替えを表しています。
真ん中下
十字(左上):位置調整ツール
欠けてる円(左下):回転ツール
右二つ:サイズ調整ツール
アーマーチュアの名前をファイル名と同じにする
これをしないと何も表示されません。
ボーンを作成する
ボーン作成ツールを選んだ状態で画像の上でドラッグアンドドロップします。この際ドラッグを始める位置で拡大縮小するので、今回は必ず真ん中で始めて下さい。
また、前に作ったボーンや最後に選択したボーンが親になります。親子関係(用語の意味がわからない時は検索して下さい)のあるボーンは親のボーンの移動や回転、拡大縮小に影響を受けます。
アニメーションを作る
編集中
直感的にできるので頑張って下さい(丸投げ)
どうしてもという方は上記の動画をご覧ください。
エクスポートする
ここで絶対守るべきなのはData ConfigでTypeをDragonBones JSONにして、DataVersionを5.0にすること。そうしないと後々動きません。
またテクスチャのサイズは必ず2048*2048以下にして下さい。
RPGツクールMVでの作業
前準備
- Game.rpgprojectのあるフォルダにあるjsフォルダの中のlibsフォルダにdragonbonesフォルダを作ります。
- DragonBones RPGMaker MV Demoの中にあるjs/libs/dragonbonesフォルダの中のdragonBones.js、dragonBonesPixi.jsを自分のプロジェクトファイルに入れます。
- Game.rpgprojectのあるフォルダにdragonbones_assetsフォルダを作り、そこにエクスポートしたファイルを入れます。
KELYEP_DragonBonesでの作業
プラグインパラメータのPreload Assetsに先ほどのエクスポートファイルの名前を入れます。この際、拡張子とアンダーバーのあとは不要です。
GradientWipeでの作業
プラグインパラメータの画面フェード用画像にグラデーションワイプ画像を登録します。
グラデーションワイプ画像は簡単に作れるので自作してみて下さい。素材としてのお勧めはつきみ様が紹介していたサイトです。
画面フェードに適応は私はfalseにしています。必要に応じてプラグインコマンドでONにしています。
そのほかはお好みで。
HIME_RandomEncounterEventsでの作業
説明をDeepL翻訳にかけたものをさらに意訳すると、
- Variable IDにエンカウント時に呼び出すコモンイベントの番号を入れるための変数を入れます。
- コモンイベントを作ります。テストとして「遭遇しました!」とメッセージが出るイベントを作ります。
- 先ほど設定したコモンイベントのIDの数を変数に入れるイベントを作り、テストプレイを開始します。
- ランダムエンカウントで「遭遇しました!」というメッセージが出た後にバトルが始まります。
という感じです。つまり
- エンカウント時に実行するコモンイベントのIDを入れる変数を用意し、その番号をプラグインパラメータVariable IDに入れる
- コモンイベントを作る
- コモンイベントのIDを1で設定した変数に入れる
という流れです。
コモンイベントを作ろう
敵グループIDを取得し、条件分岐
◆変数の操作:#0031 エンカウントした敵グループ = $gameTroop._troopId
◆条件分岐:エンカウントした敵グループ = 3
◆変数の操作:#0032 エンカウントした敵名 = '炎の蝶々が二匹現れました'
◆変数の操作:#0031 エンカウントした敵グループ = 'Bug'
◆
:分岐終了
◆条件分岐:エンカウントした敵グループ = 4
◆変数の操作:#0032 エンカウントした敵名 = '炎の蝶々が一匹現れました'
◆変数の操作:#0031 エンカウントした敵グループ = 'Bug'
◆
:分岐終了
エンカウントした敵グループIDは $gameTroop._troopId で取得できます。そしてそのIDで条件分岐します。ここでは変数に文字列を入れました(あまり推奨されないらしいですが私はどんどん入れちゃいます)。文字列は「''」で囲んでスクリプトで代入します。
32番に入れた文字列はメッセージの表示に、31番に入れた文字列は後々アニメーションする際に使います。
Irina_DragonbonesPictures.jsを使う(必須ではないです)
まず画像をなしにした状態で表示したい場所の座標を入れた状態でピクチャの表示コマンドを使います。
そのあとプラグインコマンドを使います。詳しくはプラグインのヘルプを見て下さい。
こうするとアニメーションしてくれます。
三行目には先ほど文字を代入した変数を利用しています。プラグインコマンドで変数を使うにはプラグインが必要です。NRP_EvalPluginCommandをお勧めします。
エンカウントメッセージを表示し、選択肢を出す
◆文章:なし, 暗くする, 中
:文章:\CL\C[0]\{\{\v[32]\}\}\C[19]
◆選択肢の表示:たたかう, にげる (ウィンドウ, 中, #1, #2)
:たたかうのとき
◆プラグインコマンド:GWTransition on
◆画面のフェードアウト
◆
:にげるのとき
◆スクリプト:$gamePlayer.cancelEncounter();
◆
:分岐終了
文章ではカラーとサイズを変えて先ほど文字列を代入した変数を表示しています。変数は使い回しする際に便利ですね。また、文字列を真ん中揃えにしたかったため、メッセージアライメント制御文字を利用しています。
選択肢では「たたかう」「にげる」の二つを提示しています。
たたかうではバトルに入る際にプラグインコマンドでグラデーションワイプをONにしています。その後フェードアウトしています。こうするとグラデーションワイプで戦闘開始時のフェードが変更されるわけです。
フェードアウトは実際しなくてもいいのですが、私の環境だとなんか引っかかる感じだったのでコモンイベントでやっています。
にげるではHIME_RandomEncounterEventsで追加されたスクリプトでバトルをキャンセルしています。この機能を導入することでランダムエンカウントのデメリットとしてあげられるエンカウントの制御ができない、というところをある程度改善できるのではないかと思っています。
DragonBonesを使用した場合ピクチャを消す。
◆ピクチャの移動:#20, 中央 (576,360), (100%,100%), 0, 通常, 15フレーム
◆ピクチャの消去:#20
普通にフェードアウトしているだけです。
コアスクリプトをいじり、通常のエンカウントエフェクトを削除する
ズームとフラッシュが二回はかなりうざったいですので、rpg_scenes.jsの854行目あたりの
Scene_Map.prototype.updateEncounterEffectを下記のように変えます。プラグインとして作成するのをお勧めします。プラグインの作り方はダメなゲーム制作者ですのでただjsファイルを作成してそこにコアスクリプトをコピペし、改造しているだけです。
Scene_Map.prototype.updateEncounterEffect = function() {
if (this._encounterEffectDuration > 0) {
this._encounterEffectDuration--;
var speed = this.encounterEffectSpeed();
var n = speed - this._encounterEffectDuration;
var p = n / speed;
var q = ((p - 1) * 20 * p + 5) * p + 1;
var zoomX = $gamePlayer.screenX();
var zoomY = $gamePlayer.screenY() - 24;
if (n === 2) {
// $gameScreen.setZoom(zoomX, zoomY, 1);
this.snapForBattleBackground();
// this.startFlashForEncounter(speed / 2);
}
// $gameScreen.setZoom(zoomX, zoomY, q);
if (n === Math.floor(speed / 6)) {
// this.startFlashForEncounter(speed / 2);
}
if (n === Math.floor(speed / 2)) {
BattleManager.playBattleBgm();
this.startFadeOut(this.fadeSpeed());
}
}
};
こうすることでフェードアウトだけのシンプルなものになります。
コアスクリプトをいじり「〇〇が現れた!」が表示される前にフェードインする
このままでもいいのですが、〇〇が現れた!と表示される際に真っ暗なままなので少しいじります。
rpg_manager.jsの2350行目あたりのBattleManager.startBattleを下記のように変えました。
var _MKT_BattleManager_startBattle = BattleManager.startBattle;
BattleManager.startBattle = function() {
$gameScreen.startFadeIn(30);
_MKT_BattleManager_startBattle.call(this);
};
こうすることで〇〇が現れた!と表示される前にフェードインさせることができます。
バトルイベントのターン0でグラデーションワイプをOFFにする
◆プラグインコマンド:GWTransition off
だけです
お疲れ様でした!
これで多分冒頭の動画のようなトランジションが実装できたかと思います。わからない点、抜けてる点等ありましたらお気軽にコメントやマシュマロでメッセージをいただけると嬉しいです。
>>プラグインの作り方はダメなゲーム制作者ですのでただjsファイルを作成してそこにコアスクリプトをコピペし、改造しているだけです。
返信削除これはむしろ王道のやり方ではないかと。中身全部理解してうまいプログラミングするって相当上級者じゃないと無理ですよね