Ｃｈａｐｔｅｒ.３８ [ アニメーション ]
■さらなる表現を目指して
さて今回は、更なる表現力を身につけるために、キャラクターのアニメーションについて解説したいと思います。
キャラクターをアニメーションして動かすというのは、どんなゲームを作成する場合にも非常に有効な演出となります。ただ単に静止画としての画像を表示するのもいいですが、やはり、アニメーションされている画像が表示されていたほうが、見た目のかっこよさは格段に上です。
例えば顔絵ひとつしか表示されない卓上ゲームのようなものだって、キャラクターが表情を様々に変えれば、それはそれでかなりの演出効果が見込めます。ビリヤードなどではボールが勢いよく転がりながら動き、徐々にスピードを落としていく演出などで、やはりアニメーションが有効です。これにより、リアリティが増すからですね。
今回の内容は、その性質上コーディング以外の準備が必要になります。それがまた結構手間なんですね。
しかし、手間をかけることさえ惜しまなければ、そのかかった手間以上にすばらしい演出をすることができます。サンプルを掲示しながら進めていきますので、諦めずにがんばりましょう。
というわけで、アニメーション処理、是非ものにしてください。
■仕組みから考える
先ほども言いましたが、アニメーション処理を実現するためには、それなりに事前の準備が必要です。
まず、最低限必要なものは、テレビアニメでいうセル画の役割を果たす、一連の画像です。大抵の場合、少しずつ見た目の異なる複数の画像ですね。
先ほど手間がかかると言ったのは、実はこの画像を準備するところのことなんです。
普段からパソコンでよく絵を描いているという人なら、それほど大変ではないのかもしれませんが、そのような作業に慣れていない人が、アニメーションの原画を描くというのは容易なことではありません。
ウィンドウズに付属されている『ペイント』などの画像編集ソフトで、地道に画像を準備するのは結構大変なんですね。写真を使うとしても、アニメーションしているように撮るというのは結構手間です。第一難しそうですよね。
ただ、悲しいことに、コレばっかりは自分でどうにかするしかありません。インターネット上で探したり、奮起して自分で用意したり、方法は何でもいいです。とにかく、アニメーションするキャラクターなどを表現するためには、まず元となる画像がなくては話になりません。
今回はサンプルとして、以前私がボツにしたキャラクターの画像を載せることにします。白状してしまうと、あらためて描くのが面倒だったからです。許してください。手抜きじゃないと言ってください。
……とにかく、下の画像が今回使用するサンプルです。
これらの画像は、キチンと透過処理されたGIF形式の画像です。これを使ってアニメーション処理を実装してみましょう。
ちなみに、基盤となるコードはいつもどおり『同期処理のとれたメインループ』です。これがよくわからないという人は、以前の講座でこの仕組みをよく理解してからチャレンジしてみてください(Chapter34・Chapter35を参照)。
さて、まずはアニメーション処理の仕組みから考えてみます。
アニメーション処理は、用意された一連の画像を、ループしながら切り替えて表示することで実現させます。
１回目のループ時には『画像１』を表示させ、２回目のループ時は『画像２』を表示。３回目は『画像３』を表示して、４回目は再び最初に戻り『画像１』を表示します。あとは同様に切り替えながら繰り返し処理します。
少しずつ見た目の異なる画像を、連続して表示すると、人はそれが動いているように見えます。ループしながら画像をうまく切り替えて、アニメーションしているように見せるのです。
ここで問題となるのは、画像をどこに置いておくのかです。
ユーザーフォーム上でキャラクターを動かしたときを思い出してください。イメージコントロールに画像をロードして、それをキャラクターに見立てていましたよね。
アニメーションを実現する場合も、これと同様に、使用する画像をイメージコントロールにあらかじめロードしておく必要があります。
今回は３つの画像を切り替えながらアニメーションするので、普通に考えると３つのイメージコントロールを用意すれば良さそうですね。
しかし、効率よく処理を行うために、今回はイメージコントロールを４つ用意します。下の画像を参考にして、まずはフォームの準備をしてみてください。
■画像を切り替える仕組み
さて、上手にフォームを準備できたでしょうか。
各コントロールの名前などは、忘れずに設定しておいてくださいね。
まずは、表示したい画像は３つなのに、なぜ用意したイメージコントロールは４つなのか、これについて解説します。
画像をロードした３つのコントロールは、『原画』の役割を果たすイメージコントロールです。あくまでも、画像の雛形として、原画の役割を担います。
これに対し４つ目のコントロール、つまり『
つまり、実際にアニメーションしているように見えるのは『
画像をデータとして保持しているのは『イメージコントロールの
ですから、イメージコントロールの画像を切り替えたいときには、
具体的には、キャラクターそのものである『
感覚としては、イメージコントロールからイメージコントロールへ、画像を転送しているような感じですね。
理屈がわかってしまえば簡単ですね。
それでは実際にコードを書いてみましょう。
コードの内容はそれほど難しいものではないと思います。
ここで変数
それが�△良�分です。
忘れやすいのが『
今回はあまりループが早すぎると、アニメーションが速くなりすぎて不自然になります。そこで��の部分で示すように、前々回よりも１回あたりのループ時間を長めにしてあります。(前々回はここが50に設定されていました)
■仕上げ
さて、アニメーション処理のメインとなるコードは、これで準備できました。
あとは前々回の講座のときと同じ要領で、コマンドボタンからこのプロシージャを呼び出すようにしておきます。
ユーザーフォームの
一応参考までに、フォームモジュールに記述するべきコードも載せておきますね。
標準モジュールではないですから、十分注意してください。
このコードがよくわからない人は、前々回の講座で詳しく解説していますのでそちらをご覧ください(Chapter36を参照)。
さて、これで準備は全て完了です。
ユーザーフォームを表示させ、コマンドボタンを押すと、キャラクターがアニメーションして表示されるはずです。オレンジの丸いヤツが、うんうん頷いているような感じに、アニメーションして表示されましたか？
こんな感じ。
仕組みさえ理解できてしまえば、アニメーション処理はそれほど難しくはありません。
焦らずひとつひとつ設定していけば、特に大きな問題はないでしょう。
最初に言いましたが、大変なのはむしろ画像を用意しなくてはならない、ということではないでしょうか。こだわりのあるゲームほど、キャラクターがしっかり描き込まれています。
少しだけ根気を出して、自分自身が納得のいく画像を用意してみてくださいね。
ちなみに、今回のコードはもう少し効率よく記述することもできます。
しかし、内容が濃すぎになってしまいますので、これはいつか、おいおい解説することにします。アニメーション処理はゲームの中で頻繁に登場します。近いうちに解説できると思いますので、まずは今回の内容をしっかり獲得してくださいね。
サンプルダウンロード ⇒ コチラよりダウンロードできます。（別館）
■格言
アニメするには画像をまず準備する
Pictureプロパティをうまく活用して処理する
ビジュアル面がかなりグレードアップしましたね。
さて今回は、更なる表現力を身につけるために、キャラクターのアニメーションについて解説したいと思います。
キャラクターをアニメーションして動かすというのは、どんなゲームを作成する場合にも非常に有効な演出となります。ただ単に静止画としての画像を表示するのもいいですが、やはり、アニメーションされている画像が表示されていたほうが、見た目のかっこよさは格段に上です。
例えば顔絵ひとつしか表示されない卓上ゲームのようなものだって、キャラクターが表情を様々に変えれば、それはそれでかなりの演出効果が見込めます。ビリヤードなどではボールが勢いよく転がりながら動き、徐々にスピードを落としていく演出などで、やはりアニメーションが有効です。これにより、リアリティが増すからですね。
今回の内容は、その性質上コーディング以外の準備が必要になります。それがまた結構手間なんですね。
しかし、手間をかけることさえ惜しまなければ、そのかかった手間以上にすばらしい演出をすることができます。サンプルを掲示しながら進めていきますので、諦めずにがんばりましょう。
というわけで、アニメーション処理、是非ものにしてください。
■仕組みから考える
先ほども言いましたが、アニメーション処理を実現するためには、それなりに事前の準備が必要です。
まず、最低限必要なものは、テレビアニメでいうセル画の役割を果たす、一連の画像です。大抵の場合、少しずつ見た目の異なる複数の画像ですね。
先ほど手間がかかると言ったのは、実はこの画像を準備するところのことなんです。
普段からパソコンでよく絵を描いているという人なら、それほど大変ではないのかもしれませんが、そのような作業に慣れていない人が、アニメーションの原画を描くというのは容易なことではありません。
ウィンドウズに付属されている『ペイント』などの画像編集ソフトで、地道に画像を準備するのは結構大変なんですね。写真を使うとしても、アニメーションしているように撮るというのは結構手間です。第一難しそうですよね。
ただ、悲しいことに、コレばっかりは自分でどうにかするしかありません。インターネット上で探したり、奮起して自分で用意したり、方法は何でもいいです。とにかく、アニメーションするキャラクターなどを表現するためには、まず元となる画像がなくては話になりません。
今回はサンプルとして、以前私がボツにしたキャラクターの画像を載せることにします。白状してしまうと、あらためて描くのが面倒だったからです。許してください。手抜きじゃないと言ってください。
……とにかく、下の画像が今回使用するサンプルです。
| 画像１ | 画像２ | 画像３ |
|---|---|---|
 |  |  |
画像のサイズは24×24ピクセルですこれらの画像は、キチンと透過処理されたGIF形式の画像です。これを使ってアニメーション処理を実装してみましょう。
ちなみに、基盤となるコードはいつもどおり『同期処理のとれたメインループ』です。これがよくわからないという人は、以前の講座でこの仕組みをよく理解してからチャレンジしてみてください(Chapter34・Chapter35を参照)。
さて、まずはアニメーション処理の仕組みから考えてみます。
アニメーション処理は、用意された一連の画像を、ループしながら切り替えて表示することで実現させます。
１回目のループ時には『画像１』を表示させ、２回目のループ時は『画像２』を表示。３回目は『画像３』を表示して、４回目は再び最初に戻り『画像１』を表示します。あとは同様に切り替えながら繰り返し処理します。
少しずつ見た目の異なる画像を、連続して表示すると、人はそれが動いているように見えます。ループしながら画像をうまく切り替えて、アニメーションしているように見せるのです。
ここで問題となるのは、画像をどこに置いておくのかです。
ユーザーフォーム上でキャラクターを動かしたときを思い出してください。イメージコントロールに画像をロードして、それをキャラクターに見立てていましたよね。
アニメーションを実現する場合も、これと同様に、使用する画像をイメージコントロールにあらかじめロードしておく必要があります。
今回は３つの画像を切り替えながらアニメーションするので、普通に考えると３つのイメージコントロールを用意すれば良さそうですね。
しかし、効率よく処理を行うために、今回はイメージコントロールを４つ用意します。下の画像を参考にして、まずはフォームの準備をしてみてください。
■画像を切り替える仕組み
さて、上手にフォームを準備できたでしょうか。
各コントロールの名前などは、忘れずに設定しておいてくださいね。
まずは、表示したい画像は３つなのに、なぜ用意したイメージコントロールは４つなのか、これについて解説します。
画像をロードした３つのコントロールは、『原画』の役割を果たすイメージコントロールです。あくまでも、画像の雛形として、原画の役割を担います。
これに対し４つ目のコントロール、つまり『
Ima_Chara』という名前をつけたコントロールは、キャラクターそのものとして使います。このイメージコントロールの画像を切り替えながら表示することにより、あたかもキャラクターがアニメーションしているように見せるのです。つまり、実際にアニメーションしているように見えるのは『
Ima_Chara』というイメージコントロールだけで、ほかの３つはアニメーション処理の原画として使用するだけなのです。画像をデータとして保持しているのは『イメージコントロールの
Pictureプロパティ』でしたね。ですから、イメージコントロールの画像を切り替えたいときには、
Pictureプロパティに新しい画像を設定すればいいわけです。具体的には、キャラクターそのものである『
Ima_Chara』のPictureプロパティに、新しく設定したい画像をロードしてある、イメージコントロールのPictureプロパティを設定します。PictureプロパティからPictureプロパティへ、画像データの受け渡しを行うわけです。感覚としては、イメージコントロールからイメージコントロールへ、画像を転送しているような感じですね。
画像１を表示させたい場合は……
Ima_Chara.Picture = Image1.Picture
画像２を表示させたい場合は……
Ima_Chara.Picture = Image2.Picture
画像３を表示させたい場合は……
Ima_Chara.Picture = Image3.Picture
Ima_Chara.Picture = Image1.Picture
画像２を表示させたい場合は……
Ima_Chara.Picture = Image2.Picture
画像３を表示させたい場合は……
Ima_Chara.Picture = Image3.Picture
理屈がわかってしまえば簡単ですね。
それでは実際にコードを書いてみましょう。
Sub Anim_Test()
Dim Stm As Long
Dim Counter As Long
Do
Stm = GetTickCount
Counter = Counter + 1
If Counter > 3 Then '��
Counter = 1
End If
With UserForm1
Select Case Counter '��
Case 1
.Ima_Chara.Picture = .Image1.Picture
Case 2
.Ima_Chara.Picture = .Image2.Picture
Case 3
.Ima_Chara.Picture = .Image3.Picture
End Select
End With
DoEvents
Do
Call Sleep(1)
Loop Until GetTickCount - Stm > 150 '��
Loop
End Sub
Dim Stm As Long
Dim Counter As Long
Do
Stm = GetTickCount
Counter = Counter + 1
If Counter > 3 Then '��
Counter = 1
End If
With UserForm1
Select Case Counter '��
Case 1
.Ima_Chara.Picture = .Image1.Picture
Case 2
.Ima_Chara.Picture = .Image2.Picture
Case 3
.Ima_Chara.Picture = .Image3.Picture
End Select
End With
DoEvents
Do
Call Sleep(1)
Loop Until GetTickCount - Stm > 150 '��
Loop
End Sub
コードの内容はそれほど難しいものではないと思います。
Long型の変数Counterが、１回ループするたびにプラス１ずつ増えます。ただしそのあと、もし変数Counterの値が３より大きい数(４以上の数)だった場合には、１に戻しています。これが�，良�分ですね。ここで変数
Counterに設定された値を使って、そのあとの処理を行います。それが�△良�分です。
Select Case文で、変数Counterの値を元に処理が分岐しています。さきほどの�，良�分で、変数Counterに入る数値は１〜３の範囲を繰り返すようになっているはずです。それに応じて画像が切り替えられ、１回ループするたびに毎回違った画像が表示されるのです。忘れやすいのが『
DoEvents』の呼び出しです。これは注意してくださいね。もし呼び出すのを忘れていると、画面が更新されないので一向にアニメーションしているように見えません。今回はあまりループが早すぎると、アニメーションが速くなりすぎて不自然になります。そこで��の部分で示すように、前々回よりも１回あたりのループ時間を長めにしてあります。(前々回はここが50に設定されていました)
■仕上げ
さて、アニメーション処理のメインとなるコードは、これで準備できました。
あとは前々回の講座のときと同じ要領で、コマンドボタンからこのプロシージャを呼び出すようにしておきます。
ユーザーフォームの
QueryCloseイベントも、忘れずに記述しておきましょうね。QueryCloseイベントをキチンと記述していないと、処理が止まらなくなってしまいますからね。一応参考までに、フォームモジュールに記述するべきコードも載せておきますね。
標準モジュールではないですから、十分注意してください。
'コマンドボタンのクリックイベント
Private Sub CommandButton1_Click()
Call Anim_Test
End Sub
'----------------------------------------------------------------------
'ユーザーフォームのクエリクロースイベント
Private Sub UserForm_QueryClose(Cancel As Integer, CloseMode As Integer)
End
End Sub
Private Sub CommandButton1_Click()
Call Anim_Test
End Sub
'----------------------------------------------------------------------
'ユーザーフォームのクエリクロースイベント
Private Sub UserForm_QueryClose(Cancel As Integer, CloseMode As Integer)
End
End Sub
このコードがよくわからない人は、前々回の講座で詳しく解説していますのでそちらをご覧ください(Chapter36を参照)。
さて、これで準備は全て完了です。
ユーザーフォームを表示させ、コマンドボタンを押すと、キャラクターがアニメーションして表示されるはずです。オレンジの丸いヤツが、うんうん頷いているような感じに、アニメーションして表示されましたか？
こんな感じ。
仕組みさえ理解できてしまえば、アニメーション処理はそれほど難しくはありません。
焦らずひとつひとつ設定していけば、特に大きな問題はないでしょう。
最初に言いましたが、大変なのはむしろ画像を用意しなくてはならない、ということではないでしょうか。こだわりのあるゲームほど、キャラクターがしっかり描き込まれています。
少しだけ根気を出して、自分自身が納得のいく画像を用意してみてくださいね。
ちなみに、今回のコードはもう少し効率よく記述することもできます。
しかし、内容が濃すぎになってしまいますので、これはいつか、おいおい解説することにします。アニメーション処理はゲームの中で頻繁に登場します。近いうちに解説できると思いますので、まずは今回の内容をしっかり獲得してくださいね。
サンプルダウンロード ⇒ コチラよりダウンロードできます。（別館）
■格言
アニメするには画像をまず準備する
Pictureプロパティをうまく活用して処理する
ビジュアル面がかなりグレードアップしましたね。
