今回つくるゲーム
難易度
今回はハードルスライディングゲームを作っていきます。スクラッチでのゲーム作りに慣れてきた中級者向けのゲームです。次々と現れるハードルをジャンプとスライディングで越えていきます。単純なゲームですがレイヤー(前面・背面)や、マップチップ(ステージの作り方)を学習できます。特にマップチップは横スクロールゲームやロールプレイングゲームを作る際に必ず使うテクニックですので是非マスターしてください
まずは実際にゲームをプレイしてみてください。上矢印キーでジャンプ、下矢印キーでスライディングしながらゴールを目指します。
はじめに
まず、以下をリミックスしてください
こちらにはゲームを作るのに必要な素材が揃っています。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-10.57.31-1024x562.png?resize=1024%2C562&ssl=1)
ゲームの流れを作る
まず最初にゲームの流れを作るところからはじめます。
ゲーム管理のスプライトに以下のようにコードを書きます。
ゲーム中という変数を使い、ゲームを管理します。最初はゲーム中=0でゲームがスタートするとゲーム中=1になり、ゴールする、またはゲームオーバーになるとまたゲーム中=0になります。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-11.09.43.png?resize=807%2C332&ssl=1)
ハードルを出現させる
次にハードルを出現させていきます。
ハードルの構成を理解する
ハードルはハードル板・柱_奥・柱_手前の3つのパーツからできています。3つのパーツが合わさって、1つのハードルになるようにしています。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-11.24.19.png?resize=723%2C441&ssl=1)
なぜ、このようにしているかというと、ハードルの下をスライディングするときに、下図のように、プレイヤーがハードルをくぐっているように見せるためです。パーツが別れているとプレイヤーは奥の柱よりも手前にあって、手前の柱よりは手前にある、というような設定が可能になります。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-12.46.25.png?resize=471%2C389&ssl=1)
ハードル板のコード
ハードルの構成が理解できたら、次にハードルを出現させます。横スクロールゲームでは、プレイヤー自体は動かずに、ステージが右から左に動くことで、プレイヤーが左から右に動いているように見せます。今回はずらっと並んだハードルが右から左に流れてくることでハードルに向かって走っているように見せていきます。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-20.00.53.png?resize=760%2C439&ssl=1)
ハードルは先ほど説明した通りハードル板・柱_奥・柱_手前の3パーツでできていますが、まずはハードル板でコードを作り、他の2パーツはコードをコピーして使います。
ハードル板に書くコードは以下の通りです。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-12.41.21-1.png?resize=854%2C639&ssl=1)
少し詳しく解説していきます。ハードルxとハードルyという2つの変数は、1つ1つのハードル(クローン)の位置を記憶させます。このように、クローンごとに違う値を記憶させたい場合は変数を作るときに”このスプライトのみ”にチェックを入れます。列に関しては共通の変数として扱うので”すべてのスプライト用”にチェックします。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-12.12.34.png?resize=375%2C395&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-12.12.41.png?resize=375%2C395&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-12.12.51.png?resize=375%2C395&ssl=1)
次にハードルを設置のブロックを解説していきます。ハードルの設計図はハードルマップというリストに書きます。0123の数字が並んでいますが、これが先頭から順番にどのコスチュームが配置されるかの指示になっています。ハードルマップにチェックを入れるとリストが表示されます。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-12.16.32-1024x526.png?resize=1024%2C526&ssl=1)
020121・・・
と並んでいますが、これはつまり、
空白/下ハードル/空白/上ハードル/下ハードル/上ハードル/・・・
の順番に並べるための設計図であるということです。
設計図通りにハードルを並べていく作業をしているのがハードルを配置のブロックになります。
この状態で緑の旗を押してください。
以下のように動けば成功です。最初と最後の動画です。
柱のコード
では、続いて柱のコードを書いていきますが、先ほど作ったハードル板のコードと基本的には同じなのでコピーしていきます。
コピーをするには、バックパックを使うか、以下のようにドラック&ドロップでコピーすることもできます
変数のハードルx、ハードルyは”このスプライトのみ”にチェックを入れたので、スプライトが変わってもわざわざ変数名を変える必要はありません。
変更点は1箇所だけです。柱_奥は一番最背面に、柱_手前は最前面の1つ奥に配置します。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-12.41.31.png?resize=854%2C639&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-12.42.19.png?resize=854%2C639&ssl=1)
プレイヤーを動かす
次にプレイヤーを動かします。プレイヤーの動きは以下のとおりです。
上矢印:ジャンプ 下矢印:スライディング 何もなし:走る
そして、それぞれの表示のルール、ハードルに当たった時のルールは以下の通りです。
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-22.28.05.png?resize=789%2C446&ssl=1)
これを元に走る・スライディング・ジャンプのスプレライトに以下のコードを書きます。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-12.51.20.png?resize=841%2C554&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-12.51.28.png?resize=841%2C429&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-12.51.54.png?resize=841%2C548&ssl=1)
では、実際に動かしてみましょう。ジャンプ、スライイディングができるようになりました。ハードルに当たった時の指示はまだ作っていないので、ハードルにあたっても平気な状態です。
ハードルに当たったると昇天する
次にハードルに当たると昇天する動きを作っていきます。ただし、当たったらダメなのは”ハードル板”だけです。柱に当たってダメだとすると、遠近法で見かけ上は当たっていないのに当たったことになってしまいます。
ハードル板に以下のコードを追加します。
※ネコに当たると終了のブロックはすでに最初からコードには組み込んでいたのでその内容を追加するということです。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-12.54.52-1.png?resize=857%2C646&ssl=1)
次に昇天するメッセージを受け取ったときに、昇天する動きを作っていきます。
昇天のスプライトに移動して、以下のコードを書きます。上に昇りながらだんだんと消えていくように演出します。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-12.58.47.png?resize=857%2C364&ssl=1)
では、実際に昇天してみましょう。
ゲームの仕上げ
ではゲームを仕上げていきます。
ゲーム管理のコード
ゲーム管理に移動して以下のようにコードを書き直します。
ゲームの最初にREADY、GOと表示し、ゲームクリアしたときにはCLEARの文字を表示します。さらにBGMの調整もここで行なっています。
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-13.11.39.png?resize=852%2C576&ssl=1)
背景で旗を動かす
ここまでで終了でも良いのですが、余力のある人は、運動会っぽく背景に旗を表示しましょう。ゲームが進行すれば当然旗もスクロールします。背景をスクロールさせる方法はこちらのブログに詳細が書いていますのでをチェックしてください。
上記ブログのとおり、背景・旗1・旗2のスプライトにそれぞれ以下のようにコードを書けば完成です。
![](https://i2.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-13.14.03.png?resize=605%2C396&ssl=1)
![](https://i1.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-13.14.12.png?resize=605%2C396&ssl=1)
![](https://i0.wp.com/bingo-ojisan.xyz/wp-content/uploads/2022/01/スクリーンショット-2022-01-29-13.14.20.png?resize=605%2C396&ssl=1)
すべてのコード
これでゲーム制作は完了です。ハードルの並び方を変えたり、スピードを変えたりしてオリジナルのゲームを作ってみてください。
すべてのコードは以下から確認できます。