スクラッチ

【スクラッチ】簡単マリオ風ゲームの作り方|横スクロールする方法

スクラッチ マリオ 作り方 (37)

Scratch(スクラッチ)を使った簡単マリオ風ゲームの作り方について紹介します。

マリオ風ゲームとは、スーパーマリオブラザーズのような敵を避けながら、コインなどを獲得し、面を越していくゲームです。

難しいイメージがあると思いますが、スクラッチなら小学生でも作れます。

「1面だけ作る」「横移動やジャンプをして、アイテムを取ってみる」など、簡単なゲームから作り始めるといいですよ。

そこで、今回は、スクラッチを使った簡単マリオ風ゲームの作り方を分かりやすく解説していきます!

少し難しめの横スクロールする方法も紹介します。

アルスパーク_小
>>スクラッチをもっと楽しんで学べる!デジタル学童【アルスパーク】

 

スクラッチのマリオ風ゲーム例|公式作品と子どもの作品

スクラッチ アクションゲーム

スクラッチのマリオ風ゲームでできること

マリオ風ゲームとは、一般的にキーボードやボタンを操作することでキャラクターを動かし、面をクリアしていくゲームです。

スクラッチで作るマリオ風ゲームでは、簡単なものから複雑なものまで作れます

  • ジャンプする
  • 左右に移動する
  • コインを取れる
  • 敵に当たるとライフがへる
  • 背景を横スクロールさせる

など、想像力を広げて、楽しいゲームを作りこんでいくことができます。

横スクロールゲームのマリオ風ゲーム作品例

>> スーパーキャットラン

スクラッチでおなじみのネコが主人公のマリオ風ゲームです。

横スクロールの作品で、マウスクリックのみ使います。

主人公が飛びながら移動したり、色んな敵が出てきたり、シンプルながら楽しい作品です。

 

>> マリオ風ゲーム

こちらもスクラッチキャットが主人公のゲームです。

こちらは、シンプルながらライフ・鍵・敵・アイテムなど、マリオ風ゲームに必要な要素をたくさん満たしているゲームです。

隠し部屋もあったり、工夫が多い作品です。

 

二次創作の著作権

今回紹介したのは「任天堂のマリオ」をベースに作られた作品。

これは、二次創作と言い、「著作権のあるものを元に作られた作品」です。

二次創作は、法律的にはグレーゾーン。

ただし、二次創作が著作権に違反するかどうかは、会社によって対応が違います。

任天堂では、二次創作について次のように見解を出しています。

  • 「任天堂の作品の品格や価値をおとしめるような表現になっているもの」はNG
  • 任天堂の作品に好意を持ち、ファン活動として二次創作している作品は、すべて著作権違反で犯罪者扱いするわけではない

今回紹介した作品は、「任天堂の作品の品格や価値をおとしめるような表現になっていないもの」です。

任天堂の著作権について、詳しくはこちらの記事に書いていますので、より詳しく知りたい方は確認してください。

 

小学生の作品|マリオ風ゲームを紹介

キッズプログラミング教室アルスクールの小学生が作ったマリオ風ゲームを紹介します。

どれも、子供たちが自分で考えて作ったおもしろい作品ですよ。

 

game-arschool ver1.0(小4男の子)
矢印キーで面をクリアしよう

 

激げきムズワロタwww(小3男の子)
矢印キーで移動して宝石をゲット

 

スクラッチでマリオ風ゲームを作る方法

では、スクラッチを使った簡単マリオ風ゲームの作り方を紹介します。

ここでは、次の要素を取り入れました。

  • 背景を横スクロールさせる
  • プレイヤーを左右に動かす
  • プレイヤーをジャンプさせる
  • コイン・旗を取る
  • CLEARを表示させる

今回は、日本人向けの背景やスプライトが多い【アルスパーク】を使って説明します。

スクラッチと操作はまったく同じなので、スクラッチで作成する場合でも参考にしていただけます。

アルスパーク_小
>>スクラッチをもっと楽しんで学べる!デジタル学童【アルスパーク】

それでは、作り方を解説していきます。

 

横スクロールの作り方|背景を動かそう

まずは、横スクロールを作りましょう。

次のように、「左右の矢印キーを押す」⇒「横スクロールする」という背景を作っていきます。

 

スクロール型のマリオ風ゲームでカギとなるのは、この背景。

横スクロールゲームではキャラクター自身ではなく、背景を動かすことであたかもキャラクターが動いているかのようにみせます。

スクロールのさせ方は、ゲームの雰囲気や難易度によって違います。

  • 横と縦のどちらの方向に動かすか
  • 自動で動かすか、プレイヤーが手動で動かすか
  • スピードはどれくらいにするか、など

今回は、横スクロールでプレイヤーが手動で動かすタイプのものを紹介します。

 

背景画像をスプライトとして使おう

最初に、「背景の画像」を準備しましょう。

通常の背景は、基本的に動きません。

背景をスクロールするためには、背景の画像をスプライトとして登録し、背景画像に動きを加える必要があります。

背景は、左右がつながりやすい画像を準備し、右下の猫マークから、スプライトとしてアップロードします。

スクラッチ マリオ 作り方 (1)

 

アップロードした画像は、左上の「コスチューム」をクリックした後、「矢印マーク」を押して、画面いっぱいの大きさにします。

スクラッチ マリオ 作り方 (2) スクラッチ マリオ 作り方 (3)

 

その後、複製を押し、背景スプライトを二つにします。

スクラッチ マリオ 作り方 (4)

スプライトに背景が2つ追加されました。

スクラッチ マリオ 作り方 (23)

 

 

この2つを動かすことで、横にスクロールする動きを作っていきます。

 

背景スプライトに動きをつけよう

それでは、背景のスプライトに動きを加えていきます。

1つ目の背景スプライトのコード

スクラッチ マリオ 作り方 (24)

スクラッチでは、表示画面の座標が「X座標:-240~240」「Y座標:-180~180」で設定されています。

スクラッチ マリオ 作り方 (26)

そのため、キャラクターを右向きに動かしたいときは、次のようにすれば2つの背景を切れ目なく入れ替えることができます。

  • X座標を-10ずつ動かす
  • 「X座標<-460」になったところで「X座標=460」にする
    (※左向きは、この逆をやる)
スクラッチ マリオ 作り方 (27)

これで、1つ目の背景スプライトのコードは完成です!

 

2つ目の背景スプライトは、キャラクターが右に進んだ先の背景にしたので、「X座標:460、Y座標=0」から始めます。

2つ目の背景スプライトのコード

スクラッチ マリオ 作り方 (25)

2つ目の背景のコードは、最初の座標の位置以外は、1つ目と同じです。

これで、背景スクロールが完成しました!

 

左右に歩かせる方法

次に、アルくんが左右に歩く動きをつけてみましょう。

まずは、歩いているように見せたいので、アルくんのコスチュームを変更しましょう。

スクラッチでは、左上のコスチュームを押すと、いろんなポーズのキャラクターが出てきます。

スクラッチ マリオ 作り方 (7)

今回は、歩いているように見せたいので、2と3だけ使うことにしました。

 

つづいてコードです。

スクラッチ マリオ 作り方 (9)
  • 次のコスチュームにする:歩いているように見える
  • 90度に向ける:右向きに動かしたいとき使用
  • -90度に向ける:右向きに動かしたいとき使用

実際には、画面上を動かず足踏みしているだけですが、背景スクロールにより動いているように見えます。

これで、左右に歩かせることができました。

 

ジャンプさせる方法

次は、キャラクターをジャンプさせてみましょう。

ここでは、一番簡単なジャンプの方法を解説します。

スクラッチ マリオ 作り方 (10)

ジャンプには、「上向き矢印キーが押されたとき」、「y座標を10ずつ変える」「y座標を-10ずつ変える」を使います。

この2つだけだと、一瞬で終わってしまい、動いていないように見えます。

そのため、「10回繰り返す」を使うことで、ジャンプしてるように見せることができます。

スクラッチ マリオ 作り方 (28)

これで、ジャンプが完成しました。

 

アイテム(コイン)を取れるようにしよう

次は、マリオ風ゲームに欠かせないアイテムです。

今回は、アイテムにコインを採用。コインを取ったら、点数が1ずつ増えるようにします。

 

コインのコード

右下の猫マークから、コインの画像をアップロードし、スプライトに加えます。

今回は、コインのスプライトを複製して、3つにしました。

スクラッチ マリオ 作り方 (29)

では、コインのコードを作っていきます。

左上の「音」をクリックした後に、左下の音マークをクリックすると、スクラッチに入っている音一覧が出てきます。

スクラッチ マリオ 作り方 (31)

その中で今回は、「コイン1」という音を選択。

スクラッチ マリオ 作り方 (11)

そうすると、コードの音のところで「コイン1の音を鳴らす」を選ぶことができるようになります。

スクラッチ マリオ 作り方 (32)

これを使って、コインのコードを次のように並べました。

スクラッチ マリオ 作り方 (14)
  • コインを背景と同じように動かす 
    ⇒「右向き矢印キーが押されたとき」「-10歩動かす」(※左向きは反対に動かす)
  • 最初の位置
    ⇒「x座標を-60、y座標を30にする」
  • アルくんに触れたら、コインの音を鳴らして消える
    ⇒「もしアルくんに触れたなら」「コインの音を鳴らす」「隠す」

 

コインの点数を表示

「旗を押したらコインが0になる」、「アルくんがコインを取ったら1ずつ増える」ようにコードを並べます。

コインを取った数を表示するため、まず変数「コイン」を作ります。その後、コインのコードで、「もしアルくんに触れたなら」の下に「コインを1ずつ変える」を並べます。

スクラッチ マリオ 作り方 (34)

アルくんのコードで、「旗が押されたとき」の後に「コインを0にする」を並べます。

スクラッチ マリオ 作り方 (35)

 

他の2つのコインについては、最初の位置だけ変更。それ以外のコードは1つ目のコインと同じ。

スクラッチ マリオ 作り方 (33)

これで、コインを取ったら、左上のコインが1ずつ増えるようになりました!

 

ゴールを設定する方法

次に、旗に触れるとゴールする仕組みを作りましょう。

ここでは、旗のスプライトを画面の端に置き、次のようにコードを並べました。スクラッチ マリオ 作り方 (36)

これで、ゴールの旗もコインと同じように、左右の矢印で背景と一緒に動きます。

 

CLEAR画面を作る方法

次に、コインをすべて取って旗に触れたら、「CLEAR!」と表示されるようにします。

まず、「CLEAR!」を作るため、右下の猫マークから「描く」を選びます。

スクラッチ マリオ 作り方 (20)

そうすると、コスチュームの画面になるので、「CLEAR!」というスプライトを作りました。

スクラッチ マリオ 作り方 (21)

その後、旗のスプライトで、「x座標を210、y座標を-50にする」の下に、次のようにコードを追加。

スクラッチ マリオ 作り方 (19)

この時、メッセージ「CLEAR!」を作成し、コインがすべて取れて旗に触れたら、「CLEAR!」というメッセージを送ります。

 

「CLEAR!」のスプライトでは、次のようにコードを並べます。

スクラッチ マリオ 作り方 (22)

先ほどの、旗のスプライトから送られた「CLEAR!」を受け取り、「CLEAR!」画面を表示し、すべてを止めます。

これですべて完成しました!

 

 

今回は基本的な動きだけで作ってみましたが、さまざまな応用ができます。

  • ゲームオーバーを作る
  • 敵を作る
  • 敵に当たったらライフが減るようにする
  • 別の面を作る、など

この記事を参考にしながら、自分だけのマリオ風ゲームを作って楽しんでみてください!

また、こちらの記事では、簡単シューティングゲームの作り方も詳しく解説しています。
こちらも参考にしてみてください。

スクラッチ シューティングゲーム作り方 (24)
スクラッチで簡単シューティングゲームを作る方法|点数・ライフ・背景スクロールScratch(スクラッチ)のシューティングゲームの作り方について紹介します。スクラッチを使うと簡単シューティングゲームから複雑なものまで、いろいろな作品が作られています。初心者がシューティングゲームを作るポイントをまとめてみました。 基本編と応用編に分けて、シューティングゲームの作り方を詳しく紹介しています。...

他に、便利なブロックの使い方も解説していますので、こちらも参考にしてください。

スクラッチ クローン (13)
スクラッチでクローンを作るには|増やす方法・削除する方法スクラッチで【クローン】ブロックの使い方について紹介します。【クローンされたとき】【自分自身のクローンをつくる】【このクローンを削除する】の3つのブロックについて使い方を詳しく解説していきます。...
スクラッチ 変数  作り方(5)
スクラッチの【変数】の使い方|HPを減らすゲームを紹介スクラッチで「変数」を使う方法を紹介します。変数を使えば、ゲームの中でHPを表示させたり、取ったコインの数を表示させたりできます。今回は、変数を使ったゲームの作り方を紹介しながら解説していきます。...
スクラッチ 乱数(12)
スクラッチの【乱数】でキャラをランダムに動かす方法スクラッチの乱数ブロックは、スクラッチでゲームを作りたい時にとても便利なブロックです。そこで、今回は次の3つの例を紹介します。①サイコロの目がランダムに出現する②キャラをランダムに動かす③雷をランダムに落とす...
スクラッチ メッセージ(9)
スクラッチの【メッセージ】を使う方法|ジャンケンゲームで解説しますスクラッチの「メッセージ」の使い方を紹介します。メッセージを使うと、複数のスプライト(キャラクター)や背景に、合図を送ることができます。そして、その合図をきっかけに、別の複数のスプライトや背景にも命令することができるようになります。...
アルスパーク

オンラインでデジタルを楽しめる、【デジタル学童アルスパーク】をスタートしました!

特徴は大きく2つです。

  1. 楽しく学べるオリジナルプログラミング教材

    Scratchを小学生でも学びやすくしたオリジナル教材が使い放題!レッスン動画や、遊んで学べる作品例がたっぷり入っていて、オリジナルキャラも充実しています。
  2. サークルタイム

    プログラミング教室の先生と、Scratchでキャラを動かしたり、マイクラでマルチプレイをしたり、デジタルの世界で楽しく遊びます。
アルスパークサークルタイム

対象学年は小2~中3で、価格は1,980円/月です。

プログラミング教室の先生がサポートするので、プログラミングやデジタルデバイスに興味をもち始めたお子さんでも気軽に始められます。

今なら、先着100名様で初月50%OFF

デジタルの世界で、安全・安心に思いっきり楽しんでみませんか。


>>【デジタル学童アルスパーク】 詳しくはコチラ