今回つくるもの
難易度
今回はマリオなどの横スクロールゲームで基本となる横移動・ジャンプ・着地について解説していきます。障害物にぶつかったら進めなくなったり、高さの違う足場に着地させたり、頭上に障害物があるとジャンプできなかったり、マリオ風横スクロールゲームの動きの基礎がつまっていますので是非マスターしてください。
今回作るものは以下となります。緑の旗を押して左右矢印キーで移動、スペースキーでジャンプします。
こちらの記事もあわせてお読みください。
ステージを設定
まずはステージを作っていきますが、背景として設定するのではなく、地面・足場それぞれスプライトとして設定していきます。そのまえに、ネコのキャラクターは邪魔なので隠しておきましょう。
地面の設定
まずは地面を設定していきます。ネコのプラスボタンから描くを選択します。
コスチュームのタブに移動して、四角ツールで地面を描いていきます。
このとき、必ずx:0,y:0に設定しておくようにしましょう。地面の色は好きな色に設定してください。
次に地面の表面に薄く色を引きます。これが着地の判定になります。こちらも何色でも大丈夫です。
足場の設定
続いて足場の設定になります。先ほどと同様ネコのプラスボタンから描くを選び、四角ツールを使って足場を描いていきます。ここも上部に着地判定用の層を追加しますが、色は先ほど地面の上に作った層の色と同じ色を設定してください
今回足場は２つ用意しますのでクローン機能を活用していきます。コードに移動して、以下のように書いてください。クローンIDという変数をつくり、各IDの位置を設定していきます。
これで、緑の旗を押すと以下のように足場が設置されます。
これで準備は完了です。
プレイヤーを動かす
ここからプレイヤーの動きに入っていきます。プレイヤーはネコなので、ネコのスプライトにコードを書いていこうとしがちですが、別に”ターゲット”のスプライトを作り、動きはすべてこのターゲットで規定することをオススメします。以下のようにターゲットはキャラクターより少し小さめに作成します。
ターゲットの動きに合わせてキャラクターはついてくるだけという考え方です
ターゲットがなければ例えば下図のように、明らかに足場から落ちるべきなのに落ちないというようなことが起こります。他にも敵がヒゲやしっぽの先に触れただけでゲームオーバーになるなど、当たり判定が厳しくなり過ぎる弊害もあります
ターゲットを作る
まず、ターゲットを作っていきます。右下のネコのプラスマークから”スプライトを選ぶ”を押し、ネコのキャラクターを選択します。
コスチュームに移動し、ネコのキャラクタにあわせて四角ツールでターゲットを描いていきます。
左右をわかりやすくするために右上に丸をつけておくと後で便利です。最終的にこのターゲットは幽霊の効果で透明にするので、何色で作っても大丈夫です。できたらターゲットだけを残すようネコのキャラクターを削除していきます。
スタート位置に表示する
ここからターゲットのコードを書いていきます。まずはターゲットをスタート位置左下部分に表示させます。以下のようなコードになります。最後に透明にするので幽霊の効果のブロックも入れておきます。
左右に移動させる
次に左右移動を作っていきます。動きを定義するときはブロック定義を活用していきます。そうすることであとからプログラムを見返しやすくなります。左右に動かす時に、足場にあたったら跳ね返る（進めない）必要があります。矢印キーが押されると１０歩動かし、足場に触れると−１０歩動かすだけです。
この状態で動かしてみると下の動画のように足場で動きが止まるようになるはずです
重力をつくる
次に重力を作ります。プレイヤーがジャンプした時のことを考えると、ジャンプの勢いは最初が一番大きくて、だんだん小さくなり、勢いがゼロになった時点がジャンプの頂点で、そこから勢いはマイナスになっていきます。そして地面もしくは足場に着地すると、それ以上下がれないのでストップします。ストップするというのは逆向きの力がかかっていることになります。そして最後にはジャンプの勢いはゼロになります。このことをプログラムで書くと以下のとおりとなります。
着地の判定で色を使っています。地面と足場のスプライトを作った時に一番上の層に描いた色を着地の判定とします。
ジャンプする
次にジャンプをさせます。これはとても簡単です。スペースキーを押した時にジャンプの勢いに数値を入れるだけです。
しかし、このままだと、空中にいるときにでもジャンプがいくらでもできてしまうので、ジャンプ中はジャンプができないようにしていきます。以下のようにジャンプ中という変数を使って制御します。
これでジャンプができるようになりました。
天井にあたったら跳ね返る
今の状態だと、足場の下でジャンプした時に足場をつっきってジャンプしてしまいます。足場で跳ね返るように以下のように天井というブロックを追加します。足場に触れたらジャンプの勢いをマイナスにします。こうすることでゴツンとあたる感じを出すことができます。
これでターゲットの動きは完成です
ネコの動きをつくる
ネコはターゲットについていくだけです。ネコのスプライトに移動し、以下のようにコードを書きます。ずっとターゲットに行って、ターゲットの向きにします。
さらに、左右の矢印が押されている間だけコスチュームを次々変えることで動いているように見せます。
ターゲットを透明にするため、ターゲットのコードに移動して、幽霊の効果を１００にします
これで動かすと以下のようになります。
最後に一つだけ問題があります。高い足場でジャンプしたときに上端で一瞬とまってしまうのです。本当は画面から消えているはずなのでその部分の調整を行います。
以下のように上にはみ出した時の処理というブロックを作ります。
これで完成です。
すべてのコード
すべてのコードは以下より確認できます。
