Ｃｈａｐｔｅｒ.２５ [ 画像表示の発展形 ]
■ゲームに於ける画像
さて、前回はゲーム画面となるユーザーフォーム上に、任意の画像を表示する方法を解説しました。
それには、イメージコントロールを使うのでしたね。
細かな設定方法は、前回を参照していただくのが手っ取り早いです。
さて、今回は、前回解説仕切れなかった、さらなる発展形のテクニックを解説したいと思います。これらをうまく活用することで、実際のゲームに使用するのに適したイメージコントロールが出来上がりますよ。
さて、それでは早速始めましょう。
今回は、次の画像を用意しましたので、使ってみてください。
この画像は、一見すると前回使った画像とほとんど同じに見えます。ですが、実は全然違います。それこそ天と地ほど違います。
その違いとは何でしょうか？
その違いとは、透過処理がしてあるかどうかです。
透過処理というのは、画像の一部あるいは全てに、透明な場所を設定することを言います。今回の画像は、キャラクターの部分以外の、余白となる部分が全て透明になるように処理されています。これにより、ゲーム画面上では、キャラクターの部分以外が透けて、背景が見えるように設定することも可能な状態になっています。
これについては、手順をおって、あとで詳しく説明します。
それでは、前回のときと同様に、イメージコントロールにサンプル画像ファイルをロードしてみましょう。
イメージコントロールの
すると次のようになったと思います。
これで準備は完了です。
■様々な視覚効果
さて、ここまでの画面で、前回の時との違いがわかるでしょうか。
まず第一に、ロードした画像のフチが表示されていませんね。前回は白いフチが表示されていましたが、今回はフチが表示されていないので、画像の境界がどこだかわかりません。
これは、画像に施した透過処理の影響です。
先にも述べたとおり、この画像は透過処理が施されていますので、キャラクターの部分以外は表示されません。そのため、イメージコントロールの地の色が透けて見えているのです。
ためしに、イメージコントロールの
▼
▼
▼
どうですか？ イメージコントロールの背景色が、どんな色に変化しても、画像のフチは表示されません。つまり、キャラクター以外の部分は、透明な状態になっているのです。
しかし、画像自体は透過処理が施されていますが、これだけではまだゲームに使うのに最適な状態とは言えません。
なぜなら、ゲームに使うとなれば、ゲーム画面の背景が透けて見えていないと意味が無いからです。
そこで、イメージコントロール自体が、背景を透けて表示するように変更しなくてはいけません。その時に活躍するのが『
フォーム上のグリッドを表す点々が見えるようになりましたね。
これで、イメージコントロール自体が透明になりました。
ちなみに、これ以降の講座では、あえてプロパティウィンドウから設定できます、とか言いません。プロパティの変更は、基本的にプロパティウィンドウから変更できることを覚えておきましょう。
■実際に使える状態にする
ここまできたら、あとは仕上げの設定をします。
まず、前回と同様に、画像サイズとイメージコントロールのサイズをピッタリ同じに調節します。
これには
今回の画像ファイルは、前回と同じ３２ピクセルなので、ポイント単位に変換すると２４ポイントになりますよ。
大きさの調整が済んだら、あとは余分な枠線を消してしまいましょう。
これには
このプロパティの使い方は、前々回の講座でも解説しましたね。
さて、ここまでくると、下の画像のようになったのではないでしょうか。
この状態が、ゲームで使用する基本の状態と言えます。
ここでポイントとなるのは、以下の条件を満たしていることです。
■さらなる探求
ここから解説するのは、場合によっては役に立つことですが、実際には知らなくても問題のない部分です。興味のある方はご覧ください。まぁ、知っていれば色んなところで活用できますので無駄にはなりません。多分……。
�ヽ搬臀名�に対応させる
使用例 ※使っている元画像は同じものですよ
�∧造戮読充┐気擦�
使用例 ※使っている元画像は同じものです
�２菫�を表示させる位置を変える
使用例 ※使っている元画像は同じ（しつこい……）
これらのプロパティをうまく活用することで、多彩な表現を行う事が可能になります。
例えば、�，�
他にも、�△魍萢僂垢襪函⊂�さな画像を敷き詰めて、同じパターンの並んだ背景を表示させることもできます。ホームページの背景なんかではよく使われていますよね。あとデスクトップの壁紙とかでも、同じようなことができますし。
ただ、注意しておいてほしいのは、これらには優先順位があるということです。
�，粒搬臀名�をオンにしている状態では、�△諒造戮読充┐呂任�ません。自動的に拡大してしまうわけですから、それを敷き詰めて並べることはできないのですね。
要するに、これらの組み合わせを様々に変えることによって、独自の表現を模索してほしい、ということです。こうしなければいけない、という決まりがあるわけではありません。自分の思い描いた表現になるように、試行錯誤してみてください。
■格言
透過処理した画像を上手に使う
プロパティを変更して様々な効果を生み出す
透過処理した画像をどうやって用意するかが問題ですね。
さて、前回はゲーム画面となるユーザーフォーム上に、任意の画像を表示する方法を解説しました。
それには、イメージコントロールを使うのでしたね。
細かな設定方法は、前回を参照していただくのが手っ取り早いです。
さて、今回は、前回解説仕切れなかった、さらなる発展形のテクニックを解説したいと思います。これらをうまく活用することで、実際のゲームに使用するのに適したイメージコントロールが出来上がりますよ。
さて、それでは早速始めましょう。
今回は、次の画像を用意しましたので、使ってみてください。
この画像は、一見すると前回使った画像とほとんど同じに見えます。ですが、実は全然違います。それこそ天と地ほど違います。
その違いとは何でしょうか？
その違いとは、透過処理がしてあるかどうかです。
透過処理というのは、画像の一部あるいは全てに、透明な場所を設定することを言います。今回の画像は、キャラクターの部分以外の、余白となる部分が全て透明になるように処理されています。これにより、ゲーム画面上では、キャラクターの部分以外が透けて、背景が見えるように設定することも可能な状態になっています。
これについては、手順をおって、あとで詳しく説明します。
それでは、前回のときと同様に、イメージコントロールにサンプル画像ファイルをロードしてみましょう。
イメージコントロールの
Pictureプロパティを使って、画像ファイルをロードするんでしたね。すると次のようになったと思います。
これで準備は完了です。
■様々な視覚効果
さて、ここまでの画面で、前回の時との違いがわかるでしょうか。
まず第一に、ロードした画像のフチが表示されていませんね。前回は白いフチが表示されていましたが、今回はフチが表示されていないので、画像の境界がどこだかわかりません。
これは、画像に施した透過処理の影響です。
先にも述べたとおり、この画像は透過処理が施されていますので、キャラクターの部分以外は表示されません。そのため、イメージコントロールの地の色が透けて見えているのです。
ためしに、イメージコントロールの
BackColorプロパティを変更してみましょう。BackColorプロパティは、コントロールの背景色を定義するプロパティでしたね。これは以前説明しました。これを変更すると、透過処理の意味がよくわかると思います。プロパティを変更するには、これまで同様プロパティウィンドウを使います。▼
▼
▼
どうですか？ イメージコントロールの背景色が、どんな色に変化しても、画像のフチは表示されません。つまり、キャラクター以外の部分は、透明な状態になっているのです。
しかし、画像自体は透過処理が施されていますが、これだけではまだゲームに使うのに最適な状態とは言えません。
なぜなら、ゲームに使うとなれば、ゲーム画面の背景が透けて見えていないと意味が無いからです。
そこで、イメージコントロール自体が、背景を透けて表示するように変更しなくてはいけません。その時に活躍するのが『
BackStyleプロパティ』です。BackStyleプロパティには、規定値で『FmBackStyleOpaque』が設定されています。これは、背景を不透明にする、つまり、背景が透けないように設定されているということです。このプロパティを、『fmBackStyleTransparent』に変更すると、イメージコントロール自体に透過処理が掛かり、背景が透けて見えるようになります。BackStyleプロパティを変更して、背景が見えるようにすると、こんな感じになります。フォーム上のグリッドを表す点々が見えるようになりましたね。
これで、イメージコントロール自体が透明になりました。
ちなみに、これ以降の講座では、あえてプロパティウィンドウから設定できます、とか言いません。プロパティの変更は、基本的にプロパティウィンドウから変更できることを覚えておきましょう。
■実際に使える状態にする
ここまできたら、あとは仕上げの設定をします。
まず、前回と同様に、画像サイズとイメージコントロールのサイズをピッタリ同じに調節します。
これには
WidthプロパティやHeightプロパティを使うんでしたね。ただ単純にピクセルサイズを指定せず、ポイント単位に変換するのを忘れないように注意しましょうね。今回の画像ファイルは、前回と同じ３２ピクセルなので、ポイント単位に変換すると２４ポイントになりますよ。
大きさの調整が済んだら、あとは余分な枠線を消してしまいましょう。
これには
BorderStyleプロパティを使います。このプロパティの使い方は、前々回の講座でも解説しましたね。
BorderStyleプロパティに、fmBorderStyleNoneを設定すると、枠線が綺麗サッパリ消えてなくなります。さて、ここまでくると、下の画像のようになったのではないでしょうか。
この状態が、ゲームで使用する基本の状態と言えます。
ここでポイントとなるのは、以下の条件を満たしていることです。
・背景が透けている
・適切な大きさに調整されており余分な余白がない
・枠線などの無駄なものがない
・適切な大きさに調整されており余分な余白がない
・枠線などの無駄なものがない
■さらなる探求
ここから解説するのは、場合によっては役に立つことですが、実際には知らなくても問題のない部分です。興味のある方はご覧ください。まぁ、知っていれば色んなところで活用できますので無駄にはなりません。多分……。
�ヽ搬臀名�に対応させる
使用するプロパティ：
規定値：
説明：表示しきれない部分は切り捨て。逆に余ってもほったらかし。
拡大縮小に対応する場合：
説明：コントロールの大きさに応じて画像を伸縮させる。
PictureSizeModeプロパティ規定値：
fmPictureSizeModeClip説明：表示しきれない部分は切り捨て。逆に余ってもほったらかし。
拡大縮小に対応する場合：
FmPictureSizeModeStretch説明：コントロールの大きさに応じて画像を伸縮させる。
使用例 ※使っている元画像は同じものですよ
�∧造戮読充┐気擦�
使用するプロパティ：
規定値：
説明：コントロールが画像を上回るサイズでもひとつしか表示しない
並べて表示に対応する場合：
説明：余ったところに画像を敷き詰めて、並べて表示する
PictureTilingプロパティ規定値：
False説明：コントロールが画像を上回るサイズでもひとつしか表示しない
並べて表示に対応する場合：
True説明：余ったところに画像を敷き詰めて、並べて表示する
使用例 ※使っている元画像は同じものです
�２菫�を表示させる位置を変える
使用するプロパティ：
規定値：
説明：画像を中央に配置する
中央以外にする場合：上記の規定値以外に設定する
説明：左上、左下、右上、右下、に設定することが可能
PictureAlignmentプロパティ規定値：
FmPictureAlignmentCenter説明：画像を中央に配置する
中央以外にする場合：上記の規定値以外に設定する
説明：左上、左下、右上、右下、に設定することが可能
使用例 ※使っている元画像は同じ（しつこい……）
これらのプロパティをうまく活用することで、多彩な表現を行う事が可能になります。
例えば、�，�
PictureSizeModeプロパティをうまく使うと、死んだ敵キャラクターをだんだん小さくしてから消す、などのエフェクトをかけることができますよね。幅や高さが変わると、自動的に画像が伸縮するので、幅や高さを徐々に小さくしていくと、あたかも画像自体が縮んでいくように見えるというわけです。他にも、�△魍萢僂垢襪函⊂�さな画像を敷き詰めて、同じパターンの並んだ背景を表示させることもできます。ホームページの背景なんかではよく使われていますよね。あとデスクトップの壁紙とかでも、同じようなことができますし。
ただ、注意しておいてほしいのは、これらには優先順位があるということです。
�，粒搬臀名�をオンにしている状態では、�△諒造戮読充┐呂任�ません。自動的に拡大してしまうわけですから、それを敷き詰めて並べることはできないのですね。
要するに、これらの組み合わせを様々に変えることによって、独自の表現を模索してほしい、ということです。こうしなければいけない、という決まりがあるわけではありません。自分の思い描いた表現になるように、試行錯誤してみてください。
■格言
透過処理した画像を上手に使う
プロパティを変更して様々な効果を生み出す
透過処理した画像をどうやって用意するかが問題ですね。
