2018年11月12日

ActiveBasicとDXライブラリでゲームプログラミング!~第1回・メッセージを表示させてみよう!

※使っているアイコンは、以前、伊地山基之さんが描いてくれたものを使わせていただいております。
 ありがとうございます!

n88_reon.gif
玲音:どうもはじめまして! 玲音です!

n88_kaede.gif
楓:どうもこんにちは! 玲音先輩にこの講座に引きずり込まれちゃった、後輩の楓ですっ。
 よろしくお願いしますっ!

n88_reon.gif
引きずりこんだなんて、人聞きが悪いなぁ……。

n88_kaede.gif
えへへ。さて、この講座は、BASIC言語『ActiveBasic』と、ゲーム開発用ライブラリ『DXライブラリ』を使って、ゲームを作ってみよう、という講座、だそうですっ。それで先輩っ。今月は何をするんですか?

n88_reon.gif
うん。今月はまず初歩の初歩、文字を表示させるところから始めるよ。さぁ、スタート!

~これが骨格!

n88_reon.gif
まず最初に、DXライブラリを使ったプログラムの骨格を教えちゃうよ。これです!

ab1811-01.jpg

n88_reon.gif
このように、DXライブラリを使ったプログラムでは、画面をクリアして、何かの処理を行い、描画して、それを反映させる、という流れになるんだよ。

n88_kaede.gif
なるほどなるほどっ。それで、これをActiveBasicにするとどうなるんですか?

n88_reon.gif
うん、お待たせしました。ActiveBasicでの骨格がこれです!

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

Dim white As Long

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

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

  ''何等かの処理

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

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

n88_reon.gif
dxClearDrawScreen()が、画面をクリアするところ。dxScreenFlip()が、画面に反映させるところに当たるよ。

n88_kaede.gif
この二つの関数の間、『何等かの処理』ってコメントがついているところに、処理などを書いていくわけですねっ。

n88_reon.gif
その通りだよ。さぁ、これをいじって、メッセージを表示させてみよーう!

n88_kaede.gif
はーい!

~dxDrawStringを使ってみよう!

n88_reon.gif
さてさて。文字を表示させるには、dxDrawStringという関数を使うよ。

n88_kaede.gif
それって、どう使うんですかっ?

n88_reon.gif
習うより慣れろ。さっそく使ってみちゃおう! まず、#include "Dxlib.sbp"の次の行に、こう書いてみて。

----------
Dim white As Long
----------

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

n88_reon.gif
そして、ここからが本番。『何等かの処理』ってコメントの後ろにこれを書いてね。

----------
white = dxGetColor(255, 255, 255)
dxDrawString(50, 40, "DXLIB!", white)
----------

n88_reon.gif
できたら、ソース(簡単に言うとプログラムのこと)を保存して実行してみてね。あ、そうそう。今月の特集にもあるけど、Dxlib.sbpとDxLibDll.dllを、ソースを保存したのと同じフォルダにコピーしておくのを忘れないでね。

n88_kaede.gif
はーい。それじゃこの、ビックリマークのボタンを押せばいいんですよね? えいっ。

ab1811-02.JPG

n88_kaede.gif
おー。ウィンドウの左上に、DXLIB!ってメッセージが表示されましたよ!

n88_reon.gif
それじゃ、dxDrawString関数の使い方について説明するよ。まず、最初の二つの数字は、メッセージを書く座標。一つ目がX位置、二つ目がY位置だよ。つまり、例でいえば、(X:50, Y:40)の位置に書いているわけだね。

n88_kaede.gif
ふむふむ。その次のは、書くメッセージの内容ですよね。その次のは何ですか?

n88_reon.gif
うん。ここは、何色で書くかを入れるんだよ。色の数字は、この例にある通り、dxGetColor関数を使って得ることができるよ。ちなみに、そのdxGetColor関数の使い方はこちら。

----------
dxGetColor(赤成分, 緑成分, 青成分)
----------

n88_reon.gif
成分の値を指定してやると、その成分でできる色を返してくれるの。

n88_kaede.gif
なるほどっ。

~数字はdxDrawFormatStringで

n88_kaede.gif
あの先輩。数字を書くことはできないんですか?

n88_reon.gif
うん。数そのものを書くことはできないよ。だから、数は、Str$関数で、文字列にしてあげる必要があるの。

----------
Str$(数値)
----------

n88_reon.gif
これがStr$関数の使い方なんだけど……。

n88_kaede.gif
なるほどっ。さっそくやってみまーすっ。

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

Dim white As Long
Dim num As Integer
Dim numstr As String

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

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

  ''何等かの処理
  num = 50
  numstr = Str$(num)
  white = dxGetColor(255, 255, 255)
  dxDrawString(50, 50, numstr, white)

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

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

ab1811-03.JPG

n88_kaede.gif
うん、ちゃんとできましたっ。それじゃ今度は計算の答えを表示させてみようかな。それっと。

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

Dim white As Long
Dim num1 As Integer
Dim num2 As Integer
Dim num3 As Integer
Dim numstr As String

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

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

  ''何等かの処理
  num1 = 10
  num2 = 3
  num3 = num1 + num2
  numstr = Str$(num3)
  white = dxGetColor(255, 255, 255)
  dxDrawString(50, 50, numstr, white)

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

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

n88_reon.gif
うん。あ、そうだ、計算結果を表示させるにはちょっと問題が……って、ちょっと待ってっ……。

ab1811-04.JPG

n88_kaede.gif
あれー? 小数点まで表示されているうえに、計算結果が違ってるんですけど。玲音せんぱーい。どうなってるんですか?

n88_reon.gif
あああ、だから待ってって言ったのに……。うん。ActiveBasicの問題か、それともDXライブラリの問題かわからないんだけど、特定の計算をさせて、それをdxDrawStringで表示させると、このようにおかしくなることがあるの。

n88_kaede.gif
そうなんですかぁ……。そしたら、どうしたらいいんですか?

n88_reon.gif
そこで出てくるのが、dxDrawFormatString関数でーすっ。これは、数値を決められた形式で書いてくれるものなの。使い方は次の通りだよ。

----------
dxDrawFormatString(Xの位置, Yの位置, 色, 形式の文字列, 数)
----------

n88_kaede.gif
Xの位置、Yの位置、そして色というのは、dxDrawString関数のと同じですよね?

n88_reon.gif
うん、その通りだよ。そしてその次の『形式の文字列』というのは、数値をどのような形式で書くのか、というもの。これはちょっと難しいけど、例として、このような書き方があるよ。

----------
"%d"→十進数の整数で表示する
"%05d"→十進数の整数で表示する。そのさい、5桁で表示し、空いているところは0で埋める
----------

n88_reon.gif
このほかにもいっぱいあるけど、それはC言語関係の解説サイトか本を読んでね。

n88_kaede.gif
はーいっ。その次の数は、表示させる数ですよね。

n88_reon.gif
そうだよ。例えば、変数aの内容を6桁表示で、開いている桁は0で埋める形式で表示させたいときは、こう書けばいいの。

----------
dxDrawFormatString(100, 100, white, "%05d", a)
----------

n88_kaede.gif
なるほどーっ。あ、そうだ。複数の数値を表示させることもできるんですか?

n88_reon.gif
うん。その場合は"%d"とか"%05d"とかの表示を複数書いて、その後の数の指定も複数書けばいいの。こんな風にね。

----------
dxDrawFormatString(100, 100, white, "%d %05d", a, b)
※この場合、変数aが5、変数bが13なら、このように表示される。
→5 00013
----------

n88_reon.gif
そうそう。メッセージも一緒に書くことができるよ。こんな感じ。

----------
dxDrawFormatString(100, 100, white, "変数Aは %d。変数Bは %d", a, b)
→変数Aは 5。変数Bは 13 と表示される。
----------

n88_reon.gif
さて。それじゃ、これを踏まえたうえで、さっきのプログラムを、dxDrawFormatStringで書きなおしてみよう!

n88_kaede.gif
はーいっ。

n88_reon.gif
とはいっても、さっきのプログラムのdxDrawStringの行を、こう書きなおすだけ。やってみて?

----------
dxDrawFormatString(100, 100, white, "%d", num3)
----------

n88_kaede.gif
はーい、できました。実行してみますね。

ab1811-05.JPG

n88_kaede.gif
わーい、できたーっ。

n88_reon.gif
このように、基本的にはdxDrawString関数でOKだけど、数の表示が変になるときは、dxDrawFormatStringを使うことも考えてみてね。

n88_kaede.gif
わかりましたっ。

n88_reon.gif
それじゃ、次回は、いよいよキャラクタの表示をやってみるよ。お楽しみにね。

n88_kaede.gif
また次回ですっ。



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