Heppocode Garage

自分でつくるヒントとテクニック

article header image スクラッチで、簡単プラットフォーマーゲームを作ってみた

2019-1-31

今回、Scratchでプラットフォーマーゲームを作ってみました。

マリオブラザーズみたいなステージ型のアクションゲームを「プラットフォーマー」と呼びます。キーボードで操作して、ジャンプで障害をよけて、ゴールを目指します。Scratchで定番のゲームなので、遊んだことがある人も多いでしょう。

ここでは、このゲームを作る大ざっぱな流れと、プログラムの途中経過を紹介しています。けっこうシンプルなゲームので、ぜひオリジナルのプラットフォーマーを作ってみてください。

01.プレイヤーのキャラクターを用意する

プログラムを作る時、単純なところから始めて、少しずつ機能を加えていくのがオススメです。そこで、 とりあえず簡単なキャラクターを描いて、土台の上で動かしてみましょう。

01.プレイヤーのキャラクターを用意する

作る機能

  1. スプライトに、プレイヤーのキャラクターをかく。今回はシカク。
  2. 重力で落下させる：「Yスピード」変数で、落下の移動量をあらわす。
  3. 土台にさわったら、とまる

画像をクリックすると、そのプロジェクトに移動します。
シンプルなプログラムなので、ぜひ中を見てみてください

ヒント：重力で落下させる方法

落下は、playerのスプライトで次の2つのステップをくりかえしています。

  • ステップ1：プレイヤーの「Y座標」を「Yスピード」ずつ変える

  • ステップ2：「Yスピード」を一定量だけ早く(マイナス)する

スピードとは、"一定の時間で移動する距離"としてあらわすことができます。たとえば、時速100キロメートルは、1時間に100キロメートル移動するスピードのことです。そして、落下する時には、そのスピードが一定量ずつマイナス方向に増えていきます。

落下中に土台にさわったら、落下を止めます。この時、ちょうど土台のところで止まらないで、ちょっと行きすぎてしまうことがあります。その場合、一つ前の位置まで戻して、土台にさわらなくなるまで、下にちょっとずつ移動します。

ただし、そのままでは最後の調整が見えてしまうので、「じめんにタッチ」ブロックを定義して、"画面を再描画せずに実行する"を有効にしておきます。

01_player_code

02.移動とジャンプ

続いて、矢印キーで移動、スペースキーでジャンプさせましょう。これで、ちょっとだけゲームを操作できるようになります。

02_moving

作る機能

  1. 右矢印キーで、右に移動する
  2. 左矢印キーで、左に移動する
  3. スペースキーで、ジャンプする

ヒント：ジャンプ

左右の移動は、メインのループの中にあります。スペースキーは、イベントブロックにしてあります。すべてイベントブロックでもいいんですが、同時にキーを押したとき、取りこぼしがあるみたいなので分けています。

ジャンプするには、「Yスピード」をプラスにします。「Yスピード」がプラスの間は、Y座標が増加するので、プレイヤーは上方向に移動します。でも、落下があるので、「Yスピード」は一定量ずつ小さくなります。そして、マイナスになると下方向に移動をはじめます。

ここでは、地面にふれている時だけ、ジャンプさせています。スペースキーを押したら、y座標を「-1」だけずらして、地面にふれているか調べます。

02_move_code

03.いきおいをつける

さらに、プレイヤーの動きにいきおいをつけましょう。
先ほどは、キーを押している間だけ横移動しました。ジャンプ中も、横移動をやめると、まっすぐ落下します。
これからは、すぐに横移動で止まらず、惰性で少しずつ遅くなります。
また、ジャンプ中は、横移動の速度が落ちないようにします。

03.勢いをつける

作る機能

  1. 「たて移動」と「よこ移動」のブロックを追加
  2. 「Xスピード」と「X方向」の変数を追加
  3. キーが押されたら、XスピードとX方向をセットする
  4. それ以外の場合、少しずつXスピードを遅くする
  5. 「ジャンプ中？」変数を追加
  6. ジャンプ中は、横移動のスピードを遅くしない

ヒント：いきおいを表現する方法

「勢い」「惰性」を表現するために、「Xスピード」と「X方向」という変数を追加しました。そして、キーを押したら、すぐに位置を変えるのではなく、 「Xスピード」と「X方向」 に値をセットしています。実際に位置を変えるのは、キー操作とは関係なく行います。

このあたりの方法は、落下の重力と少し似ているので比べてみるといいでしょう。

03_move_x_code.png

04.ドアと穴を追加する

次は、ステージに出口と障害物を用意しましょう。ドアにさわると、次のステージに切り替えます。穴におちたら最初から。

04.ドアと穴を追加する

作る機能

  1. 現在の背景に、出口を追加する
  2. 背景を追加して、次のステージを描く
  3. プレイヤーが出口にふれたら背景を切り替え、プレイヤーの位置をリセット
  4. 背景に障害(穴)を追加。穴の底は紫色
  5. 紫色 にふれたら、プレイヤーの位置をリセットする

ステージは、背景を追加していくだけなので簡単ですね。

04_door_code

問題発生

ステージを切り替えできると、いろいろな障害をクリアできるようになりますが、問題も見つかります。たとえば、下から天井にぶつかったとき、ワープてしまいます。カベにぶつかると、勝手に乗りこえてしまいます。
そこで、次のステップで、天井やカベにさわったら、位置を直すようにコードを変更します。

05.天井やカベにさわったら、位置を直す

ここでは、カベや天井にぶつかったときの処理を作ります。

05.天井やカベの処理

作る機能

  1. 床や天井にふれた場合、Y方向(縦の移動方向)に合わせて調整する
  2. 横移動でカベにふれた場合、離れる

ヒント：Y方向の検出

「Y方向」は、「Yスピード」から計算しています。「Yスピード」が0だったら、「Y方向」もゼロです。上昇中は１になり、落下中は-1になります。この計算のために、「Yスピードの絶対値」を「Yスピード」で割っています。

05_checkwall_code.png

06.壁ジャンプ

さらに、アクションをふやしてみましょう。
カベにふれた時、ジャンプの上昇中なら、スペースキーでカベジャンプ！

06.カベジャンプ

作る機能

  1. ジャンプの上昇中でカベジャンプ！
  2. スペースキーを追加
  3. 同じカベで、連続カベジャンプしない

ヒント：同じカベで、連続カベジャンプを防ぐ

同じカベで、連続カベジャンプができてしまうと、カベをよじ登るようになってしまいます。これを防ぐために、「かべジャンプ?」変数を追加しています。この変数には、カベジャンプしたときの「X方向」を格納します。そして、カベジャンプの時に、「X方向」が違っているかどうかチェックします。

06_walljump_code.png

07.ステージを増やして完成

最後に、ステージを増やしたり、効果音やスタートページを追加すれば完成です。つくってみたら、難しすぎたので、難易度を調整しました。

Heppocode Platformer

ここからが、ゲームデザイナーのうでの見せ所ですね。

やってみよう！

というわけで、「プラットフォーマー」の開発手順を紹介しました。各ステップのコードは、スタジオにまとめてあります。

面白いゲームができたら、ぜひ教えてくださいね。

Heppocode Platformer スタジオ

他のプラットフォーマーチュートリアル

「Youtube:グリフパッチのプラットフォーマー開発チュートリアルをやってみた」は、8万人以上のフォロワーがいる人気のスクラッチャー：グリフパッチさんがYoutubeで公開しているPlatformerチュートリアルを解説したものです。本格的なプラットフォーマーゲームを作るとき、とても役立つと思います。

  1. 基本
  2. ネクストレベル
  3. 当たり判定とアニメーション

参考になるページ