-[ Section Index ]-
Part.1--Introduction
ここまでに、変数で画像を表示する方法をご紹介してきましたが、HPやMP向けに作ったため動きがありませんでした。ですが、ダメージなどを表示するときには動きがあった方が見栄えがよかったりします。そこで今回は、「ダメージを画像で表示しよう」と題して、動きのある画像の表示方法を考えてみました。
基本的な部分は、「変数で画像を表示しよう その2」で書いた「画像パスに配列変数を使って画像を表示する方法」を採っています。桁の変更や、表示する数値の入力部分などを付け足していますが、あとは同じなので、こういう表示もあるんだなぁというサンプルだと思って見ていただければと思います。
Part.2--Explanation
1.画像の準備
今までどおり、画像を11枚（0〜9までと塗りつぶした画像）用意するのですが、今回は画像同士が重なる部分があるので、マスク画像を使ってアルファチャンネルを付加し、数字の背景を透過しておく必要があります。詳しいことはBmpToGal（BMPファイルをGALファイルに変換するツール）のマニュアルにのっているので説明は省きますが、0.galを作成するときには、下のような画像を2枚用意しました（見やすくするために画像に枠をつけていますが、実際の画像にはありません。また、HP用にファイル形式をGIFに変更しています）。0-m.bmpがマスク画像になっていて、これで作ったGALファイルは、マスク画像の白の部分が表示されて黒の部分が表示されない（透明）ようになります。
0.bmp
0-m.bmp
また、今回は前回までと違ってファイル数が多くなっているので、下図のようにファイルを保存します。これによって、画像パスの生成式に変更が少し入ります。
2.lmtファイルの作成
次に、lmtファイルを作成します。lmtファイルは、一枚の画像（.GAL形式のみ）が”どのように動くか”を記録するファイル（お芝居の台本のようなもの）です。なので、lmtファイルで使用している画像は、lmtファイルの中に保存されているというわけではありません。画像を保存している場所を変えてしまうと、正常に動作しないので注意が必要です。
さて、それでlmtファイルの作成法になるわけですが、実際にサンプルを見たほうが良いと思うので省略します。なにか分からない点があれば、掲示板などで聞いてください。注意点としては、[ファイル]の[プロパティ]の［モーション]タブで「相対座標で移動する」にチェックをつけておかないと、lmtファイルで設定した座標で動いてしまい、画像表示で座標を設定することができなくなってしまうところです。僕がさんざん悩まされた点なので、同じところにはまらないよう、気をつけていただければと思います。あと、wait.lmtについてですが、これはbase.galを使って作成してください。今回、base.galは完全に透明な画像になっているので、てきとうに配置して適当な時間表示するようにしておけば大丈夫です。詳しいことは後述します。
3.画像の表示
最初にも述べましたが、今回は前回の処理とほとんど変わっていません。ですが、それぞれの画像に動きが加わっているため、順番に画像を表示するときに[再生タイプ]に注意する必要があります。[再生タイプ]によってどのような変化があるかを以下にまとめておきます。
・再生タイプが通常再生、リピート再生、再生後自動破棄
それぞれの桁がほぼ同時に表示されます。数字が飛び上がるような動きの場合には問題ありませんが、左からスクロールして表示したいときには思い通りに動きません。また、最後に表示される画像の表示タイプを[再生終了まで待つ]にしないと、表示が終わる前に処理が先に進んでしまいます。
・再生タイプが再生終了まで待つ
それぞれの桁が順番に表示されます。数字が飛び上がるような動きの場合でも、左からスクロールして表示したいときにも問題なく動作します。ですが、やや遅いかなという印象を受けます。
このように、早く表示するかゆっくり表示するかという違いがありますが、今回は両方を合わせた方法を採用しています。どのようにするかというと、最後以外の各画像の表示は[通常再生]にしておいて、それぞれの画像の間にwait.lmtを[再生終了まで待つ]で表示します。こうすると、数字を表示→wait.lmtを表示→数字を表示→…となって、wait.lmtの再生時間だけ処理が止まることになります。あとは、表示する動きに合わせて適当にwait.lmtの再生時間を設定すれば、思い通りの表示が可能になります。
これで説明はおしまいです。今回は説明が少なかったのですが、前回までが分かっていればサンプルも理解できると思います。サンプルには7つの動きをいれてありますが、他にもいろいろな動きがあると思いますので、かっこいい動きが作れたときには教えていただければと思います。。
Part.3--Download
■サンプルのダウンロード
サンプルは、そのままでは実行できません。LiveMakerで開いて、ビルドしてから実行してみてください。
サンプル：ダメージを画像で表示 sample03.zip をダウンロードする
Part.4--Memory
2006/07/20
説明は短めですが、.galや.lmtの扱いが微妙に難しいかもしれません。正直なところ、処理内容を考えるよりもBmpToGalやLiveCinemaと格闘した時間の方がはるかに長かったような気がします。
【LiveMaker講座 -ダメージを画像で表示しよう-】
