スクラッチでクリッカーゲームの作り方｜ケーキ収集とオートベイカー

さぁ、スクラッチでナニ作る！？

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

clicker-game

by ok-scratch

プレイしておこう

今回のスクラッチを作る参考作品です。クリック強化もオートベイカーも、買うたびに値段が1.5倍・1.6倍でグイグイ跳ね上がっていくのがマジで沼。ただの固定価格じゃなくround(コスト×倍率)だけで『次はいつ買うか買わないか』の駆け引きが自然に生まれてて、放置ゲー特有の中毒性がちゃんと出来上がってるのがキレッキレ。数字ひとつでゲーム性を組み立ててる発想、どうやって作ってるか見ていこう。

今回の目標

ケーキをクリックすると増える仕組みを作る
クリック強化とオートベイカーのアップグレードを実装する
ケーキ1000個達成でクリア演出を出す

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

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

#1ステージ: ゲームの初期化

ok-scratch

このステップから「ケーキクリッカー」を作っていくよ。まずはステージ側で、ゲーム開始の合図と数値のリセットを担当するんだ。

準備

スプライト「stage」を開く

スステージ

スプライトについて
ケーキを集めてクリックパワーやオートベイカーを強化していくクリッカーゲームの舞台

変数「★ケーキの数」を追加

現在持っているケーキの合計数

変数「★クリックパワー」を追加

1回クリックしたときに増えるケーキの数

実装

イベントが押されたときで旗が押されたらスタート。ここが全部の処理の出発点だよ。

背景は見た目背景を ( ) にするで「Party」に切り替えて、お店っぽい雰囲気にするよ。

そのあと変数( ) を ( ) にするで「★ケーキの数」を0、「★クリックパワー」を1にセット。ゲームが始まるたびに数字をまっさらに戻しておくのがコツなんだ。

確認プレビューしておこう

旗を押すと背景がパーティー会場に変わって、ケーキ0・クリックパワー1でスタート。クリッカーゲームの初期状態ができた感じ。

#2ケーキ: ケーキを配置

ok-scratch

ステージの準備ができたから、次は主役のケーキを画面に置いていくよ。

準備

スプライト「ケーキ」を開く

ケーキ

スプライトについて
クリックするとケーキが増えるメインのスプライト
どんな役割か
クリックするとケーキが増えていくクリッカーゲームを作るよ。ケーキを1000個集めるとお祝いの演出が流れるんだ。

実装

イベントが押されたときでスタートして、見た目コスチュームを ( ) にするで「Cake-a」のコスチュームに切り替える。まだ食べてない普通のケーキ、これが基本の見た目だね。

動きx座標を ( ) 、y座標を ( ) にするで座標(0, 30)の画面中央あたりに配置するよ。サイズは150でドンと大きめ。

クリックしやすいように、あえて大きく構えた見た目にしてるんだ。主役だからこそ目立たせる価値があるよね。

確認プレビューしておこう

ケーキ本体が旗を押すと画面の中央あたり、サイズ150で表示されるようになった。まずは主役のケーキを定位置にセットする感じ。

#3ケーキ: ケーキを表示

ok-scratch

置いたケーキを、ちゃんと見える状態に整えていくよ。

見た目画像効果をなくすで前回の演出で残った効果を全部リセット。そのうえで見た目( ) へ移動するで最前面に持ってくるんだ。

あとは見た目表示するで表示。効果を消してから見せる順番が地味に効いてて、これをサボると前の半透明が残ったりするよ。

確認プレビューしておこう

ケーキのエフェクトをリセットして最前面に持ってきて、しっかり表示。これで他のスプライトに隠れず主役として見えるようになったね。

#4ケーキ: クリックで増やす

ok-scratch

ここがクリッカーの心臓部。ケーキをクリックしたら数が増える、このメインの流れを組んでいくよ。

準備

メッセージ「星エフェクト」を追加

ケーキをクリックしたときに星のクローンを発生させる合図

実装

イベントこのスプライトが押されたときでクリックを受け取って、変数( ) を ( ) ずつ変えるで「★ケーキの数」を「★クリックパワー」の分だけ増やすよ。1クリックでいくつ増えるかを変数で持ってるんだ。

増えた瞬間に音( ) の音を鳴らすでコインの音を鳴らして、イベント( ) を送るで「星エフェクト」の合図を飛ばす。

音と星のダブルで「押した！」の手ごたえを作ってるんだ。この気持ちよさこそクリッカーの生命線だよね。

確認プレビューしておこう

ケーキをクリックすると数がクリックパワーぶん増えて、コインの音が鳴る。同時に星エフェクトの合図も飛ばしてるやつ。

#5ケーキ: クリックの拡大演出

ok-scratch

クリックした瞬間にケーキがぷにっと弾む、あの拡大演出をつけるよ。

サイズを一回132まで縮めてから、制御( ) 回繰り返すで6回くり返して見た目大きさを ( ) ずつ変えるで少しずつ大きく戻すんだ。最後は150にぴったり戻して完了。

小さく縮めてからだんだん大きく戻す、この動きが押した手ごたえを生んでるよ。数フレームの一瞬だけど、あるとないとで気持ちよさが段違いだね。

確認プレビューしておこう

クリックするとケーキが一瞬ちっちゃくなってから元のサイズに戻る。ぷにっと弾むアニメで、押した感触が気持ちよくなった感じ。

#6ステージ: 値段を用意する

ok-scratch

ケーキ本体ができたから、いったんステージに戻って残りの数値をそろえるよ。

準備

スプライト「stage」を開く

ステージ

変数「★オートベイカーの数」を追加

購入したオートベイカーの数。1秒ごとにこの数だけケーキが増える

変数「★クリック強化の値段」を追加

クリック強化ボタンを購入するのに必要なケーキの数

変数「★オートベイカーの値段」を追加

オートベイカーを購入するのに必要なケーキの数

実装

変数( ) を ( ) にするで「★オートベイカーの数」を0にリセット。ここは初期値だから0スタートなんだ。

続けて「★クリック強化の値段」を10、「★オートベイカーの値段」を50にセットするよ。

ここで決めた10と50が、あとで買い物するときの最初の値段になるんだ。最後に変数変数 ( ) を表示するで「★ケーキの数」を画面に出して、プレイヤーに見せておくよ。

確認プレビューしておこう

オートベイカーの数を0、クリック強化の値段を10、オートベイカーの値段を50でセット。あわせてケーキの数を画面に表示するようにしたよ。

#7ステージ: 残りの数値も表示

ok-scratch

さっきの続きで、のこりのモニターも画面に出していく番だね。

変数変数 ( ) を表示するで「★クリックパワー」と「★オートベイカーの数」を表示する。これで今の強化ぐあいがひと目で分かるようになるよ。

数字が見えてると、プレイヤーは「次どっち強化しよ」って考えられるよね。地味だけど、クリッカーの戦略性を支えてる大事な部分。

確認プレビューしておこう

クリックパワーとオートベイカーの数も画面に表示。これで今の強化状況が一目で分かるようになって、数字が動くのが見えるようになった。

#8クリック強化ボタン: 強化ボタンを置く

ok-scratch

数値まわりが整ったから、次はケーキを使ってパワーアップする「強化ボタン」を作っていくよ。

準備

スプライト「クリック強化ボタン」を開く

クリック強化ボタン

スプライトについて
ケーキを消費して1クリックで増えるケーキの量を強化するボタン
どんな役割か
ケーキを消費して1回のクリックで増える量を強化できるボタンを作るよ。値段が足りないと半透明になって買えないことが分かるんだ。

実装

イベントが押されたときでスタートして、見た目コスチュームを ( ) にするで「Button1」の見た目にするんだ。

動きx座標を ( ) 、y座標を ( ) にするで画面左下(-150, -130)に配置。サイズは80で、ケーキより控えめにしておくよ。

ボタンは脇役だから、主役のケーキより目立たせないバランスにしてるんだ。この主従関係、地味だけど画面の見やすさに効いてるよね。

確認プレビューしておこう

クリック強化ボタンをButton1の見た目で左下あたりに配置して、サイズは80に設定。強化系ボタンの土台ができたって感じ。

#9クリック強化ボタン: 値段を表示し続ける

ok-scratch

強化ボタンに、今の値段をずっと表示させるよ。

見た目表示するで出したあと、制御ずっとでループを回しっぱなしにして、中の見た目( ) と言うで値段を言わせ続けるんだ。

表示する文字は演算( ) と ( )で「クリック強化」と「★クリック強化の値段」をくっつけて作るよ。値段は買うたびに変わるから、毎フレーム作り直して最新をキープしてるってわけ。

確認プレビューしておこう

クリック強化ボタンを表示して、ずっと「クリック強化」と今の値段をしゃべらせる。いくらで買えるかが常に見えてるやつ。

#10クリック強化ボタン: 買えるか判定

ok-scratch

ボタンが「今買えるのか買えないのか」を判断する部分を作るよ。

制御もし ( ) ならでなければを使って、条件で処理を2つに分ける。条件は演算( ) ではないと演算( ) < ( )の組み合わせで、「★ケーキの数が値段より小さくない」＝「足りてる」を表してるんだ。

「小さくない」で「以上」を表すのがちょっとしたテクニック。スクラッチには「≧」のブロックがないから、「〜より小さい」をひっくり返して同じ意味を作ってる。

#11クリック強化ボタン: 買えるかを見た目で

ok-scratch

さっきの判定の中身を埋めて、買えるかどうかを見た目で伝えていくよ。

足りてるときは見た目( ) の効果を ( ) にするで「幽霊」の効果を0にして、くっきり不透明に。足りないときは同じ効果を50にして半透明にするんだ。幽霊50で「押せない感じ」がパッと伝わるよね。

普通ならボタンの有効・無効はコスチュームを2枚用意して切り替えるよね。でもこの作品は幽霊効果の数字を変えるだけで表現してる。コスチュームを増やさずに済むから、あとで直すのもラクなんだ。

確認プレビューしておこう

ケーキが値段以上あるときはボタンをくっきり、足りないときは半透明にする。買えるかどうかが見た目で分かるようになったね。

#12クリック強化ボタン: 強化を購入する

ok-scratch

いよいよ強化ボタンを押したときの処理。ケーキを払ってクリックパワーを上げるよ。

イベントこのスプライトが押されたときでクリックを受けて、制御もし ( ) ならで「足りてるか」をもう一回チェックするんだ。見た目が半透明でも、買えるかはここで最終確認だよ。

条件を満たしたら変数( ) を ( ) ずつ変えるで「★ケーキの数」を値段のぶんだけ減らす。そして「★クリックパワー」を1増やすよ。

払って強くなる、っていうシンプルな取引だね。この一手が積み重なって、クリック1回の重みがどんどん増していくんだ。

#13クリック強化ボタン: 値段を上げる

ok-scratch

買ったあとに値段を上げて、次はもっと高くつくようにするよ。

変数( ) を ( ) にするで「★クリック強化の値段」を、今の値段×1.5にして書き戻すんだ。演算( ) を四捨五入で四捨五入して整数にそろえるのがポイント。最後に音( ) の音を鳴らすで購入音を鳴らして完了だね。

ok-scratch

普通、アイテムの値段って固定にしがちだよね。でもこの作品は買うたびに値段を1.5倍にしてるんだ。これ、クリッカーゲームの心臓部っていっていいテクニック。1.5倍を繰り返すと値段はどんどん急カーブで上がっていく、いわゆる指数関数の動きだよ。だから「次の1個をいつ買うか」で悩むようになる。もし値段が固定だと、すぐ全部買えちゃってヒマになるよね。急カーブだからこそ、ずっと遊べるバランスが生まれるってわけ。

確認プレビューしておこう

ボタンをクリックすると買えるときだけケーキを払ってクリックパワーが1増える。買うたび値段が1.5倍になって、Winの音も鳴るよ。

#14オートベイカーボタン: オートボタンを置く

ok-scratch

強化ボタンができたから、今度は「オートベイカー」のボタンを作るよ。ほっといてもケーキが増える仕組みの入り口だね。

準備

スプライト「オートベイカーボタン」を開く

オートベイカーボタン

スプライトについて
ケーキを消費してオートベイカーを購入し、ケーキを自動生産するボタン
どんな役割か
ケーキを消費してオートベイカーを増やせるボタンを作るよ。オートベイカーが増えると自動でケーキが増えていくんだ。

実装

流れは強化ボタンとほぼ同じなんだ。イベントが押されたときでスタートして、見た目コスチュームを ( ) にするで「Button2-a」の見た目にするよ。

動きx座標を ( ) 、y座標を ( ) にするで画面右下(150, -130)に置いて、サイズは80。

左の強化ボタンと左右対称に並べて、UIをそろえてるんだ。同じ形が2つ並ぶと、操作の予測がついて迷いにくいよね。

確認プレビューしておこう

オートベイカーボタンをButton2-aの見た目で右下に配置してサイズ80に。もう片方の強化ボタンの土台もできた感じ。

#15オートベイカーボタン: 値段を表示し続ける

ok-scratch

オートボタンにも、今の値段をずっと表示させるよ。

見た目表示するで表示して、制御ずっとのループの中で演算( ) と ( )を使って「オートベイカー」と「★オートベイカーの値段」をつなげて言わせ続けるんだ。

やってることは強化ボタンとまるっと同じ。同じ仕組みを別のボタンに使い回せるのが、変数とループの強みだね。

確認プレビューしておこう

オートベイカーボタンを表示して、ずっと「オートベイカー」と値段をしゃべらせる。こっちもいくらで買えるかが常に見えるようになった。

#16オートベイカーボタン: 買えるか判定

ok-scratch

オートボタンも、買えるかどうかを判定させるよ。

制御もし ( ) ならでなければで処理を分けて、演算( ) ではないと演算( ) < ( )で「★ケーキの数が値段以上か」を調べるんだ。強化ボタンとまったく同じ考え方だよ。

比べる相手が「★オートベイカーの値段」に変わっただけ。一度作った判定のパターンは、こうやってあちこちで再利用できるよね。

#17オートベイカーボタン: 買えるかを見た目で

ok-scratch

判定の中身を埋めて、オートボタンも見た目で買えるか伝えるよ。

足りてるときは見た目( ) の効果を ( ) にするで「幽霊」の効果を0、足りないときは50にするんだ。強化ボタンと同じ、幽霊効果でオン・オフを表す作戦だね。

2つのボタンで同じ表現をそろえておくと、プレイヤーは迷わない。「半透明＝まだ買えない」って一度覚えれば、どっちのボタンでも通じるからね。

確認プレビューしておこう

オートベイカーボタンも、ケーキが足りてるときはくっきり、足りないときは半透明。クリック強化と同じ買える判定の見せ方だね。

#18オートベイカーボタン: オートを購入する

ok-scratch

オートボタンを押したときの処理を作っていくんだ。

イベントこのスプライトが押されたときでクリックを受けて、制御もし ( ) ならで足りてるか最終チェック。条件を満たしたら変数( ) を ( ) ずつ変えるで「★ケーキの数」を値段ぶん減らして、「★オートベイカーの数」を1増やすよ。

オートベイカーが1台増えると、このあと作る自動生産がそのぶん増えるんだ。

1回の買い物が、ずっと効いてくる投資みたいなものだよ。クリック強化が「筋トレ」なら、こっちは「不労所得」を買う感覚だね。

#19オートベイカーボタン: 値段を上げる

ok-scratch

こっちも買ったら値段を上げるよ。

変数( ) を ( ) にするで「★オートベイカーの値段」を今の値段×1.6にして、演算( ) を四捨五入で整数にするんだ。強化ボタンが1.5倍だったのに対して、オートは1.6倍とちょっと急にしてある。

自動で増えるオートベイカーのほうが強力だから、値段の上がり方も少しキツめ。この倍率のさじ加減が、ゲームバランスを決めるツマミになってるんだ。

確認プレビューしておこう

クリックで買えるときだけケーキを払ってオートベイカーが1個増える。値段は買うたび1.6倍に上がって、Winの音も鳴るやつ。

#20ステージ: 自動でケーキ増加

ok-scratch

ボタンが揃ったから、次はステージに戻ってオートベイカーの本体を作るよ。買ったオートが、実際にケーキを生む部分だね。

準備

スプライト「stage」を開く

ステージ

実装

イベントが押されたときでスタートして、制御ずっとの中に制御( ) 秒待つで1秒待ちを入れるんだ。この1秒ごとに1回、下の処理が回るよ。

制御もし ( ) ならで「★オートベイカーの数」が0より大きいときだけ、変数( ) を ( ) ずつ変えるでその数だけケーキを足す。1秒に1回、オートの台数ぶん増えるのが自動生産の正体。

オートを増やすほど毎秒の増加がふくらむから、序盤の投資が後半にじわじわ効いてくるんだ。ほったらかしでもケーキが増える、これがクリッカーの気持ちよさだよね。

確認プレビューしておこう

旗を押すと1秒ごとにオートベイカーの数だけケーキが自動で増えるようになった。ほっといてもケーキがたまる仕組みができた感じ。

#21星パーティクル: 星を隠しておく

ok-scratch

自動生産まで組めたから、ここからは最後の仕上げ、クリックのたびに飛び散る星の演出だよ。まずは星スプライトの下ごしらえから。

準備

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

星パーティクル

スプライトについて
ケーキをクリックしたときに飛び散る星のクローン用スプライト
どんな役割か
ケーキをクリックすると飛び散る星のエフェクトを作るよ。クローンを使って画面上にランダムに星を出現させるんだ。

実装

イベントが押されたときでスタートしたら、いきなり見た目隠すで隠す。星の本体は表に出さず、あとで作るクローンだけを見せる作戦なんだ。

本体は隠して分身だけ動かすのが、クローン演出の基本形。本体が見えてると、画面にポツンと余計な星が残っちゃうからね。

確認プレビューしておこう

星パーティクルは旗を押すと最初は隠れる。本体は非表示にしておいて、クローン側で星を出す準備が整ったって感じ。

#22星パーティクル: 星のクローン生成

ok-scratch

星をクリックのタイミングで生み出す部分を作るんだ。

イベント( ) を受け取ったときで「星エフェクト」の合図を受け取る。ケーキをクリックしたときに飛んでくる、あの合図だね。受け取ったら制御( ) のクローンを作るで自分の分身を1個作るよ。

クリックするたびにこの合図が飛んでくるから、連打するとそのぶん星がどんどん増える。合図とクローンを組み合わせると、「イベントに反応して何かを量産する」演出がラクに書けるってわけ。

#23星パーティクル: 星の初期設定

ok-scratch

生まれたクローンが、どんな見た目でどこに出るかを決めるよ。

制御クローンされたときがクローン誕生の合図。見た目コスチュームを ( ) にするで「Star」の見た目にして、動きx座標を ( ) 、y座標を ( ) にするで出現位置をセットするんだ。

この座標に演算( ) から ( ) までの乱数を使ってるのがミソだよ。xを-70〜70、yを40〜110の乱数にすることで、毎回ちょっと違う場所に星が散る。だから連打しても同じ場所に重ならず、にぎやかに見えるよね。

確認プレビューしておこう

ケーキをクリックすると星エフェクトの合図でクローンが生まれて、Starの見た目でランダムな位置に小さく出現するようになったよ。

#24星パーティクル: 星が舞い上がる

ok-scratch

クローンになった星が、ふわっと舞い上がって消えていく動きをつけるよ。

まず見た目( ) の効果を ( ) にするで「幽霊」を0に戻して表示。そこから制御( ) 回繰り返すで10回くり返して、動きy座標を ( ) ずつ変えるで少し上へ動かしつつ、サイズを縮めて「幽霊」効果を10ずつ足していくんだ。上がりながら小さく薄くなる、そんな動きだよ。

ok-scratch

星ひとつの動きはシンプルだけど、これをクローンでやってるのがうまいとこ。普通に本体スプライト1個をアニメさせると、画面に出せる星は同時に1個だけだよね。でもクローンなら、連打したぶんだけ星が別々の場所・タイミングで一斉に舞う。火花や紙吹雪みたいな「パーティクル」演出は、このやり方が定番なんだ。座標・サイズ・幽霊効果を同時に少しずつ変えるのが、ふわっと感のコツ。一気に動かすとカクつくけど、10回に分けるとなめらかに見えるってわけ。

確認プレビューしておこう

生まれた星のクローンが最前面に表示されて、10回かけて上に動きながら縮んで薄くなっていく。ふわっと消える演出ができた感じ。

#25星パーティクル: 星を消す

ok-scratch

舞い終わった星は、ちゃんと片付けるよ。

制御このクローンを削除するで、動きが終わったクローンを自分で削除。これで役目を終えた星が画面から消えるよ。

クローンの片付けは地味だけど超大事なやつ。スクラッチのクローンは300個までしか出せない上限があって、消さずに放っておくとすぐ打ち止めになって新しい星が出なくなるんだ。

確認プレビューしておこう

アニメが終わった星のクローンは自分を削除する。出しっぱなしにせず片付けるとこまでやって、クローンが増えすぎないようになったね。

#26ステージ: クリア判定

ok-scratch

演出が揃ったから、次はいよいよクリア判定。ケーキがたくさん集まったらお祝いするよ。

準備

スプライト「stage」を開く

ステージ

実装

イベントが押されたときでスタートして、制御( ) まで待つで「★ケーキの数」が999より大きくなるまでじっと待つんだ。条件を満たすまで、この先へは進まないってこと。

達成したら見た目背景を ( ) にするで背景を「Rays」に切り替えて、音( ) の音を鳴らすでファンファーレを鳴らすよ。背景と音がガラッと変わる、この瞬間の「やったー感」を狙ってるんだ。

確認プレビューしておこう

旗を押してケーキが999個を超えるまで待って、超えたら背景をキラキラの光線に切り替えてTriumphのファンファーレが鳴る。クリア演出の入り口。

#27ステージ: クリア後に停止

ok-scratch

クリアの合図をみんなに送って、ゲームを締めくくるよ。

準備

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

実装

イベント( ) を送るで「ゲームクリア」の合図を飛ばすんだ。この合図を受け取ったケーキ側が、このあとクリアの演出をやってくれるよ。

そのあと制御( ) 秒待つで2.5秒だけ余韻を残して、制御　ですべてを止める。演出を見せてから止めるこの順番が効いてて、いきなり止まるより気持ちよく終われるよね。

#28ケーキ: ケーキのクリア演出

ok-scratch

さっきの「ゲームクリア」の合図を、今度はケーキ側で受け取る仕上げのステップだね。

準備

スプライト「ケーキ」を開く

実装

イベント( ) を受け取ったときで合図をキャッチしたら、見た目コスチュームを ( ) にするで「Cake-b」の見た目にチェンジ。食べごろのケーキに変わる感じだよ。

最後は見た目( ) と ( ) 秒言うで「クリア！ケーキ1000個達成！」って2秒しゃべらせて、めでたく完成だね。ケーキを集める楽しさに、ゴールの達成感まで乗った一本になったよ。

確認プレビューしておこう

ゲームクリアの合図を送って2.5秒後に全部止める。ケーキ本体はCake-bに変わってクリアのセリフを出す。ゴールまで完成した感じ。

まとめ

ケーキをクリックするだけのシンプルな操作から、変数と条件分岐だけでちゃんと『育成』の手触りが生まれるのが体感できたはず。値段が倍々で上がっていく設計は、他のクリッカー系や育成ゲームにもそのまま使い回せるテクニックだよ。星エフェクトみたいなクローン演出も合わせて、自分だけのクリッカーゲームにアレンジしてみよう。