- スターター作品
- なし
- 今回の完成サンプル
- なし
さぁ、スクラッチでナニ作る！？
動画で見てみよう
[talk]チャンネル登録して応援よろしく！チャンネル登録する[/talk]チュートリアルの元になった作品
[prj-embed prj="1320447658" mini="1" title="プレイしておこう" prj-title="sb3_20260508224958" prj-author="ok-scratch"]今回の[prj-link prj="1320447658" title="sb3_20260508224958" author="ok-scratch"]スクラッチを作る参考作品[/prj-link]です。タイマーを最初の2秒だけ見せてあとはパッと隠す。プレイヤーの体内時計を丸ごと試しにくるゲームデザインがキレッキレ。しかも5秒ぴったりの判定に浮動小数点の誤差をつぶすfloor演算まで仕込まれてて、細部の完成度がマジでヤバい。見せる情報と計算精度を両方コントロールしてゲームを設計してる、この作り方を見ていこう。参考資料：スクラッチプログラミング事例大全集[/prj-embed]今回の目標
スターター作品をリミックスしよう
このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード
#1ゲームの準備
[talk class="m-l-n"]ここまでいろんなゲームを作ってきたけど、今回はタイマーを使った「ぴったり当てゲーム」に挑戦するよ。目標の秒数ちょうどでスペースキーを押す、体内時計との勝負だ。[/talk]準備
スプライト「タイムキーパー」を開く
タイムキーパー| スプライトについて |
|---|
| 指定秒数ちょうどでスペースキーを押すタイミングゲームのメインスプライト。タイマーを計測し、結果を判定する |
| どんな役割か |
| 秒数ぴったりでスペースキーを押すタイミングゲームを作るよ。カウントが始まったら目標の秒数でキーを押せるかチャレンジ！ドンピシャなら特別な演出が飛び出すよ。 |
変数「★目標秒数」を追加
プレイヤーが押すべき目標の秒数。初期値は5秒
変数「★経過タイム」を追加
スペースキーを押した時点のタイマー値（経過秒数）。画面に表示される
実装
まず「★目標秒数」に5をセットして、「★経過タイム」を0にリセット。変数 ( ) を表示するで「★経過タイム」の値を画面に表示しておくんだ。
大きさを ( ) %にするでスプライトのサイズを300%にして、キャラクターをドーンと大きく見せるよ。
#2カウントダウン開始
ゲームのルールをプレイヤーに伝えるところから。( ) と ( )で「★目標秒数」の値と説明文をくっつけて、「5秒ちょうどでスペースキーを押してね。」というメッセージを組み立てるよ。変数の値をセリフに埋め込むから、「★目標秒数」を変えれば文章も自動で変わるんだ。
「よーい、スタート!!」の合図のあと、タイマーをリセットでタイマーをゼロにリセットしてずっとループに突入。ループの中では「★経過タイム」をタイマーの値で毎フレーム更新して、画面上で秒数がリアルタイムにカウントされる仕組みだよ。
#3タイマー隠し
ずっとループの中に2つの条件分岐を追加するよ。1つ目がこのゲームのミソ――タイマーが2秒を超えたら変数 ( ) を隠すで「★経過タイム」の表示をパッと消す。最初の2秒だけタイムを見せて、あとは体内時計で数えさせるのがこのゲームの面白さの秘密で、もし最初からタイムを一切見せなかったら秒数の感覚がつかめずプレイヤーが戸惑ってしまうんだ。
#4キー検出
準備
メッセージ「ゲーム終了」を追加
スペースキーが押されたときにブロードキャストされるメッセージ。結果判定フェーズへ移行する
実装
2つ目はスペースキーの入力チェック。( ) キーが押されたで押されたかを判定して、押された瞬間に( ) を送って待つで「ゲーム終了」メッセージを送るよ。ここから先は別のスクリプトにバトンタッチする流れだ。
[talk]普通タイミングゲームってタイムをずっと表示しっぱなしにしがちだよね。でもそれだと数字を見ながら押すだけの簡単なゲームになっちゃう。この作品では2秒後にタイムを隠すことで、プレイヤーの「体内時計」に頼らせているんだ。見せる情報をコントロールするだけでゲームの面白さがガラッと変わる――これがゲームデザインの面白いところだよ。[/talk]
#5結果判定の開始
[talk class="m-l-n"]スペースキーが押されると「ゲーム終了」メッセージが届いて、ここから結果判定に入るよ。コスチュームを「コスチューム2」に切り替えて「★経過タイム」をもう一度表示し、最終タイムを見せるんだ。[/talk]
ここからが判定のメインロジック。もし ( ) ならでなければで、タイマーが4.7より大きくて5.3より小さいかを調べるよ。目標の5秒から前後0.3秒以内なら「惜しい」以上、外れたら「ずれ」と分ける仕組みだね。
この条件ブロックの中にさらに条件分岐が入る「入れ子構造」になっているのがポイント。次のステップでその中身を組み立てていくよ。
ドンピシャ判定
[talk class="m-l-n"]「惜しい」の範囲の中に、さらに特別な判定を仕込んでいくよ。ここが「ドンピシャ」と「OK」を分けるカギなんだ。[/talk]
( ) の ( )の切り下げを使って、タイマーの値に10をかけた結果を整数にするんだ。これが50と一致するなら、タイマーは5.0秒台ってこと――つまり0.1秒以内の精度でぴったりヒットした証拠だよ。
[talk]コンピュータの中では「5.0秒ちょうど」が実は「5.000000001秒」みたいになっていることがある。「浮動小数点」っていう数の表し方の宿命なんだ。だからこの作品ではタイマー×10の切り下げが50かどうかで判定している。プロのゲーム開発でも、小数を整数に変換してから比べるテクニックは定番だよ。[/talk]
成功の演出1
判定ランクに応じたサウンドとセリフで結果を伝えるよ。ドンピシャなら「Triumph」の勝利音を鳴らして「ドンピシャ!」と表示し、 ですべてを止めるんだ。
成功の演出2
[talk class="m-l-n"]ドンピシャじゃなかった場合はゲームが止まらず次に進むから、「Win」の音で「OK！」の表示になるよ。ドンピシャ判定のあとにすべてを止めることで、OK！はぴったりじゃなかったときだけ出る仕組みだね。[/talk]
ハズレの演出
[talk class="m-l-n"]目標の5秒から大きくずれた場合はこっちのルート。「Meow」のちょっと残念な音が鳴って、何秒ずれたかを教えてくれるんだ。[/talk]
( ) - ( )でタイマーの値から「★目標秒数」を引いてずれ秒数を計算する。( ) と ( )でその結果と「秒ずれちゃった。」をくっつけてセリフにしているよ。計算結果をそのまま文章に組み込むテクニック、覚えておくと便利だね。
おっとバグがあるよ。「終わるまで音を鳴らす」と、その間にタイマーが進んでしまって、次の「タイマー - 目標秒数」の答えが1秒くらいズレちゃう。プレビューではバグったままだから、チェックしてみて。シンプルに「音を鳴らす」ブロックに差し替えるだけで直るバグなんで、直しておいて〜
これで3段階の判定を持つタイミングゲームが完成だ。「目標秒数」の値を変えるだけで難易度も自由自在だし、判定の幅を狭くすればもっとシビアなゲームにもアレンジできるよ。
まとめ
入れ子の条件分岐とfloor演算を組み合わせて、3段階の精度判定を完成させたね！変数モニターを途中で隠すだけでゲームの難しさがガラッと変わる、発見があったんじゃないかな。「★目標秒数」を3秒にしてみたり、判定の幅を狭くしてもっとシビアにしてみたり、アレンジは無限大だよ。
