Scratch

Scratchを使った【簡単アクションゲーム】の作り方|横スクロールしてアイテムを取る方法

アクションゲーム作り方14

この記事では、Scratchを使ったアクションゲーム作り方について紹介します。

キッズプログラミング教室【アルスクール】では、Scratchを小学生向けレッスンに取り入れています。

Scratchでアクションゲームを作るのは、難しいイメージがありますよね。

シンプルなゲームは比較的簡単に作ることができますが、アクションゲームとなるとやはり少し難しくなります。

そこで、難しいアクションゲーム作りのヒントになるような情報をまとめてみました。

横スクロールする方法アイテムを取る方法など、アクションゲームに必要な要素を詳しく紹介しています。

 

Scratchについてはこちらにまとめていますので、詳しく知りたい方は参照してください。

Scratch プログラミング(9)
Scratchはプログラミングを始めるのにおすすめ!簡単なゲームを作ってレビューしてみたScratchは小学生くらいの子供がプログラミングをはじめるのにおすすめの教材です。プログラミングのエッセンスを簡略化し分かりやすくビジュアル化しているため、子どもでも使いやすいのです。そこで、Scratchのおすすめポイントや実際に作品を作ってみた感想を紹介します。...

>> 小学生向け夏休みイベント!Scratchでオリジナルゲームを作ろう

 

Scratchのアクションゲーム作品例

Screenshot of scratch.mit.edu

Scratchのアクションゲームってどんなもの?

アクションゲームとは、一般的にキーボードやボタンを操作することで、連動するキャラクターを動かすゲームのことです。

操作するキャラクター自体ではなく、後ろの背景が動かすことで、手前にあるキャラクターが動いているように見せるものもあります。

以下の解説記事では、背景をスクロールさせるタイプの、横スクロールアクションゲームを作るために必要となるScratchプログラミングについてお伝えします。

 

Scratchのアクションゲームの作品例|横スクロールゲーム

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

Scratchでおなじみのネコが主人公のアクションゲームです。

横スクロールアクションの作品で、シンプルながら楽しく遊べるようになっています。

>> 初代マリオ

おなじみのマリオが主人公の横スクロール型アクションゲームです。

名作ゲーム「スーパーマリオブラザーズ」の世界観と動きが非常によく再現されています。

 

著作権について

今回紹介した【初代マリオ】は任天堂のマリオをベースに作られています。

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

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

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

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

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

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

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

>> 小学生向け夏休みイベント!Scratchでオリジナルゲームを作ろう

 

Scratchのアクションゲームの作り方

では、Scratchを使った簡単なアクションゲームの作り方を紹介します。

ここでは、アクションゲームとして、次の要素を取り入れました。

  • 背景を横スクロールさせる
  • プレイヤーを左右に動かす
  • プレイヤーをジャンプさせる
  • アイテムを取る
  • CLEAR、GAME OVERを表示させる

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

 

背景を作ろう

まずは背景を作りましょう。

スクロール型のアクションゲームでカギとなるのは、この背景です。

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

背景を横と縦のどちらの方向に動かすか、また、自動で動かすか、プレイヤーが手動で動かすか、スピードはどれくらいにするかなどによって、ゲームの雰囲気や難易度が決まります。

以下の手順に沿って、背景の作り方をマスターしましょう。

 

背景の画像を準備

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

右下の背景画面部分の「背景を選ぶ」からお好みの背景を選択します。

ここではScratchに始めから入っている「Blue Sky」の背景を用います。

右側の画面に背景がセットされました。

これで背景の設定は完了です。

 

横スクロールのための背景スプライトを用意しよう

設定した背景は基本的に動きません。

アクションゲームの場合、広い世界を動き回らせたいところです。

そこで、キャラクターの代わりに背景を動かすことで広い世界を演出する「スクロール」の出番になります。

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

まず、「Blue Sky」の背景を画像ファイルとして保存します。

背景が表示されているところで右クリックをし、「名前を付けて画像を保存」をおします。

そうすると、パソコンに背景が画像ファイルとして保存されます。

 

次にこの画像をアップロードし、スプライトとして2つ追加します。

右下のスプライトのボタンを押すと、いちばん上に「スプライトをアップロード」が出てくるのでここを押して、さきほど保存した背景の画像を2回アップロードします。

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

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

2つ目の背景スプライトはキャラクターが右に進んだ先の背景になります。

 

横スクロールの作り方|変数を使おう

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

今回は共通の変数「すすんだきょり」というものを作って動かしていきます。

変数を作る、を選択して新しい変数を作成します。

変数名に「すすんだきょり」と入力して、OKを押してください。

今回はこの「すすんだきょり」を使ってスプライトを動かします。

次に、ネコのスプライトを選択し、変数「すすんだきょり」を追加し、右矢印キーを押すと増えるようにします。

緑の旗を押すと一番最初のスタート位置にスプライトを移動するように設定します。

アクションゲーム作り方28

次に、イベントから「右の矢印を押したとき」を選択し、変数「すすんだきょり」が増えるように設定します。

まずは10で設定してみます。

アクションゲーム作り方24

背景の各スプライトは「すすんだきょり」と同じだけ逆方向に移動するようにします。

まずは1つめの背景スプライトを選択し、緑の旗を押すと変数「すすんだきょり」の値にあわせてx座標(左右の位置)が変わるように設定します。

アクションゲーム作り方31

次に2つめの背景スプライトにも同じく変数「すすんだきょり」の値にあわせてx座標の位置が変わるような設定をします。

アクションゲーム作り方29

これで完成です。

右矢印キーを押すとネコが右に動いているようにみえます。

★これはとても簡易的なスクロールの方法なので、もっと長い距離の横スクロールをさせたいときなどはほかの方法でやってみてください!

 

左右に歩かせよう

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

今は、右向きに歩くことができていますが、反対方向には歩けません。

左向き矢印を押すと左に向かって歩く動きを作ってみましょう。

左向き矢印キーが押されたとき、の動きを追加します。

ネコは歩く方向を向いていてほしいので、右向き矢印キーが押されたときは「回転は左右のみにする」「90度に向ける」、左向き矢印キーが押されたときは「回転は左右のみにする」「-90度に向ける」、を追加してみましょう。

これでネコが左右に歩けるようになりました。

アクションゲーム作り方30

 

ジャンプさせよう

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

まず、上向き矢印を押されたに「y座標を100ずつ変える」でジャンプさせます。

次に、重力を考慮し、ジャンプした直後に下方向に降下させます。

ここでは、「y座標を-10ずつ変える」を10回繰り返しました。

アクションゲーム作り方32

これで完成です。

ジャンプ力と落下速度をいろいろ変えて試してみましょう。

現実の重力には加速度があるため、よりジャンプらしくするには物理法則を調べて工夫してみてください。

 

アイテムを取ってみよう

では、アクションゲームに欠かせないアイテムを作ってみましょう。

スプライトから好きなアイテムを選択してください。

ここでは、スターのスプライトを用いました。

ネコの頭上に浮かせ、ジャンプしてスターに触れるとネコの色が変わる仕組みです。

ここでは、アイテムを取ったことが分かるように変数「スター」を0に設定し、取ると1になるようにしました。

このとき、ネコに触れたら「隠す」で消すようにします。

また、背景同様、「すすんだきょり」によって位置が変わるようにします。

アクションゲーム作り方33 アクションゲーム作り方34

↑スターを取って色が変わったところ

 

ゴールの設定をしよう

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

ここでは、旗のスプライトを画面の端に置きました。

アイテムと同様に「すすんだきょり」によって位置が変わるようにします。

ネコが旗に触れると、旗が消えてゴールです。

アクションゲーム作り方35

さらにゴールした感じを演出するため、CLEAR画面のスプライトを作ります。

右下のスプライトから「描く」を選択し、文字入力をして「CLEAR!」と書きます。

「CLEAR!」を用意したので、「GAME OVER!」も作っておきます。

それぞれどういう条件で出すかは、次で説明します。

 

ゲームクリア・ゲームオーバーを作ろう

今回は、スターを取ってゴールするとゲームクリア、スターを取らずにゴールするとゲームオーバーとしました。

旗のスプライトは、ネコが旗に触れたときのスターの値が0より大きいときは「CLEAR」のメッセージを、0のときは「Game Over」のメッセージを送るようにします。

アクションゲーム作り方36

そしてCLEAT!のスプライトは「CLEAR」のメッセージが送られたら表示し、GameOverのスプライトは「GameOver」のメッセージが送られたら表示するように設定します。

アクションゲーム作り方37 アクションゲーム作り方27

これでアクションゲームの完成です。

実際にプレイすると、無事「CLEAR」または「GAME OVER」が表示されました。

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

この記事を参考に、自分だけのアクションゲームを作って楽しんでみてください!

>> 小学生向け夏休みイベント!Scratchでオリジナルゲームを作ろう

 

プログラミング教室でScratchを学ぼう

キッズプログラミング教室【アルスクール】では、主に小学生向けにScratchレッスンを行っています。

興味や好奇心を大切にしたレッスンを行っていて、子ども達は楽しくScratchで作品をつくっています。

アルスクールキッズの作品|アクションゲームを紹介

アルスクールに通う子が作ったアクションゲームを紹介します。

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

 

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

>>中のコードを見てみる

 

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

>>中のコードを見てみる

 

マリオ風ふうジャンプゲーム(小5女の子)
コインをゲットしておうちに帰ろう

>>中のコードを見てみる

 

他にも、アルスクールに通う子達は、シューティングゲーム・対戦ゲーム・クリスマスカードなど、自分の好きな作品をたくさん作っていますよ。
>>アルスクールキッズの作品集はこちら

アルスクールのScratchレッスンの特徴他のプログラミング教室とのちがいについては、こちらの記事で詳しく紹介しています。

Scratch プログラミング教室(14)
Scratchを学べるプログラミング教室の選び方|子供の学びと成長のちがいScratchは、プログラミング教室や小学校で、教材としてよく使われています。プログラミングが必修化された影響もあって、Scratchを学べるプログラミング教室は増えていく一方です。今回は、Scratchが子供の教材として優れている理由と、プログラミング教室によるちがいについて、詳しく解説していきます。...

 

オンラインでもScratchを学べる

アルスクールでは5月からオンラインレッスンを始めました

オンラインレッスンでは、Scratchを使っています。

オンラインレッスンの内容・子ども達の反応については、こちらの記事をご覧ください。

オンラインレッスン小1小2 (15)
小1・小2のオンラインレッスンを始めました!Scratchで楽しく学ぼう5月よりオンラインレッスンを開講しました! 小1・小2の新規の子は、アルスクールの在校生とは別の日程でレッスンをしています。そして、少人数制で、一人ひとりのペースに合わせたレッスンを行っています。レッスン内容・子ども達の反応について詳しく紹介します。...
オンラインレッスン小3~小6(24)
小3・小4・小5・小6向けオンラインレッスン|創造性を伸ばすプログラミング授業小3・小4・小5・小6向けに、オンラインのプログラミングレッスンを始めました。レベルは様々ですが、少人数制で、一人ひとりのペースに合わせたレッスンを行っています。つくった作品をみんなの前で発表するなどして、お互いに良い刺激を受けられるレッスンをしています。...

そして、オンラインレッスンの前に、新規のお子様には、無料体験会に参加していただいています。

無料オンライン体験会の様子はこちらをご覧ください。

オンライン体験会 (1)
【オンライン体験会】を開催!体験会の内容と子供たちの反応新型コロナウイルスの影響で、アルスクールもレッスンのオンライン化への切り替えを進めることにしました。そこで、先行してお問い合わせいただいた方にオンラインでの体験会を開催しました。今回は、体験会の内容や参加してくれた子ども達の反応について詳しく紹介します。...

また、6月より自由が丘校も再開しており、教室での無料体験会も開催中です。

入会金無料キャンペーン20208月(2)

キッズプログラミング教室【アルスクール】では、5月よりオンライン校を開講しました。

それにあたって、入会金無料キャンペーンを行います!

オンライン校・自由が丘校のどちらでも、通常10,000円の入会金が無料になります。

入会金無料キャンペーンは8月末までの期間限定です。

この機会に、無料体験会に参加して、アルスクールの学びを体験してみませんか。

オンライン校・自由が丘校ともに、無料体験会を随時開催中です。

詳しくはこちらをご覧ください。

入会金無料キャンペーンの詳細はこちら