リュウグウノツカイのように

深海で悠々と暮らしたい

DXライブラリ/エフェクト描画/準備運動

まえがき

まずはこちらを御覧ください。 youtu.be

この動画では、DXライブラリを用いたアニメーション描画の例を解説しています。 ただ・・・あまりにもプログラムの解説が少ない!もっとちゃんと解説して!という意見がありそうなので、ブログで補足します。

使用素材/お世話になりました。

爆 発)爆発(大) - アニメ画像 - 素材/データ - Rmake 様
コイン)まわる黄金アイテム アニメ素材 : ぴぽや 旧ブログ 様
斬 撃)https://pipoya.net/sozai/assets/effects/effect-battle-physical-attack/ 様

中でも、コインのアニメーションを例に解説していきます。こんな動きをするはず。
http://blog-imgs-121.fc2.com/p/i/p/piposozai/pipo-gwspinitem002sample.gif

画像を分割するには

コインの画像
 このように、DXライブラリで画像を用いたアニメーションを描画するためには、複数のコマが1つの画像に集められている必要があります。ゲームだと「チップ」で使われることが多い形式です。お鼻が赤くない方のリスではありません。よく「マップチップ」「キャラクターチップ」などと言われることが多いですが、エフェクトやアニメーションは、チップが名前につかないんです。不思議。

 そのため、画像をプログラムを使って分割する必要があります。画像がバラバラになるワケではありません。安心してください。プログラム上で、範囲を選択して画像をメモリに保存していくんです。範囲選択のことをクリッピングと呼ぶこともあります。

クリッピング

 なので、プログラム上で画像をクリッピング(範囲選択)しまくって、別の画像(データ)としてメモリに保存していくのが、分割の正体です。PC内で切り刻まれているわけではありません。

連続してクリッピング

 ちなみに、クリッピングは最近の技術ではなく、古来より伝わりしWindows APIの仕組みにもあるんです。
 参考)http://wisdom.sakura.ne.jp/system/winapi/win32/win134.html

クリッピングのコツ

 話を戻して、DXライブラリでは「画像の分割」を、LoadDivGraph関数で行います。
 参考)DXライブラリ置き場 リファレンスページ

 動画でも(https://youtu.be/XLR21876E60?t=323)解説していますが、横の分割数と縦の分割数、縦の幅と横の幅が必要になってきます。分割数というよりも、何回クリッピングしますか?(赤い枠がずれて、選択範囲内の画像がメモリに保存される)とイメージすると、考えやすい。

分割のイメージ

 そのため、クリッピングする範囲が変だったり、クリッピング回数が変だったりすると、エラーを起こします。クリッピングする幅と高さ、回数に気をつけながら、プログラムを組みましょう。

分割エラーのイメージ

プログラム解説

Animation.hで、このようなマクロ定義があります。

#define GraphicPathTitleAnimCoin    ".\\graphic\\coin.png"
#define AnimCoinDivX               5                      //コインアニメの横分割数
#define AnimCoinDivY               4                      //コインアニメの縦分割数

ここで登場する「横分割数」「縦分割数」は先程のクリッピングの回数です。転じて、分割数になっていますのでご注意ください~。

分割の練習

 たとえば、下記のようなアニメーションを追加しようとします。画像の幅は2000px、画像の高さは800pxです。このとき、分割する幅と高さ、横分割数と縦分割数はお分かりでしょうか?

雷撃
 まず、画像のクリッピング数=分割数を求めましょう。画像は横に5つ、縦に2つ連なっています。クリッピングする範囲の幅は、幅÷横の分割数で求められます。2000÷5=400です。クリッピングする範囲の高さは、高さ÷縦の分割数で求められますから、800÷2=400です。

 割り算の結果が小数点のときは気をつけてください。画像が見切れてしまいます。画像編集をしたならサイズを変えなかったか思い出し、誰かにいただいたのなら、こういう仕組みのことをお話しましょう。チーム制作なら、なおさらです。

 では、こんな画像だったら、いかがでしょうか?画像の幅は2400px、画像の高さは240pxです。

火の粉
あれ、画像が横に連なっている...その通りなんです。ちょっと意地悪してみました。この画像の場合、縦のクリッピング回数は1回になります。「画像を分割する」と考えていると、この画像は縦に分割しなくてもよいので0と考えてしまいます。言葉のニュアンスが違うと、このあたりでパニックなんです。気をつけてください。横の分割数は10ですね。クリッピングの幅は2400÷10=240、高さは240÷1=240となります。

 なんとなく、分割のコツは身についてきたでしょうか?意外と分割の正解が分からず苦労するんです。どうやって計算するの?みたいな部分は、当てずっぽうでプログラムを入れ、動かして駄目だったことも多々あります。計算式を考えてみると、整理できそうですな。

画像のプロパティ
※画像のサイズは、しっかりと「プロパティ」で確認しましょう。過信は禁物です。

あとがき

私の作ったプログラムでは、「画像のパス」「横の分割数」「縦の分割数」が分かれば、ある程度は汎用的に分割できます。ただ、誰だって自分の使いたい素材があるはず。特に分割の説明はあまり無く、教えてくれる人がいないと不安になってしまいます。私のプログラムは、ただの例に過ぎません。考え方を身に着け、少しでも多くの人がプログラムに自信を持てるよう、応援しています。