さぁ、スクラッチでナニ作る！？
チュートリアルの元になった作品
racing
今回の目標
- マウスで車を上下に動かしてライバルのトラックをよけながら走る
- コインを集めてニトロをため、ブーストで加速する
- 一定距離を走りきってゴールし、ベストタイムを更新する
スターター作品をリミックスしよう
このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード
#1ステージ: 背景と音量の準備
準備
スプライト「stage」を開く
| スプライトについて |
|---|
| 街なかを舞台にしたレーシングゲームのステージ。 |
実装
が押されたときで旗が押されたら、背景を ( ) にするで街なみの背景に切り替えるんだ。
最後に音量を ( ) %にするで音量を80にそろえておく。これで音の大きさが、どのパソコンでも安定するよ。
#2プレイヤーの車: 車の向きの設定
準備
スプライト「プレイヤーの車」を開く
プレイヤーの車| スプライトについて |
|---|
| マウスの上下操作でよけながら走る、プレイヤーが操作する車。 |
| どんな役割か |
| マウスを上下に動かして車を操作するレーシングゲームを作るよ。対向トラックにぶつからないようによけながら、コインをとってニトロをためてブーストしよう! |
実装
コスチュームを ( ) にするで車のコスチュームにして、回転方法を ( ) にするの回転方法を「左右のみ」にしておくよ。こうすると車が上下逆さまにならないんだ。
( ) 度に向けるで向きを90、つまり右向きにセット。レースだから右を向いてるのが基本ってこと。
#3プレイヤーの車: 車の位置と大きさ
大きさを ( ) %にするで大きさを55にして、x座標を ( ) 、y座標を ( ) にするで画面の左寄り下、座標(-140, -60)にスタート位置を決める。
画像効果をぜんぶなくして、( ) へ移動するで車をいちばん前に出す。ほかのスプライトに隠れないようにするためなんだ。
#4プレイヤーの車: 車の変数を初期化
準備
変数「衝突後の無敵時間」を追加
トラックに衝突したあと、しばらく再衝突しないようにするための残り時間。
変数「ブースト中かどうか」を追加
マウスを押してニトロブースト中かどうかを表すフラグ。
実装
「衝突後の無敵時間」と「ブースト中かどうか」を両方0にセット。ゲーム開始時はどっちもオフの状態からスタートってわけ。
準備ができたら表示するで車を出すよ。これで車の初期設定はひとまず完成だね。
#5審判: 審判の初期設定
準備
スプライト「審判」を開く
審判| スプライトについて |
|---|
| レースの開始合図やベストタイムの表示、ゴール後の演出をおこなうキャラクター。 |
| どんな役割か |
| レースの開始をアナウンスして、カウントダウンしてからレースをスタートさせるキャラクターを作るよ。ゴールしたらベストタイムを表示してくれるんだ。 |
変数「★ゲームの状態」を追加
レースの進行状況をあらわす番号(0:準備中/1:レース中/2:ゴール後)。
実装
旗クリックで審判のコスチュームにして、大きさ60、画面右上あたりの座標(130, 90)に配置。( ) へ移動するでいちばん前に出しておくよ。
最後に「★ゲームの状態」を0にセット。この0が「まだ準備中」を意味する合図だよ。
#6審判: ゲーム変数の初期化
準備
変数「★スピード」を追加
車が前に進む速さ。衝突やブーストで変化する。
変数「★進んだ距離」を追加
レース開始からこれまでに進んだ距離の合計。
変数「★ニトロ」を追加
コインを取ると増える、ブーストに使うためのニトロの量。
変数「★ゴールタイム」を追加
ゴールした瞬間のタイマーの値。ベストタイムとの比較に使う。
変数「■ゴールまでの距離」を追加
レースがゴールになるまでの距離。旗クリック時に一度だけ設定される。
実装
「★スピード」と「★進んだ距離」を0、「★ニトロ」を40からスタート。最初からニトロが少しあるから、序盤でもブーストを試せるんだ。
「■ゴールまでの距離」を1500に決めて、変数 ( ) を表示するで「★進んだ距離」を画面に表示する。
#7審判: スタートの合図
準備
変数「■ベストタイム」を追加
これまでのゴールタイムの最速記録。
実装
「★ニトロ」と「■ベストタイム」を画面に出して審判を表示。そのあと( ) と ( ) 秒言うで操作説明を2つ順番にしゃべるんだ。
説明が終わったら「3」を0.6秒だけ表示する。ここからカウントダウンの始まりだね。
#8審判: カウントダウン開始
準備
メッセージ「レーススタート」を追加
カウントダウンが終わり、レースが始まったことを知らせるメッセージ。
実装
「★ゲームの状態」を1(レース中)に、「★スピード」を4にセットして、( ) を送るで「レーススタート」の合図を全スプライトに送る。
最後に「GO!」を表示してから隠すで審判を隠す。この合図を受けて、車もライバルもコインもいっせいに動き出すんだ。
#9プレイヤーの車: マウス追従の動き
準備
スプライト「プレイヤーの車」を開く
実装
( ) を受け取ったときで合図を受けたらタイマーをリセットして、ずっとでずっと処理を続けるんだ。
ループの中では、マウスのy座標と車のy座標の差の0.25倍だけy座標を ( ) ずつ変えるで近づける。上にはみ出しそうになったら押し戻して、画面の外へ飛び出さないようにするよ。
#10プレイヤーの車: 下のはみ出しを防ぐ
車のy座標が-120より下になったら、y座標を ( ) にするで-120に戻す。上と下の両方をおさえて、車が走れるレーンの範囲がきっちり決まるんだ。
#11プレイヤーの車: ブーストの入力判定
もし ( ) ならでなければで「マウスが押されている」かつ「★ニトロが0より多い」かを判定する。両方そろったときだけブースト状態に入るんだ。
ブーストに入った最初のフレームだけ「ブースト中かどうか」を1にして、加速音を1回だけ鳴らす。フラグ管理で音の連打を防いでるんだけど、もしこの「最初の1フレームだけ」っていう判定をしなかったら、マウスを押してるあいだじゅう毎フレーム加速音が鳴りっぱなしでうるさくなってしまう。
#12プレイヤーの車: ブーストの加速
( ) を ( ) ずつ変えるで、9といまのスピードの差を6で割った分だけスピードを足す。上限の9に近づくほど増える量が減って、自然に頭打ちになるよ。
#13プレイヤーの車: ニトロ消費と前進
「★ニトロ」を1.2ずつ減らして、0より下がったら0で止める。ニトロが尽きたらブーストはおしまいだよ。
さらにブースト中は車の位置を少し前へ押し出して、加速してる感じを出す。マウスを離したら「ブースト中かどうか」を0に戻して、通常モードへ切り替えるんだ。
#14プレイヤーの車: 通常時の速度戻し
( ) を ( ) ずつ変えるで、4といまのスピードの差を8で割った分だけ足す。ブーストの9より低い4を目標にするから、ゆっくり減速して巡航スピードに落ち着くんだ。
車の位置もほぼ定位置の-140あたりへゆっくり引き戻す。ブーストのときより割る数が大きいぶん、動きがおだやかになるよ。
#15プレイヤーの車: 距離をためる
( ) を ( ) ずつ変えるで「★進んだ距離」にスピードの半分を足す。速く走るほど距離の増えかたも速くなって、ゴールがぐんぐん近づくんだ。
#16対向トラック: ライバルの向き設定
準備
スプライト「対向トラック」を開く
対向トラック| スプライトについて |
|---|
| プレイヤーの車に向かって走ってくる障害物のトラック。クローンで次々に出現する。 |
| どんな役割か |
| 反対車線から走ってくるトラックを作るよ。3種類の見た目をランダムに切り替えて、クローンでどんどん出現させるんだ。 |
実装
旗クリックでトラックのコスチュームにして、回転方法を ( ) にするを「左右のみ」に。( ) 度に向けるで向きを-90にして、車と逆の左向きにするんだ。
対向車だから左を向いて走ってくる、ってのを向きで表現してるんだよ。
#17対向トラック: ライバルの初期配置
準備
変数「トラックの種類」を追加
出現したトラックの見た目の種類をあらわす1〜3の値。
実装
大きさを25にして、画面右の外(260, -60)に配置。「トラックの種類」をいったん1にしておくよ。
最後に隠すで本体を隠す。実際に走るのはこのあと作るクローンのほうだから、本体は見えなくていいんだ。
#18対向トラック: トラックを次々出す
( ) を受け取ったときで「レーススタート」を受けたら、( ) まで繰り返すで「★ゲームの状態」が2(ゴール)になるまでループ。
ループの中では0.5〜1.2秒のランダムな間をあけて、( ) のクローンを作るで自分のクローンを作る。間隔がランダムだから、トラックの出るタイミングが読めなくなるんだ。
#19対向トラック: クローンの見た目選び
クローンされたときでクローンが動き出したら、「トラックの種類」を1〜3のランダムな数にセットするんだ。
その数が1ならコスチュームを ( ) にするで1種類めのトラックの見た目にする。種類ごとに見た目を変えて、3つのトラックが混ざって出てくる仕組み。
#20対向トラック: 2種類めの判定
もし ( ) ならで「トラックの種類」が2かどうかをチェックする。合っていれば、次のステップで2種類めの見た目に切り替えるんだ。
#21対向トラック: 2種類めの見た目
コスチュームを ( ) にするで見た目を切り替えるだけ。さっきの判定とセットで、2番のトラックが完成だね。
#22対向トラック: 3種類めの見た目
「トラックの種類」が3ならコスチュームを ( ) にするで3種類めのコスチュームに切り替える。これで1〜3のどれが出ても、ちゃんと見た目が変わる仕組みがそろったってわけ。
#23対向トラック: 出現位置をばらす
x座標を ( ) 、y座標を ( ) にするで、x座標は260(画面右の外)、y座標はランダムなレーンの高さに配置する。出るたびに縦位置が変わるから、よけ方も毎回ちがってくるんだ。
位置が決まったら表示するで表示。ここでようやくトラックが画面に見えるようになる。
#24対向トラック: トラックを左へ流す
( ) まで繰り返すで画面左のx座標-250より外に出るまで、x座標を ( ) ずつ変えるで左へ動かし続ける。左端まで流れたらこのクローンを削除するでクローンを消すよ。
動かす量は「★スピード」の2倍。スピードが上がるほどトラックも速く流れて、迫ってくる迫力が増すんだ。
#25プレイヤーの車: 無敵の点滅演出
準備
スプライト「プレイヤーの車」を開く
実装
もし ( ) ならでなければで「衝突後の無敵時間」が残ってるかを見て、残ってれば1ずつ減らしながら( ) の効果を ( ) にするの「幽霊」の効果を50と0で交互に切り替える。これで車がチカチカ点滅するよ。
普通なら無敵中は透明度をずっと同じにするけど、この作品はカウントダウンの数を2で割った余りで50か0を出し分けてる。余りが0と1で交互に入れ替わるから、コードひとつで点滅が作れちゃうんだ。
#26プレイヤーの車: クラッシュの処理
衝突音を鳴らして「★スピード」を1までガクッと落とす。せっかく上げた速度が台無しになるから、トラックをよける緊張感が出るんだ。
同時に「衝突後の無敵時間」を45にセットするよ。しばらく連続でぶつからないように、無敵の点滅タイムが始まる。
#27プレイヤーの車: ゴール判定
準備
メッセージ「ゴール」を追加
車がゴールに到達したときに送られるメッセージ。
実装
もし ( ) ならで「★進んだ距離」が「■ゴールまでの距離」を超えたら、そのときのタイマーの値を「★ゴールタイム」に記録して「★ゲームの状態」を2にするんだ。
そして( ) を送るで「ゴール」の合図を送り、 でこのスクリプトを止める。あとの表彰は審判にバトンタッチだね。
#28審判: ゴールの演出
準備
スプライト「審判」を開く
実装
( ) を受け取ったときで合図を受けたら歓声を鳴らして、審判を画面中央に出して表示するんだ。
#29審判: ベスト更新の判定
もし ( ) ならでなければで「■ベストタイムがまだ0(未記録)」か「今回のタイムがベストより速い」かを調べる。どちらかが当てはまれば新記録ってことなんだ。
初回はベストタイムが0だから、その一発めもちゃんと記録として扱えるように0のチェックを入れてるのがミソだね。
#30審判: 新記録を保存
( ) を ( ) にするで今回のタイムを保存するんだけど、10倍して四捨五入してから10で割ってる。こうすると小数第1位までのきれいな数字にそろうんだ。
そのあと「ゴール! ベストタイムこうしん!」とベストタイムをつなげてしゃべる。おめでとうの瞬間だね。
#31審判: 記録更新ならず
( ) と ( ) 秒言うで「ゴール! いまのベストは」とベストタイムをつなげて表示する。次こそ更新をねらいたくなるんだ。
#32審判: もう一度への誘い
( ) と言うで「みどりのはたで もういちどはしろう!」と出したままにする。旗をまた押せば、さっきの初期化から仕切り直しってわけ。
#33コイン: コインの初期設定
準備
スプライト「コイン」を開く
コイン| スプライトについて |
|---|
| プレイヤーが触れるとニトロが増えるアイテム。クローンで次々に出現する。 |
| どんな役割か |
| プレイヤーの車がとれるコインを作るよ。クローンでランダムに出現して、車が触れるとニトロがたまるんだ。 |
実装
旗クリックでコインのコスチュームにして、大きさを45、画面右の外(260, -60)に配置するんだ。
コインもトラックと同じで、本体じゃなくてクローンを流していく作り。まずは本体の準備からだね。
#34コイン: コイン本体を隠す
画像効果をぜんぶなくしてから隠すで本体を隠す。効果をリセットしておくのは、あとで取得演出に使う「幽霊」の効果を毎回0から始めたいからだよ。
#35コイン: コインを出し続ける
( ) を受け取ったときで「レーススタート」を受けて、「★ゲームの状態」が2になるまで( ) まで繰り返すでループ。
1〜2秒のランダムな間をあけて自分のクローンを作る。トラックよりゆっくりめの間隔だから、コインはほどよくばらけて出てくるんだ。
#36コイン: コインのクローン配置
クローンされたときで動き出したら、画像効果をリセットして大きさを45にそろえる。x座標を ( ) 、y座標を ( ) にするでx座標260、y座標はランダムなレーンの高さに配置するんだ。
クローンは生まれたとき親の効果を引き継いじゃうことがあるから、ここで効果を0にもどしておくのが安全ってわけ。
#37コイン: コインを表示
表示するで表示するだけ。ここからコインが左へ流れ始める準備がととのったんだ。
#38コイン: コインを流す
( ) まで繰り返すで、画面左に消えるか車に触れるまでのどちらかになるまで、x座標を ( ) ずつ変えるで左へ動かす。動かす量はやっぱり「★スピード」の2倍なんだ。
終了条件が2つあるのがポイント。左まで流れきっても、途中で車がとっても、どっちでもループを抜けられる。
#39コイン: コイン取得
もし ( ) ならで車に触れているかを確かめて、触れていればコインの音を鳴らして「★ニトロ」を20増やす。これでブーストの燃料が回復するんだ。
#40コイン: 取得の演出
まず「★ニトロ」が100を超えたら100で止めて、上限からあふれないようにする。そのあと( ) 回繰り返すを5回まわして、コインを少しずつ大きくしながら「幽霊」の効果を上げていくんだ。
大きくしながら透明にすることで、パッと弾けて消えるような取得エフェクトになる。ひと手間だけど、とれた気持ちよさがぐっと増す。
#41コイン: コインを片付ける
このクローンを削除するでクローンを削除する。クローンはためこむと300個の上限にひっかかるから、使い終わったらこまめに消すのが大事だよ。
#42レーンの線: レーン線の設定
準備
スプライト「レーンの線」を開く
レーンの線| スプライトについて |
|---|
| コースの車線をあらわす線。奥から手前に流れるようにクローンで表示される。 |
| どんな役割か |
| コースの車線を示す線を作るよ。3本の線をクローンで奥から手前に流して、走っている感じを出すんだ。 |
実装
旗クリックで線のコスチュームにして、大きさ25、画面右の外(250, -60)に配置するんだ。
この線を何本も左へ流すことで、道路が動いて見える走行エフェクトになる。地味だけど走ってる感を支える名脇役だね。
#43レーンの線: レーン本体を隠す
準備
変数「線のたて位置」を追加
出現させる線のY座標。3本の線でそれぞれ違う位置に出す。
実装
「線のたて位置」をいったん-60にセットして、隠すで本体を隠す。実際に流れるのはクローンだから、本体は見せないんだ。
#44レーンの線: レーン線を生成
( ) を受け取ったときで「レーススタート」を受けて、「★ゲームの状態」が2になるまで( ) まで繰り返すでループ。
ループの中でまず「線のたて位置」を-100にして、( ) のクローンを作るで1本めのクローンを作る。
#45レーンの線: 3本の線を出す
「線のたて位置」を-60、-20と変えながらクローンを作って、上・中・下の3本の線をそろえる。同じ変数を使い回して、3本ぶんの位置を作り分けてるんだ。
3本出したら0.3秒待つ。この間隔があるおかげで、線がとぎれず一定のリズムで流れていく。
#46レーンの線: レーン線を奥へ
x座標を ( ) 、y座標を ( ) にするでx座標250、y座標は「線のたて位置」に置いて、( ) へ移動するでいちばん後ろへ送る。車やトラックの下に敷くから路面っぽく見えて、表示するで表示するんだ。
#47レーンの線: レーン線を流す
( ) まで繰り返すで画面左に消えるまで、x座標を ( ) ずつ変えるで左へ動かす。動かす量は「★スピード」の2.5倍なんだ。
トラックやコインより速い2.5倍で流すことで、路面が手前へ勢いよく流れて見える。これでレースゲームがぜんぶ完成! マウスで走ってタイムを縮めてみよう。
まとめ
マウス追従とイージングだけで車の挙動に慣性を出せるって発見、けっこう衝撃だったんじゃないかな。SPEED変数1つで全オブジェクトを流す設計は、レース以外のスクロールゲームにもそのまま応用できる考え方。ぜひ自分の作品にも取り入れてみよう。