ウディタ：画像、アニメーション表示コモン紹介

こんにちは、じゃた。です。今回はウディタで画像を表示する際のコモンを自作したので、その紹介をしたいと思います！本記事ではアニメーション画像表示用に作ったコモンを簡単に説明しているので、よかったら参考にしてみてくださいね😊

ウディタのピクチャ表示について

ウディタを使用していて画像をピクチャ表示した際、

“画面のスクロールと一緒に画像までついてきてしまう。表示したい場所に上手く表示されない。”

なんてことはありませんでしたか？1マス画像であればイベントに画像をつければそんなこともなく、上手くいきます。ですが、表示したい画像が2マス以上ある場合はどうしたらよいのでしょうか。1マスの時と同じようにイベントに画像をつけ、それを並べるというのも一つの方法でしょう。ですが、それはイベントの数も増えるし、なにより面倒くさいですよね。ということで、画像を表示するためのコモンを作ってみました。使用すると、以下のようになります。

コモンの中身ちょこっと説明

というわけで、ここからはコモンの中身について簡単に説明していきます。静止画用とアニメーション用で少し違いがあるのですが、今回はアニメーション用についてお話させていただきます。

設定、使用セルフ変数について

●設定
– 数値1/コモンセルフ0 = 横分割数 … 使用画像の横分割数
– 数値2/コモンセルフ1 = 縦分割数 … 使用画像の縦分割数
– 数値3/コモンセルフ2 = 始パタ … アニメーションの始まりパターン
– 数値4/コモンセルフ3 = 終パタ … アニメーションの終了パターン
– 文字列1/コモンセルフ5 = 画像 … 使用画像指定
– 文字列2/コモンセルフ6 = ピクチャ番号 … 表示する画像の番号
– 文字列3/コモンセルフ7 = アニメーション間隔 … どのくらいの速さでコマ送りするか

●使用セルフ変数について
– Cself0：横分割数
– Cself1：横分割数
– Cself2：始パタ
– Cself3：終パタ
– Cself5：画像
– Cself6：ピクチャ番号(文字列)
– Cself7：アニメーション間隔(文字列)

※Cself 0～Cself 7まではコモン使用時に情報を入力、代入するもの

– Cself10：画面サイズ取得
– Cself11：X座標 … 呼び出し元のマップイベントのX座標(精密)
– Cself12：Y座標 … 呼び出し元のマップイベントのY座標(精密)
– Cself13：最終X座標 … 画像表示の際使用する値(X)
– Cself14：最終Y座標 … 画像表示の際使用する値(Y)
– Cself20：ピクチャ番号
– Cself21：アニメーション間隔

きっとこれを見た方は、なぜピクチャ番号とアニメーション間隔を文字列に入力させているのか疑問に思うことでしょう。理由は簡単です。他に方法が思いつかなかったからです。というのも、ウディタでは変数として代入できるのが4つまでみたいなんですね。なら開いている文字列変数のとこに入力させればいいか、という訳です。文字列に入力されているものが数字だけなら、数値に変換するのは簡単なので。ただ、これは私が他の解決策を思いつかなかったというだけのことですので、もっと良い方法があればそちらを採用してください。

コモン詳細

■ウェイト:1フレーム
■動作指定:主人公 / ウェイト 1フレーム

■変数操作:Cself10 = Sys84:画面サイズ(0=320×240,1=640×480,2=800×600・+1)

■変数操作+:Cself11[X座標] = このマップイベントのX座標(精密)

■変数操作+:Cself12[Y座標] = このマップイベントのY座標(精密)

自動実行(並列でイベント実行)として動かし、常に主人公とイベントの座標を取得し続けるためにウェイトが必要。まずはマップの情報、座標を取得。

■変数操作+:Cself13[最終X座標] = 主人公の画面X座標

■変数操作+:Cself14[最終Y座標] = 主人公の画面Y座標

■変数操作:Cself11[X座標] -= 主人公のX座標(精密) + 0

■変数操作:Cself12[Y座標] -= 主人公のY座標(精密) + 0

次に主人公座標、イベントと主人公の座標の関係を取得。

■変数操作:Cself11[X座標] *= 8 * Cself10

■変数操作:Cself12[Y座標] *= 8 * Cself10

■変数操作:Cself13[最終X座標] += Cself11[X座標] + 0

■変数操作:Cself14[最終X座標] += Cself12[Y座標] – 16

画像のピクセルを考慮し、実際に画像を表示するべき座標を取得。また、表示画像の大きさによって微調整(下2行)

■変数操作:Cself20[ピクチャ番号] = Cself6[ピクチャ番号(文字列)] + 0

■変数操作:Cself21[アニメーション間隔] = Cself7[アニメーション間隔(文字列)] + 0

文字列で入力された情報を数値に変換。

■ピクチャ表示:Cself20[ピクチャ番号] [中心]ファイル(Cself5[画像]) X:Cself13[最終X座標] Y:Cself14[最終Y座標]/ 0(0)フレーム / パターン1 / 透 255 / 通常 / 角 0 / 拡 100% / カラーR[100] G[100] B[100]

■ピクチャエフェクト:Cself20[ピクチャ番号] [自動パターン切替(ループ) 開始パターン[Cself2[始パタ]] → 終了パターン[Cself3[終パタ]] 間隔(Cself21[アニメーション間隔])フレーム]

ピクチャを表示し、画像をコマ送りすることでアニメーション。画像分割数はここのピクチャ表示の設定で使用している。
・透過度、表示方法、拡大率、カラー等を変更する場合はピクチャ表示の設定を変更
・アニメーションパターンを変更する場合はピクチャエフェクトの設定を変更

ピクチャ番号について

最後に、ピクチャ番号について少しお話させていただきます。今回は画像を”ピクチャ表示”で表示する方法を紹介しましたが、あくまでも画像として表示しているだけだということを覚えておかなくてはいけません。ということで、以下に主人公よりも画像を下に表示した場合、上に表示した場合にどうなるかが分かる動画を以下に示しておきます。

主人公上、画像下(ピクチャ番号をマイナスの値で指定)

主人公下、画像上

終わりに

今回は自作コモンを紹介させていただきましたが、実は、なんだかよくわからないけど適当にやってたら上手くいったからオッケー！みたいな感じでスルーしている部分があります😅これから先、もっと勉強していくことで、そういった部分もわかるようになっていけたらいいなと思っています。
本記事で紹介させていただいたアニメーション表示コモンと、それを作る過程で作った静止画表示コモンを配布しているので、良ければ使って下さい！ちなみに私は、「画面サイズ(640×480)、タイルサイズ(32×32)」という設定で使用しており、他の設定で動くことは保証できません(しかも自分の使用画像に合わせた座標微調整も入れている)。ご自分の環境に合わせていじってみて下さい。※そのままの二次配布×、改良したものを配布◯
See You Next Time！

ダウンロードはこちらから！

今回お借りした素材(敬称略)