ExcelVBAゲームプログラミング?

初心者でもきっとできる!
Excelさえ持っていれば特別なソフトは不要!
すぐにでも始められる簡単ゲームプログラミング!
今すぐ始めよう!

サンプルやゲームのダウンロードができる別館も好評運営中です。
ご意見やご質問、ゲームの感想等は掲示板までお気軽に。是非、皆さんの声を聞かせてください。運営、開発の励みになります。



各種ダウンロードはコチラ ↓ 意見・感想・質問はコチラ ↓
影倉庫 Shadow warehouse サポート掲示板
ブログの全体像はコチラ ↓ リンクのページはコチラ ↓
サイトマップ 自分本位なリンク


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。






Chapter.38 [ アニメーション ]

■さらなる表現を目指して

さて今回は、更なる表現力を身につけるために、キャラクターのアニメーションについて解説したいと思います。

キャラクターをアニメーションして動かすというのは、どんなゲームを作成する場合にも非常に有効な演出となります。ただ単に静止画としての画像を表示するのもいいですが、やはり、アニメーションされている画像が表示されていたほうが、見た目のかっこよさは格段に上です。

例えば顔絵ひとつしか表示されない卓上ゲームのようなものだって、キャラクターが表情を様々に変えれば、それはそれでかなりの演出効果が見込めます。ビリヤードなどではボールが勢いよく転がりながら動き、徐々にスピードを落としていく演出などで、やはりアニメーションが有効です。これにより、リアリティが増すからですね。

今回の内容は、その性質上コーディング以外の準備が必要になります。それがまた結構手間なんですね。
しかし、手間をかけることさえ惜しまなければ、そのかかった手間以上にすばらしい演出をすることができます。サンプルを掲示しながら進めていきますので、諦めずにがんばりましょう。

というわけで、アニメーション処理、是非ものにしてください。


■仕組みから考える

先ほども言いましたが、アニメーション処理を実現するためには、それなりに事前の準備が必要です。

まず、最低限必要なものは、テレビアニメでいうセル画の役割を果たす、一連の画像です。大抵の場合、少しずつ見た目の異なる複数の画像ですね。
先ほど手間がかかると言ったのは、実はこの画像を準備するところのことなんです。

普段からパソコンでよく絵を描いているという人なら、それほど大変ではないのかもしれませんが、そのような作業に慣れていない人が、アニメーションの原画を描くというのは容易なことではありません。
ウィンドウズに付属されている『ペイント』などの画像編集ソフトで、地道に画像を準備するのは結構大変なんですね。写真を使うとしても、アニメーションしているように撮るというのは結構手間です。第一難しそうですよね。

ただ、悲しいことに、コレばっかりは自分でどうにかするしかありません。インターネット上で探したり、奮起して自分で用意したり、方法は何でもいいです。とにかく、アニメーションするキャラクターなどを表現するためには、まず元となる画像がなくては話になりません。

今回はサンプルとして、以前私がボツにしたキャラクターの画像を載せることにします。白状してしまうと、あらためて描くのが面倒だったからです。許してください。手抜きじゃないと言ってください。

……とにかく、下の画像が今回使用するサンプルです。

 画像1  画像2  画像3 
booty1.gif
booty2.gif
booty3.gif

画像のサイズは24×24ピクセルです


これらの画像は、キチンと透過処理されたGIF形式の画像です。これを使ってアニメーション処理を実装してみましょう。

ちなみに、基盤となるコードはいつもどおり『同期処理のとれたメインループ』です。これがよくわからないという人は、以前の講座でこの仕組みをよく理解してからチャレンジしてみてください(Chapter34Chapter35を参照)。


さて、まずはアニメーション処理の仕組みから考えてみます。

アニメーション処理は、用意された一連の画像を、ループしながら切り替えて表示することで実現させます。
1回目のループ時には『画像1』を表示させ、2回目のループ時は『画像2』を表示。3回目は『画像3』を表示して、4回目は再び最初に戻り『画像1』を表示します。あとは同様に切り替えながら繰り返し処理します。

190.gif

少しずつ見た目の異なる画像を、連続して表示すると、人はそれが動いているように見えます。ループしながら画像をうまく切り替えて、アニメーションしているように見せるのです。

ここで問題となるのは、画像をどこに置いておくのかです。

ユーザーフォーム上でキャラクターを動かしたときを思い出してください。イメージコントロールに画像をロードして、それをキャラクターに見立てていましたよね。
アニメーションを実現する場合も、これと同様に、使用する画像をイメージコントロールにあらかじめロードしておく必要があります。

今回は3つの画像を切り替えながらアニメーションするので、普通に考えると3つのイメージコントロールを用意すれば良さそうですね。
しかし、効率よく処理を行うために、今回はイメージコントロールを4つ用意します。下の画像を参考にして、まずはフォームの準備をしてみてください。

191.gif



■画像を切り替える仕組み

さて、上手にフォームを準備できたでしょうか。
各コントロールの名前などは、忘れずに設定しておいてくださいね。

まずは、表示したい画像は3つなのに、なぜ用意したイメージコントロールは4つなのか、これについて解説します。

画像をロードした3つのコントロールは、『原画』の役割を果たすイメージコントロールです。あくまでも、画像の雛形として、原画の役割を担います。
これに対し4つ目のコントロール、つまり『Ima_Chara』という名前をつけたコントロールは、キャラクターそのものとして使います。このイメージコントロールの画像を切り替えながら表示することにより、あたかもキャラクターがアニメーションしているように見せるのです。

つまり、実際にアニメーションしているように見えるのは『Ima_Chara』というイメージコントロールだけで、ほかの3つはアニメーション処理の原画として使用するだけなのです。

画像をデータとして保持しているのは『イメージコントロールのPictureプロパティ』でしたね。
ですから、イメージコントロールの画像を切り替えたいときには、Pictureプロパティに新しい画像を設定すればいいわけです。

具体的には、キャラクターそのものである『Ima_Chara』のPictureプロパティに、新しく設定したい画像をロードしてある、イメージコントロールのPictureプロパティを設定します。PictureプロパティからPictureプロパティへ、画像データの受け渡しを行うわけです。
感覚としては、イメージコントロールからイメージコントロールへ、画像を転送しているような感じですね。

画像1を表示させたい場合は……

    Ima_Chara.Picture = Image1.Picture

画像2を表示させたい場合は……

    Ima_Chara.Picture = Image2.Picture

画像3を表示させたい場合は……

    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

コードの内容はそれほど難しいものではないと思います。

Long型の変数Counterが、1回ループするたびにプラス1ずつ増えます。ただしそのあと、もし変数Counterの値が3より大きい数(4以上の数)だった場合には、1に戻しています。これが①の部分ですね。

ここで変数Counterに設定された値を使って、そのあとの処理を行います。
それが②の部分です。

Select Case文で、変数Counterの値を元に処理が分岐しています。さきほどの①の部分で、変数Counterに入る数値は1~3の範囲を繰り返すようになっているはずです。それに応じて画像が切り替えられ、1回ループするたびに毎回違った画像が表示されるのです。
忘れやすいのが『DoEvents』の呼び出しです。これは注意してくださいね。もし呼び出すのを忘れていると、画面が更新されないので一向にアニメーションしているように見えません。

今回はあまりループが早すぎると、アニメーションが速くなりすぎて不自然になります。そこで③の部分で示すように、前々回よりも1回あたりのループ時間を長めにしてあります。(前々回はここが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

このコードがよくわからない人は、前々回の講座で詳しく解説していますのでそちらをご覧ください(Chapter36を参照)。

さて、これで準備は全て完了です。
ユーザーフォームを表示させ、コマンドボタンを押すと、キャラクターがアニメーションして表示されるはずです。オレンジの丸いヤツが、うんうん頷いているような感じに、アニメーションして表示されましたか?

booty4.gif
こんな感じ。

仕組みさえ理解できてしまえば、アニメーション処理はそれほど難しくはありません。
焦らずひとつひとつ設定していけば、特に大きな問題はないでしょう。

最初に言いましたが、大変なのはむしろ画像を用意しなくてはならない、ということではないでしょうか。こだわりのあるゲームほど、キャラクターがしっかり描き込まれています。
少しだけ根気を出して、自分自身が納得のいく画像を用意してみてくださいね。

ちなみに、今回のコードはもう少し効率よく記述することもできます。
しかし、内容が濃すぎになってしまいますので、これはいつか、おいおい解説することにします。アニメーション処理はゲームの中で頻繁に登場します。近いうちに解説できると思いますので、まずは今回の内容をしっかり獲得してくださいね。


サンプルダウンロード ⇒ コチラよりダウンロードできます。(別館)


■格言

アニメするには画像をまず準備する
Pictureプロパティをうまく活用して処理する


ビジュアル面がかなりグレードアップしましたね。
関連記事






Comment

Name
E-mail
URL
Comment
Pass  *
Secret? (管理者にだけ表示)
このコメントは管理人のみ閲覧できます
  • #
  • 2008.02.25(Mon)
  • Edit
ちょっと聞くのが恥ずかしいので、匿名で・・・

Sub Anim_Test()の最後から2行目の

 Do
 :
 :
Loop Until GetTickCount - Stm > 150

では実際にどういった働きをするのでしょうか?
恥ずかしい質問なのですが、お願いします
(お忙しいのにすみません)
  • 匿名希望#4B33lOYw
  • URL
  • 2008.03.07(Fri)
  • Edit
>匿名希望さん

例えば、一番最後の150という数字がありますね。
この数字を変更してみると、どういう働きをしているのかわかると思います。

プログラムは、我々が思っているよりも非常に高速に処理を行います。普通に処理していってしまうと、ものすごい速さでアニメーションするので、全くアニメっぽく見えないのです。

そこで、画像を切り替えるたびに、一瞬だけ処理を空回ししてやることで、ほんの少しの待ち時間をつくり、時間を調整しているのです。

この仕組みは、以前の講座『Chapter.33 [ 同期処理の概念 ]』で詳しく解説していますので、そちらをご参考いただければ、理解が深まると思います。

 ↓
http://shadowslasheizan.blog114.fc2.com/blog-entry-48.html
  • 影斬#m.2.LkcQ
  • URL
  • 2008.03.07(Fri)
  • Edit
ご丁寧にありがとうございます。
そしてこんなにも早く返信ありがとうございます。GetTickcount関数の事は,33の方に書かれていたんですね・・・完全に見落としてました;;
  • 匿名希望#4B33lOYw
  • URL
  • 2008.03.08(Sat)
  • Edit
Yoshiと申します。

初歩的な質問で済みません。

画像1,2,3は予めロードしてあると思うのですが、.gifか.bmpファイルは何処に保存してあるのですか。サンプルのフォルダーにはファイルとして個別に入って無かった様ですが。

画像を特定の場所からProfileの設定により取ってくるか、以下の様にロードする手法しか知らず、サンプルデザインの様な画像ファイルの取り込み方法に大変興味があります。

Image1.Picture = LoadPicture("C:test.gif")

ご回答お願いします。
>Yoshiさん

はじめまして。コメントをいただきまして、ありがとうございます。
Yoshiさんが、画像をあらかじめイメージコントロールにロードしておく方法は、理解していると仮定して進めます(わからない場合はChapter24で解説してます)。

ユーザーフォームに限らず、エクセルファイルに画像を手動でロードした場合には、画像データはエクセルの中に取り込まれます。ワークシートに画像を貼りつけた際にも、同様のことが起こりますね。ですから、画像をあらかじめロードしてある場合には、その分ファイルの容量が肥大化していきます。
当然、元となる画像データのファイル形式がここにも影響しますので、Gifを取り込んだ場合と、bmpを取り込んだ場合では、ファイルの容量の増加率が変わってきます。
別館で配布しているサンプルも、ユーザーフォーム上のイメージコントロールに、手動で画像データをロードしてありますので、別途元画像を添付する必要はないのです。サンプルファイルの中に、完全に取り込まれています。
なんかわかりにくいかもしれません。もし、理解できん! って感じでしたら、遠慮なく言って下さい。頑張って追記します。(笑)
  • 影斬#m.2.LkcQ
  • URL
  • 2008.10.02(Thu)
  • Edit
このコメントは管理者の承認待ちです
  • #
  • 2013.08.29(Thu)
  • Edit
このコメントは管理者の承認待ちです
  • #
  • 2015.01.12(Mon)
  • Edit

メールフォーム

影斬に物申すという方はこちら

名前 :
メール:
件名 :
本文 :

可能な限り要望には応えますが、必ず返信や回答ができることを、保障するものではありません。
ご了承ください。

Chapters

コンテンツ一覧


■Chapter 一覧■
    全てのChapterの一覧です。
    直接アクセスしたい方はこちらをご利用下さい。

    Chapter.1 [ 知っておくべき心得 ]
    Chapter.2 [ Excelってなんだろう ]
    Chapter.3 [ Excelの基本画面 ]
    Chapter.4 [ VBAとは? ]
    Chapter.5 [ モジュールについて ]
    Chapter.6 [ 変数 ]
    Chapter.7 [ 変数の型と宣言 ]
    Chapter.8 [ プロシージャとスコープ ]
    Chapter.9 [ ゲームつくる様々な手法 ]
    Chapter.10 [ ユーザーフォーム ]
    Chapter.11 [ プロパティウィンドウ ]
    Chapter.12 [ 乱数 ]
    Chapter.13 [ 条件分岐 ]
    Chapter.14 [ ゲーム画面のデザイン ]
    Chapter.15 [ コード記述の基本作法 ]
    Chapter.16 [ じゃんけんゲーム:1 名前をつける ]
    Chapter.17 [ じゃんけんゲーム:2 フォームの起動 ]
    Chapter.18 [ じゃんけんゲーム:3 乱数の種 ]
    Chapter.19 [ じゃんけんゲーム:4 イベント ]
    Chapter.20 [ じゃんけんゲーム:5 引数 ]
    Chapter.21 [ じゃんけんゲーム:6 役判定 ]
    Chapter.22 [ じゃんけんゲーム:7 予測と制限 ]
    Chapter.23 [ Withステートメント ]
    Chapter.24 [ 画像を表示させる ]
    Chapter.25 [ 画像表示の発展形 ]
    Chapter.26 [ 繰り返し処理 For文 ]
    Chapter.27 [ 繰り返し処理 Do~Loop文 ]
    Chapter.28 [ Exitステートメント ]
    Chapter.29 [ フォーム上の位置情報 ]
    Chapter.30 [ API基礎知識 ]
    Chapter.31 [ API補足知識 ]
    Chapter.32 [ メインループを考える ]
    Chapter.33 [ 同期処理の概念 ]
    Chapter.34 [ 移動処理その1:画面設定と考え方 ]
    Chapter.35 [ 移動処理その2:DoEvents ]
    Chapter.36 [ 移動処理その3:キー入力判定API ]
    Chapter.37 [ 条件分岐のさらなる探求 Select Case ]
    Chapter.38 [ アニメーション ]
    Chapter.39 [ 配列変数 ]
    Chapter.40 [ ゲームの初期化 ]
    Chapter.41 [ シューティングゲーム1:ゲーム設計 ]
    Chapter.42 [ シューティングゲーム2:メインプロセス ]
    Chapter.43 [ シューティングゲーム3:構造体 ]
    Chapter.44 [ シューティングゲーム4:定数 ]
    Chapter.45 [ シューティングゲーム5:プレイヤーキャラクター ]
    Chapter.46 [ シューティングゲーム6:ショットを撃つ① ]
    Chapter.47 [ シューティングゲーム7:ショットを撃つ② ]
    Chapter.48 [ シューティングゲーム8:Mod演算子の活用 ]
    Chapter.49 [ シューティングゲーム9:敵キャラクター登場 ]
    Chapter.50 [ シューティングゲーム10:衝突判定 ]
    Chapter.51 [ シューティングゲーム11:衝突の実体 ]
    Chapter.52 [ シューティングゲーム12:敵の攻撃 ]
    Chapter.53 [ シューティングゲーム13:爆発エフェクト ]
    Chapter.54 [ シューティングゲーム14:残機数表示① ]
    Chapter.55 [ シューティングゲーム15:残機数表示② ]
    Chapter.56 [ シューティングゲーム16:スコアの表示 ]
    Chapter.57 [ シューティングゲーム17:タイトル画面 ]
    Chapter.58 [ シューティングゲーム18:ボスキャラクター ]
    Chapter.59 [ シューティングゲーム19:最後の仕上げへ ]
    Chapter.60 [ シューティングゲーム20:いよいよ完成STG ]
    Chapter.61 [ カードゲームで使えるめくり効果 ]
    Chapter.62 [ ラジアンと角度 ]
    Chapter.63 [ ラジアンの活用:円運動 ]
    Chapter.64 [ ラジアンの活用:任意の角度へ移動する ]
    Chapter.65 [ APIによるサウンド再生:基礎 ]
    Chapter.66 [ APIによるサウンド再生:MIDIと多重再生 ]
    Chapter.67 [ APIによるサウンド再生:MCIコマンドとループ再生 ]
    Chapter.68 [ Function プロシージャ ]
    Chapter.69 [ 値渡しと参照渡し ]
    Chapter.70 [ デバッグ1:イミディエイトウィンドウ ]
    Chapter.71 [ デバッグ2:ローカルウィンドウ ]
    Chapter.72 [ デバッグ3:コード実行の中断 ]
    Chapter.73 [ オブジェクトってなんだ ]
    Chapter.74 [ プロパティ・メソッド・イベント ]
    Chapter.75 [ オブジェクト変数 ]
    Chapter.76 [ オブジェクトとコレクション ]
    Chapter.77 [ 特殊な繰り返し:For Each ]
    Chapter.78 [ エラー処理 ]
    Chapter.79 [ On Error と GoTo文 ]
    Chapter.80 [ Resumeステートメント ]
    Chapter.81 [ バイトとビット ]
    Chapter.82 [ ウィンドウメッセージとイベント ]
    Chapter.83 [ 文字列の基礎 ]
    Chapter.84 [ 文字列操作① ]
    Chapter.85 [ 文字列操作② ]
    Chapter.86 [ タイピングゲーム1:仕様を決める ]
    Chapter.87 [ タイピングゲーム2:キー入力検知 ]
    Chapter.88 [ タイピングゲーム3:文字列照合 ]
    Chapter.89 [ タイピングゲーム4:判定関数 ]
    Chapter.90 [ タイピングゲーム5:ゲーム画面設計 ]
    Chapter.91 [ タイピングゲーム6:問題文のソート ]
    Chapter.92 [ タイピングゲーム7:動的配列 ]
    Chapter.93 [ タイピングゲーム8:キーダウンイベント ]
    Chapter.94 [ タイピングゲーム9:正打数の表示 ]
    Chapter.95 [ タイピングゲーム10:タイムの表示 ]
    Chapter.96 [ クリックゲーム1:イベントの種類 ]
    Chapter.97 [ クリックゲーム2:画面設計 ]
    Chapter.98 [ クリックゲーム3:クリック座標検知 ]
    Chapter.99 [ クリックゲーム4:キャラクター準備 ]
    Chapter.100 [ クリックゲーム5:キャラクターの配置 ]
    Chapter.101 [ クリックゲーム6:キャラクター移動とNot演算子 ]
    Chapter.102 [ クリックゲーム7:クリックのヒット判定 ]
    Chapter.103 [ クリックゲーム8:ヒットマークエフェクト ]
    Chapter.104 [ クリックゲーム9:サウンド処理の実装 ]
    Chapter.105 [ クリックゲーム10:マウスカーソルの変更 ]
    Chapter.106 [ ブロック崩しゲーム1:仕様と概要を決める ]
    Chapter.107 [ ブロック崩しゲーム2:基本概念の確認 ]
    Chapter.108 [ ブロック崩しゲーム3:ベクトルとは ]
    Chapter.109 [ ブロック崩しゲーム4:変数や定数の宣言 ]
    Chapter.110 [ ブロック崩しゲーム5:初期化処理の実装 ]
    Chapter.111 [ ブロック崩しゲーム6:ブロックの配置 ]
    Chapter.112 [ ブロック崩しゲーム7:根幹処理とバーの処理 ]
    Chapter.113 [ ブロック崩しゲーム8:線分と線分の交差を判定 ]
    Chapter.114 [ ブロック崩しゲーム9:線分同士の交点 ]
    Chapter.115 [ ブロック崩しゲーム10:ボールの処理 ]
    Chapter.116 [ ブロック崩しゲーム11:最終調整して完成へ ]
    Chapter.117 [ テキストファイル操作基礎 ]
    Chapter.118 [ テキストファイル操作:読み込み編 ]
    Chapter.119 [ テキストファイル操作:CSV読み込み編 ]
    Chapter.120 [ テキストファイル操作:様々な読込編 ]
    Chapter.121 [ テキストファイル操作:バイナリ編 ]
    Chapter.122 [ テキストファイル操作:暗号化編 ]
    Chapter.123 [ テキストファイル操作:復号化編 ]
    Chapter.124 [ クラスモジュールとは ]
    Chapter.125 [ クラスモジュール:メソッド編 ]
    Chapter.126 [ クラスモジュール:プロパティ編 ]
    Chapter.127 [ クラスモジュール:イベント拡張編 ]
    Chapter.128 [ クラスモジュール:イベント自作編 ]
    Chapter.129 [ APIによる描画処理1:ハンドル ]
    Chapter.130 [ APIによる描画処理2:デバイスコンテキスト ]
    Chapter.131 [ APIによる描画処理3:ペン オブジェクト ]
    Chapter.132 [ APIによる描画処理4:ブラシ オブジェクト ]
    Chapter.133 [ APIによる描画処理5:図形描画準備編 ]
    Chapter.134 [ APIによる描画処理6:図形描画実践編 ]
    Chapter.135 [ APIによる描画処理7:画像描画の仕組み編 ]
    Chapter.136 [ APIによる描画処理8:ビットブロック転送編 ]
    Chapter.137 [ APIによる描画処理9:ラスタオペレーション ]
    Chapter.138 [ APIによる描画処理10:マスク描画 概念編 ]
    Chapter.139 [ APIによる描画処理11:マスク描画 実践編 ]


    コードやVBAに関する質問などはサポート掲示板(別館)までお気軽にどうぞ。




fc2 seotool Excel VBA ゲーム プログラミング 講座

Counter

twitter


Shadow BBS - 影掲示板

VBA 関連書籍



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。