スクラッチで棒人間ゲーム(スパイダーマン)の作り方

未分類

今回つくるゲーム

難易度4 out of 5 stars

今回はスクラッチで棒人間のスパイダーマン風ゲームを作っていきます。天井のフックにひもをかけて、振り子の動きで飛び移りながらゴールを目指します。どのように、フックに向けてひもを出すのか、振り子の動きからジャンプするのか、次のフックがどうやって出現するのかなど、ゲーム作りの高度な要素がたくさんつまっています。是非マスターして、ゲーム作りに活かしてください。

まずは実際にゲームをプレイしてみてください。マウスをクリックするとフックにぶらさがり、マウスを離すとジャンプします。タイミングよくジャンプしてゴールを目指してください。

youtube解説

こちらの動画ではわかりやすく太鼓の達人の作り方をゼロから解説していますのであわせてチェックしてください。チャンネル登録もよろしくお願いします!

スクラッチでスパイダーマンゲームの作り方

はじめに

まず、以下をリミックスしてください

棒人間ゲーム(スパイダーマン)_素材

こちらにはゲームを作るのに必要な素材が揃っています。

スクラッチで棒人間ゲーム(スパイダーマン)の作り方

プレイやが支点にぶら下がる

振り子の動きの作り方

まずは振り子の動きの作り方から学んでいきます。以下の記事で詳細を解説していますのでまずはそちらから学習してください。ここで作った振り子のプログラムをベースにゲームを作っていきます

プレイヤーが支点にぶら下がる

まずはプレイヤーが上から重力で落ちてきてマウスを押した時点で支点に向かってひもを伸ばすことを考えます。

上記の記事ではひもの長さ=200で一定の振り子でしたが、今回のゲームではプレイヤーがいる位置から支点に向かってひもが伸びるのでひもの長さは一定にはなりません。考え方としては以下となります。

スクラッチで棒人間ゲーム(スパイダーマン)の作り方

このことをふまえて、コードを書いていきます。まずは、支点のスプライトに以下のコードを書きます。支点の場所を固定するだけです。

スクラッチで棒人間ゲーム(スパイダーマン)の作り方

続いて、プレイヤーのコードに以下を書きます。振り子のコードに、重力の考え方と、マウスがクリックされた時にひもの長さが決まる動きが追加されただけです。

スクラッチで棒人間ゲーム(スパイダーマン)の作り方
スクラッチで棒人間ゲーム(スパイダーマン)の作り方

次に、ひものコードです、これも基本的に振り子と同様ですが、ぶら下がっている時(ぶら下がり中=1)だけひもが伸びるようにします。

スクラッチで棒人間ゲーム(スパイダーマン)の作り方

これで、プレイヤーが支点にぶら下がれるようになったはずです。
実際にプレイして、いろいろなタイミングでクリックしてぶら下がれるか確認しましょう。

プレイヤーが飛んでいく

次にマウスのクリックを放すとプレイヤーが飛んでいくようにします。考え方は以下通りです。上向きの勢い(飛び出す時の勢い)は三角関数を使って求めます。

スクラッチで棒人間ゲーム(スパイダーマン)の作り方

先ほど、プレイヤーのスプライトに書いたコードに以下のように追加していきます。

スクラッチで棒人間ゲーム(スパイダーマン)の作り方
スクラッチで棒人間ゲーム(スパイダーマン)の作り方

では、実際にプレイヤーを飛ばしてみましょう。

以下のように飛べば成功です。

フックにひもをかけて飛び移る

ここまでは1つの支点に対してひもを伸ばしてジャンプさせてきましたが、作りたいゲームはジャンプしたら次のフックが現れて飛び移っていくというものです。

フックを出現させる

まずはフックを出現させるところからスタートします。今回は右にずっとスクロールしていくゲームになりますが、スクロールゲーム定番のマップチップ を作っていきます。マップチップ を使ったことのない人はまずは以下から学習してください。

では、フックのスプライトに移動して以下のようにコードを書きます。

スクラッチで棒人間ゲーム(スパイダーマン)の作り方

今回は3行×50列のマップチップ となっており、マップの内容はリストから確認できます。

1のところがフックとなり、ひとつひとつのチップの横の間隔は180、縦の間隔は30に設定しています。1行目50列目に2と書いていますが、ここがゴールです。

スクラッチで棒人間ゲーム(スパイダーマン)の作り方
スクラッチで棒人間ゲーム(スパイダーマン)の作り方

実際に🏴を押すとフックが現れるのがわかると思います。

スクラッチで棒人間ゲーム(スパイダーマン)の作り方

フックにひもをかける(プレイヤーのコード)

次にフックにひもをかけていきますが、そのためには支点フックの位置に移動する必要があります。

ぶらさがるフックの座標に支点がどんどん移り変わっていくイメージです。ここが今回のゲーム作りの最難関です。

さっきまでは、右向きの勢いずつプレイヤーが右に動くことで右側に飛んでいきましたが、スクロールゲームでは背景を左に動かすことで右に向いているようにします。さらに今回は少しプレイヤーも常に右に動かすことで、右端で詰まってしまうことを避けます。ここが理解が難しいところです。

スクラッチで棒人間ゲーム(スパイダーマン)の作り方

まずは、プレイヤーのコードから以下のように変更していきます。

スクラッチで棒人間ゲーム(スパイダーマン)の作り方
スクラッチで棒人間ゲーム(スパイダーマン)の作り方

フックにひもをかける(フックのコード)

次にフックのコードを変更していきます。
ひもを出すのメッセージをを受け取った時に、プレイヤーの近くにあるフックに支点を持っていきます。コードを書く前に以下のようなイメージを持ちましょう。

スクラッチで棒人間ゲーム(スパイダーマン)の作り方

上記の通りになるようにコードを書いていきます。先ほど削除したぶら下がり中を1にするひもの長さ決定はこちらに持っていきます。支点x,支点yを常に、フックの座標にすることで位置がずれるのを補正します。

スクラッチで棒人間ゲーム(スパイダーマン)の作り方

フックにひもをかける(支点のコード)

最後に支点のコードです。
支点はつねに支点x、支点yにいくようにします。幽霊の効果を入れているのは、あとで幽霊の効果を100にして支点自体は見えなくするためです。

スクラッチで棒人間ゲーム(スパイダーマン)の作り方

正しく動くか確認

ここまでできたら正しく動くか確認しましょう。以下のように次々と飛び移ることができれば成功です。

スタート・ゲームオーバーとゴール

ここまできたら完成したも同然です。ここからスタートとゲームオーバーとゴールを設定していきます。

ゲーム管理に以下のようにコードを書きます。

スクラッチで棒人間ゲーム(スパイダーマン)の作り方

次にプレイヤーのコードに以下のように追加します。

地面の黒い部分に落ちたらゲームオーバーです。

スクラッチで棒人間ゲーム(スパイダーマン)の作り方

次に、フックのコードを以下のように変更します。コスチューム2のフックに到達するとゴールです。

スクラッチで棒人間ゲーム(スパイダーマン)の作り方

ゴールすると以下のようになります。マウスを離しても落ちません。
※本当のゴールまで到達するのはとても大変なので、マップチップ を変更して、スタートに近いフックをゴールに変えて(2に変えて)試してみましょう。

効果音をつける

最後に効果音をつけていきます。振り子を振る時にシュッ・シュッと音を出すのは少しコツがいります。プレイヤーのコードに以下のように追加します。

スクラッチで棒人間ゲーム(スパイダーマン)の作り方

すべてのコード

これですべてのコードが完成です。
マップチップ をかえて自分だけのコースを作ったり、障害物を作るなどして、自分だけのゲームを作ってみましょう。

すべてのコードは以下から確認できます。
棒人間スパイダーマン