- 1. スクラッチで順次処理を学ぼう!ネコを左右に動かすアニメーションの作り方【初心者向け】
- 2. スクラッチでネコが正方形に動くアニメーションの作り方|座標と向きの使い方
- 3. スクラッチでネコが左右にスケートするアニメーションの作り方|繰り返しの使い方
- 4. スクラッチでネコが走るアニメーションの作り方|コスチューム切り替えの使い方
- 5. スクラッチでネコがランダムな速さで走るアニメーションの作り方|乱数の使い方
- 6. スクラッチでロケットを矢印キーで動かす作り方|条件分岐の使い方
- 7. スクラッチで重力ゲームの作り方|もし〜なら・でなければブロック入門
- 8. スクラッチでスプライト同士がメッセージを送り合う作り方|みんなであいさつ
- 9. スクラッチでキャラが順番に集合するアニメの作り方|みんな集合
- 10. スクラッチで分裂するネコのアートの作り方【クローン入門】
- 11. スクラッチでネコの分身を飛ばす作り方【クローン入門】
- 12. スクラッチで音付きアニメーション!2台の車が走り抜ける作り方
- 13. スクラッチでペン拡張機能のスタンプを使った星のランダムアートの作り方
- 14. スクラッチのペン拡張機能を使って正三角形を描く方法と外角の仕組みを解説
- 15. スクラッチで足し算プログラムの作り方【変数と聞いて待つブロック入門】
- 16. スクラッチでサイコロシミュレーターの作り方│乱数とリストを使いこなそう
- 17. スクラッチでリスト操作11種類を完全マスターする作り方|宇宙船クルー名簿チュートリアル
- 18. スクラッチでペンとブロック定義を使った三角形・四角形の描き方
- 19. スクラッチでリンゴキャッチゲームの作り方!矢印キーとタイマーのアクションゲーム
- 20. スクラッチでネコ追跡ゲームの作り方|マウスで逃げ切る30秒サバイバル
- 21. スクラッチで攻撃シューティングゲームの作り方|クローンと確率でバトル設計
- 22. スクラッチで5秒ぴったり当てゲームの作り方|タイマーと入れ子条件分岐を学ぼう
- 23. スクラッチでカスタムブロック(関数)の作り方|足し算・引き算ツール入門
- 24. スクラッチで宇宙シューティングゲームの作り方|スコアで激化する難易度システム
- 25. スクラッチで全方向シューティングゲームを作ろう!魔法少女とスライム迎撃バトル
- 26. スクラッチで潜水艦シューティングゲームの作り方|魚雷を撃って敵を倒そう
- 27. スクラッチで鳥避けフライトゲームの作り方|カラスを避けて荷物を集めよう
- 28. スクラッチでキャッチゲームの作り方!雪の結晶を集めて氷柱を避けるアクションを作ろう (いまここ)
さぁ、スクラッチでナニ作る!?
動画で見てみよう
チュートリアルの元になった作品
今回の目標
スターター作品をリミックスしよう
このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード
#1ゲームの準備
準備
スプライト「プレイヤー」を開く
| スプライトについて |
|---|
| キーボードで左右に移動して結晶をキャッチするプレイヤーキャラクター。氷柱に当たると点滅してダメージを受ける |
| どんな役割か |
| 矢印キー(またはA/Dキー)で左右に動くプレイヤーを作るよ!結晶をキャッチするとスコアが増えて、氷柱に当たると残り時間が減るから気をつけてね。タイムアップ時はスコアによって違う演出が流れるよ! |
変数「★残り時間」を追加
ゲームの制限時間を管理するグローバル変数。毎秒1ずつ減少し、0になるとゲーム終了
変数「★スコア」を追加
プレイヤーがキャッチした結晶の得点を累計するグローバル変数
実装
まずはゲームの土台づくりから。 が押されたときで旗が押されたら、ゲームに必要な数字を最初の状態に戻すんだ。
( ) を ( ) にするを使って、制限時間の「★残り時間」を50に、点数の「★スコア」を0にセット。最初にリセットしておかないと、前に遊んだときの数字が残ったまま始まっちゃうんだよ。
そのあと「★残り時間」と「★スコア」を画面に表示して、プレイヤーがいつでも残りをチェックできるようにしておく、親切な作りだね。
#2プレイヤーの定位置
x座標を ( ) 、y座標を ( ) にするでプレイヤーを画面下のまん中、x座標0・y座標-120に置くよ。サイズは50%にして、ちょっと小さめにしておくのがコツなんだ。
最後に( ) と ( ) 秒言うで「結晶をキャッチ!」って1秒しゃべらせる。これでプレイヤーに何をすればいいか一目で伝わる、親切な作りみたいな感じ。
#3左右に動かす
準備
変数「★横方向入力」を追加
キーボードの入力から計算した横方向の入力値(右=1、左=-1、なし=0)
実装
ずっとの中で、x座標を「20 × ★横方向入力」ずつ変え続けるだけ。「★横方向入力」には右なら1、左なら-1、どっちも押してなければ0が入る仕組みになってるんだ。
入力の係を別のスプライトに任せて、プレイヤーは数字を掛けるだけにしてある。だから動く側のコードはたった1行でスッキリ。この値の正体は次で作るよ。
#4入力を数字にする
準備
スプライト「コントローラー」を開く
| スプライトについて |
|---|
| 非表示で動作するキーボード入力管理スプライト。矢印キーとA/Dキーの押下状態をINPUT_X変数に変換してプレイヤーの移動を制御する |
| どんな役割か |
| キーボードの入力を管理する見えないコントローラーを作るよ!右キー/Dキーで1、左キー/Aキーで-1、何も押さなければ0をINPUT_Xにセットして、プレイヤーの動きに反映するんだ。 |
実装
隠すで姿を消してから、ずっとの中でずっと計算し続けるよ。中身は「右向き矢印が押された」から「左向き矢印が押された」を引き算してるんだ。
右だけ押してれば 1 - 0 で1、左だけなら 0 - 1 で-1、両方押してなければ 0 - 0 で0。「押された」っていう判定が、計算の中では1か0の数字として扱われるのがミソだよ。
#5A・Dキーにも対応
もし ( ) ならで「★横方向入力」が0かどうかをチェック。0っていうのは矢印キーが何も押されてない状態だから、そのときだけDキーとAキーの引き算に切り替えるんだ。
矢印キーを優先して、空いてたらA・Dキーを見にいくっていう二段構え。これで右手でも左手でも遊べる、気の利いた操作になるよ。
#6BGMを流す
準備
スプライト「プレイヤー」を開く
実装
プレイヤーにもう一本ループを足して、音量を ( ) %にするで音量を20%に下げてから、終わるまで ( ) の音を鳴らすで「Xylo2」を終わるまで鳴らすよ。最後まで待ってからまた鳴らすから、曲がキレイにループするんだ。
#7時間のカウントダウン
別の が押されたときからもう一本ループを動かして、( ) 秒待つで1秒待つたびに「★残り時間」を-1ずつ減らしていくんだ。
1秒に1ずつ減るから、50からスタートしたこのゲームはだいたい50秒勝負ってこと。さっきの移動ループとは別に動く、並行作業みたいな感じだね。
#8時間切れの判定
もし ( ) ならで「★残り時間」が1より小さくなったら、まず でこのスプライトの他のスクリプトだけを止めるんだ。移動やカウントダウンをここでストップさせる感じ。
「すべてを止める」じゃなく「他のスクリプトだけ止める」のがポイントなんだ。こうしておけば、このループ自体は生き残るから、このあと結果に応じた音を鳴らす処理を続けられるってわけ。
そのあと音量を50%にして、もし ( ) ならでなければで「★スコア」が100未満かどうかで結果を2つに分ける準備をするよ。
#9結果で音を変える
準備
スプライト「結晶1」を開く
実装
「★スコア」が100未満ならちょっと控えめな「Win」の音、100以上なら盛り上がる「Triumph」の音を終わるまで ( ) の音を鳴らすで最後まで鳴らすんだ。終わるまで待つから、音がぶつ切りにならない自然な流れ。
音を鳴らし終わってから、最後に で「すべてを止める」を実行。他のスクリプトを先に止めておいたおかげで、この結果音だけはちゃんと最後まで流れるって流れだね。
#10結晶を降らせる
準備
スプライト「結晶1」を開く
| スプライトについて |
|---|
| 上から落下してくる青い結晶。プレイヤーがキャッチすると1点獲得し、ランダムな位置に再配置される |
| どんな役割か |
| 上からランダムに落ちてくる結晶を作るよ!プレイヤーに当たったら効果音が鳴ってスコアが1点増えるんだ。端に届いたらまたランダムな位置から落ちてくるよ。 |
実装
旗が押されたら1秒待って、サイズを10%に縮めてからx座標を ( ) 、y座標を ( ) にするで画面の上のほうに置くよ。x座標は( ) から ( ) までの乱数で-200から200までのランダム、y座標は140で固定。
出てくる横の位置が毎回バラバラになるから、どこに落ちてくるか分からないドキドキ感が出るんだ。ずっとの中で少しずつ回転させると、結晶がキラキラ落ちてくる雰囲気も出ていい感じだね。
#11キャッチで加点
y座標を ( ) ずつ変えるでy座標を-7ずつ変えて、結晶をまっすぐ下に落とすよ。落ちながら( ) に触れたでプレイヤーに触れたかどうかを毎フレーム確認してるんだ。
触れた瞬間に「Collect」の音を鳴らして「★スコア」を1増やす。そのあとすぐ上のランダムな位置に戻すから、キャッチするたびに次の結晶がまた降ってくるってわけ。
#12取り逃した結晶
準備
スプライト「結晶2」を開く
実装
もし ( ) ならで画面の端に触れたかを調べて、触れてたらまた上のランダムな位置に戻すよ。これで取り逃しても結晶が無限に降り続けるんだ。
落ちた結晶が消えてなくならずにグルグル使い回される作り。新しく作り直さず同じ結晶を再利用するから、動作も軽くてスマートだよね。
#13レアな結晶
準備
スプライト「結晶2」を開く
| スプライトについて |
|---|
| 上から落下してくる希少な結晶。プレイヤーがキャッチすると5点獲得するが、キャッチ後や端到達後に一定時間消える |
| どんな役割か |
| スコアが5点も入る希少な結晶を作るよ!キャッチすると1秒、端に届くと3秒消えてから再出現するんだ。見かけたら積極的に狙おう! |
実装
流れは結晶1とよく似てるけど、1つ違うのが( ) の効果を ( ) にするで「色」の効果を100にしてること。これで見た目の色がガラッと変わって、普通の結晶とひと目で見分けがつくんだ。
サイズを10%にして、上のランダムな位置からスタートするのは同じ。色を変えるだけでレア感を出すのは、ゲームでよく使う分かりやすい演出だね。
#14揺れて速く落ちる
y座標を ( ) ずつ変えるでy座標を-10ずつ、結晶1の-7より速く落とすよ。さらにx座標を ( ) ずつ変えるに-10から10までの乱数を入れて、左右にフラフラ揺れながら落ちるようにするんだ。
落ちるのが速いうえに横にもブレるから、5点ぶんキャッチするのはなかなか手強い。リスクが高いほどリターンも大きいっていう、ゲームバランスの基本だね。
#15高得点と一時退場
落ちながらプレイヤーに触れたかも( ) に触れたでしっかり見張ってるんだ。
「Magic Spell」の音を鳴らして「★スコア」を5増やしたら、上のランダムな位置に戻すよ。ここまでは結晶1とだいたい同じ流れ。
違うのはそのあとだよ。隠すでいったん姿を消して、( ) 秒待つで1秒待つんだ。キャッチするとしばらく出てこないから、レアな結晶を取れたありがたみが出るんだよね。
#16見逃しと再登場
準備
スプライト「氷柱」を開く
実装
もし ( ) ならで端に触れたら、ランダムな位置に戻してから隠すで姿を消して3秒待つよ。取り逃すと、キャッチしたとき(1秒)より長めにお預けってわけ。
そして最後に表示するでまた表示する。消す処理と表示する処理をセットにしておくことで、結晶2が出たり消えたりを自然に繰り返せるんだ。
#17氷柱の登場
準備
スプライト「氷柱」を開く
| スプライトについて |
|---|
| 上から落下してくる障害物。スコアが高いほど落下速度が上がり、プレイヤーに当たると残り時間を3秒減らす |
| どんな役割か |
| スコアが上がるほど速くなる危険な氷柱を作るよ!プレイヤーに当たるとメッセージを送って残り時間が3秒減るから、うまく避けることが大事だよ。 |
実装
旗が押されたら1秒待って、サイズ30%で上のランダムな位置にセット。ここまでは結晶とだいたい同じ流れだね。
ずっとの中で具体的な処理を書いていく。
#18タメてから落ちる
準備
メッセージ「被弾」を追加
氷柱がプレイヤーに当たった時に送信するダメージ通知メッセージ
実装
氷柱は、いきなり落ちてこないのがニクいところ。出てきた瞬間に、左右にプルプル揺れる「タメ」の動きをするんだ。まずもし ( ) ならでy座標が140かどうかをチェックするよ。140は出てきた直後の一番上の位置だから、今まさに出現したところかを座標で見分けてるんだ。
( ) 回繰り返すの回数に「1から★残り時間までの乱数」を入れて、左右に少し回す動きを繰り返すよ。揺れてる間に「あ、次はあそこに落ちてくる」って予告になるから、避ける余裕が生まれるんだ。
#19落下の挙動
揺れ終わったら( ) 度に向けるで向きをまっすぐ90度に戻すよ。
落下のしかたも一工夫。y座標を ( ) ずつ変えるの値を「-3 - ★スコア」にしてあるから、点を取れば取るほど氷柱がどんどん速く落ちてくる。上手い人ほど忙しくなる、よくできた仕掛けだよ。
#20当たるとダメージ
準備
メッセージ「被弾」を追加
氷柱がプレイヤーに当たった時に送信するダメージ通知メッセージ
実装
( ) に触れたでプレイヤーに触れたら、( ) を送るで「被弾」のメッセージを飛ばすんだ。同時に「Rip」の音を鳴らして、「★残り時間」を3も削る痛い一撃。
「被弾」を送るだけで、プレイヤー側が勝手に反応してくれるのがメッセージの便利なところ。氷柱はぶつかったことを知らせるだけで、見た目の演出はプレイヤーに任せるって役割分担だね。
当たったあとは上のランダムな位置に戻すよ。
#21氷柱の使い回し
もし ( ) ならで端に触れたかのチェックもする。
氷柱が下まで落ちて端に触れたら、結晶と同じように上のランダムな位置に戻すだけ。x座標を ( ) 、y座標を ( ) にするひとつで、当たっても外しても氷柱がずっと降り続ける仕組みが完成するよ。
#22被弾でピカッと光る
準備
スプライト「プレイヤー」を開く
実装
( ) を受け取ったときで「被弾」を受け取ったら、10回くりかえすループの中で( ) の効果を ( ) にするの明るさを100にして、すぐ0に戻す。やってるのは明るさを上げて下げるだけなんだ。
パッと白く光ってすぐ戻る、これを10回でピカピカ点滅して見えるよ。最後に明るさを0に戻しておくのが大事で、これを忘れると白く光ったままになっちゃうから注意だね。
#23歩くアニメ
準備
スプライト「プレイヤー」を開く
実装
ポイントは( ) の ( )の絶対値。「★横方向入力」は右で1・左で-1になるけど、絶対値をとれば右でも左でも1になるから、動いてるか止まってるかだけをスッキリ判定できるんだ。
もし ( ) ならで絶対値が0より大きい、つまり何かキーを押してる間だけ、0.1秒ごとに次のコスチュームにするでコスチュームを切り替えるよ。止まってるときは切り替わらないから、ちゃんと歩いてるときだけ足が動いて見えるってわけ。
#24時間で画面が暗転
準備
スプライト「stage」を開く
| スプライトについて |
|---|
| 残り時間に応じて背景の明るさが変化するステージ。時間切れに近づくほど画面が暗くなり、プレイヤーに緊張感を演出する |
実装
ずっとの中で、( ) の効果を ( ) にするの明るさを「-50 + ★残り時間」に設定し続けるよ。残り時間が50なら明るさ0で普通、時間が減るほどマイナスに振れて画面が暗くなる。
残り時間っていう数字を、そのまま画面の明るさに変換してるのが面白いところ。数字を読まなくても、画面が暗くなってきたら「そろそろヤバい」って体で感じられるって作りだね。
これで結晶キャッチゲームの完成!自分でスピードや点数を変えたり、新しい結晶を足したりして、オリジナルに改造してみるのも楽しいよ。ここまで作れたら、もう自分だけのゲームを作る力は十分ついてるはず。
まとめ
結晶キャッチゲームが完成したね!変数を速度の式に組み込むだけで、得点に連動して自動的に難しくなる仕掛けが作れるって分かった?残り時間を画面の明るさに変換する演出も、数値をそのまま視覚効果につなぐシンプルな発想だったね。学んだ仕組みを活かして、落下アイテムの種類や速度を自分なりにアレンジして、オリジナルキャッチゲームに挑戦してみよう!