Ｃｈａｐｔｅｒ.６１ [ カードゲームで使えるめくり効果 ]
■プロパティを活用した演出
ユーザーフォーム上に配置できる様々なコントロールたち。それらの多くは、非常に多彩なプロパティを持っています。これらのプロパティを変化させることで、ユーザーにとって扱いやすいインターフェイスを作ったり、安定したプログラムを作成することができるようになります。
ですが、プロパティを活用することで、ゲームの演出面が強化される場合もあります。
今まで扱ってきた、アニメーション処理やシューティングゲームの処理でも、イメージコントロールの
これも、プロパティの成せる技です。
今回は、イメージコントロールが持っているプロパティのうち、
■PictureSizeModeプロパティ
コントロールに画像を表示する際、その表示方法に
シューティングゲームの中でも、このプロパティを使った部分がありましたね(Chapter54を参照)。
このプロパティをうまく活用することで、カードがめくれるような演出を行うことができます。早速、その詳細を見てみましょう。
まずは、ユーザーフォーム上にイメージコントロールを３つ配置します。このイメージコントロールがカードの役割を果たします。
このうち、１つはカードそのものを表し名前が『
カードの表面と裏面の両方に相当する画像をロードしておき、適宜名前を変更します。
カードそのものを表す
コマンドボタンを追加して、これでユーザーフォームの準備は完了です。
あとでコードが記述しやすいように、各コントロールの名前を変更しておくのを忘れずにやっておきましょうね。
■考え方とコードの記述
カードがめくれるような演出を行うためには、どのようにコードを記述すればいいのでしょうか。人間の視点に立って考えてみましょう。
カードが視線に対して直角に存在する場合には、次のようになりますね。
カードが視点に対して直角になっているので、カードがそのまま見えるだけです。
そして、カードがめくれていく途中の段階では、こんな風になりますね。
視点から見たカードの幅は、めくれていく中でだんだん狭くなっていきます。
完全に視線と水平になったとき、カードはほとんど見えなくなり、今度はだんだん幅が広がっていきます。
完全にめくり終わると、カードは再び視線に対して直角に戻ります。
ここで重要なのは、めくれていく中で、はじめは『 幅が狭くなっていき 』裏返ると『 幅が広くなっていく 』ということです。
イメージコントロールの幅が、狭くなる⇒広くなる、という具合に連続して処理できれば、カードのめくれる動作を実現できるのです。
それでは実際にコードを見てみます。
Public Declare Function GetTickCount Lib "kernel32" () As Long
Public Declare Sub Sleep Lib "kernel32.dll" (ByVal dwMillsecounds As Long)
Public Stime As Long
Public Fronts As Boolean
Public Const Card_Left As Single = 72
Public Const Card_Width As Single = 90
Sub Turn()
Dim Before As Boolean
Dim Flg As Boolean
Before = True
With UserForm1.card
Do Until Flg
Stime = GetTickCount
If Before Then
.Width = .Width - 4
If .Width < 5 Then
Before = False
If Fronts Then
.Picture = UserForm1.back.Picture
Fronts = False
Else
.Picture = UserForm1.front.Picture
Fronts = True
End If
End If
Else
.Width = .Width + 4
If .Width > Card_Width Then
.Width = Card_Width
Flg = True
End If
End If
.Left = Card_Left + (Card_Width - .Width) / 2
DoEvents
Do
Sleep 1
Loop Until GetTickCount - Stime > 10
Loop
End With
End Sub
Private Sub CommandButton1_Click()
CommandButton1.Enabled = False
Turn
CommandButton1.Enabled = True
End Sub
Private Sub UserForm_Initialize()
Me.Height = 215
With card
.Top = 18
.Left = Card_Left
End With
Fronts = False
End Sub
それでは最初から見ていきます。
まずは、APIの宣言と変数及び定数の宣言です。
APIは
次に変数ですが、これも２つ、
定数も２つです。こちらは必ずしも定義しなくてもいいのですが、後からコードを修正するときの手間を考えて宣言しています。カードの横位置
その下、
このプロシージャがユーザーフォーム上のコマンドボタンから呼び出されると、ユーザーフォーム上のカードが裏返ります。
そして、このプロシージャの中でも変数を宣言していますね。こちらも２つ宣言されています。
先ほども書いたように、カードがめくれていく過程では、始めはカードの幅が狭くなっていきます。しかし後半はカードの幅が広がっていくようになります。今現在カードの幅を狭めるべきなのか、もしくは広げるべきなのか、これを変数
もうひとつの変数
さて、実際の処理の中身です。
変数
もし、めくり動作の前半ならば、カードを表すイメージコントロールの幅、つまり
カードがめくれたあとは、逆に幅を広げていきます。ここでも、一定の幅まで広がったら、ループ処理を抜けるようにしておきます。
今回は�，納┐紘�分が最も難解な部分になると思います。
ここでは、カードの横位置
本来のカードの横位置が
めくり動作中には、カードの幅が常に変更され続けますよね。これをただ単に幅の変更だけにしてしまうと、横位置が変更されないので左に寄っていってしまいます。
▼
▼
どうですか？ ただ横幅
カードが中心を軸にして回転しているように見せるためには、常にカードの中心を求めて横位置を修正しなければいけません。�，良�分のコードでは、それをやっているのです。
本来の幅から、現在の幅を引けば、今どれくらい幅が狭まったかがわかります。もし幅が10ポイント狭まっていたなら、中心を軸に考えるので、半分の5ポイント移動させればいいことになります。少しわかりにくいかもしれませんが、よーく式を見て考えてみてくださいね。
■まとめ
カードゲームは、激しく動くアクションゲームなどと比べると、どうしても地味な印象になりがちです。カードがめくれるという単純な演出でも、その効果は非常に大きいものとなります。
今回の処理で注意しなければならないのは、コントロールの
コントロールの幅を表す
もしマイナスの数値を設定しようとすると、エラーが起きて処理が止まってしまいます。これはどんなコントロールであっても共通する仕様です。幅を表すプロパティにはマイナスの数値を設定できないと覚えておきましょう。
カードをめくる処理自体は、中心を軸にして横位置を調整する、というところさえ理解できれば、それほど難しいものではないと思います。サンプルを作成しておきましたのでそちらも参考に。
サンプルダウンロード ⇒ コチラよりダウンロードできます。（別館）
■格言
プロパティを有効に利用する
カードめくりでは中心を考えて横位置を調整
ユーザーフォーム上に配置できる様々なコントロールたち。それらの多くは、非常に多彩なプロパティを持っています。これらのプロパティを変化させることで、ユーザーにとって扱いやすいインターフェイスを作ったり、安定したプログラムを作成することができるようになります。
ですが、プロパティを活用することで、ゲームの演出面が強化される場合もあります。
今まで扱ってきた、アニメーション処理やシューティングゲームの処理でも、イメージコントロールの
BackStyleプロパティをうまく利用したキャラクターの表示などを行ってきましたね。これも、プロパティの成せる技です。
今回は、イメージコントロールが持っているプロパティのうち、
PictureSizeModeというプロパティにフォーカスを当ててみたいと思います。■PictureSizeModeプロパティ
コントロールに画像を表示する際、その表示方法に
PictureSizeModeが影響を与えます。PictureSizeModeは、画像の大きさとコントロールの大きさが一致していない場合に、画像を伸縮させて表示させるか、あるいはそのままの大きさを維持して表示させるか、それを管理します。シューティングゲームの中でも、このプロパティを使った部分がありましたね(Chapter54を参照)。
このプロパティをうまく活用することで、カードがめくれるような演出を行うことができます。早速、その詳細を見てみましょう。
まずは、ユーザーフォーム上にイメージコントロールを３つ配置します。このイメージコントロールがカードの役割を果たします。
このうち、１つはカードそのものを表し名前が『
card』です。残りの２つは原画の役割を果たします。名前は『back』と『front』としておきます。カードの表面と裏面の両方に相当する画像をロードしておき、適宜名前を変更します。
カードそのものを表す
cardはPictureSizeModeプロパティを変更してfmPictureSizeModeStretchに設定しておきましょう。コマンドボタンを追加して、これでユーザーフォームの準備は完了です。
あとでコードが記述しやすいように、各コントロールの名前を変更しておくのを忘れずにやっておきましょうね。
■考え方とコードの記述
カードがめくれるような演出を行うためには、どのようにコードを記述すればいいのでしょうか。人間の視点に立って考えてみましょう。
カードが視線に対して直角に存在する場合には、次のようになりますね。
カードが視点に対して直角になっているので、カードがそのまま見えるだけです。
そして、カードがめくれていく途中の段階では、こんな風になりますね。
視点から見たカードの幅は、めくれていく中でだんだん狭くなっていきます。
完全に視線と水平になったとき、カードはほとんど見えなくなり、今度はだんだん幅が広がっていきます。
完全にめくり終わると、カードは再び視線に対して直角に戻ります。
ここで重要なのは、めくれていく中で、はじめは『 幅が狭くなっていき 』裏返ると『 幅が広くなっていく 』ということです。
イメージコントロールの幅が、狭くなる⇒広くなる、という具合に連続して処理できれば、カードのめくれる動作を実現できるのです。
それでは実際にコードを見てみます。
'API宣言と変数及び定数の宣言Public Declare Function GetTickCount Lib "kernel32" () As Long
Public Declare Sub Sleep Lib "kernel32.dll" (ByVal dwMillsecounds As Long)
Public Stime As Long
Public Fronts As Boolean
Public Const Card_Left As Single = 72
Public Const Card_Width As Single = 90
Sub Turn()
Dim Before As Boolean
Dim Flg As Boolean
Before = True
With UserForm1.card
Do Until Flg
Stime = GetTickCount
If Before Then
.Width = .Width - 4
If .Width < 5 Then
Before = False
If Fronts Then
.Picture = UserForm1.back.Picture
Fronts = False
Else
.Picture = UserForm1.front.Picture
Fronts = True
End If
End If
Else
.Width = .Width + 4
If .Width > Card_Width Then
.Width = Card_Width
Flg = True
End If
End If
.Left = Card_Left + (Card_Width - .Width) / 2
'��DoEvents
Do
Sleep 1
Loop Until GetTickCount - Stime > 10
Loop
End With
End Sub
'標準モジュールここまで'ここからはフォームモジュールPrivate Sub CommandButton1_Click()
CommandButton1.Enabled = False
Turn
CommandButton1.Enabled = True
End Sub
Private Sub UserForm_Initialize()
Me.Height = 215
With card
.Top = 18
.Left = Card_Left
End With
Fronts = False
End Sub
それでは最初から見ていきます。
まずは、APIの宣言と変数及び定数の宣言です。
APIは
Sleep関数とGetTickCount関数の２種類です。これはループ処理中の同期を取るために使います。今までのゲーム作成などでも使ってきたAPIなので、ここでは詳しい説明はしません。次に変数ですが、これも２つ、
Publicを使って宣言しています。Stimeは同期処理のために使います。一方、Frontsはカードが今現在表向きなのか、それとも裏向きなのか、それを管理するために使います。定数も２つです。こちらは必ずしも定義しなくてもいいのですが、後からコードを修正するときの手間を考えて宣言しています。カードの横位置
(Left)と幅(Width)の規定値を設定しています。その下、
Turnという名前のプロシージャが、実際にカードのめくれる動作を処理するプロシージャです。このプロシージャがユーザーフォーム上のコマンドボタンから呼び出されると、ユーザーフォーム上のカードが裏返ります。
そして、このプロシージャの中でも変数を宣言していますね。こちらも２つ宣言されています。
Beforeという変数は、今現在の状態が、めくり作業の前半か後半かを管理します。しかしなぜ、前半と後半を分けて処理しなければいけないのでしょう。先ほども書いたように、カードがめくれていく過程では、始めはカードの幅が狭くなっていきます。しかし後半はカードの幅が広がっていくようになります。今現在カードの幅を狭めるべきなのか、もしくは広げるべきなのか、これを変数
Beforeで判断して処理するわけです。もうひとつの変数
Flgは、ループ処理から抜けるためのフラグの役割を担います。さて、実際の処理の中身です。
変数
Beforeが、今カードがどのような状態かを管理するのでしたね。まずはプロシージャの開始と同時に、この変数にTrueを代入しておきます。変数BeforeがTrueのときには、めくり動作の前半だというわけです。もし、めくり動作の前半ならば、カードを表すイメージコントロールの幅、つまり
Widthをマイナスして狭くしていきます。一定の幅まで狭まったら、今度は変数BeforeにFalseを設定して、カードがめくれたあとの動作に移ります。このときにカードの画像を同時に切り替えているのがポイントです。カードがめくれたあとは、逆に幅を広げていきます。ここでも、一定の幅まで広がったら、ループ処理を抜けるようにしておきます。
今回は�，納┐紘�分が最も難解な部分になると思います。
ここでは、カードの横位置
(Left)を設定しています。定数をうまく利用することで、できる限り簡単に処理できるようにしています。本来のカードの横位置が
Card_Leftです。止まっているときのカードの横位置ですね。そしてCard_Widthが本来のカードの幅です。めくり動作中には、カードの幅が常に変更され続けますよね。これをただ単に幅の変更だけにしてしまうと、横位置が変更されないので左に寄っていってしまいます。
▼
▼
どうですか？ ただ横幅
(Width)を変更するだけでは、幅が狭くなっていくだけなので左に寄っていってしまうのです。カードが中心を軸にして回転しているように見せるためには、常にカードの中心を求めて横位置を修正しなければいけません。�，良�分のコードでは、それをやっているのです。
.Left = Card_Left + (Card_Width - .Width) / 2
本来の幅から、現在の幅を引けば、今どれくらい幅が狭まったかがわかります。もし幅が10ポイント狭まっていたなら、中心を軸に考えるので、半分の5ポイント移動させればいいことになります。少しわかりにくいかもしれませんが、よーく式を見て考えてみてくださいね。
■まとめ
カードゲームは、激しく動くアクションゲームなどと比べると、どうしても地味な印象になりがちです。カードがめくれるという単純な演出でも、その効果は非常に大きいものとなります。
今回の処理で注意しなければならないのは、コントロールの
Widthプロパティを設定するときです。コントロールの幅を表す
Widthプロパティや、高さを表すHeightプロパティなど、幅を定義するプロパティにはマイナスの数値を設定できないので注意してください。もしマイナスの数値を設定しようとすると、エラーが起きて処理が止まってしまいます。これはどんなコントロールであっても共通する仕様です。幅を表すプロパティにはマイナスの数値を設定できないと覚えておきましょう。
カードをめくる処理自体は、中心を軸にして横位置を調整する、というところさえ理解できれば、それほど難しいものではないと思います。サンプルを作成しておきましたのでそちらも参考に。
サンプルダウンロード ⇒ コチラよりダウンロードできます。（別館）
■格言
プロパティを有効に利用する
カードめくりでは中心を考えて横位置を調整
PictureSizeModeをキチンと設定しておかないとうまくいきません。 
