【オンラインRPG制作】モーションの補間とカラーリングの実験

モーションのフレーム補間

滑らかにキャラクターが動くゲームの影響を受け、自分のゲームもモーションを滑らかにしようと行動に移りました。
思えば、試作した歩行モーションは中割りを描いたのに、本番ではツクールの仕様に合わせたコマ数になっていましたね。

フレーム枚数が多いほど、カクカク感は薄くなります。
モーションを細かくする方法として、フレーム補間が挙がりました。
ペイントソフトの機能で、ポーズとポーズの間を何段階にも埋めてみると……

　
【GIFアニメ】フレーム補間を適用した横向き待機モーション

描く枚数を抑えつつ、これだけ滑らかにできるんですね。
でも、前回の記事のような大きな動きになると、また勝手が違うのかな？

カラーリングの実験

オンラインRPGでは定番の機能のひとつ、キャラクターメイクでの色の変更。
動きを滑らかにした待機モーションで実験中です。

　
【画像】作成中のUIで配色を変える実験の様子

従来のような、色変えの対象パーツを別のファイルに分割する、という方法も可能です。
でも、１キャラだけで複数のAPNGを同時に再生することになり、負荷がかからないか心配。

画像ファイルは全身を１枚に収める、髪や服の位置は明確にしない。
その環境で、ある程度の精度でカラーリングできるように、実装と調整を続けているところです。

【オンラインRPG制作＆イラスト】主人公たちのモーション続々と

「モスタンワールド」の主人公たちの各種モーションを描いていきます。
登場ゲーム未定だった魔法使いキャラは、今作の主人公のひとりに加わる運びになりました。

　
【GIFアニメ】ニレネのジャンプ斬り、新主人公の待機動作

躍動感あるモーション目指して、イラストを描き、さらに動かしています。

立ち絵を細かくレイヤー分けして、ポーズに合わせて移動＋変形することで、積極的に使い回しています。
使い回しは工程削減・絵柄統一などのメリットがあり、そもそも一部を描き下ろしても、結局は調整で変形することになったりしますし。

部分的な変形には、クリスタの「ゆがみ」「メッシュ変形」が役立っています。
アニメーションを描くようになって、初めて使ったクリスタの機能がいくつも。
ツールの力にどんどん頼って、この大変な工程をテキパキと進めていきます。

【イラスト】主人公ニレネ【オンラインRPG制作】大きな歩行アニメを揃えたい

イラスト：ニレネの立ち絵

「モスタンワールド」の主人公のひとり「ニレネ」を描きました。

　
【画像】ニレネの新しい立ち絵用イラスト

イラスト楽しい！ な状態が続いています。
ゲーム制作を疎かにしないよう、ゲーム制作に使える絵を優先して描いていく方針で。

モスタンワールド：歩行アニメを大きなイラストで揃えたい

２つ前の記事で、イラストで歩行アニメを描く実験をしました。
実現可能なことはわかったので、ハードル云々は置いておいて、実践することに。

まずは↑のイラストを動かそうと、動かす前の確認でゲームに入れてみました。

　
【画像】歩行グラフィックが大きくなった、ニレネと仲間NPC

これまで小さなドット絵だったので、ずいぶん大きく……特に背が高く見えます。
モンスターを縦横２倍のサイズに描き直したことで丸さが強まり、並ぶニレネの細長さが目立ってしまいます。
ニレネの歩行アニメは、服や髪を横に動かすか、左右に大きく移動する動きがいいかもしれませんね。

歩行グラフィックを丸ごと描き直すとなると、完成までの工程が一気に増えます。
でも、見映えが物足りないことがモチベーションによくない影響を及ぼすこともありました。
作るなら、自分が納得するゲームを！ ですね。

さあ、モチベーションの高いうちに、できるだけ多くのグラフィックを揃えます！

【イラスト】魔法使いと霊木の杖【オンラインRPG制作】新案で迷うバトルUI

イラスト：魔法使いと霊木の杖

魔法使いと思しき外見の少女です。
多くの魔力を宿す霊木の若木(枝かも)を、杖として使っています。

　
【画像】大人しそうな少女と、未加工らしき形状の杖

普段描かないデザインや表情に挑戦しました。
目をそらしているのも、立ち絵風のイラストとしては珍しいかも。
(ゲームに登場するなら、表情差分で正面も向きそうですけどね)

しばらくイラストから離れていた反動か、今はイラスト熱が高くて、こんなの描きたい！と頻繁に思い立つ状態です。
このイラストも唐突に着想を得て、勢いで描き上げました。
なので、設定がほとんど固まっていない、登場するゲームも決まっていないようなキャラクターです。

モスタンワールド：新アイデアがバトルUIを迷わせる

バトルUIの実装を進め、ルーレットみたいな形の画像を作りました。
中心が回転して、円のどこかを指し示す設計です。

　
【画像】ルーレットというより時計をイメージして描いた画像

いざ、この画像でバトルシステムのUIを……
と思っていたら、新しいアイデアが浮かんできました。
そのアイデアを採用すれば、実装しようとしていたバトル改修案より、さらにスマートなシステムになる可能性あり。

ただ、新アイデアでは、せっかく作ったルーレット風の画像を使わなくなってしまうかもしれません。
まあ、オンラインRPGなら用途はいろいろ思いつくので、無駄にはなりませんね。

異なるメリットを持つ新旧アイデア、どちらを採用するか迷っている現状です。
実装を始めたばかりのタイミングなので、新アイデアに乗り換えてもロスが大きくないのが一層悩ませますねー。

結論を出せないまま、現実逃避気味に、再びイラストに手を伸ばすのでした。

【制作雑記】ツクール製ゲームのグラフィックを強化するには

前置き

UnityとRPGツクールMZでゲームを制作していて、画面の美麗さはUnityに軍配が上がると感じてきました。
でもですね、RPGツクールで素晴らしいグラフィック＆演出のゲームを作っている方々もいるわけですよ。
私も、もっとRPGツクールの表現力を突き詰めたい……！

これまでの成果

これまでもいろいろ、試行錯誤してきました。
例えば、奥行きを表現するための、マップの遠近変形。

　
【画像】メッシュ変形により、画面の奥ほど小さく

違和感なく適用できるマップは限られるでしょうけど、ひと味足した印象になります。
ただ、実現したものの、自分でも理解できていないところがあって。
一度ひも解いて整理する必要がありそうです。

たまに取り組んでいること

静止画のモンスター画像に動きを加える、という試みも。

　
【GIFアニメ】外見に合った動きをする、ツクール付属素材のモンスター

それっぽく動いてはいるものの、まだ設定方法が複雑でして。
調整を補助する機能や、プリセットなどあると良さそうです。
モンスター画像だけでなく、ピクチャ画像などにも対応できたら面白いかも？

さらなる挑戦

制作中のゲームを比較したら、Unityの方がキャラクターの頭身が高いと再認識。
3Dモデルを扱えないRPGツクールで、動く大きなキャラクター画像を使うには……

イラストの練習も兼ねて、描いてみることにしました。

　
【GIFアニメ】横向きの歩行モーションを描いたキャラクター

キャラクターを描くことより、自然な動きに調整するのに手こずりました。
まだ違和感が残っている気がするも、実験と検証という名目なので、次のステップに進みます。

まとめ

こうして並べると、いろいろ取り組んでいますねー。
実現できた取り組みは、自分のゲームに投じるなり、プラグイン素材として公開するなり、ツクールのグラフィック強化に役立てていきたいと思います。