スクラッチで青鬼オンライン風ゲームの作り方

青鬼オンライン

今回つくるゲーム

難易度3 out of 5 stars

今回はスクラッチで青鬼オンライン風ゲームを作っていきます。時間とともに増える青鬼から何秒逃げられるかを競います。部屋は3つ用意されていて、部屋のあいだはプレイヤーも青鬼も行ったり来たりできます。敵キャラクターである青鬼をどのように部屋のあいだを移動させるかというのが今回のプログラミングのポイントになります。

まずは実際にゲームをプレイしてみてください。

はじめに

まず、以下をリミックスしてください

青鬼オンライン風ゲーム_素材

こちらにはゲームを作るのに必要な素材が揃っています

全体マップを見る

まず、全体マップを確認しましょう。ステージ(背景)を選択すると、3つのエリアが用意されているのがわかります。

エリア1、2、3は以下のようなマップとして繋がります。これらのエリアを行ったり来たりしながら鬼から逃げるのが今回作るゲームです。エリアは青いマス目になっていて、このマス目に沿ってプレイヤーと青鬼が動きます。わかりやすいようにマス目を書いていますが、最終的にはこのマス目は外します。

プレイヤー(おじさん)のうごきを作る

まずはプレイヤーである”おじさん”の動きを作っていきます。先ほど説明したように、青いマス目にそってプレイヤーは動きます。このようなマス目にそってプレイヤーを動かすようなゲームを作るときは、まずターゲットを作って、そのターゲットに従ってキャラクターが動くようにします。このことはボンバーマン風ゲームの作り方でも詳しく解説していますのでそちらもあわせてご確認ください

ターゲットをマス目にそって動かす

まずはターゲットの動きを作っていきます。黄色い丸のターゲットのスプライトに移動します。黄色い丸はちょうど青いマスにおさまる大きさに作られています。

ターゲットのコードに移動して、以下のようにコードを書いてください。
これらはマス目にそって動かす定番のコードになりますので覚えてしまいましょう。
ここもボンバーマンの作り方で詳しく解説しています。

できたら、実際に上下左右の矢印で動かしてみましょう。以下のように動くことを確認してください。

エリアを行ったり来たりする

最初はエリア1にいますが、エリア2、エリア3も行ったり来たりできるようにしましょう。
以下のようにコードを追加します。

とても長いコードですが、やっていることは単純です。ターゲットが左端(つまりx<-225)になると、ステージ1の左端に来たと判断して、ステージ2の右端(x=225)に移動します。
同じことをすべてのエリアの往復でコードを書いていきます。(部屋の数がもっと多くなるとさらにコードは複雑になります)

コードがかけたら、ちゃんとエリアを行ったり来たりできるか確認しましょう。

プレイヤーをターゲットに合わせて動かす

次に、プレイヤー(おじさん)をターゲットにあわせて動かします。
おじさんのスプライトに移動して、以下のコードを書きます。

大きさや向きなどを初期設定したら、あとはずっとターゲットへ行くということになります。

このままでは、ただおじさんのイラストが黄色い丸にひっついて動くだけなので、押したキー(上下左右の矢印)にあわせて、おじさんの動きを作っていきます。

まず以下のように、大枠のコードを書いて、右向き左向き上向き下向きそれぞれの動きを規定していきます。

以下が規定した動きです。
用意してあるコスチュームをそれぞれのキーを押している間(”押された”ではないまで)繰り返し表示することで動くように見せます。

ここまでできたら、実際に動かしてみてください。以下のようにターゲットに合わせてプレイヤーが動いているように見せることができます。

青鬼のうごきを作る

ここから青鬼の動きを作っていきます。かなり長いコードになるので頑張ってください。

時間とともに青鬼が出てくるようにする

まず、時間が経過すると青鬼が順番に出てくるように設定します。このような全体に関わるコードはステージ(背景)に書くようにします。ステージに移動して、以下のようにコードを書きます。時間鬼の数の変数を作り、5秒ごとに鬼が出現してくるように指示を書きます。
ここで作ったメッセージ”鬼1出現”、”鬼2出現”・・・は後ほど使います。

また、時間と鬼の数はゲーム上に表示しておきたいので、変数の部分のチェックボックスにチェックを入れ、左上に配置をします。

これで準備完了です。

鬼を出現させる

ここから鬼を出現させていきます。まず鬼1(1体目の鬼)について考えていきます。2体目以降は内容を複製していきます。

スタートから5秒経つと鬼1(1体目の鬼)が出現しますが、以下のルールで設定することとします

・1〜3のどのエリアに出現するかはランダムに決められる
・各エリアの中で出現する場所は5箇所あり、ランダムで決められる

これらのルールをもとに鬼1ターゲット(青い丸)のスプライトに以下のコードを書いていきます。

ここで、大切なポイントがあります。鬼エリア、鬼1がいる、位置番号の3つの変数をここでは使っていますが、鬼エリア位置番号の2つについては”このスプライトのみ”にチェックを入れるようにしてください。変数はふつうはあまり考えずに”すべてのスプライト用”に設定して問題ないですが、今回のプログラムでは鬼のプログラムをどんどん複製していくので、このように変数をスプライトのみでの適用にしておくと、複製が楽になります。

ステージを移動時の鬼出現

次に、プレイヤーがステージ間を移動した時の鬼の出現についてコードを書いていきます。例えばプレイヤーがステージ1からステージ2に移動した時、鬼1がステージ2にいる場合は鬼1を出現させないといけません。先ほどのコードに加え、鬼1ターゲットのコードに以下を追加します。

鬼出現は先ほど作ったものと同じ定義を再活用しています。

鬼を自動で動かす

プレイヤーは上下左右の矢印キーで動かしましたが、鬼は自動で動かないといけません。ボンバーマンパックマンで作ったコードと同じ考え方です。鬼1ターゲットのコードに以下を追加してください

ステージ間を移動させる

鬼もステージ間を移動させられるようにしましょう。先ほどに引き続き以下のコードを追加します。
鬼がどこにいるかは常に”鬼エリア”の変数で管理します。

隣のエリアから鬼が出現する

例えばプレイヤーがエリア1にいて、鬼がエリア2にいたとすると、エリア1は完全に安全なエリアになってしまいます。それではゲームとしては微妙なのでエリア2からエリア1に鬼が移動してくることも考えなければなりません。隣のエリア(ゲーム画面に見えていないエリア)での鬼の動きはブラックボックスなので、10秒に1回の確率で隣のエリアから出現してくるというプログラムを組みます。

とてつもなく長いコードですが、やっていることはとても単純です。

それぞれ拡大すると以下の通りとなります

青鬼をターゲットにあわせて動かす

ここまでできたら、青鬼のキャラクターをターゲットにあわせて表示させていきます。
コードの考え方はプレイヤーの時と近いですが、そのステージに鬼がいる(つまり鬼1がいる=1)のときだけ表示させて、それ以外の時は隠さなければなりません。

右向き・左向き・上向き・下向きの定義については以下の通りです。
プレイヤーとは違い鬼は動き続けるので、向きが変わるまで繰り返すというコードになります。

青鬼の動きを確認する

これでとても長かった青鬼のコードは終了です。
実際にゲームをプレイしてみて、青鬼が自動で動くか確認してみてください。

鬼の配置はランダムなので、以下の動画は一例ですが、5秒経ったときに鬼1はエリア2に出現したため、プレイヤーがステージ2に移動すると出現します。その時出現した位置は(x:-75.y:15)となっています。そしてプレイヤーがエリア1に行った後に、鬼1もエリア2からエリア1に移動してきています。
これは10秒に1回の確率で起こったことです。

青鬼を複製する

ここまできたらあとは青鬼を複製していくだけです。鬼1ターゲットから鬼2ターゲットを、鬼1から鬼2をそれぞれ複製します。

鬼2ターゲットのコード

鬼1ターゲットの複製をそのままは使えないので、改変を加えていきます。
鬼2ターゲットのコードに移動して、以下のように変更していきます。赤矢印箇所が変更ポイントです。
鬼エリア位置番号をそのまま使えるのは、変数設定時に”このスプライトのみ”に設定していたからです。もし鬼1エリアのように、それぞれの鬼のエリアを変数として分けていたら大変なことになります。

鬼2のコード

続いて鬼2のコードです。同様に赤矢印の部分を変更していきます。
鬼1ターゲットの向き→鬼2ターゲットの向き
に変更する際に、向きが自動的にx座標に変更されてしまうので気をつけましょう

鬼3・4も複製する

同様に鬼3・4を複製で作成していきます。
コードはここでは割愛します。

ゲームオーバーの設定

ここまでできたら、ゲームオーバーの設定を行なっていきます。
ルールは単純でプレイヤーが青鬼にぶつかったらゲームオーバーです。

プレイヤーのターゲットに以下のようにコードを書きます。ポイントはプレイヤーのターゲットが、鬼のターゲットに触れたらゲームオーバーという部分です。このように当たり判定もすべてターゲットで実施していくようにしましょう。

それから、おじさんのコードに移動して以下のように、ゲームオーバーを受け取った時にコスチュームを変更してすべてを止めます。

以下のような動きになれば成功です。

最後の仕上げ

最後に仕上げを行なっていきます。

ターゲットを透明にする

まずはターゲットを透明にします。それぞれのターゲットのコードで幽霊の効果を100にすることでターゲットが透明になります。

背景のマス目をとる

次に背景のマス目を削除していきます。ステージのスプライトに移動して背景画像に進んでください。実は、最背面にグレーの背景を仕込んでいました。これを一つ前に出すことで、背景がマス目からグレーに変更されます

すべてのコード

これで全て完成です。
すべてのコードはこちらから確認できます

青鬼オンライン風ゲームのコード

コメント

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