Ｃｈａｐｔｅｒ.３４ [ 移動処理その１：画面設定と考え方 ]
■いよいよ実践編スタート！
実践講座の第１回目となる今回からは、いよいよキャラクターを動かす処理を考えてみたいと思います。
以前の講座で、ユーザーフォームに画像を表示させるためのテクニックを解説しましたね(Chapter24・Chapter25を参照)。このときは、ユーザーフォーム上にただ画像を表示させているだけでしたが、今回はそれを動かす方法を解説します。
画像を動かす、ということは、正確には『画像をロードしたイメージコントロールを動かす』ということを表します。
イメージコントロールに、自分で任意の画像をあらかじめロードしておいて、それをキャラクターに見立てます。イメージコントロールが表示される位置を変化させると、まるでキャラクターが動いているように見えるというわけですね。
今回は、まずそのとっかかりとして、まっすぐ進むだけの単純な移動を行ってみましょう。ただ直進するだけ、といっても、結構考えることはあるものです。油断せず、しっかり覚えてくださいね。
今回は、単純な移動処理を行うだけですが、皆さんが実際にゲームを作るときに即役立つようにするためにも、キチンとキャラクターを表示させてやってみることにしましょう。
というわけで、今回は以下のような手順で進めます。
■まずはフォームの準備から
さて、前述の� 銑Δ泙任亮蟒腓里Δ繊↓い泙任裡瓦弔亮蟒腓蓮�以前の解説をキチンと理解していれば別段問題なくできるはずです。
ですから、ここでは簡単な説明に留めます。
まずは、VBAのメニューから『挿入』→『ユーザーフォーム』と選択します。これで新しいユーザーフォームがプロジェクトに追加されるはずです。
次に、ユーザーフォーム上に、適当な大きさで構わないのでイメージコントロールをひとつ、配置しましょう。これで�，鉢△�完了ですね。
次は今配置したイメージコントロールに、画像をロードします。これには、イメージコントロールの『
今回はサンプルとして、次のような画像を用意しました。講座中はとりあえずこの画像を使って説明していきます。ちなみにこの画像のサイズは『24×24ピクセル』です。
画像は自前で用意したものでも構いません。ただし、その場合には注意しなければならないこともあります。それは画像の大きさです。
今回解説するサンプルコードなどは、上で紹介している画像を想定したコードになります。自前の画像を使用する場合には、イメージコントロールの大きさや、その他の処理で使う数値などを、適切に変更する必要がありますから注意です。
よくわからないという人は、とりあえず上の画像を使ってみてくださいね。上の画像を右クリックして『対象をファイルに保存』を選択すれば、ダウンロードすることができます。
とにもかくにも、無事画像が準備できたら、イメージコントロールの
無事に画像がロードできたでしょうか。ここまでで、次のような状態になっていればOKです。
このままでは、ご覧のとおりゲームに使える状態ではないので、イメージコントロールのプロパティをいくつか変更して、適切な状態にしましょう。これについては以前のChapterで詳しく解説しています(Chapter25を参照)。イメージコントロールの各種調整までできたら、��の手順も完了です。
■ゲーム画面の設計
最初に載せた手順のうち、� 銑�までが完了しました。
ここで、いったんユーザーフォームの設定も見直しておきましょう。
普通、ゲーム画面の大きさ(ユーザーフォームの大きさ)というのは、プログラマーが始めに決めておきます。これにはちゃんとした理由があります。
実際にコードを書き始めればわかりますが、ユーザーフォームの大きさが決まっていないと、非常に困った問題が出てきます。
例えばテレビを思い浮かべてみてください。
テレビは画面の横幅と縦幅が、どんなメーカーでもおおよそ同じ規格で統一されています。なぜならそうしておかないと、表示される映像が欠けてしまったり、逆に何も表示されない空間ができてしまうからですね。縦長のテレビ画面なんて、見たことありませんもんね。
これと同様に、ゲーム画面となるユーザーフォームは、あらかじめ大きさを決めておいたほうがいいのです。もしキチンと大きさを決めておかずに、例えばブロック崩しのようなゲームを作るとしたらどうでしょうか。
ボールが跳ね返る壁が、近すぎたり、はたまた遠すぎたり、これではゲームがめちゃくちゃになってしまいますよね。
今回の場合も、あらかじめ画面のサイズ、つまりフォームのサイズを先に決めておくことにしましょう。
まずはフォームの横の幅からです。ユーザーフォームの『
今回はここで『200』を設定しておきましょう。これで横幅が定義できました。簡単ですね。続いて縦幅も決めておきます。『
それと、もうひとつ。キャラクターの初期位置も定義しておきます。つまり、先ほど画像をロードしたイメージコントロールの、表示されている位置を決めておくということです。
これには、イメージコントロールの『
今回はいずれも０(ゼロ)に設定しておき、次のような感じにしておきます。
さて、ここまではうまくいっていますか？
ちょっと駆け足ですが、わからないまま進めないように注意してくださいね。ひとつひとつ、ゆっくりで構いませんから、以前の講座を参考に準備をしてみてください。
準備ができたら、早速ですが次にいってみましょう。
続いては手順の�い任后�
手順�い任蓮▲罅璽供璽侫�ーム上にコマンドボタンを配置します。以前のじゃんけんゲームのときと同様、ここで配置するコマンドボタンは、コード実行の開始を告げるスターターの役割を果たします。
このボタンがクリックされたときに、キャラクターの移動処理が開始されるようにするわけです。こうすることによって、プログラムが動き出すタイミングをしっかり決めておくことができます。ファミコンで言うところの『スタートボタン』みたいな役割ですね。
キャラクターの移動の邪魔にならないように、今回は右下のほうに配置しました。
これで�い泙任�完了しました。次はいよいよキャラクターを移動させるためのコードを書いていきます。
とりあえず、実際にコードを記述する前に、キャラクターをまっすぐ動かすための考え方からまとめてみましょう。
■動くということを考える
今回は、キャラクターをまっすぐ動かすのが目的です。非常に単純な動きですね。では、一体どのようにプログラミングをすればいいのでしょう。
キャラクターを動かすということは、テレビアニメの考え方と似ています。
テレビアニメでは、セル画と呼ばれる絵を連続して表示させ、それが少しずつ変化することで、あたかも動いているように見えます。この仕組みがわからないという人はいないと思います。多分……。
プログラミングでも、この考え方と同じように、『少しずつ変化させる』というところが重要になります。
例えば地点Aから地点Bへ、キャラクターを動かしたいとします。
このとき、一瞬で地点Aから地点Bへ移動してしまったら、動いているというより瞬間移動したみたいになってしまいますね。滑らかにキャラクターが動いているように見せるためには、キャラクターを少しずつ動かすことが大切です。
テレビアニメの場合でも、例えば２枚のセル画で作られた映像より、１０枚のセル画で作られた映像のほうが滑らかに動いて見えます。同じ動作であっても、その途中経過を詳細に分割して描いたほうが、より美しく動作しているように見えるのです。
そこで、繰り返し処理を使って、１回ループするたびに少しずつ動くようにプログラミングします。そうすることで、キャラクターが滑らかに動いているように見えるわけですね。
動かすということの考え方を理解できたところで、今回は、とりあえずここまでにします。
ちょっと長くなってしまったので、コードは次回紹介することにします。
キャラクターを動かすために、その考え方を理解しておくことは大切です。今回の内容をしっかり頭に入れておきましょうね。
■格言
ゲーム画面の設定をあらかじめしっかりやっておく
キャラクターの動きはテレビアニメの要領で行う
画面の設定はとても大切。始めにしっかり方向性を決めておきましょう。
実践講座の第１回目となる今回からは、いよいよキャラクターを動かす処理を考えてみたいと思います。
以前の講座で、ユーザーフォームに画像を表示させるためのテクニックを解説しましたね(Chapter24・Chapter25を参照)。このときは、ユーザーフォーム上にただ画像を表示させているだけでしたが、今回はそれを動かす方法を解説します。
画像を動かす、ということは、正確には『画像をロードしたイメージコントロールを動かす』ということを表します。
イメージコントロールに、自分で任意の画像をあらかじめロードしておいて、それをキャラクターに見立てます。イメージコントロールが表示される位置を変化させると、まるでキャラクターが動いているように見えるというわけですね。
今回は、まずそのとっかかりとして、まっすぐ進むだけの単純な移動を行ってみましょう。ただ直進するだけ、といっても、結構考えることはあるものです。油断せず、しっかり覚えてくださいね。
今回は、単純な移動処理を行うだけですが、皆さんが実際にゲームを作るときに即役立つようにするためにも、キチンとキャラクターを表示させてやってみることにしましょう。
というわけで、今回は以下のような手順で進めます。
�，△燭蕕靴�ユーザーフォームを用意する
▼
�▲罅璽供璽侫�ームにイメージコントロールを配置する
▼
��イメージコントロールに画像をロードする
▼
�ぅ侫�ームにコマンドボタンを配置する
▼
�ゥぅ瓠璽献灰鵐肇蹇璽襪鯑阿�すコードを用意する
▼
�Ε灰泪鵐疋椒織鵑�押されたときに、�イ離魁璽匹�始まるようにする
▼
�▲罅璽供璽侫�ームにイメージコントロールを配置する
▼
��イメージコントロールに画像をロードする
▼
�ぅ侫�ームにコマンドボタンを配置する
▼
�ゥぅ瓠璽献灰鵐肇蹇璽襪鯑阿�すコードを用意する
▼
�Ε灰泪鵐疋椒織鵑�押されたときに、�イ離魁璽匹�始まるようにする
■まずはフォームの準備から
さて、前述の� 銑Δ泙任亮蟒腓里Δ繊↓い泙任裡瓦弔亮蟒腓蓮�以前の解説をキチンと理解していれば別段問題なくできるはずです。
ですから、ここでは簡単な説明に留めます。
まずは、VBAのメニューから『挿入』→『ユーザーフォーム』と選択します。これで新しいユーザーフォームがプロジェクトに追加されるはずです。
次に、ユーザーフォーム上に、適当な大きさで構わないのでイメージコントロールをひとつ、配置しましょう。これで�，鉢△�完了ですね。
次は今配置したイメージコントロールに、画像をロードします。これには、イメージコントロールの『
Pictureプロパティ』を使うんでしたね。今回はサンプルとして、次のような画像を用意しました。講座中はとりあえずこの画像を使って説明していきます。ちなみにこの画像のサイズは『24×24ピクセル』です。
画像は自前で用意したものでも構いません。ただし、その場合には注意しなければならないこともあります。それは画像の大きさです。
今回解説するサンプルコードなどは、上で紹介している画像を想定したコードになります。自前の画像を使用する場合には、イメージコントロールの大きさや、その他の処理で使う数値などを、適切に変更する必要がありますから注意です。
よくわからないという人は、とりあえず上の画像を使ってみてくださいね。上の画像を右クリックして『対象をファイルに保存』を選択すれば、ダウンロードすることができます。
とにもかくにも、無事画像が準備できたら、イメージコントロールの
Pictureプロパティを使って画像をロードしましょう。無事に画像がロードできたでしょうか。ここまでで、次のような状態になっていればOKです。
このままでは、ご覧のとおりゲームに使える状態ではないので、イメージコントロールのプロパティをいくつか変更して、適切な状態にしましょう。これについては以前のChapterで詳しく解説しています(Chapter25を参照)。イメージコントロールの各種調整までできたら、��の手順も完了です。
■ゲーム画面の設計
最初に載せた手順のうち、� 銑�までが完了しました。
ここで、いったんユーザーフォームの設定も見直しておきましょう。
普通、ゲーム画面の大きさ(ユーザーフォームの大きさ)というのは、プログラマーが始めに決めておきます。これにはちゃんとした理由があります。
実際にコードを書き始めればわかりますが、ユーザーフォームの大きさが決まっていないと、非常に困った問題が出てきます。
例えばテレビを思い浮かべてみてください。
テレビは画面の横幅と縦幅が、どんなメーカーでもおおよそ同じ規格で統一されています。なぜならそうしておかないと、表示される映像が欠けてしまったり、逆に何も表示されない空間ができてしまうからですね。縦長のテレビ画面なんて、見たことありませんもんね。
これと同様に、ゲーム画面となるユーザーフォームは、あらかじめ大きさを決めておいたほうがいいのです。もしキチンと大きさを決めておかずに、例えばブロック崩しのようなゲームを作るとしたらどうでしょうか。
ボールが跳ね返る壁が、近すぎたり、はたまた遠すぎたり、これではゲームがめちゃくちゃになってしまいますよね。
今回の場合も、あらかじめ画面のサイズ、つまりフォームのサイズを先に決めておくことにしましょう。
まずはフォームの横の幅からです。ユーザーフォームの『
Widthプロパティ』に、横幅を表す数値を指定します。単位はポイントになります。今回はここで『200』を設定しておきましょう。これで横幅が定義できました。簡単ですね。続いて縦幅も決めておきます。『
Heightプロパティ』に、今回は『300』を設定しておきましょう。それと、もうひとつ。キャラクターの初期位置も定義しておきます。つまり、先ほど画像をロードしたイメージコントロールの、表示されている位置を決めておくということです。
これには、イメージコントロールの『
Topプロパティ』で縦位置を。『Leftプロパティ』で横位置を設定します。今回はいずれも０(ゼロ)に設定しておき、次のような感じにしておきます。
さて、ここまではうまくいっていますか？
ちょっと駆け足ですが、わからないまま進めないように注意してくださいね。ひとつひとつ、ゆっくりで構いませんから、以前の講座を参考に準備をしてみてください。
準備ができたら、早速ですが次にいってみましょう。
続いては手順の�い任后�
手順�い任蓮▲罅璽供璽侫�ーム上にコマンドボタンを配置します。以前のじゃんけんゲームのときと同様、ここで配置するコマンドボタンは、コード実行の開始を告げるスターターの役割を果たします。
このボタンがクリックされたときに、キャラクターの移動処理が開始されるようにするわけです。こうすることによって、プログラムが動き出すタイミングをしっかり決めておくことができます。ファミコンで言うところの『スタートボタン』みたいな役割ですね。
キャラクターの移動の邪魔にならないように、今回は右下のほうに配置しました。
これで�い泙任�完了しました。次はいよいよキャラクターを移動させるためのコードを書いていきます。
とりあえず、実際にコードを記述する前に、キャラクターをまっすぐ動かすための考え方からまとめてみましょう。
■動くということを考える
今回は、キャラクターをまっすぐ動かすのが目的です。非常に単純な動きですね。では、一体どのようにプログラミングをすればいいのでしょう。
キャラクターを動かすということは、テレビアニメの考え方と似ています。
テレビアニメでは、セル画と呼ばれる絵を連続して表示させ、それが少しずつ変化することで、あたかも動いているように見えます。この仕組みがわからないという人はいないと思います。多分……。
プログラミングでも、この考え方と同じように、『少しずつ変化させる』というところが重要になります。
例えば地点Aから地点Bへ、キャラクターを動かしたいとします。
このとき、一瞬で地点Aから地点Bへ移動してしまったら、動いているというより瞬間移動したみたいになってしまいますね。滑らかにキャラクターが動いているように見せるためには、キャラクターを少しずつ動かすことが大切です。
テレビアニメの場合でも、例えば２枚のセル画で作られた映像より、１０枚のセル画で作られた映像のほうが滑らかに動いて見えます。同じ動作であっても、その途中経過を詳細に分割して描いたほうが、より美しく動作しているように見えるのです。
そこで、繰り返し処理を使って、１回ループするたびに少しずつ動くようにプログラミングします。そうすることで、キャラクターが滑らかに動いているように見えるわけですね。
動かすということの考え方を理解できたところで、今回は、とりあえずここまでにします。
ちょっと長くなってしまったので、コードは次回紹介することにします。
キャラクターを動かすために、その考え方を理解しておくことは大切です。今回の内容をしっかり頭に入れておきましょうね。
■格言
ゲーム画面の設定をあらかじめしっかりやっておく
キャラクターの動きはテレビアニメの要領で行う
画面の設定はとても大切。始めにしっかり方向性を決めておきましょう。
