- スターター作品
- なし
- 今回の完成サンプル
- なし
スクラッチで作る作品について
バッテリーをクリックしてポイントを稼ぎ、ショップでアップグレードを購入するインクリメンタルクリッカーゲーム。3ページのショップ、パーティクルエフェクト、数字ディスプレイ、ボーナスアイテムなど多彩な機能を持つ。
今回の目標
チュートリアルの元になった作品
[prj-embed prj="738364000" mini="1" title="プレイしておこう"]今回の[prj-link prj="738364000"]スクラッチを作る参考作品[/prj-link]にさせていただきました、ありがとう！プレイして完成イメージをつかんでおこう。（記事ではチュートリアル用にリファクタした作品を作るので、同じものが完成するわけではない点はご注意）[/prj-embed]#1クリック倍率アップの購入
[talk class="m-l-n"]ショップアイテム2の購入処理はオートクリッカーとは少し違うよ。500クリック消費すると、1クリックあたりの獲得数が50増えるタイプなんだ。[/talk]
このスプライトが押されたとき で、「★クリック数」が500以上かつマウスが押されていてアイテムに触れている条件をチェックするよ。条件が揃ったら「★クリック数」を-500して、 ( ) を ( ) ずつ変える で「★1クリックの獲得数」を+50するんだ。
オートクリッカーと違って内側の ずっと がないから、購入後もスクリプトは外側のループに戻って次の購入を待つよ。自動でクリック数は増えないけど、クリックするたびに一気に稼げるようになるんだ。
#2ショップアイテム2の購入保護
[talk class="m-l-n"]ショップアイテム1と同じく、クリック数が足りないときの保護処理を作るよ。[/talk]
このスプライトが押されたとき で、「★クリック数」が500未満かつマウスが離れているときに「★クリック数」をそのまま維持するんだ。
#3ショップアイテム2のページ切替
[talk class="m-l-n"]ページ2に切り替わったら隠す処理だよ。ショップアイテム1と同じ構造だね。[/talk]
( ) を受け取ったとき で「次のショップ」を受け取り、「★ショップページ」が2のとき 隠す で隠して最背面に送るよ。
#4ショップアイテム2のページ1表示
[talk class="m-l-n"]ページ1のときにアイテムを表示する処理だよ。繰り返しのパターンだけど、全ショップアイテムに必要な仕組みなんだ。[/talk]
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#5ショップアイテム2の表示設定
[talk class="m-l-n"]表示時の仕上げとして、レイヤーとコスチュームを設定するよ。[/talk]
( ) へ移動する で最前面に出して、 コスチュームを ( ) にする でコスチュームを設定するんだ。
#6ショップアイテム3の配置
[talk class="m-l-n"]3つ目のショップアイテムを作るよ。これは1000クリックで買える高額オートクリッカーで、ショップアイテム1と同じく毎秒の自動獲得数を増やすタイプだよ。[/talk]準備
スプライト「ショップアイテム3」を開く
ショップアイテム3| スプライトについて |
|---|
| ショップページ1の高額オートクリッカー（1000クリックで+10CPS） |
| どんな役割か |
| 2つ目のオートクリッカーを作るよ。1000クリック必要だけど、買うたびに毎秒のクリック数がどんどん増えていくよ。 |
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#7ショップアイテム3の初期表示
[talk class="m-l-n"]旗クリック時の初期表示を設定するよ。他のショップアイテムと同じ構成だね。[/talk]
表示する で表示して、 ( ) へ移動する で最前面、 コスチュームを ( ) にする でコスチュームを設定するよ。
#8ショップアイテム3のホバー演出
[talk class="m-l-n"]マウスを近づけたら大きくなるあのホバー演出だよ。もうパターンは掴めたかな？[/talk]
もし ( ) ならでなければ と ( ) に触れた の組み合わせで、マウスの接触状態に応じて 大きさを ( ) %にする を切り替えるんだ。目標サイズ90と80に向かってイージングで変化するよ。
#9高額オートクリッカーの購入
[talk class="m-l-n"]ショップアイテム3の購入処理を作るよ。1000クリック消費して「★1秒の自動獲得数」を+10するんだ。[/talk]
このスプライトが押されたとき で、「★クリック数」が1000以上かつマウスが押されていてアイテムに触れているかチェックするよ。条件が揃ったら代金の1000を差し引いて、「★1秒の自動獲得数」を10増やすんだ。
ショップアイテム1と同じ+10CPSなのに10倍の値段がするのは一見損に見えるけど、次のステップで追加される自動加算ループと組み合わさることで、購入を重ねるほど加速していく仕組みになっているよ。
#10高額オートクリッカーの自動加算
ショップアイテム1と同じ、内側の ずっと によるスタック型オートクリッカーだよ。
( ) 秒待つ で1秒待って、 ( ) を ( ) ずつ変える で「★クリック数」に「★1秒の自動獲得数」を加算するよ。購入するたびに新しいスレッドが積み重なって、自動加算の速度がどんどん上がっていくんだ。
#11ショップアイテム3の購入保護
[talk class="m-l-n"]クリック数が1000未満でマウスが離れているときの保護処理だよ。[/talk]
このスプライトが押されたとき で条件をチェックして、 ( ) を ( ) にする で「★クリック数」をそのまま維持するよ。他のショップアイテムと同じ安全装置だね。
#12ショップアイテム3のページ切替
[talk class="m-l-n"]ページが変わったらアイテムを隠す処理だよ。ショップアイテム3もページ1のアイテムだから、ページ2になったら見えなくなるようにするんだ。[/talk]
( ) を受け取ったとき で「次のショップ」を受け取り、「★ショップページ」が2のときに 隠す と ( ) へ移動する で最背面に送るよ。
#13ショップアイテム3のページ1表示
[talk class="m-l-n"]ページ1のときにショップアイテム3を表示するスクリプトだよ。[/talk]
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#14ショップアイテム3の表示設定
[talk class="m-l-n"]表示時のレイヤーとコスチュームを設定するよ。[/talk]
( ) へ移動する で最前面に出して、 コスチュームを ( ) にする でコスチュームを整えるんだ。
#15ショップアイテム4の配置
[talk class="m-l-n"]ここからはショップページ2のアイテムだよ。ショップアイテム4は5000クリックで買える強力なオートクリッカーで、購入するたびに毎秒100クリック分の自動獲得が追加されるんだ。[/talk]準備
スプライト「ショップアイテム4」を開く
ショップアイテム4| スプライトについて |
|---|
| ショップページ2のオートクリッカー（5000クリックで+100CPS） |
| どんな役割か |
| ショップページ2の強力なオートクリッカーを作るよ。5000クリック消費すると毎秒100クリック自動で稼いでくれるんだ。 |
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#16ショップアイテム4の初期表示
[talk class="m-l-n"]旗クリック時の初期表示設定だよ。ページ2のアイテムだけど、最初にコスチュームとレイヤーを設定しておく必要があるんだ。[/talk]
表示する 、 ( ) へ移動する 、 コスチュームを ( ) にする で見た目を初期化するよ。ページ切替の仕組みが後から表示・非表示を管理するから、初期化は見た目の準備だけで大丈夫だよ。
#17ショップアイテム4のホバー演出
[talk class="m-l-n"]ページ2のアイテムにも同じホバーアニメーションをつけるよ。すべてのショップアイテムで統一された操作感を提供するためだよ。[/talk]
もし ( ) ならでなければ と ( ) に触れた で、マウスが触れているときはサイズ90へ、離れているときはサイズ80へイージングで近づけるんだ。
#18強力オートクリッカーの購入
[talk class="m-l-n"]ショップアイテム4の購入処理を作るよ。5000クリック消費して「★1秒の自動獲得数」を一気に100増やすんだ。[/talk]
このスプライトが押されたとき で3つの条件――マウスが押されている、アイテムに触れている、「★クリック数」が5000以上――を同時にチェックするよ。条件が揃ったら5000を差し引いて、「★1秒の自動獲得数」を+100するんだ。
ページ1のオートクリッカーが+10CPSだったのに対して、こちらは+100CPSだよ。値段は50倍だけど効果は10倍で、コスパは下がるけどゲーム後半では大量のクリック数を稼げるから問題ないんだ。
#19強力オートクリッカーの自動加算
[talk class="m-l-n"]購入後の自動加算ループだよ。ショップアイテム1、3と同じスタック型オートクリッカーの仕組みだね。[/talk]
内側の ずっと で ( ) 秒待つ を1秒、 ( ) を ( ) ずつ変える で「★クリック数」に「★1秒の自動獲得数」を加算するよ。購入を重ねるたびに並行スレッドが増えて加速していくんだ。
#20ショップアイテム4の購入保護
[talk class="m-l-n"]クリック数が5000未満でマウスが離れているときの保護処理だよ。[/talk]
他のアイテムと同じ構造で、 ( ) を ( ) にする で「★クリック数」をそのまま維持して変数を保護するよ。
#21ショップアイテム4のページ切替(非表示)
[talk class="m-l-n"]ページ2のアイテムだから、ページ3に進んだときに隠す必要があるよ。ページ1のアイテムとは判定するページ番号が1つずつずれているんだ。[/talk]
( ) を受け取ったとき で「次のショップ」を受け取り、「★ショップページ」が3のときに 隠す で隠して ( ) へ移動する で最背面に送るよ。
#22ショップアイテム4のページ2表示
[talk class="m-l-n"]ページ2に戻ってきたときにアイテムを再表示する処理だよ。ページ1のアイテムが旗クリックで表示を管理していたのに対して、ページ2のアイテムは「前のショップ」メッセージで管理するんだ。[/talk]
( ) を受け取ったとき で「前のショップ」を受け取り、 ずっと の中で「★ショップページ」が2のときに 表示する で表示するよ。
#23ショップアイテム4の表示設定
[talk class="m-l-n"]表示時のレイヤーとコスチュームを整えるよ。[/talk]
( ) へ移動する で最前面に出して、 コスチュームを ( ) にする でコスチュームを設定するんだ。ページ2に戻るたびにこの設定が適用されるよ。
#24ショップアイテム5の配置
[talk class="m-l-n"]ページ2にもクリック倍率アップグレードが必要だよね。ショップアイテム5は10000クリック消費すると、1クリックあたり1000ポイントも多くもらえるようになるんだ。[/talk]準備
スプライト「ショップアイテム5」を開く
ショップアイテム5| スプライトについて |
|---|
| ショップページ2のクリック倍率アップグレード（10000クリックで+1000/click） |
| どんな役割か |
| ショップページ2のクリック倍率アップグレードを作るよ。10000クリック消費すると、1クリックあたり1000ポイント多くもらえるようになるんだ。 |
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#25ショップアイテム5の初期表示
[talk class="m-l-n"]旗クリック時の見た目の初期化だよ。ページ2のアイテムも最初にコスチュームを設定しておく必要があるんだ。[/talk]
表示する で表示して、 ( ) へ移動する で最前面、 コスチュームを ( ) にする でコスチュームを設定するよ。
#26ショップアイテム5のホバー演出
[talk class="m-l-n"]すべてのショップアイテムに共通のホバーアニメーションだよ。マウスが触れるとサイズが90に向かい、離れると80に向かうイージングだね。[/talk]
ずっと の中で もし ( ) ならでなければ と ( ) に触れた を使って、 大きさを ( ) %にする でサイズを滑らかに変化させるよ。
#27クリック倍率の大幅アップグレード
[talk class="m-l-n"]ショップアイテム5の購入処理だよ。ショップアイテム2が500クリックで+50だったのに対して、こちらは10000クリックで+1000。効率は同じだけど、ゲーム後半のインフレに対応した設定だよ。[/talk]
このスプライトが押されたとき で「★クリック数」が10000以上かどうかチェックして、条件が揃ったら10000を差し引き、 ( ) を ( ) ずつ変える で「★1クリックの獲得数」を+1000するよ。
オートクリッカーと違って内側の ずっと がないから、購入処理の後すぐに次の購入判定に戻るよ。クリック倍率は即座に反映されて、次のクリックからもう増えた分がもらえるんだ。
#28ショップアイテム5の購入保護
[talk class="m-l-n"]クリック数が10000未満でマウスが離れているときの保護処理だよ。[/talk]
このスプライトが押されたとき で条件をチェックして、 ( ) を ( ) にする で「★クリック数」を維持するんだ。全ショップアイテム共通の安全装置だね。
#29ショップアイテム5のページ2表示
[talk class="m-l-n"]ページ2に戻ったときにアイテムを表示する処理だよ。ショップアイテム4と同じく「前のショップ」メッセージで管理するんだ。[/talk]
( ) を受け取ったとき で「前のショップ」を受け取り、「★ショップページ」が2のとき 表示する で表示するよ。
#30ショップアイテム5の表示設定
[talk class="m-l-n"]表示時のレイヤーとコスチュームの設定だよ。[/talk]
( ) へ移動する で最前面に出して、 コスチュームを ( ) にする でコスチュームを設定するんだ。
#31ショップアイテム5のページ切替(非表示)
[talk class="m-l-n"]ページ3に進んだらショップアイテム5を隠す処理だよ。ショップアイテム4と同じ構造だね。[/talk]
( ) を受け取ったとき で「次のショップ」を受け取り、「★ショップページ」が3のときに 隠す で隠して ( ) へ移動する で最背面に送るよ。
#32ショップアイテム6の配置
[talk class="m-l-n"]ショップアイテム6はページ2の最後のアイテムだよ。クリックすると即座にボーナスクリックがもらえるタイプなんだ。[/talk]準備
スプライト「ショップアイテム6」を開く
ショップアイテム6| スプライトについて |
|---|
| ショップページ2のボーナスクリック付与アイテム |
| どんな役割か |
| クリックすると1000クリック分のボーナスがもらえるアイテムを作るよ。即座にクリック数が増えるんだ。 |
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#33ショップアイテム6の初期表示
[talk class="m-l-n"]旗クリック時の見た目を初期化するよ。他のアイテムと同じパターンだね。[/talk]
表示する で表示して、 ( ) へ移動する で最前面、 コスチュームを ( ) にする でコスチュームを設定するよ。ショップアイテム6の購入ロジックやページ管理は次のバッチで作っていくよ。
#34ショップアイテム6のホバー演出
[talk class="m-l-n"]ショップアイテム6にもお馴染みのホバーアニメーションをつけるよ。マウスが触れるとサイズが大きくなり、離れると元に戻る動きだね。[/talk]
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#35ボーナスクリックの付与
[talk class="m-l-n"]ショップアイテム6は他のアイテムとはちょっと違うよ。クリックするだけで「★クリック数」が1000増えるボーナスアイテムなんだ。代金は必要ないから、クリックするたびに即座にポイントがもらえるよ。[/talk]
このスプライトが押されたとき から ( ) を ( ) ずつ変える で「★クリック数」を1000増やすだけのシンプルな仕組みだよ。
#36ボーナスの安全装置
[talk class="m-l-n"]ボーナスアイテムにも保護処理は必要だよ。「★クリック数」が1000未満でマウスがアイテムから離れているときに、変数の値を守る仕組みを入れるんだ。[/talk]
このスプライトが押されたとき で、 ( ) かつ ( ) を使って2つの条件を組み合わせるよ。 ( ) < ( ) で「★クリック数」が1000未満、かつ ( ) ではない で ( ) に触れた がfalseのときに ( ) を ( ) にする で値を維持するんだ。
#37ページ2への表示復帰
[talk class="m-l-n"]ページ3からページ2に戻ったとき、ショップアイテム6を再表示する処理だよ。[/talk]
( ) を受け取ったとき で「前のショップ」メッセージを受け取り、 ずっと の中で「★ショップページ」が2のときに 表示する で表示するよ。
#38表示時の見た目設定
[talk class="m-l-n"]表示するだけでなく、レイヤーとコスチュームも正しく整えるよ。[/talk]
( ) へ移動する で最前面に出して、 コスチュームを ( ) にする でコスチュームを設定するんだ。これでページを行き来してもアイテムが正しく表示されるよ。
#39ページ3への非表示処理
[talk class="m-l-n"]ページ3に進んだらショップアイテム6を隠す処理だよ。ページ2のアイテムだから、ページ3のアイテムと入れ替わりになるんだ。[/talk]
( ) を受け取ったとき で「次のショップ」を受け取り、「★ショップページ」が3のときに 隠す で隠して ( ) へ移動する で最背面に送るよ。
#40ショップアイテム7の配置
[talk class="m-l-n"]ここからはショップページ3のアイテムだよ。ショップアイテム7はゲーム最終盤の超強力なオートクリッカーで、100000クリック消費すると毎秒100万クリックも自動で稼いでくれるんだ。[/talk]準備
スプライト「ショップアイテム7」を開く
ショップアイテム7| スプライトについて |
|---|
| ショップページ3のオートクリッカー（100000クリックで+1000000CPS） |
| どんな役割か |
| ショップページ3の超強力なオートクリッカーを作るよ。100000クリック必要だけど、毎秒100万クリックも自動で稼いでくれるんだ。 |
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#41ショップアイテム7の初期表示
[talk class="m-l-n"]旗クリック時の見た目の初期化だよ。ページ3のアイテムも起動時にコスチュームを準備しておく必要があるんだ。[/talk]
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#42ショップアイテム7のホバー演出
[talk class="m-l-n"]ページ3のアイテムにも同じホバーアニメーションをつけるよ。全ショップアイテム共通の操作感だね。[/talk]
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#43超強力オートクリッカーの購入
[talk class="m-l-n"]ショップアイテム7の購入処理を作るよ。「★クリック数」が100000以上のときにクリックで購入できるんだ。[/talk]
このスプライトが押されたとき で、 ( ) かつ ( ) を使って「★クリック数」が100000以上、マウスが押されている、アイテムに触れている、の3条件を同時チェックするよ。条件が揃ったら ( ) を ( ) ずつ変える で「★クリック数」を-100000して代金を払い、「★1秒の自動獲得数」を+1000000するんだ。
ページ1のオートクリッカーが+10CPS、ページ2が+100CPSだったのに対して、こちらは一気に+1000000CPS。インクリメンタルゲームではこうした桁違いのインフレが後半の爽快感を生むんだよ。
#44超強力オートクリッカーの自動加算
[talk class="m-l-n"]購入後に毎秒クリック数を自動加算するループだよ。おなじみのスタック型オートクリッカーの仕組みだね。[/talk]
内側の ずっと で ( ) 秒待つ を1秒待って、 ( ) を ( ) ずつ変える で「★クリック数」に「★1秒の自動獲得数」を加算するよ。購入を重ねるたびに新しいスレッドが積み重なって加速していくんだ。
#45ショップアイテム7の購入保護
[talk class="m-l-n"]クリック数が足りないときの保護処理だよ。「★クリック数」が100000未満でマウスが離れているときに値を維持するんだ。[/talk]
このスプライトが押されたとき で条件をチェックして、 ( ) を ( ) にする で「★クリック数」をそのまま維持するよ。
#46ページ3での表示処理
[talk class="m-l-n"]ショップアイテム7はページ3のアイテムだから、ページ3に来たときに表示する処理が必要だよ。ページ2のアイテムが「前のショップ」で表示管理していたのに対して、ページ3のアイテムは「次のショップ」で管理するんだ。[/talk]
( ) を受け取ったとき で「次のショップ」を受け取り、 ずっと の中で「★ショップページ」が3のときに 表示する で表示するよ。
#47ページ3の表示設定
[talk class="m-l-n"]表示時のレイヤーとコスチュームを整えるよ。[/talk]
( ) へ移動する で最前面に出して、 コスチュームを ( ) にする でコスチュームを設定するんだ。
#48ページ2への非表示処理
[talk class="m-l-n"]ページ2に戻ったらショップアイテム7を隠す処理だよ。ページ3のアイテムはページ2に戻るときに消える必要があるんだ。[/talk]
( ) を受け取ったとき で「前のショップ」を受け取り、 ずっと の中で「★ショップページ」が2のときに 隠す で隠して ( ) へ移動する で最背面に送るよ。
#49ショップアイテム8の配置
[talk class="m-l-n"]ページ3の2番目のアイテムを作るよ。ショップアイテム8は100万クリックで買えて、1クリックあたりの獲得数が10億も増える巨大なクリック倍率アップグレードなんだ。[/talk]準備
スプライト「ショップアイテム8」を開く
ショップアイテム8| スプライトについて |
|---|
| ショップページ3のクリック倍率アップグレード（1000000クリックで+1000000000/click） |
| どんな役割か |
| ショップページ3の巨大クリック倍率アップグレードを作るよ。100万クリック消費すると、1クリックで10億ポイントもらえるようになるんだ。 |
実装
.st0 {
fill: #45993D;
}
.st1 {
fill: #4CBF56;
}
#50ショップアイテム8の初期表示
[talk class="m-l-n"]他のアイテムと同じく、旗クリック時に見た目を初期化するよ。[/talk]
表示する で表示して、 ( ) へ移動する で最前面、 コスチュームを ( ) にする でコスチュームを設定するよ。
#51ショップアイテム8のホバー演出
[talk class="m-l-n"]ホバーアニメーションを追加するよ。全ショップアイテム共通のイージングパターンだね。[/talk]
ずっと で もし ( ) ならでなければ と ( ) に触れた を使って、マウスの接触状態に応じて 大きさを ( ) %にする を90か80に向かって変化させるよ。
まとめ
ショップページ1と2のアイテムが全部実装できたね！毎回同じ「イージングアニメーション → 購入条件チェック → ネストforeverで自動化 → ページ切替対応」のパターンが身についてきたはずだよ。少しずつ手早く組めるようになってきたんじゃないかな。いよいよ次はページ3と、ゲームを盛り上げるボーナスシステムを作るよ！
