2018年12月10日

ActiveBasicとDXライブラリでゲームプログラミング!~第2回・画像を表示、移動させてみよう!

n88_reon.gif
玲音:どうもこんにちは! 玲音です! 今日も、ActiveBasicとDXライブラリを使ったゲームプログラミングについて勉強しちゃいましょう!

n88_kaede.gif
楓:どうもこんにちは! 楓ですっ。玲音先輩っ。今回は何をするんですかっ?

n88_reon.gif
うん。今回は、背景やキャラクターを表示させて、さらにキャラクターを移動させちゃおうと思います。よろしくね!

n88_kaede.gif
おーっ。それは大切な部分ですよねっ。頑張りますっ。

~dxLoadGraph関数と、dxDrawGraph関数を使ってみよう~

n88_reon.gif
さて、背景やキャラなどの画像を表示させるためには、二種類の関数を使うよ。まず一つが、画像を読み込むdxLoadGraph関数。そしてもう一つが、その画像を表示させる、dxDrawGraph系の関数でーす。

n88_kaede.gif
dxLoadGraph関数と、dxDrawGraph系の関数ですかー。それって、どう使うんですかっ?

n88_reon.gif
それではさっそく、dxLoadGraph関数と、dxDrawGraph系の中でも基本であるdxDrawGraph関数を使ってみちゃおう!
まず、フォルダを作って、その中に次の画像をダウンロードしてね。

niko.bmp

n88_kaede.gif
はーい、できましたっ。

n88_reon.gif
そしたら続いて、ActiveBasicを起動して、次のプログラムを入力してみて。できたら、さっきのフォルダに保存しておくのを忘れずにね。

=-=-=-=-=-=-=-=-=-=-
#include "Dxlib.sbp"

Dim chara As Long

''初期処理
dxChangeWindowMode(1)
dxDxLib_Init()
dxSetDrawScreen(DX_SCREEN_BACK)

''ニコニコを読み込む
chara = dxLoadGraph("niko.bmp")

Do
  ''画面をクリア
  dxClearDrawScreen()

  ''何等かの処理
  dxDrawGraph(200, 150, chara, 1)

  ''画面に反映
  dxScreenFlip()
  ''メッセージ処理
  If dxProcessMessage() = -1 Then
    Exit Do
  End If
Loop

''後処理
dxDxLib_End()
End
=-=-=-=-=-=-=-=-=-=-

n88_kaede.gif
できましたよー。実行してみますねっ。

abdx1812-02.JPG

n88_kaede.gif
おーっ! ウィンドウの左上のほうに、ニコニコマークが表示されましたよっ。

~これが使い方!~

n88_reon.gif
それじゃ、dxLoadGraph関数と、dxDrawGraph関数の使い方について説明するよ。

n88_kaede.gif
はーい。よろしくお願いしまーす!

n88_reon.gif
まず、dxLoadGraph関数は、このように書くんだよ。

=-=-=-=-=-=-=-=-=-=-
dxLoadGraph(ファイル名)

例:dxLoadGraph("samp1.bmp")
=-=-=-=-=-=-=-=-=-=-

n88_kaede.gif
引数にファイル名を指定するだけでOKなんですね。

n88_reon.gif
うん。それで、このdxLoadGraph関数は、メモリに画像を読み込んで、表示できるようにする関数だよ。これを実行すると、dxLoadGraph関数は、ハンドルという値を返してくるの。

abdx1812-03.JPG

n88_kaede.gif
はんどる?

n88_reon.gif
ハンドルというのは、メモリに読み込んだ画像につけられる番号で、dxDrawGraph系の命令では、このハンドルを使って、どの画像を表示するかを指定するんだよ。

n88_kaede.gif
なるほどっ。だからハンドルを使うために、変数に入れているわけですねっ。

n88_reon.gif
うん。そして、dxDrawGraph関数はこう使うの。

=-=-=-=-=-=-=-=-=-=-
dxDrawGraph(X座標, Y座標, ハンドル, 背景を透過するかどうか)

例:dxDrawGraph(100, 50, gazou, 1)
=-=-=-=-=-=-=-=-=-=-

n88_reon.gif
まず一番目と二番目の数字は、表示する座標。DXライブラリは、指定した画像の左上隅が、ここで指定した座標になるように表示してくれるの。例えば、例の場合なら、画像の左上隅が、(100, 50)の座標に来るように表示されるわけだね。

abdx1812-04.JPG

n88_kaede.gif
三番目に入れるのは、表示させる画像のハンドルですよねっ。

n88_reon.gif
うん、その通り。例でいえば、変数gazouに格納された数字のハンドルを持つ画像を表示するわけ。

abdx1812-05.JPG

n88_kaede.gif
ふむふむ。先輩っ。最後の『背景を透過するかどうか』はなんですかっ?

n88_reon.gif
うん。それを1にすると、画像の黒の部分を透明にして、背景が透けるようになるんだよ。こんな風にね。

abdx1812-06.JPG

n88_kaede.gif
なるほどー。あ、そうそうっ、先輩。もし、複数のdxDrawGraph関数を実行した場合はどうなるんですかっ?

n88_reon.gif
その場合は、前にdxDrawGraphで表示された内容が、後に表示された内容で上書きされるの。これを利用すれば、背景とキャラを表示させることもできるよ。試しに、これを実行してみて。あ、そうそう。次の画像をダウンロードしておいてね。

haikei.bmp

=-=-=-=-=-=-=-=-=-=-
#include "Dxlib.sbp"

Dim chara As Long

''初期処理
dxChangeWindowMode(1)
dxDxLib_Init()
dxSetDrawScreen(DX_SCREEN_BACK)

''背景を読み込む
haikei = dxLoadGraph("haikei.bmp")
''ニコニコを読み込む
chara = dxLoadGraph("niko.bmp")

Do
  ''画面をクリア
  dxClearDrawScreen()

  ''何等かの処理
  dxDrawGraph(0, 0, haikei, 1)
  dxDrawGraph(100, 70, chara, 1)

  ''画面に反映
  dxScreenFlip()
  ''メッセージ処理
  If dxProcessMessage() = -1 Then
    Exit Do
  End If
Loop

''後処理
dxDxLib_End()
End
=-=-=-=-=-=-=-=-=-=-

abdx1812-08.JPG

n88_kaede.gif
ほんとだっ! 背景も表示されていますっ!

n88_reon.gif
二番目のdxDrawGraph関数の4番目の数字を0にすると、違いがわかると思うよ。試してみてね。

n88_kaede.gif
はーいっ。

~キャラクターを移動させてみよう!~

n88_reon.gif
さて。キャラクターを移動させる前に、ちょっとさっきのプログラムを改造してみようー。さっきのを、次のように改造してみて。

=-=-=-=-=-=-=-=-=-=-
#include "Dxlib.sbp"

Dim haikei As Long
Dim chara As Long
Dim x As Long
Dim y As Long

''初期処理
dxChangeWindowMode(1)
dxDxLib_Init()
dxSetDrawScreen(DX_SCREEN_BACK)

''背景を読み込む
haikei = dxLoadGraph("haikei.bmp")
''ニコニコを読み込む
chara = dxLoadGraph("niko.bmp")

x = 100
y = 70


Do
  ''画面をクリア
  dxClearDrawScreen()

  ''何等かの処理
  dxDrawGraph(0, 0, haikei, 1)
  dxDrawGraph(x, y, chara, 1)

  ''画面に反映
  dxScreenFlip()
  ''メッセージ処理
  If dxProcessMessage() = -1 Then
    Exit Do
  End If
Loop

''後処理
dxDxLib_End()
End
=-=-=-=-=-=-=-=-=-=-

n88_reon.gif
太字で書かれているのが、追加したり修正したりした部分だよ。できたら、実行してみてね。

n88_kaede.gif
はーい。それじゃ、実行してみますね。

abdx1812-09.JPG

n88_kaede.gif
さっきと同じように表示されましたよっ。

n88_reon.gif
そして、プログラムを見て、何か気づかないかな?

n88_kaede.gif
あっ! 二番目のdxDrawGraph関数、一つ目と二つ目のところが数でなく変数で指定されてるのに、ちゃんと動いてますっ。dxDrawGraph関数は、変数も使えるんですねっ。

n88_reon.gif
そのとおり。その場合、dxDrawGraph関数は、変数に入っている数に従って表示してくれるの。さて、ここで何か気づかない?

n88_kaede.gif
あっ! 変数の値を変えてやれば、キャラクターを表示させることができるんじゃないですかっ?

n88_reon.gif
せいかーい! ということでやってみよう! プログラムをさらに、次のように改造してみてね。

=-=-=-=-=-=-=-=-=-=-
#include "Dxlib.sbp"

Dim haikei As Long
Dim chara As Long
Dim x As Long
Dim y As Long

''初期処理
dxChangeWindowMode(1)
dxDxLib_Init()
dxSetDrawScreen(DX_SCREEN_BACK)

''背景を読み込む
haikei = dxLoadGraph("haikei.bmp")
''ニコニコを読み込む
chara = dxLoadGraph("niko.bmp")

x = 100
y = 70

Do
  ''画面をクリア
  dxClearDrawScreen()

  ''何等かの処理
  dxDrawGraph(0, 0, haikei, 1)
  dxDrawGraph(x, y, chara, 1)

x = x + 4

  ''画面に反映
  dxScreenFlip()
  ''メッセージ処理
  If dxProcessMessage() = -1 Then
    Exit Do
  End If
Loop

''後処理
dxDxLib_End()
End
=-=-=-=-=-=-=-=-=-=-

n88_kaede.gif
ニコニコが、右に移動していきました! でも、画面の右端についても止まらずに消えていっちゃいました。どうしたらいいんでしょう?

n88_reon.gif
そこは、次回の話にも少しかかわるから、宿題にしておくね。楓ちゃんも、読者のみんなも考えてみて。さて、次回はキー入力して、キャラクターを動かす方法について勉強していきます!

n88_kaede.gif
おー。それは楽しみです! 早く次回にならないかなぁ。

n88_reon.gif
くすくす。それでは、また次回!

=-=-=-=-=-=-=-=-=-=-

※次の更新は、12月13日、『師匠Tのチャレンジ・ARSゲーム!』の予定です。お楽しみに!