今章は「ビットマップの表示」です
「ロールプレイングゲームの作成」は
今章にまとめると長くなりそうなので
《総集編》として次章で解説します
さて、
”ビットマップ”とは何でしょう？
簡単に言うと
「色を識別する数字の集合体」です
”ドット絵”をご存じでしょうか
□が幾つも合わさって
ひとつの「絵」になったものです
□にはひとつの色が割り当てられています
実は、パソコンで表示されるもの
というよりＴＶで表示される全てのものは
”ドット絵”と全く同じなのです
□の数を多くすればするほど
より現実に近い画像となります
多くあればいいというものではなく、
近年の”ドット絵”は
いかに少ない□で「絵」を表現できるかの
非常に高い技術の分野へと進化しています
Windows標準アクセサリの
「ペイント」
を起動して、適当に絵を描いてみてください
描いた絵を保存する時に
「.BMP」
という拡張子を選べると思います
この形式で保存したものが「ビットマップ」です
「.BMP」ファイルは
Windowsプログラミングで最も扱いやすい
画像ファイルです
適当にキャラクターの絵を描いてみましょう
●
ー ＋ー
人
こんな感じでもOKです
絵を描く上で大事な事
絵以外の透過表示させるところは
全て「白」で埋め尽くしてください
絵に「白」が含まれる場合、絵を透過表示させた時に
絵の白い部分が一緒に透過してしまいます
どうしても絵に「白」を使用したい場合は
透過表示させるところは
「黒」で埋め尽くしてください
それでは、ビットマップを表示させるプログラムを
作っていきましょう！
前章（マウス入力判定）で作ったプログラムをそのまま使用します
まずは、制作したBMPファイルを
プロジェクトに追加します
リソースビューの項目で右クリック
「リソースの追加」を選択
↓
「インポート」を選択
↓
「すべてのファイル」を表示させ、制作したBMPファイルを選択
これでプログラムで使用できるようになりました
まずは、ビットマップを読み込むために
HBITMAP型の構造体hbitを用意
Windowsでの描画処理には【デバイスコンテキスト】
というものを使用するのでHDC型の構造体dcMem1を用意します
【デバイスコンテキスト】って何？？
と、思うと思います
”描画・表示用のページ”と思ってください
dcMem1のページには後で、さっき追加したビットマップを登録します
そして、これらの構造体を《グローバル変数》で定義した理由は
複数の関数で使用するからです
関数内で定義した変数は
関数が結果を返したら消滅します
これを防ぐためです
ビットマップの読み込みは
初期化時（Windowが表示される前）に行います
初期化の関数はBOOL InitInstance（）です
//ここ
と表示された場所で初期化処理をします
この３行を足してみて下さい
まず、hbitにLoadBitmap（）関数で
ビットマップを読み込みます
IDB_BITMAP１はプロジェクトに画像を追加した際の識別子
それを認識させるためにMAKEINTRESOURCEマクロを使用します
う～ん・・
よくわかんなくなってきたな・・
とりあえず丸写しで大丈夫です
画像を何枚も追加したり、色々いじってるうちに再度見直して
ああ、なるほどね
と思って頂ければいいと思います
プログラミングは動くものをいじくり回す方が
何もないところから作り上げるより簡単で挫折も少ないです
ここまで書いといて何ですが、
今は画像が表示できれば細かい説明はどうでもいいのです
いよいよ最後、ビットマップの表示です
前章で作ったWM_LBUTTONDOWNの上に
WM_PAINTメッセージを処理するプログラムがあります
画像を表示するBitBlt（）関数を上のように記入してください
第１引数：hdcは、Window描画用に用意された【デバイスコンテキスト】です
第２引数：ビットマップを表示するWindow ｘ座標
第３引数：ビットマップを表示するWindow ｙ座標
第４引数：表示する幅
第５引数：表示する高さ
第６引数：ビットマップが格納された【デバイスコンテキスト】
第７引数：第６引数のビットマップのどの位置から表示させるか ｘ座標
第８引数：第６引数のビットマップのどの位置から表示させるか ｙ座標
第９引数：転送形式（後で補足）
Windowが無くなる時、
hbitとdcMem1を開放します
実行結果
やったー！！
自分の作ったキャラが・・表示された！！
お疲れ様でした
これで絵が表示され
ロールプレイングゲーム作成の準備は整ってきました
・・せっかくなので、
動かしてみたいと思いませんか？
● キャラクターを指定の場所へ移動させる ●
前章でマウス入力と判定を行ったプログラムがあるので
ちょっと細工してみましょう
まず、POINT構造体ptをグローバルに変更
ついでにoldptも追加で作成します
oldptには、ひとつ前にクリックされたptの座標が入ることになります
WM_PAINT以下を上のように変更して下さい
まず、WM_LBUTTONDOWNでマウスクリックされた時、
oldptにptの値を写します
↓
前章同様にptにクリックされた座標を拾う
↓
InvalidateRect()関数とUpdateWindow()関数で
WM_PAINTメッセージを発生させる
↓
今回のクリックよりひとつ前にクリックされたoldptの座標に
BitBlt 第９引数に”WHITENESS”を指定して真っ白な画像を描画
前の画像を消します
↓
今クリックされたptの座標に
通常通りビットマップを表示させます
実行結果
おういえ～！
クリックした場所に付いてくるじゃないですか～！！
次章「ロールプレイングゲームの作成」では
数字の上を歩かせての移動を行うのですが、
実はこのまま次章に突入すると不具合があります
”WHITENESS”のBitBlt()を消せば分かるのですが
画像の白い部分もそのまんま、四角く表示されてしまっています
//トランス表示
以下を表示用のBitBlt()と置き換えて下さい
何をしているかというと
ビットマップを１ドットずつ走査して
RGB(255,255,255)
「白」じゃなければ描画する
という処理をしています
実行結果
