【HSPプログラミング講座#23】キーボード入力でキャラクタ（スプライト）を動かす

キーボード入力でキャラクタ（スプライト）を動かす

今回のＨＳＰプログラミングはキャラクタ（スプライト）をキーボードの矢印キーを使って動かしていくプログラムを作っていきます。　ＲＰＧの主人公が画面の中を動き回るイメージです。　と言っても高度な技を使うわけではなくて、いつも通りシンプルで解りやすく説明していくので安心してください。

キーボードの入力を感知する

今回のプログラムも解りやすくするために、今までのプログラムを少し改造した感じにしています。　プログラムの内容をざっくり説明すると、画像ファイルを読み込んで、キャラクタ登録して、スプライトを表示するというやり方はほとんど変えていません。　今回のポイントとなるのはキーボードから矢印キーの入力を感知してスプライトを移動させるという部分です。　それではレッツ！プログラミング！

１行目と９行目はスプライトを使うときの「決まり事」なので説明は不要ですね。　３行目と４行目の変数は主人公の座標を入れるのに使っています。（まぁ主人公と言ってもただの草ですけど・・・）　５行目はキーボードのボタンが押されると、押したキーに合わせた数字が得られるので、その数字を「ky変数」入れるために用意しています。

７行目の「screen」はウインドウの大きさを変える命令です。　第１パラメータはウインドウ番号で０番を指定しています。つまり目に見える表示画面のサイス変更を指しています。　第２パラメータが横幅の大きさ、第３パラメータが縦幅の大きさを指定しています。

１１行目は、次の１２行目で読み込む画像のウインドウ番号を指しています。１番は目に見えない裏側の画面を指しているので、ここに「mapbg.bmp」の画像ファイルを読み込みます。

１３行目は、裏画面に読み込んだ画像から、主人公を切り出すサイズを表しています。

１４行目の第１パラメータはキャラクタ番号、第２と第３パラメータは、裏画面に読み込んだ画像から、主人公用に切り抜く座標を指しています。

１６行目の「es_set」は、第１パラメータが使用するスプライト番号、第２と第３パラメータは現在の主人公のx,y座標、第４パラメータは使用するキャラクタ番号です。

１８行目の「gcel」はこのあと画面に書き込むウインドウ番号を指します。０番を指定しているので目に見える画面に書き込みを行います。

ココまでのプログラムは、今までやってきたこととほとんど変わりませんよね？　このあとの２１行目から２７行目までがキーボード入力に関するプログラムです。

２１行目の「stick」ではキーボードの状態を数字で取得しています。その取得した数字を格納するために「ky変数」を５行目で準備していました。

さて問題はココからなんです。。　キーボードの状態を数字で表していますが「何番の数字がどのキーなのか？」ということです。　具体的に言うと数字の１番は「左矢印キー」、２番が「上矢印キー」、４番が「右矢印キー」、８番が「下矢印キー」となっています。　なんか数字が飛び飛びになっていて使いづらく感じますよね。。。　でもこの数字って実はとても良くできているんです。　その解説をするためには、ちょっと難しいのですが２進数というのを知っておいたほうが良いのでココで説明しますね。

２進数というのは０と１だけで数を表す方法です。　ちなみに人間がよく使っているのは１０進数です。０から９までの１０種類の数字を使って数を表しますよね。　コンピュータは電気信号のONとOFFだけで動作ししていて、ONの状態が１、OFFの状態が０で表されているので、２進数はコンピュータが数字を扱う上での基本なんですよ。　下記に２進数で数を表してみますね。

０　＝　０
１　＝　１
２　＝　１０
３　＝　１１
４　＝　１００
５　＝　１０１
６　＝　１１０
７　＝　１１１
８　＝　１０００
９　＝　１００１

上記の左側が１０進数で右側が２進数です。　１０進数は１０まで行くと桁が増えますが、２進数は０と１しか使えないので、すぐに桁が増えていきます。　ちなみにＨＳＰプログラミングで２進数を表すには先頭に「０ｂ」を入れる決まりになっています。　なので下記のようになります。

０　＝　０ｂ０
１　＝　０ｂ１
２　＝　０ｂ１０
３　＝　０ｂ１１
４　＝　０ｂ１００
５　＝　０ｂ１０１
６　＝　０ｂ１１０
７　＝　０ｂ１１１
８　＝　０ｂ１０００
９　＝　０ｂ１００１

という感じに表現します。０ｂを入れないと１０進数と間違えちゃいますからね。　さてココで話を少し戻しますとキーボードの上下左右の矢印キーがなんで飛び飛びになっていたのかがわかります。　下記のようになっているからです。

１　＝　０ｂ０００１　＝　左矢印
２　＝　０ｂ００１０　＝　上矢印
４　＝　０ｂ０１００　＝　右矢印
８　＝　０ｂ１０００　＝　下矢印

上記の左側が１０進数、中央が２進数、右側が矢印キーです。　中央の数字はわかりやすいように４桁にして表現しています。　中央の数字をよく見てみると矢印キーごとに１桁ずつになっていることがわかりますね！？　ちなみに２進数の桁のことを「ビット」を言います。　例えば「１０進数の８は、２進数で言うと４ビット目が１になっている」というような言い方をします。

コンピュータの世界ではよく３２ビットとか、６４ビットとか耳にすることがあると思いますけど、実はこの桁数のことを言っているんですよ！（へぇ～って感じですよね）

なので４ビット目が１のときは下矢印が押されていて、０のときは押されていない。と表すことができるんです。　ちなみに「０ｂ１１１１」だったら上下左右のキーが全て押されているということになります。　このように考えるとわかりやすいですね！

ちょっと説明が長くなってしまいましたが次に進みたいと思います。

２３行目から２６行目までの「if」は、見たこともないことをしていますね。。。。

if ky & 0b0001 : myx-=8

「＆」ってなんだよ！ってツッコミが入りそうですが、ココではちょっと説明を省略しましょう。　２進数のところで頭がパンパンになっていますから。。。

簡単に説明すると「もしky変数が０ｂ０００１だったらmyx変数を８減らす」って事が書いてあります。　ここでさらに気になるのが「myx-=8」ですよね。。　これは下記と同じ意味です。

myx = myx – 8

ただ省略しているだけです。　前回のプログラミング講座でも「aaa++」が出てきましたよね。　コレと同じような感じです。　自分自身の変数を足したり引いたりするときによく使います。

これを日本語で説明すると「左矢印キーが押されていたら主人公の左に８ドット移動させる」という意味になります。　わかりますか？　わからなければ繰り返し読み返してみてくださいね。

続いて２７行目です。　ここでも初めて見るプログラムが出てきました。

if　ky　&　$80　:　end

先ほど２進数は「０ｂ」を付ける学びましたが、今回出てきた「＄」は１６進数を表しています。　１６進数は数が１６に達すると桁が上がります。　簡単に触れておきますと下記のとおりです。

０　＝　＄０
１　＝　＄１
２　＝　＄２
３　＝　＄３
４　＝　＄４
５　＝　＄５
６　＝　＄６
７　＝　＄７
８　＝　＄８
９　＝　＄９
１０＝　＄Ａ
１１＝　＄Ｂ
１２＝　＄Ｃ
１３＝　＄Ｄ
１４＝　＄Ｅ
１５＝　＄Ｆ
１６＝　＄１０

というような感じで１６進数を表しています。　２進数だと桁が大きくなりすぎて扱いにくいので１６進数で表すことがよくあります。　なんとなく覚えておいてください。

ということで「＄８０」というのは２進数で言うと「０ｂ１０００００００」になります。８ビット目が１になるとESCキーがONになったという意味です。 ESCキーを押したらこのプログラムは終了します。

次に進みましょう！　２９行目は「ex_pos」です。

es_pos　0,myx,myy

この命令はスプライトの位置を移動させる命令です。　第１パラメータは移動させたいスプライト番号を指定します。　第２と第３パラメータはx,y座標です。　これは簡単なので説明は不要ですよね？

以降に続くプログラムについては以前に勉強したので問題ないと思いますが軽く説明しておきましょうかね。

redraw 0
es_draw
redraw 1
await 1000/60
goto *main

redraw 0 については初めてだったかもしれませんが、画面を書き換えないように止めています。　その間に es_draw でスプライトを表示させています（が redraw 0 で止められているので実際には表示されません）　そして redraw 1 で画面を書き換えます。　これでスプライトが新しい場所に現れるのです。　await 1000/60 は「６０分の１秒」だけプログラムを止めています。　これは以前にも説明しましたが、モニターの書き換えタイミングをに合わせて調整しています。

ちょっとわかりにくいと思いますが redraw はコンピュータに画面の書き換えのONとOFFを指示していますけど、await はモニターの書き換えに合わせています。　await を入れないとモニターが描き終わるまでの時間に、コンピュータの計算が速すぎて移動しすぎちゃうんです。

もう少し表現を解りやすくすると、コンピュータは絵を書き終わっているけど、モニターは画面の上から下に向かってゆっくり表示されているので、モニターが画面をまだ表示し終わってないのに、次の座標にスプライトが動いちゃうので、人間の目にはワープしたように見えちゃうんですね。

この説明でわかりました？？

これですべての説明が終わりましたので、プログラムを実行して動きを確認してみてください。

この草原が主人公です！（笑）　キーボードの上下左右のボタンで動かしてみてください。　押すたびに８ドットずつ移動していきますよね。

ただ、キーを押しっぱなしにして動き続けてくれないのが難点ですが。。

ポチポチたくさんキーを叩いて動かしてみてくださいね。　それから画面の端まで行くと、止まらずに消えていってしまいますね。　本当は画面端に来たら、それ以上行かないように処理を入れたいですけどね。

まぁ、できるだけプログラムを解りやすく、見やすくするために最低限のプログラムになっているので、色々な処理を付け加えていくのはこれからにしましょうね。

まとめ

だんだんプログラムが長くなってきましたが、今回のポイントはキーボードの入力を変数で受け取って、その受け取った数値によって押されたキーを判別し、主人公の位置を移動させるところです。

それから２進数の表現方法です。１６進数も含めてこれから出現することがあるので覚えておいてください。　２進数の特徴としては桁が上がると下記のように数字が倍になります。

１，２，４，８，１６，２３，６４，１２８、２５６，５１２・・・

なんかパソコンでよく出てくる数字ですよね。６４ギガバイトとか２５６ギガバイトみたいな感じで。　コンピュータの電気信号のONとOFF、つまり２進数の桁数から来ていたんですね～