IchigoJam Games 「ごはんキャッチゲーム」第1回(全3回)

Ichigojam_ごはんキャッチゲーム1_タイトル IchigoJam

今回から全3回で、IchigoJamを使ったゲーム作りをしていきたいと思います。

作るゲームはズバリ「ごはんキャッチゲーム」です。

非常に単純なゲームですが、ゲーム作りの面白さは味わってもらえると思います。

ゲーム作りと聞くと難しそうなイメージがあるかもしれませんが

初心者の方にも分かりやすく、順番に説明しながら作っていきますのでご安心ください。


>>ゲーム作りの基本的な考え方や、よく使うコマンドについては下記の記事で解説しています。

はじめに

今回作るゲームについて

今回作るゲームは「ごはんキャッチゲーム」

その名の通り、プレイヤーを左右に動かして降ってくるごはん(おにぎり)をキャッチする

という単純なゲームになります。

使用するコマンド

今回のゲーム作りで使用するコマンドと参考記事は以下の通りです。

ゲーム作成の流れ

ゲーム作成は3回の記事に分けて行います。

全3回のゲーム作成の大まかな流れは下記の通りです。

ゲーム作成の流れ
  • 第1回
    プレイヤーキャラを作る

  • 第2回
    ごはんを降らせる

  • 第3回
    ゲームを仕上げる

IchigoJam を持っていない人は

IchigoJam本体を持っていない人は、下記リンク先の「IchigoJam web」を使って

記事を見ながら実際にプログラムを書いてゲーム作りを体感していただきたいと思います

※「IchigoJam web」はIchigoJamの製作会社が提供している、ブラウザ上でIchigoJam BASICが体験できるサービスです。

IchigoJam web へのリンク


プレイヤーキャラを表示させる

では、いよいよゲームを作っていきます!

まずは、プレイヤーキャラを表示させてみましょう。

下記のコードを書いて Enterキー を押して確定させます。

210 LC15,20:? CHR$(236)

その後、F5キー を押すとプログラムが実行されて下記のような画面が表示されると思います。

「プレイヤーキャラ表示」コード解説

今実行したコードは、下記のとおり「表示位置の指定」と「キャラの表示」の2つのコマンドがくっついてできています。

表示位置の指定

LCコマンドでキャラクターを表示させる位置を指定しています。

LC15,20 と書くと、横が15縦が20 の位置に表示されます。

キャラの表示

CHR$ コマンドで表示させるキャラを指示しています。

今回はネコのキャラを表示させたいので、公式ページの キャラクター一覧 を参考に 236 という番号を指定します。

CHR$(236)

公式「IchigoJam キャラクター一覧」より

CHR$ コマンドだけでは画面に表示はされませんので、? コマンドを使って表示させます。

このように、「表示位置の指定」→「キャラ表示」という順番で実行すると

任意の位置にキャラを表示させることができます。


プレイヤーキャラを動かせるようにする

プレイヤーキャラを表示させることができましたので

次は、このキャラを動かせるようにしていきたいと思います。

まず、先ほど入力したコードをもう一度表示させておきましょう。

「F1キー」を押して一旦画面をクリアして、「F4キー」で入力済みのプログラムを表示させます。

以降の記事では、下記のようなIchigoJamの基本操作については記載しませんので、下記を参考に適宜行ってください

  • F1:画面クリア
  • F4:入力済みのプログラムを表示
  • F5:プログラム実行
  • ESC:プログラム中断
  • Enter:プログラムの確定

最初に画面をきれいにする

これからどんどんコードを書いていきますので、プログラム実行時にそのままだとコードが邪魔で見にくくなる為

プログラムを実行したらまず最初に画面をクリアするようにします。

具体的には、下記のように最初の行(ここでは10行)でCLSコマンドを実行するようにします。

10 CLS

プレイヤーの位置を変数にする

プレイヤーを左右に動かせるように、横位置を変数に置き換えます

下記のように入力して、Xという変数に15を代入します

20 X=15

このX変数がプレイヤーの横位置です、代入した15はプレイヤーの初期位置になります。

先ほど入力したプレイヤー表示の行を、横位置に変数Xを使用するように修正します

210 LC X,20:? CHR$(236)

表示されている210行へ矢印キーでカーソルを移動させて、横位置15をXに変更しEnterキーで確定させます。

※210行が表示されていない場合はF4キーで表示させてから上記を実施してください

プレイヤーの横位置を変数にしたことで、あとは変数Xの中身の数値を変えるとプレイヤーの横位置を変えることができます。

矢印キーで左右に動かす

キーボードの矢印キーを押すと、変数Xの値が変わる(=プレイヤーの横位置が変わる)ようにします。

そのために「IFコマンド」と「BTNコマンド」を使い、下記のように打ちます

100 IF BTN(28) X=X-1

ここで書いている BTN(28) は、「左矢印キーが押された時に1を返す」という命令になります

()の中の数字によって反応するキーが変わり、28=左矢印キーになるのですが、この数字とキーの関係は覚える(調べる)しかありません

代表的なキーの番号は下記の記事をご覧ください。

参考記事『IchigoJam コマンド「IF文」』

そして、このコード IF BTN(28) X=X-1 の意味は

「もし、左矢印キーが押されていた場合変数Xの値を-1する(=プレイヤー位置を左に1つ動かす)」

となります。

右方向に動かすコードも同じ要領で、BTN()の数値は右矢印キーを表す29変数Xは右に動かすように+1とすれば良い。

110 IF BTN(29) X=X+1

ループを回す

キー操作でプレイヤー位置を変えるコードを書いたが、このままでは一回一瞬だけ実行されるのみでプレイヤーを操作することはできない

そこで、ループ処理をずっと繰り返すことで常にキー操作を待ち受けるようにしてやります。

240 GOTO 100

上記のように、GOTOコマンドで100行目に飛ばすことでループさせます。

実行してみる

では、プログラムを実行してプレイヤーを操作できるか確認してみましょう。

〔F5キー〕を押してプログラムを実行し、左右の矢印キーを押してみてください。

プレイヤーキャラが左右に動けば成功です!

ただ、おそらく下図のように移動前の位置にもプレイヤーが表示されたまま、残像のように残ってしまっていると思います。

次はこの残像を消すようにしていきます。

※ここまでのコード

10 CLS
20 X=15
100 IF BTN(28) X=X-1
110 IF BTN(29) X=X+1
210 LC X,20: ? CHR$(236)
240 GOTO 100

残像を消す

では、プレイヤーを移動させた時に残ってしまう残像を消そうと思いますが

その前に、なぜ残像が表示されてしまうのか理解しておきましょう。

先ほど書いたプログラムをよく見てみると、下記のように

位置変更 → キャラ表示 → 位置変更 → キャラ表示 → 位置変更 → ・・・

だけが延々と繰り返されるプログラムになっていて、プレイヤー位置が変わった時はそれまでの表示は残したまま上書きされるようになってしまっています。

ということで、残像を消す簡単な方法は

新しくキャラを表示する前に一旦画面表示をきれいに消す」となります。

つまり、キャラ表示をしている210行の前にこのように画面クリアのコマンドを追加すればOKです。

100 IF BTN(28) X=X-1
110 IF BTN(29) X=X+1
200 CLS
210 LC X,20: ? CHR$(236)
240 GOTO 100

上記のように200行を追加して、もう一度プログラムを実行してみると

プレイヤーを左右に動かしても残像が残らないようになっていると思います。

移動範囲を設定する

それではプレイヤーキャラ動作の仕上げとして、移動範囲の設定をしましょう。

現状のプログラムは、左キーを押し続けると横位置Xがいくらでも下がってしまうようになっています

(逆に右キーを押し続けると横位置Xが上がり続けてしまう)

試しにずっと左キーを押し続けてみると、キャラは表示されたままなので一見するとおかしく無いように見えますが

キーを押している間、内部では変数Xの値がずっと下がり続けているので

いざ反対方向のキーを押しても、下がりきったXの値が画面範囲内の値になるまではキャラが動きません。

これを防ぐために、Xの値が画面範囲外の値にならないように制限を設けてやります。

Xの範囲に制限を設ける

具体的にどうやってXの範囲に制限を設けるかというと

左右キーが押された時に、X位置が範囲内にある場合だけXの値を変更するようにします。

例えば左方向に対しては、左キーが押されていて かつ Xの値が0より大きい場合 だけXの値を-1するようにします

100行 のコードに 下記のように AND X>0 を追加しましょう。

100 IF BTN(28) AND X>0 X=X-1

同じく110 行のコードも下記のように AND X<31 を追加します。

110 IF BTN(29) AND X<31 X=X+1

動作確認

では、もう一度プログラムを実行してプレイヤーの動きを確認してみましょう

先ほどと同じように、左キー(または右キー)を押し続けたあと、反対方向キーを押すと

先ほどとは違い、すぐに反対方向に動きだすと思います。

これで、プレイヤーキャラの動作は完成です。

今回作ったプログラム

最後に今回書いたプログラム全体を載せておきます。

10 CLS
20 X=15
100 IF BTN(28) AND X>0 X=X-1
110 IF BTN(29) AND X<31 X=X+1
200 CLS
210 LC X,20:?CHR$(236)
240 GOTO100

今回は、プレイヤーキャラを表示させ、キー操作によって動かすことができました。

次回は、食べ物の表示と、キャッチする処理を作っていきます。

>> 次の記事はこちら

コメント

タイトルとURLをコピーしました