DXライブラリ/エフェクト描画/準備運動
まえがき
まずはこちらを御覧ください。 youtu.be
この動画では、DXライブラリを用いたアニメーション描画の例を解説しています。 ただ・・・あまりにもプログラムの解説が少ない!もっとちゃんと解説して!という意見がありそうなので、ブログで補足します。
使用素材/お世話になりました。
爆 発)爆発(大) - アニメ画像 - 素材/データ - Rmake 様
コイン)まわる黄金アイテム アニメ素材 : ぴぽや 旧ブログ 様
斬 撃)https://pipoya.net/sozai/assets/effects/effect-battle-physical-attack/ 様
中でも、コインのアニメーションを例に解説していきます。こんな動きをするはず。
画像を分割するには
このように、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となります。
なんとなく、分割のコツは身についてきたでしょうか?意外と分割の正解が分からず苦労するんです。どうやって計算するの?みたいな部分は、当てずっぽうでプログラムを入れ、動かして駄目だったことも多々あります。計算式を考えてみると、整理できそうですな。
※画像のサイズは、しっかりと「プロパティ」で確認しましょう。過信は禁物です。
あとがき
私の作ったプログラムでは、「画像のパス」「横の分割数」「縦の分割数」が分かれば、ある程度は汎用的に分割できます。ただ、誰だって自分の使いたい素材があるはず。特に分割の説明はあまり無く、教えてくれる人がいないと不安になってしまいます。私のプログラムは、ただの例に過ぎません。考え方を身に着け、少しでも多くの人がプログラムに自信を持てるよう、応援しています。