タイピングゲーム作成講座(HSP編) †
「ゲームは作りたいけどタイピングゲームなんて難しそう」そう思っていませんか？
それは大きな間違いです。実はタイピングゲームほど簡単に作れるゲームはないのです。
なぜなら、タイピングゲームは 押したキーが合ってるか合ってないか ということさえ分かればいいからです。
ここでは、そのタイピングゲームを HSP という言語を使って作っていきましょう。
ゲームを作るという壁は、思っているよりも低いかもしれませんよ。
このページは現在執筆中です。
早速作ってみよう、でもその前に †
HSP のダウンロード †
最初に HSP 本体をダウンロードします。 http://hsp.tv/ へ移動し、画面右側の「 download now 」をクリックします。
次に、「 Free Download HSP 」をクリックすればダウンロードが始まります。
任意の場所へ保存してください。
HSP のインストール †
続いて HSP のインストールを行います。
ダウンロードした hsp31.exe (07/12/10 現在) を実行します。
インストール先のフォルダを選択し、次へをクリックします。
次の画面も次へをクリックします。
インストールをクリックし、インストールを開始します。
これで HSP のインストールは完了です。
HSP スクリプトエディタの実行 †
デスクトップのショートカット、もしくはスタートメニューの
「(すべての)プログラム」 → 「 Hot Soup Processor 3.1 」から
「HSP スクリプトエディタ」実行します。
これで開発環境は整いました。あとはがむしゃらにやるだけです。
タイピングゲームを作ろう †
ウィンドウの作成 †
はじめに、画面を表示させて見ましょう。
HSP スクリプトエディタに何も入力せず、HSP 実行ボタンをクリックします。
なんと、 HSP はこれだけでウィンドウが作成されるのです。
文字の表示 †
では早速タイピングゲームらしいことをと言いたいところですが、
本番に入る前に少し肩慣らしをしましょう。画面に文字を表示することにします。
と入力し実行してください。画面に文字が表示されました。
しかしこのままでは寂しいので、赤くしてあげましょう。
先ほど入力した行の上に
と追加します。追加したら実行してください。
文字が赤くなりました。せっかく赤くしたのだから文字を 3 倍くらい大きくしたいですよね。
と一番上の行に追加し、実行してください。3 倍くらい強そうになりましたね。
しかし、せっかく強そうになったのに隅に引きこもっていてはいけません。
もう少し中央に寄せてあげましょう。
と一番上の行に追加し、実行してください。
隅から出てきてくれましたね。
最終的にはこうなりました
1
2
3
4
|
| pos 100, 100
font "ＭＳ ゴシック", 36
color 255, 0, 0
mes "あめんぼあかいなあいうえお"
|
それでは、何をやったのかを説明していきます。
- mes 命令
mes "あめんぼあかいなあいうえお"
と入力すると、画面に「 あめんぼあかいなあいうえお 」と表示されました。
mes 命令を使用すると画面に文字を表示させることができ、
mes "表示させたい文字"
という使い方をします。
- color 命令
color 255, 0, 0
とmes 命令の前に入力すると、文字が赤くなりましたよね。color 命令を使用すると、
color 命令以降に実行される着色が可能である命令の色、
すなわちここでは mes 命令で表示する文字色が指定した色に変わります。
使い方は次の通りです。
color R値, G値, B値
ところで、R値とかって何？と思いますよね。
詳しくは、下のリファレンスで説明しますが、要するに R (赤) G (緑) B (青)で色が構成されて、
R 値を増やせば赤っぽくなって、G を増やせば緑っぽくなって、Bを増やせば青っぽくなるってことです。
ちなみに、赤が(255,0,0) 緑(0,255,0)青(0,0,255)黒(0,0,0)白(255,255,255)となります。
実際には、緑はこのままじゃ見にくいので G 値を少し小さくした方がいいかもしれませんね。
- pos 命令
pos 100, 100
と入力すると隅から出てきてくれましたよね。
pos 命令は、mes 命令で表示させる文字などの表示位置を変えることができます。
pos x座標, y座標
という使い方をします。この座標は、画面左上を原点(0,0)とし、
右に行くほど x座標が大きくなり、下に行くほど y座標が大きくなります。
そのため、x座標が 100 、y座標が 100 の位置に文字が表示されたのです。
キーイベントの取得 †
今度こそ本番です、タイピングゲームらしいことをしましょう。
タイピングゲームは押したキーが合ってるか合ってないかが分かればいいと書きましたね。
そのためには、キーが押されたときにどのキーが押されたかが分からないといけないですよね。
ではまずどのキーでもいいのでキーが押されたかどうかを調べるプログラムを作ることにします。
なんだかよく分からなくてもいいので、以下のプログラムを入力してみてください。
1
2
3
4
|
| onkey *label
stop
*label
mes "何押してんのよ"
|
入力したら実行して何かキーを押してみてください。
何やらキーを押すたびに文句を言われますね。
このようなキーを押すと何か動作をするものをキーイベントといいます。
ではこのプログラムの内容について簡単に見ていきましょう。
まず 1 行目の
onkey *label
ですが、これは onkey 命令というものでこれが実行されると、
何かキーが押されるたびに *label の内容が実行されたということです。
onkey (goto) *ラベル名 // goto は省略可能
又は
onkey gosub *サブルーチン名
という使い方をしますが、ラベルとサブルーチンについては後で説明するのでさらっと流してください。
2行目の stop 命令は、処理を一時停止させる命令です。
さて、キーボードを押して何か反応してくれるようにはなりました。
しかし押したキーが合っているか合っていないかを確認するためには、
どのキーを押したかが分からないといけませんよね。
実は HSP では onkey 命令を使うと、iparam というシステム変数に
どのキーが押されたかの情報が自動的に格納されるのです。
なんだかよく分からないと思いますが、とりあえずこの iparam を使ってみましょう。
1
2
3
4
|
| onkey *label
stop
*label
mes iparam
|
というプログラムを入力して実行し、いろんなキーを押してみてください。
数字がなにやらいっぱい出てきますね。これはキーコードというもので、それぞれのキーを数字で表したものです。
すべてのキーにはこのキーコードというものが割り当てられていて、これによりどのキーが押されたかを知ることができます。
では、次にそのキーコードを文字列に変換してみましょう。
先ほど入力したプログラムの 4 行目を次のように変更し、実行して下さい。
アルファベットや数字が表示されましたね。
strf 命令は、文字列を指定した文字列に変換する命令です。
strf("%c", iparam) とすることにより、キーコードである iparam が文字列に変換されたわけです。
ここまでくればなんとなくタイピングゲームが作れそうな気がしてきましたね。
正誤判定 †
ここでは、入力したキーと問題を照らし合わせ、入力されたキーが合っているか合っていないかを判定する正誤判定を行います。
以下執筆中
ラベルとサブルーチン †
プログラムは左から右へ、上から下へと順番に実行されていきます。
しかし、ラベルを使用することにより、実行順序を任意に変更することができます。
*ラベル名
とすることでラベルが定義され、
goto *ラベル名
とすることでそのラベルの位置に処理を移動させることができます。
1
2
3
4
5
6
7
|
| mes 1
mes 2
goto *label
mes 3
stop
*label
mes 4
|
さて、では上記のプログラムを実行すると、どのような順番で実行されるでしょう。
ここで stop 命令が新しく出てきていますが、これはプログラムの動作を一時中断するものです。
正解は、1 → 2 → 4 の順番で実行され、 3 は実行されません。
これは、 2 の次に goto 命令が実行されたことにより、
処理が 4 に移動した後、最後の行に到達しプログラムが処理を終えたからです。
すなわち、mes 3 と stop は何の意味も成さないということです。
では、mes 4 を実行した後に mes 3 と stop に処理を移動させたいときには
どうすればよいでしょうか。
そこで登場するのがサブルーチンです。
サブルーチンとは、メインの処理から分岐させた処理のことです。
といってもよく分かりませんよね。
とりあえず例を見てみましょう
1
2
3
4
5
6
7
8
|
| mes 1
mes 2
gosub *label
mes 3
stop
*label
mes 4
return
|
2 箇所ほど先ほどのプログラムと違うところがありますね。
gosub 命令はサブルーチンを実行するための命令です
gosub *サブルーチン名
という使い方をします。
return 命令は、サブルーチンを終了するための命令です。
このプログラムを実行すると、1 → 2 → 4 と実行した後に
再び処理が 3 に帰ってきます。
すなわち、 1 → 2 → 4 → 3 と表示され、stop にたどり着き処理を停止します。
もう少しプログラムの流れを噛み砕いてみましょう。
A子さんはお母さんに、八百屋でアスパラを、
魚屋でマグロの刺身を買ってくるように言われました。
八百屋でアスパラを買った A子さんは、魚屋に寄る前に本屋により
少女漫画を買いました。最後に魚屋で刺身を買って家にかえりました。
さて、この買い物のメインはあくまでアスパラとマグロの刺身であり、
少女漫画はメインでない買い物すなわちサブの買い物です。
この、少女漫画の購入がプログラムで言うサブルーチンです。
プログラムの停止を帰宅としてこれをプログラムで書くと、
1
2
3
4
5
6
7
|
| mes "八百屋でアスパラを購入"
gosub *bookstore
mes "魚屋でマグロの刺身を購入"
stop
*bookstore
mes "本屋で少女漫画を購入"
return
|
となります。ここでもし return を忘れると、マグロ刺身が買わずに
帰ってしまうことになりお母さんのお説教が待っているでしょう。
また、gosub でなく goto を使用してしまうと、メインの目的が少女漫画になってしまい、
return といわれても帰るところが分からなくなり迷子になって警察沙汰になるでしょう。
では、最後にもうひとつ問題です。
1
2
3
4
5
6
7
8
9
10
11
12
|
| a=1
a=a+2
gosub *subroutine
a=a-3
gosub *subroutine
goto *endroutine
gosub *subroutine
*subroutine
a=a*2
return
*endroutine
a=a+3
|
このプログラムで a の値は最終的にいくつになるでしょう。
正解は、 9 です。ここで重要なのは、7 行目の gosub *subroutine は、
6 行目の goto *endroutine で 11 行目の *endroutine ラベルに
処理が移動するため実行されないということです。
長々と説明しましたが、このプログラムの流れはプログラミングの最も重要なことです。
プログラムをみたらまず流れをつかむ事から始めると上達が早くなるでしょう。
問題の登録 †
結果表示 †
スタート画面 †
完成 †
今後の課題 †
リファレンス †
mes "表示させたい文字"
文字が表示されます
print "表示させたい文字"
mes 命令と同じ動作をします
color R値, G値, B値
文字色を変更します。
この3つの値は、それぞれ R(赤)G(緑)B(青)の輝度を表します。詳しいことは「 光の三原色 」と Google で検索してみよう。
表示したい色の値が分からないときには、Windows 標準のペイントで調べることができます。
スタートメニューからペイントを開き、「 色 」タブの「 色の編集 」をクリックします。
開いたウィンドウ下部の色の作成ボタンをクリックし、好きな色を選択します。
選択したらウィンドウ右下の赤緑青の横に表示された数字が、その色の輝度になります。
これらを R 値 B 値 G 値 に当てはめることにより目的の色を表示させることができます。
font "フォント名", 文字サイズ , 文字のスタイル値
文字のフォント・サイズ・スタイルを変更します。
スタイル値：1:太字 2:イタリック体 4:下線 8:取消し線
goto ラベル名
指定したラベル名に移動します。
gosub サブルーチン名
指定したサブルーチンを実行します。
return
サブルーチンを終了します
onkey goto/gosub ラベル名
キーボードが押されると指定したラベルに移動します。
wait 時間
指定した時間(10ms)プログラムの処理を中断します。
await 時間
指定した時間(1ms)プログラムの処理を中断します。
await は wait より高精度です。
cls 指定色
画面を指定色でクリアします。
指定色：0:白 1:明灰色 2:灰色 3:暗灰色 4:黒
boxf 左上の x座標, 左上の y座標, 右下の x座標, 右下の y座標
指定したサイズの矩形を描画します。
座標を省略した場合は、画面全体に描画されます。
矩形の色はboxfの実行直前の color 命令で指定した色になります。
簡易掲示板 †
ご意見・ご要望・ご質問等何でもどうぞ
- 作成、乙です。 -- 佐藤伸也?
- 画像を貼り付けようと思いましたが、そうすると枚数が結構多くなって負荷がかかりそうなので文字だけの方ががよさそうですね。 -- N川
- もし間に合えば、水曜日のゼミ1で「タイピングゲーム作成講座」、N川君講師で実施してみませんか？ -- 佐藤伸也?
- #code プラグインを入れてみました。 -- 佐藤伸也?
- 了解しました、実は pukiwiki のアップデートとこのページの更新のタイミングが重なってしまって編集してたデータが飛んでしまいました -- N川
- 添付ファイルを全部消そうかと思ったのですが、何やら管理者パスワードを要求されるようになってますね。 -- N川
- ページ編集者権限で削除できるようにしました。attach プラグイン内にも設定があったとは... -- 佐藤伸也?
- 了解です、ありがとうございました -- N川
Counter: 1868,
today: 2,
yesterday: 1
![[PukiWiki]](http://satolab.com/image/satolab.png "[PukiWiki]"){kind=small}
![[PukiWiki]](http://satolab.com/image/semi1.png "[PukiWiki]"){kind=small}
PukiWiki 1.4.7 Copyright © 2001-2006 PukiWiki Developers Team. License is GPL.