スクラッチでクリッカーゲームの作り方①バッテリーとショップを作ろう

スクラッチで作る作品について

バッテリーをクリックしてポイントを稼ぎ、ショップでアップグレードを購入するインクリメンタルクリッカーゲーム。3ページのショップ、パーティクルエフェクト、数字ディスプレイ、ボーナスアイテムなど多彩な機能を持つ。

今回の目標

バッテリーのクリック機能（ポイント獲得・音・ブロードキャスト）、ホバーイージングアニメーション、BGM、グロー回転、トレイルエフェクト（ペン）、クローンパーティクル、カスタム数字ディスプレイ、ショップのページ切替、ショップページ1のアイテム2つ（オートクリッカー・クリック倍率アップ）を実装する。

チュートリアルの元になった作品

バッテリークリッカー

by -RankAnimations-

今回のスクラッチを作る参考作品です、ありがとう！

スターター作品をリミックスしよう

このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード

#1バッテリーの表示

まずはゲームの主役、バッテリーを画面に表示させよう。旗が押されたら常に見える状態にしておくんだ。

準備

スプライト「バッテリー」を開く

バッテリー

スプライトについて	メインのクリック対象。クリックでポイントを稼ぎ、ホバーアニメーション、サウンド、BGMを管理する
どんな役割か	バッテリーをクリックしてポイントを稼ぐメインの仕組みを作るよ。マウスが近づくとバッテリーが大きくなるアニメーションや、クリック音とBGMも一緒に作っていくよ。

実装

イベントが押されたときでゲーム開始時に見た目表示するで表示して、見た目 ( ) へ移動するで最前面に配置するよ。見た目コスチュームを ( ) にするでコスチュームも初期状態にしておこう。

最前面に配置するのは、他のスプライト（背景やエフェクト）に隠れないようにするためだよ。クリッカーゲームではメインの対象がいつでも見えることが大事だからね。

#2クリック数の初期化

ゲームの通貨となる「★クリック数」変数を0にリセットするよ。この値がプレイヤーの所持ポイントになるんだ。

準備

変数「★クリック数」を追加

プレイヤーの累計クリック数（通貨）

実装

イベントが押されたときで変数 ( ) を ( ) にするを使って「★クリック数」を0にしよう。毎回ゲーム開始時にリセットすることで、前回のプレイデータが残らないようにしているんだ。

#3獲得数の初期化

1クリックあたり何ポイントもらえるかを決める「★1クリックの獲得数」変数を初期化するよ。最初は1からスタートだ。

準備

変数「★1クリックの獲得数」を追加

1クリックあたりの獲得ポイント数

実装

変数 ( ) を ( ) にするで値を1にセットしよう。この変数はあとでショップのアップグレードによって増えていくから、ゲームが進むほどクリックの価値が上がっていく仕組みになるんだ。

#4クリックでポイント獲得

バッテリーをクリックしたらポイントが増える、クリッカーゲームの核心部分を作るよ。

イベントこのスプライトが押されたときでバッテリーのクリックを検知して、変数 ( ) を ( ) ずつ変えるで「★クリック数」を「★1クリックの獲得数」ぶんだけ増やすよ。固定値の1ではなく変数を使っているのがミソで、ショップで強化すると1クリックの重みがどんどん増していくんだ。

#5クリック音の追加

クリックしたときに音が鳴ると、操作している実感がぐっと増すよね。

イベントこのスプライトが押されたときに音終わるまで ( ) の音を鳴らすで「Finger Snap」を鳴らそう。パチッという小気味よい音で、クリックのたびに心地よいフィードバックが返ってくるよ。

#6クリック通知の送信

バッテリーがクリックされたことを他のスプライトにも知らせる仕組みを作ろう。この後作るパーティクルエフェクトがこの通知を受け取って動き出すんだ。

準備

メッセージ「クリック」を追加

バッテリーがクリックされた時に送信するメッセージ

実装

イベントこのスプライトが押されたときでイベント ( ) を送るを使って「クリック」メッセージを送信するよ。ブロードキャストはテレビの放送みたいなもので、1つのスプライトが発信すると、受信設定をしている全スプライトが一斉に反応できるんだ。

#7自動獲得の準備

ショップでオートクリッカーを買うと、毎秒自動でポイントが増えていく仕組に使う「★1秒の自動獲得数」変数を用意するよ。

準備

変数「★1秒の自動獲得数」を追加

毎秒自動で獲得するポイント数

実装

変数 ( ) を ( ) にするで最初は0にしておこう。まだ何も買っていない状態だから自動獲得はゼロだよ。この値はショップでアイテムを購入するたびに加算されていくんだ。

#8ホバーアニメーション

マウスが近づくとバッテリーがふわっと大きくなり、離れると元に戻る――そんな滑らかなアニメーションを作るよ。普通にサイズを切り替えるのとは全然違う、プロっぽい動きになるんだ。

制御ずっとループの中で調べる ( ) までの距離を使ってマウスとの距離を測るよ。距離が50より近ければ目標サイズ100、遠ければ90に向かって変化させるんだ。制御もし ( ) ならでなければで分岐して、それぞれ見た目大きさを ( ) %にするで新しいサイズをセットするよ。

ここがこの作品のすごいところだよ。サイズ計算に「(目標値 − 現在のサイズ) ÷ 3」を使っているんだ。差分の3分の1ずつ近づくことで、最初は速く、目標に近づくほどゆっくり変化する「イージング」という滑らかさのテクニックが生まれるよ。

イージング（easing）は、ゲームやアプリのUIで世界中で使われているアニメーション技法だよ。ドアが閉まるとき最後にゆっくりなるのと同じ原理で、「線形補間（lerp）」とも呼ばれるんだ。Scratchではたった1行の計算で実現できるけど、プロの3Dゲームでも全く同じ考え方が使われているよ。

#9BGMの再生

ゲームを盛り上げるBGMをループ再生させよう。音楽があると雰囲気がガラッと変わるよ。

制御ずっとの中で音終わるまで ( ) の音を鳴らすを使い「Dance Chill Out」を再生するよ。「終わるまで再生」ブロックは曲が最後まで流れてから次に進むから、制御ずっとと組み合わせると曲が終わるたびに自動で最初から再生される、シンプルなBGMループの完成だね。

#10グローの表示設定

バッテリーの後ろでキラキラ光る装飾エフェクト、「グロー」スプライトを表示させるよ。

準備

スプライト「グロー」を開く

グロー

スプライトについて	バッテリー背後で回転するグロー装飾エフェクト
どんな役割か	バッテリーの後ろでゆっくり回転する光る装飾エフェクトを作るよ。ずっと回り続けてゲーム画面をかっこよく見せるんだ。

実装

イベントが押されたときで見た目表示するで表示して、見た目 ( ) へ移動するで最背面に配置するよ。バッテリーの後ろに置くことで、光がバッテリーを包み込むような演出になるんだ。見た目コスチュームを ( ) にするでコスチュームもセットしておこう。

#11グローの回転

グローをゆっくり回し続けて、画面に動きを出そう。止まっている画面より、何かが動いているほうがゲームが生きているように見えるよ。

制御ずっとの中で動き ( ) ( ) 度回すを1度ずつ回転させるよ。1度という小さな値だから、1回転するのに360フレーム（約12秒）かかる、とてもゆったりした回転になるんだ。

#12トレイルの初期化

背景に流れるような模様を描く「トレイルエフェクト」スプライトの初期設定をするよ。ペンスタンプで動的な背景を作る面白いテクニックだよ。

イベントが押されたときで動き x座標を ( ) 、y座標を ( ) にするを(0, 0)にセットして画面中央に配置し、見た目画像効果をなくすで画像効果をリセットするよ。位置管理用のローカル変数「X座標」と「Y座標」も変数 ( ) を ( ) にするで0に初期化しよう。

#13トレイルのループ開始

トレイルエフェクトの本体となるメインループを組み立てるよ。まずはスプライトを隠して、最背面に送るところから始めるんだ。

見た目隠すで一旦非表示にして見た目 ( ) へ移動するで最背面に送るよ。そして制御ずっとループの中で毎フレーム見た目表示すると見た目 ( ) へ移動するを繰り返すんだ。これは他のスプライトが後から最背面に来ても、常に自分が一番後ろにいるようにする工夫だよ。

#14ドリフト移動

トレイルエフェクトの動きの核心部分だよ。スプライトを少しずつ斜めにずらしていくことで、流れるようなパターンを生み出すんだ。

まず PEN_CLEAR で前フレームのペン描画を全消去するよ。次に変数 ( ) を ( ) ずつ変えるで「X座標」を-2、「Y座標」を1.5ずつ変えて、動き x座標を ( ) にすると動き y座標を ( ) にするで実際にスプライトを移動させるよ。

毎フレーム消して描き直すことで、スプライトが左上に少しずつドリフトしていく動きが背景パターンとして浮かび上がるんだ。ペン拡張機能を背景アニメーションに使うこのアイデアは、クローン数の制限を受けずに複雑な模様を作れるのが魅力だよ。

#15リセットとスタンプ

ドリフトし続けると画面外に出てしまうから、一定の位置に来たらリセットする仕組みを追加するよ。

制御もし ( ) ならで「X座標」が-40になったかを演算 ( ) = ( ) で判定して、変数 ( ) を ( ) にするで「X座標」と「Y座標」を0に戻すよ。最後に PEN_STAMP でスプライトの見た目をペンレイヤーにスタンプするんだ。

こうすることで、ドリフト→リセット→スタンプが繰り返されて、位置が少しずつずれた複数の残像が背景に浮かぶパターンになるよ。

#16クリック手続きの定義

パーティクルエフェクトの頭脳となる「クリック」カスタム定義を作るよ。どのコスチュームのパーティクルを生成するかを管理する仕組みだよ。

準備

スプライト「降るパーティクル」を開く

降るパーティクル

スプライトについて	クリック時に生成される落下パーティクルのクローン。click手続きでパーティクル管理
どんな役割か	バッテリーをクリックした時に、上から粒子が降ってくるパーティクルエフェクトを作るよ。クローンを使って複数の粒子を同時に動かして、回転しながら消えていくアニメーションにするんだ。

カスタム定義「クリック」を追加

パーティクルインデックスを循環させてクローンを生成する手続き

変数「★パーティクル番号」を追加

パーティクルのコスチューム循環インデックス

リスト「■PI」の追加

パーティクルのコスチューム循環用リスト

実装

ブロック定義定義 ( ) で「クリック」手続きを定義するよ。まず変数 ( ) を ( ) ずつ変えるで「★パーティクル番号」を1増やして、次に制御もし ( ) ならで番号が「■PI」リストの1番目の要素の文字数を超えたかチェックするんだ。超えたら変数 ( ) を ( ) にするで1に戻すよ。

リストの要素の文字数を上限に使うのはユニークな発想だね。演算 ( ) > ( ) と演算 ( ) の長さとリスト ( ) の ( ) 番目を組み合わせて、番号が範囲内でぐるぐる循環するようにしているんだ。

#17クローンの生成

「クリック」手続きの続きとして、実際にパーティクルのクローンを生み出す部分を作るよ。

見た目コスチュームを ( ) にするでコスチュームを「pie」に切り替えてから、制御 ( ) のクローンを作るで自分自身のクローンを生成するよ。動き ( ) 度に向けるで演算 ( ) から ( ) までの乱数を使い1〜360度のランダムな向きを設定するんだ。これでクローンが全方向に散らばる準備が整うよ。

#18パーティクルの初期化

パーティクル関連の変数を初期値に戻すよ。ゲーム開始時にクリーンな状態からスタートさせるためだよ。

準備

変数「クローンか」を追加

クローンかどうかのフラグ（0=元、1=クローン）

実装

イベントが押されたときで「クローンか」変数を0、「★パーティクル番号」を0にセットするよ。「クローンか」は元のスプライトとクローンを区別するフラグで、0なら元、1ならクローンという意味だよ。

#19クリック受信の処理

バッテリーから送られてくる「クリック」メッセージを受け取って、パーティクルを生成するよ。

イベント ( ) を受け取ったときで「クリック」メッセージを受信するよ。ただし制御もし ( ) ならで「クローンか」が0のとき、つまり元のスプライトだけがブロック定義 ( ) で「クリック」手続きを実行するようにガードしているんだ。

このガードがないとクローン全員が「クリック」手続きを実行してしまい、クローンが爆発的に増えてしまうよ。ブロードキャストはクローンにも届くから、元スプライトだけに処理を限定するのが大事なんだ。

#20クローンの初期設定

生まれたクローンが最初に何をするかを設定するよ。画面上部のランダムな位置に出現させるんだ。

制御クローンされたときでクローン開始時の処理を書くよ。まず変数 ( ) を ( ) にするで「クローンか」を1にセットしてクローンであることを記録し、見た目表示するで表示するよ。

動き x座標を ( ) 、y座標を ( ) にするで、X座標は演算 ( ) から ( ) までの乱数で-117〜117のランダム、Y座標は161（画面上端付近）に配置するよ。画面の上から降ってくる演出の始点だね。

#21落下アニメーション

パーティクルがくるくる回りながら降ってきて、だんだん透明になっていくアニメーションを作るよ。

制御 ( ) 回繰り返すで20回ループしながら、動き ( ) ( ) 度回すで3度ずつ回転、動き y座標を ( ) ずつ変えるで-10ずつ下に移動、見た目 ( ) の効果を ( ) ずつ変えるでゴースト効果を5ずつ増やすよ。

20回 × ゴースト5 = 100で完全に透明になる計算だよ。回転しながらフェードアウトすることで、パーティクルが風に舞うような自然な動きになるんだ。

#22縮小して消滅

フェードアウトが終わったパーティクルを縮小させてから削除するよ。これで一連のパーティクル演出の完成だね。

制御 ( ) 回繰り返すで10回見た目大きさを ( ) ずつ変えるを-5ずつ実行して小さくしていき、最後に制御このクローンを削除するでクローンを削除するよ。縮小アニメーションを挟むことで、いきなり消えるよりも自然な見栄えになるんだ。

#23パーティクルの奥行き

パーティクルが他のスプライトの前に出てこないように、常に最背面に送り続けるよ。

イベントが押されたときで制御ずっとループを作り、毎フレーム見た目 ( ) へ移動するで最背面に送るよ。こうしておくと、クローンが何個生まれても全部バッテリーやショップアイテムの後ろに表示されるんだ。

#24数字ディスプレイの初期設定

クリック数をかっこいいカスタムフォントで表示するシステムを作り始めるよ。Scratchの変数モニターじゃなくて、自前の数字表示だからデザインの自由度がぐっと上がるんだ。

準備

スプライト「数字ディスプレイ」を開く

数字ディスプレイ

スプライトについて	クリック数をカスタム数字フォントでクローン表示するスプライト
どんな役割か	クリック数をかっこいいカスタム数字で画面に表示するシステムを作るよ。クローンを横に並べて、それぞれの桁の数字を自動で表示するんだ。

変数「★数字のX位置」を追加

数字ディスプレイの開始X座標

実装

イベントが押されたときで見た目大きさを ( ) %にするを45%に設定して、見た目隠すで親スプライトを隠すよ。親は数字のクローンを生むための「工場」の役割だから、自分自身は画面に出ないんだ。変数 ( ) を ( ) にするで「★数字のX位置」を-200に設定して、左端から数字を並べる準備をしよう。

#25表示パラメータの設定

数字ディスプレイの表示に必要な各パラメータを設定するよ。桁数や文字間隔を変数で管理しておくと、あとから調整が簡単だよ。

準備

変数「★数字の値」を追加

数字ディスプレイの表示値計算用

変数「★最大桁数」を追加

数字ディスプレイの最大桁数

変数「★数字の間隔」を追加

数字間の横幅

実装

変数 ( ) を ( ) にするで「★数字の値」を1、「★最大桁数」を10、「★数字の間隔」を16にセットするよ。最大10桁表示できるようにして、各桁を16ピクセル間隔で並べるんだ。動き x座標を ( ) 、y座標を ( ) にするで開始位置(「★数字のX位置」, 145)に移動しておこう。

#26桁クローンの生成

10桁ぶんのクローンを横一列に生成するよ。各クローンがそれぞれ1桁を担当して、全体でクリック数を表示する仕組みだよ。

制御 ( ) 回繰り返すで「★最大桁数」回ループし、毎回変数 ( ) を ( ) にするで「★数字の値」に「★クリック数」をセットしてから制御 ( ) のクローンを作るでクローンを生成するよ。生成後に動き x座標を ( ) ずつ変えるで「★数字の間隔」ぶん右にずれて、次のクローンの位置を準備するんだ。

#27桁の数字表示

各クローンが自分の担当する桁の数字を自動で表示する仕組みだよ。ここがこのシステムの一番面白いところだよ。

制御クローンされたときで見た目 ( ) へ移動するを最前面に、見た目表示するで表示するよ。制御ずっとループの中で、見た目コスチュームを ( ) にするのコスチューム番号を計算で決めるんだ。

計算の仕組みはこうだよ。自分のX座標から「★数字のX位置」を引いて「★数字の間隔」で割ると、自分が何桁目かがわかる。その桁番号を演算 ( ) の ( ) 番目の文字に渡して「★クリック数」から1文字取り出し、その数字のコスチュームに切り替えるんだ。クローンの位置から自分の役割を計算するのは、Scratchならではの賢いテクニックだよ。

#28空桁の非表示

クリック数が10桁に満たないとき、上位の桁は空っぽになるよね。その空桁を隠す処理を追加しよう。

制御もし ( ) ならでなければで演算 ( ) の ( ) 番目の文字の結果が空文字かどうかを判定するよ。空文字なら見た目隠すで隠し、数字があれば見た目表示するで表示するんだ。こうすることで、例えばクリック数が「42」なら先頭の8桁は非表示になって、見た目がすっきりするよ。

#29ショップ背景の表示

ここからショップ画面のUIを作っていくよ。まずはショップの背景を表示させよう。

準備

スプライト「ショップ背景」を開く

ショップ背景

スプライトについて	ショップ画面の背景UI
どんな役割か	ショップ画面の背景を表示するスプライトを作るよ。

実装

イベントが押されたときで見た目表示する、見た目 ( ) へ移動するで最背面、見た目コスチュームを ( ) にするでコスチュームをセットするよ。最背面に配置するのは、ショップアイテムのボタンやバッテリーが背景の手前に来るようにするためだよ。

#30ショップページの初期化

ショップは複数ページに分かれていて、矢印ボタンでページを切り替えられるようにするよ。まずはページ番号を管理する変数を初期化しよう。

準備

スプライト「右矢印」を開く

右矢印

スプライトについて	ショップページを次に進める矢印ボタン
どんな役割か	ショップのページを次に進めるための右矢印ボタンを作るよ。クリックするとショップページが1つ進むんだ。ショップページの初期値もここで設定するよ。

変数「★ショップページ」を追加

現在のショップページ番号（1〜3）

実装

イベントが押されたときで変数 ( ) を ( ) にするを使い「★ショップページ」を1にセットするよ。ゲーム開始時は最初のページを表示するんだ。

#31右矢印の表示

ショップページを次に進めるための右矢印ボタンを作るよ。

イベントが押されたときで見た目表示するで表示し、見た目コスチュームを ( ) にするで「Arrow Right」コスチュームに設定するよ。制御ずっとループで毎フレーム見た目 ( ) へ移動するを最前面にすることで、他のスプライトに隠れないようにしているんだ。

#32右矢印の配置

右矢印をショップ画面の右側に配置するよ。

イベントが押されたときで動き x座標を ( ) 、y座標を ( ) にするを(123, 10)にセットするよ。ショップエリアの右端に見やすく配置する位置だよ。

#33右矢印のサイズ

右矢印のサイズをちょうどいい大きさに調整するよ。

イベントが押されたときで見た目大きさを ( ) %にするを80%にセットするよ。100%だと大きすぎるから、ショップのUIに馴染むサイズに縮小しているんだ。

#34右矢印のクリック音

矢印ボタンをクリックしたときにも効果音を鳴らそう。ボタンを押した手応えを感じられるようにするためだよ。

イベントこのスプライトが押されたときで音終わるまで ( ) の音を鳴らすの「Finger Snap」を再生するよ。バッテリーのクリック音と同じ音を使うことで、操作感に統一感が出るんだ。

#35次ページへの通知

右矢印がクリックされたら、ショップアイテムたちに「次のページに切り替えてね」と知らせるメッセージを送るよ。

準備

メッセージ「次のショップ」を追加

ショップの次ページへの切替時に送信するメッセージ

実装

イベントこのスプライトが押されたときでイベント ( ) を送るを使って「次のショップ」メッセージを送信するよ。各ショップアイテムがこのメッセージを受け取って、自分が表示されるべきページかどうかを判断するんだ。

#36ページ上限チェック

3ページ目まで来たら、これ以上先に進めないようにガードする処理を追加するよ。

イベントこのスプライトが押されたときで制御もし ( ) ならでなければを使い、「★ショップページ」が3と等しいかを演算 ( ) = ( ) でチェックするよ。3なら制御　でスクリプトを止めて何もしない。3でなければ変数 ( ) を ( ) ずつ変えるで「★ショップページ」を1増やすんだ。

ページ番号が際限なく増えるのを防ぐ、いわば「壁」の役割だよ。この処理がないと、存在しないページ4以降に進んでしまって表示がおかしくなるんだ。

#37左矢印の表示

今度はショップページを前に戻すための左矢印ボタンを作るよ。右矢印とほぼ同じ構造だよ。

準備

スプライト「左矢印」を開く

左矢印

スプライトについて	ショップページを前に戻す矢印ボタン
どんな役割か	ショップのページを前に戻すための左矢印ボタンを作るよ。クリックするとショップページが1つ前に戻るんだ。

実装

イベントが押されたときで見た目表示する、見た目コスチュームを ( ) にするで「Arrow Right」コスチュームに設定するよ。名前は「Arrow Right」だけど、スプライト自体が左右反転されているから左矢印として使えるんだ。制御ずっとで常に最前面に配置するよ。

#38左矢印の配置

左矢印をショップ画面の左側に配置しよう。

イベントが押されたときで動き x座標を ( ) 、y座標を ( ) にするを(42, 13)にセットするよ。右矢印(123, 10)より左側に配置して、ペアになるようにしているんだ。

#39左矢印のサイズ

左矢印も右矢印と同じサイズに揃えるよ。

イベントが押されたときで見た目大きさを ( ) %にするを80%にセットするよ。左右の矢印が同じサイズだと、UIとしてバランスが取れるよね。

#40左矢印のクリック音

左矢印にも同じクリック音をつけるよ。

イベントこのスプライトが押されたときで音終わるまで ( ) の音を鳴らすの「Finger Snap」を鳴らそう。ボタンの操作感を統一することで、プレイヤーが迷わず操作できるようになるんだ。

#41前ページへの通知

左矢印がクリックされたら、ショップアイテムたちに「前のページに戻って」と知らせるよ。

準備

メッセージ「前のショップ」を追加

ショップの前ページへの切替時に送信するメッセージ

実装

イベントこのスプライトが押されたときでイベント ( ) を送るを使って「前のショップ」メッセージを送信するよ。右矢印の「次のショップ」と対になるメッセージだね。

#42ページ下限チェック

1ページ目にいるときは、もう前に戻れないようにガードしよう。右矢印の上限チェックと対になる処理だよ。

イベントこのスプライトが押されたときで制御もし ( ) ならでなければを使い、「★ショップページ」が1かを演算 ( ) = ( ) でチェックするよ。1なら制御　でスクリプト中断、1でなければ変数 ( ) を ( ) ずつ変えるで-1して前のページに戻るんだ。

#43アイテム1の配置

ショップの最初のアイテムの位置を決めるよ。ここからいよいよオートクリッカーのショップ画面を構築していくんだ。

準備

スプライト「ショップアイテム1」を開く

ショップアイテム1

スプライトについて	ショップページ1のオートクリッカー（100クリックで+10CPS）
どんな役割か	ショップの最初のアイテムを作るよ。100クリック消費すると、毎秒自動でクリックが増えるオートクリッカーを買えるようになるんだ。何回でも買い足せるスタック購入の仕組みも作るよ。

実装

イベントが押されたときで動き x座標を ( ) 、y座標を ( ) にするを(51, 27)にセットするよ。ショップエリアの中央付近に配置して、プレイヤーの目に入りやすい位置にしているよ。

#44アイテム1の表示

ショップアイテム1を画面に表示させよう。このアイテムは最初のオートクリッカーで、100クリック消費すると毎秒自動でポイントが増えるようになるよ。

イベントが押されたときで見た目表示するで表示し、見た目 ( ) へ移動するで最前面、見た目コスチュームを ( ) にするでコスチュームをセットするよ。最前面に配置するのは、ショップ背景の手前に来るようにするためだよ。

#45ショップアイテムのホバー演出

ショップアイテム1にもバッテリーと同じホバーアニメーションをつけるよ。マウスが触れたらアイテムが少し大きくなって、離れるとゆっくり元に戻るんだ。

イベントが押されたときで開始して、制御ずっとの中で制御もし ( ) ならでなければを使うよ。調べる ( ) に触れたでマウスに触れているかを判定して、触れていたらサイズ90に、離れていたらサイズ80に向かってゆっくり近づけるんだ。

目標サイズが90と80になっているのは、ショップアイテムがバッテリーより少し小さく表示されるようにするためだよ。イージングの仕組み自体はバッテリーと同じで、差分の1/3ずつ近づける線形補間を使っているんだ。

#46オートクリッカーの購入処理

ショップアイテム1はオートクリッカーだよ。100クリック消費すると、毎秒自動でクリック数が増える仕組みを買えるんだ。

イベントこのスプライトが押されたときでクリックを検知して、制御ずっとの中で3つの条件を同時にチェックするよ。「★クリック数」が100以上、マウスが押されている、そしてマウスがアイテムに触れている――この3つ全部がtrueのときだけ購入が成立するんだ。

購入が成立したら、変数 ( ) を ( ) ずつ変えるで「★クリック数」を-100して代金を払い、「★1秒の自動獲得数」を+10するよ。これで毎秒10クリック分が自動で増えるようになるんだ。

#47オートクリッカーの自動加算

購入処理のすぐ後に、実際に毎秒クリック数を自動で増やす仕組みを作るよ。ここでScratchの面白い特性を活用するんだ。

購入条件が成立した後に、内側にもう1つの制御ずっとを置くよ。この中で制御 ( ) 秒待つで1秒待ってから、変数 ( ) を ( ) ずつ変えるで「★クリック数」に「★1秒の自動獲得数」を加算し続けるんだ。内側のループに入るとスクリプトはロックされるけど、もう一度アイテムをクリックすると新しいスレッドが起動して2回目の購入もできるよ。

Scratchでは、同じスクリプトを何度も同時に動かすことができるんだ。ボタンをクリックするたびに新しい「スレッド」が生まれて、前のスレッドと並行して動くよ。本物のゲーム開発でも「マルチスレッド」という同じ考え方が使われていて、複数の処理を同時に走らせるのはとても大切なテクニックなんだ。

#48購入不可時の保護処理

アイテムをクリックしたけどクリック数が足りない場合の処理も作るよ。購入スクリプトと同時に動く安全装置のような役割だよ。

イベントこのスプライトが押されたときでもう1つのスクリプトを作り、制御ずっとの中で「★クリック数」が100未満かつマウスがアイテムから離れている場合に、変数 ( ) を ( ) にするで「★クリック数」をそのまま維持するよ。購入できないときに値が変わらないことを保証するんだ。

#49ページ切替時の非表示処理

ショップにはページが複数あるから、ページを切り替えたらこのアイテムを隠す必要があるよ。ショップアイテム1はページ1にあるから、ページ2に移動したら見えなくなるようにしよう。

イベント ( ) を受け取ったときで「次のショップ」メッセージを受け取ったら、制御ずっとの中で「★ショップページ」が2かどうかチェックするよ。2なら見た目隠すで隠して、見た目 ( ) へ移動するで最背面に送るんだ。

#50ページ1での表示処理

逆にショップページが1のときは、このアイテムを表示する処理が必要だよ。旗がクリックされた時から常にチェックし続けるんだ。

イベントが押されたときから制御ずっとで、「★ショップページ」が1のときに見た目表示するで表示するよ。

#51表示時のレイヤーとコスチューム

表示するだけでなく、レイヤーの順番とコスチュームも正しく設定するよ。

見た目 ( ) へ移動するで最前面に移動して、見た目コスチュームを ( ) にするでコスチュームを設定するんだ。こうすることで、ページ1に戻ってきたときも正しい見た目で表示されるよ。

#52ショップアイテム2の配置

次はショップアイテム2を作るよ。このアイテムは「クリック倍率アップ」で、1クリックあたりの獲得ポイントを増やすタイプなんだ。

準備

スプライト「ショップアイテム2」を開く

ショップアイテム2

スプライトについて	ショップページ1のクリック倍率アップグレード（500クリックで+50/click）
どんな役割か	1クリックあたりの獲得数を増やすアップグレードアイテムを作るよ。500クリック消費すると、1クリックで50ポイント多くもらえるようになるんだ。

実装

イベントが押されたときで開始して、動き x座標を ( ) 、y座標を ( ) にするでx:52、y:-32の位置に配置するよ。ショップアイテム1の下に並ぶ位置だね。

#53ショップアイテム2の初期表示

旗クリック時にアイテムの見た目を初期化するよ。ショップアイテム1と同じパターンだね。

イベントが押されたときで見た目表示する、見た目 ( ) へ移動するで最前面、見た目コスチュームを ( ) にするでコスチュームを設定するよ。

#54ショップアイテム2のホバー演出

ショップアイテム1と同じ要領で、マウスが触れると大きくなるホバーアニメーションをつけるよ。

イベントが押されたときから制御ずっとで、調べる ( ) に触れたを使ってマウスの接触を判定するよ。触れていればサイズ90に向かって、離れていればサイズ80に向かってイージングで近づけるんだ。

まとめ

ここまでで、クリッカーゲームの核となる部分が完成したよ！バッテリーをクリックしてポイントが増え、パーティクルが飛び散り、カスタム数字が光る――ゲームの「手触り」をつくる演出ブロックが揃ったね。ショップのページ切替と最初の2アイテムも動くようになったから、次はショップアイテムをさらに増やしていこう！