2017年09月15日

HSPでプログラミング!~第5回・dim命令、rnd関数、redraw命令を使おう!

さてさて、このHSPでプログラミングも、いよいよ最終回です。
今回は、ゲームプログラミングに役立つ、dim命令、rnd命令、redraw命令について説明していきます。

~配列変数を扱う、dim命令
複数のキャラクターを動かすことを考えてみましょう。それらのキャラクターの位置を変数に入れていくとしたらどうしますか?
X1、X2、X3というように変数を別々に作るのも一つの手ですが、たくさんのキャラクターがある場合には大変ですよね。
そこで出てくるのが、配列変数とそれを定義するdim命令です。

まずは配列変数について説明しましょう。
通常、変数には1つの数しか入れることはできません。既に数が入っている変数に、別の数を入れると、その数に内容が上書きされます。
対して、配列変数は、その中にいくつかの部屋が用意されていて、それぞれの部屋に別々の数を入れることができるのです。
それぞれの部屋は、添え字という数値によって識別されます。配列変数をマンションとするなら、添え字は部屋番号と考えるといいですね。

さてさて、dim命令は次のように使います。

dim 配列変数名,要素数
例:dim enx, 5

この命令を実行すると、名前が指定された[配列変数名]で、[要素数]部屋の部屋を持つ配列変数が作られます。
このとき注意するのは、添え字は0から始まるということです。上の例でいえば、0番から4番までの5つの部屋が作られるわけです。1番から5番までではないので気を付けてください。

こうして作った配列変数は、次のように指定します。

配列変数名(添え字)

例えば、配列変数enxの3番の場合は、次のように指定します。
enx(3)

さて、この配列変数が便利なところは何かというと……。
添え字には変数が使えるということです!
添え字には変数が使えるということです!
大事なことなので、二回言いました。

例えば、次は配列変数tensuの合計を計算して表示するプログラムです。

dim tensu, 5
tensu(0)=40
tensu(1)=35
tensu(2)=37
tensu(3)=45
tensu(4)=52

i=0
sum=0
repeat
sum=sum+tensu(i)
i=i+1
if i>4:break
loop
mes sum
stop

このプログラムでは、変数iの値を0から4まで変化させることで、tensu(0)からtensu(4)の値を、変数sumに順番に加算しています。
このように、繰り返しの命令と組み合わせることによって、複数の値を簡単に処理できるのが、配列変数の強みです。

これを応用すれば、キャラクターの座標を配列変数でもっておき、repeat~loopなどで繰り返して、複数のキャラクターを短いプログラムで動かすことも可能なわけです。

~乱数を作る、rnd関数
さて、次はrnd関数です。rnd関数とは、乱数……でたらめな数を作ってくれる関数です。次のように使います。

rnd(上限の数)
例:rnd(7)

これを実行すると、0~(上限の数-1)までのでたらめな数が作られます。
試しに、次のプログラムを実行してみてください。

repeat 5
ransu=rnd(10)
mes ransu
loop

stop

どうですか?数が5つ表示されましたね。ですが、ここで注意点が一つ。
まずは、ウインドウを閉じて、もう一度実行してみてください。

あれ?さっきと同じ数が表示されてますね。
そう、特に何もしないと、rnd関数はただ同じ順番で数を作るのです。
テストには役に立つかもしれませんが、実際にゲームを作るときには困りますよね。そこで出てくるのが、randomize命令です。
試しに、repeat 5の前に、randomizeを入れて実行してみてください。

今度は、実行するたびに違う数字が出てきましたね。rnd関数を使うときは、このようにrandomize命令を組み合わせるのが定番です。

~チラツキを防ぐ、redraw命令
まずは、次のプログラムを入力して、実行してみてください。

repeat
color 255, 255, 255
boxf

color 0, 0, 0
pos 100, 100
mes "▲"

await 1
loop

どうでしょう? なんか画面がちらついていませんか?
これはいちいち、実際の画面を白で塗りつぶして、三角を書いている処理をしているからです。
これを防ぐために、表示されない仮の画面に先に書いておいて、それを実際の画面に反映させる手法をとることがあります。これを、ダブルバッファリングと言います。
そのダブルバッファリングに使われるのが、redraw命令なのです。
まずは、repeatの下にredraw 0を入れて、await 1の上にredraw 1を入れて実行してみてください。

ちらつきがなくなりましたね。
redraw 0を実行すると、仮の画面に対して描く処理を行い、redraw 1を実行すると、その仮の画面の内容を、実際の画面に反映するのです。

このredrawを使うことで、画面のチラツキを防ぐことができます。

~最後に
いかがでしょうか?ここまで説明した内容を使えば、きっとあなたでもHSPでゲームが作れるでしょう。
よく言われることですが、プログラミングの勉強で大切なのは、とにかくプログラムを作ること!頑張りましょう!
そして、面白いゲームができたら、ぜひB-Magaに投稿してくださいね☆
posted by 裏編 at 13:04| Comment(0) | HSPでプログラミング | このブログの読者になる | 更新情報をチェックする

2017年08月07日

HSPでプログラミング!~第4回・キー操作でキャラクターを動かそう!

~これまでのおさらい
さてさて、第4回です。
今回は、キー操作で、キャラクターを移動できるようにしようと思います。
さて、その前に、キャラクターを動かすことのおさらいをしてみましょう。

・キャラクターの表示位置は、pos文を使って指定する。
・pos文では、ここで設定された数値の位置に表示する。
・pos文では、変数も使うことができる。
・その変数の値を変えてやれば、表示位置も変えてやることになる。

さて、ここまで読んできてピンときませんか?

~stick命令登場!
そう、変数を変えてやれば表示位置も変わる、ということは、キー入力に合わせて変数の内容を変えれば、キー入力で移動させることができますね。例えば、カーソルキーの上を押されたときには、縦位置の変数を4減らす、という具合です。
さてさて、ここでstick命令の登場です!この命令は、カーソルキーやスペースキーなど、ゲームによく使われるキーについて、押されたかどうかの情報を得る命令です。次のような形式で書きます。

stick [変数], [非トリガータイプキー指定]

[非トリガータイプキー指定]については、省略することができます。その場合、[変数]の後のコンマはつけません。
キーが押されると、どのキーを押されたかの情報が、この[変数]に入ります。例えば。

stick a

と書くと、変数aに、押したキーについての情報が入ります。
さて、その情報ですが、次の通り。

左→1
上→2
右→4
下→8
スペースキー→16
エンターキー→32

他にもありますが、たいていのゲームであれば、ここに紹介しただけで事足りるでしょう。複数のキーが押されたときには、押されたキーの数を足し合わせた数が変数に入ります。(例えば、上と右を押した場合には、2+4で6が入る)
次に非トリガータイプキー指定ですが、なんてことはありません。「押しっぱなし」を実装する情報です。
例えば、32を指定した場合、エンターキーを押している間、変数には「エンターキーが押された(つまり32)情報」が入ります。逆にここで指定されなかったキーについては、連打することが必要になるのです。
ここでの指定では、複数のキーを指定する場合には、該当するキーの情報を足した値を設定してやります。例えば、左と右を指定する場合には、1+4で5を指定します。

さてさて、ここまで使い方を説明しましたが、どうすれば、「どのキーが押されたか」を知ることができるのでしょうか?
ここで、「&」というものが登場します!
詳しいことは省略しますが、次のように使うと、「あるキーが押されたかどうか」を知ることができます。

if (変数&キーの数字) {
 押されたときの処理
}

例えば、スペースキーが押されたかどうかをチェックするなら、

stick a
if (a&16) {
 〇△×
}

としてやればいいわけです。

~stick命令を使おう!
さて、ではこのstick命令を使って、第3回でのプログラムを改造してみましょう。

----------------------------
buffer 0
pos 0, 0
picload "mychara.bmp", 1

screen 1, 640, 480

x=0
y=240

repeat
boxf 0, 0, 640, 480
stick key, 15
if key&1:x=x-4
if key&2:y=y-4
if key&4:x=x+4
if key&8:y=y+4
if x<0:x=0
if x>600:x=600
if y<0:y=0
if y>400:y=400
pos x, y
gcopy 0, 0, 0, 32, 32
await 50
loop
----------------------------

まず12行目では、stick命令を使って、変数keyに押されたキーの情報を入れています。
そして13~16行目では、その押されたキーによって、位置を表す変数x、yの値を変えています。
17~20行は、キャラクターの位置が画面から出ないように調整しています。
そしてあとは、pos命令で位置を指定し、gcopy命令で表示させている、というわけです。

さて、説明が終わったところで実行してみましょう。どうですか?
カーソルキーによって飛行機が移動していれば成功です。

次回は、ゲームを作るのに役立つ命令、dim命令、rnd命令、redraw命令について説明していきます。お楽しみに!
posted by 裏編 at 14:25| Comment(0) | HSPでプログラミング | このブログの読者になる | 更新情報をチェックする

2017年06月22日

HSPでプログラミング~第3回・キャラクターを動かしてみよう

~変数についてちょっと~
さて、今回はキャラクターを動かすことをやってみますが、その前に変数について簡単に説明しておきましょう。
よく言われていることですが、変数とは簡単に言えば、数や文字列を入れることのできる箱です。

変数に何かを入れる方法ですが、次のように書きます。

変数名=数または文字列

試しに次のプログラムを入力してみてください。

a=5
mes a

どうでしょう?ウィンドウの左上隅に、5と表示されましたか?
mes命令は、文字列や数を表示させる命令ですが、このように変数名を指定すると、その変数の中身を表示させることができるのです。
そして何よりも、aという変数に5が入ったこと。これが一番重要です。

~動かしてみよう~
さて、いよいよキャラクターを動かす話にうつりますが、ここでこの変数を使います。
どのように使うかですが、試しに次のプログラムを入力して、実行してみてください。

x=100
y=70
pos x, y
mes "A"

左上隅ではなく、そこから右下のほうにAが表示されましたね。
今度は、1行目を、
x=150
に変えてみましょう。今度はさっきの位置から右に表示されました。

このように、pos命令には変数を指定することもできるのです。その場合、表示位置は変数の中に入っている数に設定されるのです。(この例では、xに100、yに70が入っているので、左上から右に100ドット、下に70ドットの位置に設定される)

さて、それを踏まえたうえで、前回のプログラムを改造してみましょう。

buffer 0
pos 0, 0
picload "mychara.bmp", 1

screen 1, 640, 480

x=0
y=240

repeat
boxf 0, 0, 640, 480
pos x, y
gcopy 0, 0, 0, 32, 32
x=x+32
if x>600:break
await 300
loop

このプログラムのポイントは、12行目のpos命令と、14~15行目です。
12行目では、変数xとyを使って、キャラクターを表示する位置を設定しています。
そして14行目では、xの値に32を足して、次に表示させる位置を右にずらし、15行目で、xが600より大きくなったら、break命令を使って、ループから抜け出させてします。(break命令を実行すると、repeat~loopの繰り返しから抜け出して、loopの直後の命令を実行します)

では実行してみましょう。どうですか?キャラクターが画面の左から右に移動していたら成功です。

最後に、今回のプログラムの流れを簡単に説明するとこうなります。

(1)変数xとyに、キャラクターのスタート位置の横の位置、縦の位置を入れる。
(2)画面を黒で塗りつぶす
(3)変数xとyの数が示す位置に、表示位置を設定
(4)設定された位置にキャラクターを表示
(5)変数xの値を増やす=次に表示する位置を右にずらす
(6)変数x(横の位置)が600より大きくなったら、繰り返しを抜ける
(7)(2)に戻る

次回は、キー入力でキャラクターを動かすことをやってみようと思います。
posted by 裏編 at 19:24| Comment(0) | HSPでプログラミング | このブログの読者になる | 更新情報をチェックする

2017年06月08日

HSPでプログラミング~第2回・プログラムの中を見てみよう!

~プログラムの中身を見てみよう~

さて、ではプログラムを解説していきましょう。
できる限りわかりやすく説明するつもりですので、よろしくお願いします。

buffer 0

この命令は、目に見えないウィンドウを作るものです。
『そんなものを何に使うんだ?』と思われると思いますが、ここにキャラクターの絵を読み込み、そこから実際のウィンドウに転送するようにしてやるのです。そうすると、実際のウィンドウに直接読み込むより、いくらか速度が速くなります。
また、この方法では色々と便利なことができるのでお勧めです。

pos 0, 0

この命令は、この直後に文字や絵を描く命令を実行したときに、描く位置を指定するものです。
つまりここでは、『次に何かを描くときは、(0, 0)の位置に描いてください』と指示しているわけです。
さて、その位置ですが、画面左上からのドット数で、(右に何ドット, 下に何ドット)という形で指定します。

例えば
pos 3,5
であれば、『画面左上から、右に3ドット、下に5ドット』の意味になります。
試しに、プログラムの二行目を、
pos 30, 50
に変えて実行してみてください。キャラクターが右下にずれましたね。

さて、次に進みましょう。

picload "mychara.bmp", 1

これは、現在操作対象となっているウィンドウに、画像ファイルを読み込む命令です。
ダブルクォーテーションで囲まれているのは、読み込むファイルの名前、そしてコンマのあとは、どのように読み込むかを表しています。0にすると、ウィンドウが読み込んだ画像のサイズに合わされます。1にすると、ウィンドウの大きさを変えずにそのままの大きさで画像を読み込みます。2は0と同じですが、こちらはウィンドウの中を黒で塗りつぶしたうえで、画像の大きさにウィンドウを調整したうえで読み込まれます。
1枚の画像を読み込む場合は0や2でもいいですが、1つのウィンドウに複数の画像を読み込む場合は、1にしたほうがいいでしょう。

screen 1, 640, 480

この命令は、『表示される』ウィンドウを作る命令です。
最初の数字は、そのウィンドウにつけられる番号。2番目は横幅、3番目は縦幅を表します。(これは先のbuffer命令も同じです)
2番目と3番目の数字は省略することもできます。その場合は、横幅640ドット、縦幅480ドットのウィンドウが作られます。
これ以外にも、4番目以降に指定できる数字はあるのですが、1~3番目だけで基本的なことはできるので、ここでは省略します。

さぁ、ここからが本番です。

~さぁ本番だ~
repeat
loop
この二つの命令は、間に挟まれている命令を繰り返すものです。
repeatの後に、repeat 5というように数字をつけると、その回数だけ繰り返すのですが、この回数を省くと、えんえんとずっと繰り返すようになります。

さて、その繰り返す命令の中身ですが……。

boxf 0, 0, 640, 480

boxfはBox Fillの略で、指定された大きさの、塗りつぶされた四角形を描く命令です。
大きさについてですが、最初の数字と二番目の数字が、その四角形の左上の座標、三番目と四番目の数字が右下の座標を表します。また、先ほどのpos命令と同じように、最初の数字と三番目の数字が、ウィンドウの左上から右に何ドットか、二番目と四番目の数字が、ウィンドウの左上から下に何ドットかを表しています。

つまりこの命令では、『画面の左上から右に0ドット、下に0ドットの地点から、右に640ドット、下に480ドットの地点までの塗りつぶされた四角形を描きなさい』と言っているわけです。

color命令を事前に指定しない場合は、黒で塗りつぶしますが、color命令で指定されている場合は、その色で塗りつぶします。

ここで、color命令にも触れておきましょう。color命令を実行すると、その後に実行された文字や絵を描く命令では、その色で描かれるようになります。
さて、color文の書き方は……

color 赤, 緑, 青

赤、緑、青はそれぞれの色の明るさを、0~255の範囲で指定します。

それでは次です。

gcopy 0, 0, 0, 32, 32

gcopy命令は、最初のほうで言った、『ある画面から別の画面に、画像の一部を転送する』命令です。
まず最初の数字は、転送する画像のあるウィンドウの番号を指定します。上の例であれば、ウィンドウ番号0のウィンドウから転送することを表します。
二番目と三番目の数字は、転送する範囲の左上の位置を表します。pos命令と同じく、二番目が、左上から右に何ドットとか、三番目が、左上から下に何ドットか、を表します。
そして四番目と五番目の数字は、転送する範囲の右下の位置を表します。ここの表し方も、二番目、三番目と同じで、左上から右に何ドット、下に何ドットとなります。
つまり、この命令は、『0番のウィンドウの、(左上から右に0ドット、下に0ドット)から(左上から右に32ドット、下に32ドット)の範囲を転送しなさい』となるわけです。

そうそう、描画や操作をするウィンドウについても説明しておきましょう。
screenやbufferで新しくウィンドウを作った場合、そのウィンドウが描画や操作する命令の対象となります。
でも、違う命令に描画を行いたい場合もありますよね。そのときは、この命令の出番です。

gsel ウィンドウ番号

これを実行すると、指定したウィンドウを対象に切り替えることができます。
またこの命令には、ウィンドウ番号の後にもう一つ数字を付け加えることができます。(その場合、ウィンドウ番号の後に、コンマをつけることを忘れずに!)
数字を付け加えた場合……
その数字が-1ならそのウィンドウを見えなくします。
1ならそのウィンドウをアクティブにします。
そして2なら、アクティブにしたうえで、さらにそのウィンドウをずっと最前面にすることができるのです。

そして最後。

await 10

これはこのプログラムで、さりげなくも重要な部分です。
awaitの後に書かれた数字の時間だけ、プログラムの実行を中止します。
『それが何の役に立つの?』と思われるのですが、百聞は一見に如かず。
このawait 10を消して、実行してみてください。

どうでしょうか? そのウィンドウをドラッグすることもできなくなりましたし、×ボタンを押して終了させることもできなくなりましたね。何度も×ボタンを押して、強制終了させるしかなくなってしまったではないでしょうか。
このawait命令は、そうならないようにするおまじないのような命令なのです。(実際には少し違いますが)

さて、次回は、このキャラクターを移動させてみようと思います。お楽しみに!
posted by 裏編 at 10:39| Comment(0) | HSPでプログラミング | このブログの読者になる | 更新情報をチェックする

2017年06月04日

HSPでプログラミング~第一回・はじめてのプログラム

プログラミングを始めてみようと思っている人の中には、難しそうとしり込みしている人も多いのではないでしょうか?
そこでこの記事では、ステップを踏んで、プログラミング言語『HSP』を使ったゲームプログラミングについて説明していこうと思います。
よろしくお願いします。

まず初回の今回は、キャラクターを表示させてみようと思います。

―――0:HSPをインストールしてみよう!
とはいえ、まずはHSPをインストールしなければ、プログラミングできませんね。
HSPはこちらからインストールすることができます。

http://hsp.tv/idman/download.html

ダウンロードしたら、そのEXEファイルを実行(ダブルクリック)すれば、インストールが始まります。

―――1:プログラミングしてみよう!
さて、最初のプログラムでは、『ハローなんとか!』と表示させるプログラムを紹介するところですが、ここはゲームプログラミングの講座なので、何かキャラクターを表示させてみましょう。
まず、デスクトップにフォルダを作り、そこに次の画像をダウンロードしておいてください。

mychara.bmp

それができたら、HSPスクリプトエディタを起動して、次のプログラムを入力してください。

------------------------------------------
buffer 0
pos 0, 0
picload "mychara.bmp", 1

screen 1, 640, 480

repeat
boxf 0, 0, 640, 480
gcopy 0, 0, 0, 32, 32
await 10
loop
------------------------------------------

入力したら、エディタの左上にあるフロッピーディスクのアイコンをクリックして、先ほど作ったフォルダーの中に、このプログラムを保存してください。
そしてそれが済んでから、F5キーを押すと……。

どうでしょうか?真っ黒いウィンドウの左上にキャラクターが表示されていれば成功です。
このプログラムの内容については、次回に説明します。お楽しみに!
posted by 裏編 at 10:59| Comment(0) | HSPでプログラミング | このブログの読者になる | 更新情報をチェックする