- スターター作品
- なし
- 今回の完成サンプル
- なし
スクラッチで作る作品について
バッテリーをクリックしてポイントを稼ぎ、ショップでアップグレードを購入するインクリメンタルクリッカーゲーム。3ページのショップ、パーティクルエフェクト、数字ディスプレイ、ボーナスアイテムなど多彩な機能を持つ。
今回の目標
バッテリーのクリック機能（ポイント獲得・音・ブロードキャスト）、ホバーイージングアニメーション、BGM、グロー回転、トレイルエフェクト（ペン）、クローンパーティクル、カスタム数字ディスプレイ、ショップのページ切替、ショップページ1のアイテム2つ（オートクリッカー・クリック倍率アップ）を実装する。
チュートリアルの元になった作品
[prj-embed prj="738364000" mini="1"][prj-link prj="738364000"]今回のスクラッチを作る参考作品です[/prj-link]、ありがとう！[/prj-embed]スターター作品をリミックスしよう
このチュートリアルにはスターター作品があります。使わなくても大丈夫だけど、最低限の素材などが用意されてるので便利です。
スターター作品をダウンロード
#1バッテリーの表示
準備
スプライト「バッテリー」を開く
バッテリー| スプライトについて | メインのクリック対象。クリックでポイントを稼ぎ、ホバーアニメーション、サウンド、BGMを管理する |
|---|---|
| どんな役割か | バッテリーをクリックしてポイントを稼ぐメインの仕組みを作るよ。マウスが近づくとバッテリーが大きくなるアニメーションや、クリック音とBGMも一緒に作っていくよ。 |
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
最前面に配置するのは、他のスプライト（背景やエフェクト）に隠れないようにするためだよ。クリッカーゲームではメインの対象がいつでも見えることが大事だからね。
#2クリック数の初期化
準備
変数「★クリック数」を追加
プレイヤーの累計クリック数（通貨）
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#3獲得数の初期化
準備
変数「★1クリックの獲得数」を追加
1クリックあたりの獲得ポイント数
実装
( ) を ( ) にする で値を1にセットしよう。この変数はあとでショップのアップグレードによって増えていくから、ゲームが進むほどクリックの価値が上がっていく仕組みになるんだ。
#4クリックでポイント獲得
このスプライトが押されたとき でバッテリーのクリックを検知して、 ( ) を ( ) ずつ変える で「★クリック数」を「★1クリックの獲得数」ぶんだけ増やすよ。固定値の1ではなく変数を使っているのがミソで、ショップで強化すると1クリックの重みがどんどん増していくんだ。
#5クリック音の追加
このスプライトが押されたとき に 終わるまで ( ) の音を鳴らす で「Finger Snap」を鳴らそう。パチッという小気味よい音で、クリックのたびに心地よいフィードバックが返ってくるよ。
#6クリック通知の送信
準備
メッセージ「クリック」を追加
バッテリーがクリックされた時に送信するメッセージ
実装
このスプライトが押されたとき で ( ) を送る を使って「クリック」メッセージを送信するよ。ブロードキャストはテレビの放送みたいなもので、1つのスプライトが発信すると、受信設定をしている全スプライトが一斉に反応できるんだ。
#7自動獲得の準備
準備
変数「★1秒の自動獲得数」を追加
毎秒自動で獲得するポイント数
実装
( ) を ( ) にする で最初は0にしておこう。まだ何も買っていない状態だから自動獲得はゼロだよ。この値はショップでアイテムを購入するたびに加算されていくんだ。
#8ホバーアニメーション
ずっと ループの中で ( ) までの距離 を使ってマウスとの距離を測るよ。距離が50より近ければ目標サイズ100、遠ければ90に向かって変化させるんだ。 もし ( ) ならでなければ で分岐して、それぞれ 大きさを ( ) %にする で新しいサイズをセットするよ。
ここがこの作品のすごいところだよ。サイズ計算に「(目標値 − 現在のサイズ) ÷ 3」を使っているんだ。差分の3分の1ずつ近づくことで、最初は速く、目標に近づくほどゆっくり変化する「イージング」という滑らかさのテクニックが生まれるよ。
#9BGMの再生
ずっと の中で 終わるまで ( ) の音を鳴らす を使い「Dance Chill Out」を再生するよ。「終わるまで再生」ブロックは曲が最後まで流れてから次に進むから、 ずっと と組み合わせると曲が終わるたびに自動で最初から再生される、シンプルなBGMループの完成だね。
#10グローの表示設定
準備
スプライト「グロー」を開く
グロー| スプライトについて | バッテリー背後で回転するグロー装飾エフェクト |
|---|---|
| どんな役割か | バッテリーの後ろでゆっくり回転する光る装飾エフェクトを作るよ。ずっと回り続けてゲーム画面をかっこよく見せるんだ。 |
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#11グローの回転
ずっと の中で ( ) ( ) 度回す を1度ずつ回転させるよ。1度という小さな値だから、1回転するのに360フレーム（約12秒）かかる、とてもゆったりした回転になるんだ。
#12トレイルの初期化
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#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=クローン）
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#19クリック受信の処理
( ) を受け取ったとき で「クリック」メッセージを受信するよ。ただし もし ( ) なら で「クローンか」が0のとき、つまり元のスプライトだけが ( ) で「クリック」手続きを実行するようにガードしているんだ。
このガードがないとクローン全員が「クリック」手続きを実行してしまい、クローンが爆発的に増えてしまうよ。ブロードキャストはクローンにも届くから、元スプライトだけに処理を限定するのが大事なんだ。
#20クローンの初期設定
クローンされたとき でクローン開始時の処理を書くよ。まず ( ) を ( ) にする で「クローンか」を1にセットしてクローンであることを記録し、 表示する で表示するよ。
x座標を ( ) 、y座標を ( ) にする で、X座標は ( ) から ( ) までの乱数 で-117〜117のランダム、Y座標は161（画面上端付近）に配置するよ。画面の上から降ってくる演出の始点だね。
#21落下アニメーション
( ) 回繰り返す で20回ループしながら、 ( ) ( ) 度回す で3度ずつ回転、 y座標を ( ) ずつ変える で-10ずつ下に移動、 ( ) の効果を ( ) ずつ変える でゴースト効果を5ずつ増やすよ。
20回 × ゴースト5 = 100で完全に透明になる計算だよ。回転しながらフェードアウトすることで、パーティクルが風に舞うような自然な動きになるんだ。
#22縮小して消滅
( ) 回繰り返す で10回 大きさを ( ) ずつ変える を-5ずつ実行して小さくしていき、最後に このクローンを削除する でクローンを削除するよ。縮小アニメーションを挟むことで、いきなり消えるよりも自然な見栄えになるんだ。
#23パーティクルの奥行き
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#24数字ディスプレイの初期設定
準備
スプライト「数字ディスプレイ」を開く
数字ディスプレイ| スプライトについて | クリック数をカスタム数字フォントでクローン表示するスプライト |
|---|---|
| どんな役割か | クリック数をかっこいいカスタム数字で画面に表示するシステムを作るよ。クローンを横に並べて、それぞれの桁の数字を自動で表示するんだ。 |
変数「★数字のX位置」を追加
数字ディスプレイの開始X座標
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#25表示パラメータの設定
準備
変数「★数字の値」を追加
数字ディスプレイの表示値計算用
変数「★最大桁数」を追加
数字ディスプレイの最大桁数
変数「★数字の間隔」を追加
数字間の横幅
実装
( ) を ( ) にする で「★数字の値」を1、「★最大桁数」を10、「★数字の間隔」を16にセットするよ。最大10桁表示できるようにして、各桁を16ピクセル間隔で並べるんだ。 x座標を ( ) 、y座標を ( ) にする で開始位置(「★数字のX位置」, 145)に移動しておこう。
#26桁クローンの生成
( ) 回繰り返す で「★最大桁数」回ループし、毎回 ( ) を ( ) にする で「★数字の値」に「★クリック数」をセットしてから ( ) のクローンを作る でクローンを生成するよ。生成後に x座標を ( ) ずつ変える で「★数字の間隔」ぶん右にずれて、次のクローンの位置を準備するんだ。
#27桁の数字表示
クローンされたとき で ( ) へ移動する を最前面に、 表示する で表示するよ。 ずっと ループの中で、 コスチュームを ( ) にする のコスチューム番号を計算で決めるんだ。
計算の仕組みはこうだよ。自分のX座標から「★数字のX位置」を引いて「★数字の間隔」で割ると、自分が何桁目かがわかる。その桁番号を ( ) の ( ) 番目の文字 に渡して「★クリック数」から1文字取り出し、その数字のコスチュームに切り替えるんだ。クローンの位置から自分の役割を計算するのは、Scratchならではの賢いテクニックだよ。
#28空桁の非表示
もし ( ) ならでなければ で ( ) の ( ) 番目の文字 の結果が空文字かどうかを判定するよ。空文字なら 隠す で隠し、数字があれば 表示する で表示するんだ。こうすることで、例えばクリック数が「42」なら先頭の8桁は非表示になって、見た目がすっきりするよ。
#29ショップ背景の表示
準備
スプライト「ショップ背景」を開く
ショップ背景| スプライトについて | ショップ画面の背景UI |
|---|---|
| どんな役割か | ショップ画面の背景を表示するスプライトを作るよ。 |
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#30ショップページの初期化
準備
スプライト「右矢印」を開く
右矢印| スプライトについて | ショップページを次に進める矢印ボタン |
|---|---|
| どんな役割か | ショップのページを次に進めるための右矢印ボタンを作るよ。クリックするとショップページが1つ進むんだ。ショップページの初期値もここで設定するよ。 |
変数「★ショップページ」を追加
現在のショップページ番号（1〜3）
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#31右矢印の表示
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#32右矢印の配置
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#33右矢印のサイズ
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#34右矢印のクリック音
このスプライトが押されたとき で 終わるまで ( ) の音を鳴らす の「Finger Snap」を再生するよ。バッテリーのクリック音と同じ音を使うことで、操作感に統一感が出るんだ。
#35次ページへの通知
準備
メッセージ「次のショップ」を追加
ショップの次ページへの切替時に送信するメッセージ
実装
このスプライトが押されたとき で ( ) を送る を使って「次のショップ」メッセージを送信するよ。各ショップアイテムがこのメッセージを受け取って、自分が表示されるべきページかどうかを判断するんだ。
#36ページ上限チェック
このスプライトが押されたとき で もし ( ) ならでなければ を使い、「★ショップページ」が3と等しいかを ( ) = ( ) でチェックするよ。3なら でスクリプトを止めて何もしない。3でなければ ( ) を ( ) ずつ変える で「★ショップページ」を1増やすんだ。
ページ番号が際限なく増えるのを防ぐ、いわば「壁」の役割だよ。この処理がないと、存在しないページ4以降に進んでしまって表示がおかしくなるんだ。
#37左矢印の表示
準備
スプライト「左矢印」を開く
左矢印| スプライトについて | ショップページを前に戻す矢印ボタン |
|---|---|
| どんな役割か | ショップのページを前に戻すための左矢印ボタンを作るよ。クリックするとショップページが1つ前に戻るんだ。 |
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#38左矢印の配置
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#39左矢印のサイズ
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#40左矢印のクリック音
このスプライトが押されたとき で 終わるまで ( ) の音を鳴らす の「Finger Snap」を鳴らそう。ボタンの操作感を統一することで、プレイヤーが迷わず操作できるようになるんだ。
#41前ページへの通知
準備
メッセージ「前のショップ」を追加
ショップの前ページへの切替時に送信するメッセージ
実装
このスプライトが押されたとき で ( ) を送る を使って「前のショップ」メッセージを送信するよ。右矢印の「次のショップ」と対になるメッセージだね。
#42ページ下限チェック
このスプライトが押されたとき で もし ( ) ならでなければ を使い、「★ショップページ」が1かを ( ) = ( ) でチェックするよ。1なら でスクリプト中断、1でなければ ( ) を ( ) ずつ変える で-1して前のページに戻るんだ。
#43アイテム1の配置
準備
スプライト「ショップアイテム1」を開く
ショップアイテム1| スプライトについて | ショップページ1のオートクリッカー（100クリックで+10CPS） |
|---|---|
| どんな役割か | ショップの最初のアイテムを作るよ。100クリック消費すると、毎秒自動でクリックが増えるオートクリッカーを買えるようになるんだ。何回でも買い足せるスタック購入の仕組みも作るよ。 |
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#44アイテム1の表示
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#45ショップアイテムのホバー演出
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
目標サイズが90と80になっているのは、ショップアイテムがバッテリーより少し小さく表示されるようにするためだよ。イージングの仕組み自体はバッテリーと同じで、差分の1/3ずつ近づける線形補間を使っているんだ。
#46オートクリッカーの購入処理
このスプライトが押されたとき でクリックを検知して、 ずっと の中で3つの条件を同時にチェックするよ。「★クリック数」が100以上、マウスが押されている、そしてマウスがアイテムに触れている――この3つ全部がtrueのときだけ購入が成立するんだ。
購入が成立したら、 ( ) を ( ) ずつ変える で「★クリック数」を-100して代金を払い、「★1秒の自動獲得数」を+10するよ。これで毎秒10クリック分が自動で増えるようになるんだ。
#47オートクリッカーの自動加算
購入条件が成立した後に、内側にもう1つの ずっと を置くよ。この中で ( ) 秒待つ で1秒待ってから、 ( ) を ( ) ずつ変える で「★クリック数」に「★1秒の自動獲得数」を加算し続けるんだ。内側のループに入るとスクリプトはロックされるけど、もう一度アイテムをクリックすると新しいスレッドが起動して2回目の購入もできるよ。
#48購入不可時の保護処理
このスプライトが押されたとき でもう1つのスクリプトを作り、 ずっと の中で「★クリック数」が100未満かつマウスがアイテムから離れている場合に、 ( ) を ( ) にする で「★クリック数」をそのまま維持するよ。購入できないときに値が変わらないことを保証するんだ。
#49ページ切替時の非表示処理
( ) を受け取ったとき で「次のショップ」メッセージを受け取ったら、 ずっと の中で「★ショップページ」が2かどうかチェックするよ。2なら 隠す で隠して、 ( ) へ移動する で最背面に送るんだ。
#50ページ1での表示処理
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#51表示時のレイヤーとコスチューム
( ) へ移動する で最前面に移動して、 コスチュームを ( ) にする でコスチュームを設定するんだ。こうすることで、ページ1に戻ってきたときも正しい見た目で表示されるよ。
#52ショップアイテム2の配置
準備
スプライト「ショップアイテム2」を開く
ショップアイテム2| スプライトについて | ショップページ1のクリック倍率アップグレード（500クリックで+50/click） |
|---|---|
| どんな役割か | 1クリックあたりの獲得数を増やすアップグレードアイテムを作るよ。500クリック消費すると、1クリックで50ポイント多くもらえるようになるんだ。 |
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#53ショップアイテム2の初期表示
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#54ショップアイテム2のホバー演出
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
まとめ
ここまでで、クリッカーゲームの核となる部分が完成したよ！バッテリーをクリックしてポイントが増え、パーティクルが飛び散り、カスタム数字が光る――ゲームの「手触り」をつくる演出ブロックが揃ったね。ショップのページ切替と最初の2アイテムも動くようになったから、次はショップアイテムをさらに増やしていこう！
