- スターター作品
- なし
- 今回の完成サンプル
- なし
スクラッチで作る作品について
バッテリーをクリックしてポイントを稼ぎ、ショップでアップグレードを購入するインクリメンタルクリッカーゲーム。3ページのショップ、パーティクルエフェクト、数字ディスプレイ、ボーナスアイテムなど多彩な機能を持つ。
今回の目標
チュートリアルの元になった作品
[prj-embed prj="738364000" mini="1" title="プレイしておこう"]今回の[prj-link prj="738364000"]スクラッチを作る参考作品[/prj-link]にさせていただきました、ありがとう！プレイして完成イメージをつかんでおこう。（記事ではチュートリアル用にリファクタした作品を作るので、同じものが完成するわけではない点はご注意）[/prj-embed]#1巨大クリック倍率アップグレード
[talk class="m-l-n"]100万クリックで買える究極のクリック倍率アップグレードだよ。購入すると「★1クリックの獲得数」が一気に10億増えるんだ。[/talk]
このスプライトが押されたとき で、「★クリック数」が1000000以上かつマウスが押されていてアイテムに触れている条件をチェックするよ。条件が揃ったら100万を差し引いて、 ( ) を ( ) ずつ変える で「★1クリックの獲得数」を+1000000000するんだ。
ショップアイテム2が+50、アイテム5が+1000だったのに対して、一気に10億という桁違いの数字になったね。ゲーム後半のインフレに対応するための設計だよ。
#2ショップアイテム8の購入保護
[talk class="m-l-n"]クリック数が100万未満のときの保護処理だよ。[/talk]
このスプライトが押されたとき で条件をチェックして、 ( ) を ( ) にする で「★クリック数」をそのまま維持するんだ。
#3ショップアイテム8のページ3表示
[talk class="m-l-n"]ページ3に切り替わったときにアイテムを表示する処理だよ。[/talk]
( ) を受け取ったとき で「次のショップ」を受け取り、「★ショップページ」が3のときに 表示する で表示するよ。
#4ショップアイテム8の表示設定
[talk class="m-l-n"]表示時のレイヤーとコスチュームの設定だよ。[/talk]
( ) へ移動する で最前面に出して、 コスチュームを ( ) にする でコスチュームを設定するんだ。
#5ショップアイテム8のページ切替(非表示)
[talk class="m-l-n"]ページ2に戻ったらアイテムを隠す処理だよ。ショップアイテム7と同じ構造だね。[/talk]
( ) を受け取ったとき で「前のショップ」を受け取り、「★ショップページ」が2のときに 隠す で隠して ( ) へ移動する で最背面に送るよ。
#6ショップアイテム9の配置
[talk class="m-l-n"]最後のショップアイテムを作るよ。ショップアイテム9はゲーム最強のアイテムで、なんと毎秒の自動獲得数が指数的に倍増していく「指数型オートクリッカー」なんだ。[/talk]準備
スプライト「ショップアイテム9」を開く
ショップアイテム9| スプライトについて |
|---|
| ショップページ3の指数型オートクリッカー（CPS自乗） |
| どんな役割か |
| 最後のショップアイテムとして、指数的に増える最強のオートクリッカーを作るよ。9億9千万クリック必要だけど、毎秒の獲得数がどんどん倍になっていくんだ。 |
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#7ショップアイテム9の初期表示
[talk class="m-l-n"]旗クリック時の初期表示を設定するよ。[/talk]
表示する で表示して、 ( ) へ移動する で最前面、 コスチュームを ( ) にする でコスチュームを設定するよ。
#8ショップアイテム9のホバー演出
[talk class="m-l-n"]最後のアイテムにも同じホバーアニメーションをつけるよ。これでショップの9つ全部が統一された動きになるんだ。[/talk]
ずっと で もし ( ) ならでなければ と ( ) に触れた を使って、マウスに触れているときはサイズ90、離れているときはサイズ80に向かってイージングで変化させるよ。
#9指数型オートクリッカーの購入
[talk class="m-l-n"]ここがこのゲームの最終兵器だよ。9億9千万クリック以上必要だけど、購入すると「★1秒の自動獲得数」に初期値として1000万が追加されるんだ。[/talk]
このスプライトが押されたとき で、 ( ) > ( ) で「★クリック数」が990000000を超えているかチェックするよ。条件が揃ったら ( ) を ( ) ずつ変える で「★クリック数」を-1000000000して、「★1秒の自動獲得数」を+10000000するんだ。
でも本当の力は次のステップにあるよ。初期の1000万CPSはあくまでスタートラインなんだ。
#10指数的な自動倍増
[talk class="m-l-n"]他のオートクリッカーは「★クリック数」にCPSを加算していたけど、ショップアイテム9は違うよ。なんと「★1秒の自動獲得数」に「★1秒の自動獲得数」自身を加算するんだ。つまりCPSが毎秒倍になっていくよ。[/talk]
内側の ずっと で ( ) 秒待つ を1秒待って、 ( ) を ( ) ずつ変える で「★1秒の自動獲得数」に「★1秒の自動獲得数」を加算するよ。1000万→2000万→4000万→8000万と、CPSが爆発的に増えていくんだ。
しかもCPSはグローバル変数だから、他のオートクリッカースレッドもこの倍増したCPSを使って「★クリック数」を増やすよ。すべてのスレッドが連動して、ゲーム全体のクリック増加速度が指数的に加速していくんだ。
#11ショップアイテム9の購入保護
[talk class="m-l-n"]クリック数が10億未満でマウスが離れているときの保護処理だよ。[/talk]
このスプライトが押されたとき で条件をチェックして、 ( ) を ( ) にする で「★クリック数」を維持するんだ。
#12ショップアイテム9のページ3表示
[talk class="m-l-n"]ページ3に切り替わったときにアイテムを表示する処理だよ。[/talk]
( ) を受け取ったとき で「次のショップ」を受け取り、「★ショップページ」が3のときに 表示する で表示するよ。
#13ショップアイテム9の表示設定
[talk class="m-l-n"]表示時のレイヤーとコスチュームの設定だよ。[/talk]
( ) へ移動する で最前面に出して、 コスチュームを ( ) にする でコスチュームを設定するんだ。
#14ショップアイテム9のページ切替(非表示)
[talk class="m-l-n"]ページ2に戻ったらアイテムを隠す処理だよ。これで全9つのショップアイテムのページ管理が完成したね。[/talk]
( ) を受け取ったとき で「前のショップ」を受け取り、「★ショップページ」が2のときに 隠す で隠して ( ) へ移動する で最背面に送るよ。
#15広告バナーの準備
[talk class="m-l-n"]ショップが完成したから、次はゲーム画面の雰囲気を盛り上げる広告バナーを作るよ。10回繰り返すアニメーションで、ランダムなコスチュームとタイミングで登場するんだ。[/talk]
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#16広告バナーのスライドイン
[talk class="m-l-n"]バナーが画面外からスライドして入ってきて、しばらく表示してから去っていくアニメーションだよ。[/talk]x座標を ( ) 、y座標を ( ) にする でx:-403、y:-132の画面外にスタートして、 ( ) 秒でx座標を ( ) に、y座標を ( ) に変える で1秒かけてx:-147、y:-139の見える位置までスライドインするよ。 ( ) 秒待つ で4秒間表示した後、再び ( ) 秒でx座標を ( ) に、y座標を ( ) に変える で1秒かけて画面外に戻るんだ。
ランダムなコスチュームとランダムな出現間隔のおかげで、毎回違うタイミングで違うバナーが出てきて、ゲームが賑やかになるよ。
#17金の電気の出現設定
[talk class="m-l-n"]最後に作るのはボーナスアイテム「金の電気」だよ。ランダムなタイミングで画面に出現して、マウスでキャッチするとボーナスがもらえるんだ。[/talk]準備
スプライト「金の電気」を開く
金の電気| スプライトについて |
|---|
| ランダムに出現する落下ボーナスアイテム。キャッチするとFPSやパーセントがアップ |
| どんな役割か |
| ランダムに出現する金の電気ボーナスアイテムを作るよ。上に飛び出して落ちてくるアニメーションがあって、マウスでキャッチするとボーナスがもらえるんだ。3段階の物理運動で自然な動きを作るよ。 |
変数「出現間隔(最小)」を追加
金の電気の出現間隔の最小値
変数「出現間隔(最大)」を追加
金の電気の出現間隔の最大値
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#18金の電気のクローン生成
[talk class="m-l-n"]ランダムな間隔でクローンを生成し続けるスポナーを作るよ。30〜120秒に1回、金の電気が出現するんだ。[/talk]
ずっと の中で ( ) 秒待つ に ( ) から ( ) までの乱数 を使って、「出現間隔(最小)」から「出現間隔(最大)」の間でランダムに待つよ。待ったら ( ) のクローンを作る で自分自身のクローンを作るんだ。
#19クローンの打ち上げ準備
[talk class="m-l-n"]クローンが生まれたら、まず打ち上げの準備をするよ。画面下部のランダムな位置からスタートして、上に飛び出す仕組みなんだ。[/talk]準備
変数「Y速度」を追加
金の電気クローンのY軸速度
実装
クローンされたとき で始まり、 x座標を ( ) にする で-150〜150のランダムなX位置に配置するよ。 y座標を ( ) にする でy:-150の画面下部にセット、 ( ) 度に向ける で向きを90度にして、 ( ) を ( ) にする で「Y速度」を0にリセットするんだ。
#20フェーズ1：加速上昇
[talk class="m-l-n"]金の電気の動きは3段階に分かれているよ。まずフェーズ1は加速しながら上に飛び出す動きだよ。[/talk]
( ) 回繰り返す を20回で、毎回 ( ) を ( ) ずつ変える で「Y速度」を+0.5ずつ増やすよ。 y座標を ( ) ずつ変える で「Y速度」分だけY座標を変えて、 ( ) ( ) 度回す で「Y速度」÷10の角度だけゆっくり回転させるんだ。速度が0から10へと加速しながら上昇するよ。
[talk]この3段階の動きは、現実世界の「放物線運動」を再現しているんだ。ボールを上に投げると、最初は勢いよく上がって、だんだんゆっくりになって、最後に落ちてくるよね。物理の授業で習う「速度＝初速＋加速度×時間」という式を、Scratchの変数操作だけでシミュレーションしているんだよ。[/talk]
#21フェーズ2：減速
[talk class="m-l-n"]フェーズ2は上昇がだんだんゆっくりになって止まる段階だよ。フェーズ1で加速した速度を、今度は減速させていくんだ。[/talk]
( ) 回繰り返す を20回で、「Y速度」を-0.5ずつ減らすよ。速度が10から0に向かって減速しながら、まだ上に移動し続けるけどどんどんゆっくりになるんだ。 ( ) ( ) 度回す の回転速度も「Y速度」÷5で、フェーズ1より速く回るよ。
#22フェーズ3：急落下
[talk class="m-l-n"]最後のフェーズは重力に引かれて落ちていく動きだよ。加速度が-1とフェーズ1・2より大きいから、急速に落下するんだ。[/talk]
( ) 回繰り返す を25回で、「Y速度」を-1ずつ減らすよ。速度が0から-25へと急激にマイナスになるから、アイテムは加速しながら落ちていくんだ。 ( ) ( ) 度回す で回転も速くなって、落下感が出るよ。
フェーズ1の加速度+0.5、フェーズ2の-0.5、フェーズ3の-1と、段階ごとに力の強さを変えることで自然な放物線の動きを表現しているんだね。
#23キャッチ待ちと透過効果
[talk class="m-l-n"]金の電気のクローンには、動きのスクリプトと同時にもう1つのスクリプトが並行して動いているよ。こちらはプレイヤーがキャッチするのを待つ仕組みだよ。[/talk]
クローンされたとき からもう1つのスクリプトを作るよ。 ( ) まで繰り返す で、 ( ) に触れた でマウスに触れていて、かつ マウスが押された でマウスが押されるまでループするんだ。ループ中は ( ) の効果を ( ) にする でゴースト効果をY座標に連動させて、高い位置にいるほどはっきり見えて、低い位置にいると薄くなるようにするよ。
#24キャッチ時のランダム報酬
[talk class="m-l-n"]金の電気をキャッチしたら、50%の確率でボーナスがもらえるよ。当たりかハズレか、ガチャのようなドキドキ感を演出しているんだ。[/talk]準備
変数「ランダムサプライズ」を追加
ランダムサプライズの種類（1または2）
変数「★FPS」を追加
FPS値（ボーナス効果）
変数「★秒あたりパーセント」を追加
秒あたりパーセント（ボーナス効果）
実装
( ) を ( ) にする で「ランダムサプライズ」に ( ) から ( ) までの乱数 で1か2を入れるよ。 もし ( ) ならでなければ で値が1なら当たりで、 ( ) を ( ) にする で「★FPS」を「★mAh」×1.3に、「★秒あたりパーセント」を現在値×1.3にセットしてパワーアップするよ。2ならハズレで何も起きないんだ。
#25キャッチ後の消滅演出
[talk class="m-l-n"]ボーナスを受け取った後、金の電気がパッと弾けるように消えるアニメーションを作るよ。[/talk]
( ) 回繰り返す を20回で、 大きさを ( ) ずつ変える でサイズを(250-現在のサイズ)÷5ずつ大きくしながら、 ( ) の効果を ( ) ずつ変える でゴースト効果を10ずつ増やすよ。最後に このクローンを削除する でクローンを削除するんだ。
サイズの計算が(250-size)÷5になっているのは、イージングの仕組みだよ。最初は一気に大きくなって250に近づくほどゆっくりになるから、弾けるような勢いのある膨張アニメーションになるんだ。
まとめ
ゲーム全体の完成だよ！特に金の電気ボーナスは「加速→減速→落下」の3段階の速度変化で放物線的な動きを実現していて、疑似物理シミュレーションの基礎を体験できる大事なパートだったね。全130ステップを通じて、イージング・クローンパーティクル・カスタム数字表示・スレッドスタッキング・疑似物理と、本格的なテクニックをたっぷり学べたよ！今回の知識を活かして、自分だけのオリジナルクリッカーゲームを作ってみよう！
