エモいカウンターの作り方｜グリフパッチ流スクラッチ講座
イントロ
やぁみんな、グリフパッチです
カウンターが変数のままでガッカリしたことない？
こんなやつ
でも、もう大丈夫！今回の動画を観れば——
もっとクールなカウンターを作れるよ！
考え方はカンタン
まず０から９のコスチュームを用意してー
ちょっとコードを加るだけ
クリッカーゲームのカウント表示
じゃあ、一緒にやってみよう！
プロジェクトを作ったら 変数SCOREを用意しよう
全てのスプライト用にしといてね
スコアを１加算 っと
スプライトがクリックされたらスコアを１ずつ加算しよう
これが１番シンプルなコードだね
猫をクリックしたらスコアが増えるね！
でもやっぱりこの表示がイマイチだな
小さすぎるし 分かりにくいし…
変数の表示方法は変えられるけど 全然ワクワクしないよね〜
僕らが目指すのはさ もっとこう——
デカくて！
カラフルで！
超ファンキーなやつだよね！
実現のカギはコスチュームだよ
フォントの準備
よぉし、やるぞ！
まずはScoreスプライトを作ろう
次にコスチュームを選んで——
「glow」で検索しよう
そしたら数字のフォントが見つかるよね
最初はゼロを選ぼう
ほらっ！ 変数表示より断然いい！
じゃあ１から９も追加しよう
「glow」をコピペして検索すればラクチン
あと このフォントじゃなくてもいいよ
自分で描くのもアリ！
ユニークな見た目のゲームが作れるよ
ふぅ やっと終わった！
コスチュームを真ん中にして 変数はどけとこう
いいね！
次は変数の値とコスチュームを連動させていこう
コスチューム名の作成
思い通り動かなくても大丈夫
問題を小さなカタマリに分解して取り組むのがコツだよ
たとえば「117」を表示するには——
まず最初の「１」に注目してみよう
まずは緑の旗が押されたら XとY座標を変えよう
XとYに初期値が入ってるね！
【言うブロック】に変数を入れると 値の確認がカンタンだよ
緑の旗を押してみよう
変数の値「117」が見えたね
でも今は１桁目だけ扱いたいんだったね
【○番目の文字ブロック】で変数の１桁目を取得できちゃうよ！
うん 期待通り１桁目の「１」が取れたね！
次に値とコスチュームを合わせよう
コスチュームのタブを押して「１」を探そう
今はコスチューム名が「Glow-」で始まってるね
「Glow-」の後に０や１が続いてるから カンタンそうだね！
「Glow-」って文字と数字を組み合わせればいいだけだよ
コードに戻ろう
【○と○ブロック】の左に １文字目が大文字の「Glow-」を入れよう
そこに【○番目の文字ブロック】をハメる
全体を【言うブロック】に戻すと——
「Glow-1」ってコスチューム名が完成していることが確認できるね！
じゃ 【言うブロック】はやめて——
【コスチュームを○にするブロック】に移し替えようか
よぉし！テストしよう！
きた！
コスチューム名が大文字 / 小文字もしっかり合ってれば
フォントが変わったはず！
ちゃんと動くか 他の数字でも試しておこう
あと まだ緑の旗を押さないとフォントが変わらないね
クローンで２桁以上も表示
では スコアが10以上になったらどうなるか——
次のチュートリアルに進もう！
２桁以上を実現するためにはクローンを使うよ
まず【繰り返しブロック】を置こう
とりあえず４回繰り返そうか
コスチュームを変えたら クローンを作ろう
でもクローン同士が重ならないように 位置を右にズラす必要があるね
X座標を変えるんだけど どのくらい変えたらいい？
大きさはスプライトによるから固定にできないよね
ちょっと実験してみよう
【大きさ】を使って右に動かしてみるね
これでスプライトの大きさが100なら 横に100歩ズレるよ
うん まぁいいね
ちょっと離れ過ぎかな〜
1文字分の余計なスペースがありそう
いい目安にはなったね
距離を半分にしてみよう
X座標を 【大きさ】÷２ にしてみようか
これでどうかな……
OK！すごく良くなった！
君の使ってるフォントに合わせて——
ここの２を変えてスペースを調整してね
クローンごとの変数
で クローンはできたけど 全部同じ数字だね……
理由は全部１桁目を参照してるからだね
本当は各クローンに各桁を表示させたいわけだ
変数の１桁目…２桁目…３桁目ってね
と そのまえに気づいた？
さっき４回繰り返したのに ここに５桁の数字があるんだよね
実は５番目はクローンじゃなくて本体
これは直しておこう
緑の旗を押したら【隠すブロック】を使おう
【クローンされたとき】に——
【表示するブロック】を置けば クローンだけ見えるね
テストするよ
はい直った！
【クローンされたときブロック】にコスチュームを変える処理を移しておこう
これで各クローンがコスチュームを切り替える動きが明確になったね
ただ まだクローンが１桁目を参照したままだね
各クローンが参照する桁を定義する変数を作ろう
名前はindexにしよう
各クローンだけが使うので「このスプライトのみ」にチェックしよう
【繰り返しブロック】の前で indexを１にしよう
【繰り返しブロック】の最後でindexを１ずつ増やそう
indexの確認には【言うブロック】が便利だよ
【index】をハメてテストしてみよう
ほらね！
各クローンが持つindexの値が見えたね
１から順に加算されてるね
これで準備完了だ！
あとは【index】を桁のところにハメるだけ
じゃあテストしてみよう
スコアを4321にして動かすよ……
きた〜！４…３…２…１ってなってるね！
エモいカウンターになったよね
変数と数字の連動
【言うブロック】消してみようか そうすると…
超いいね！
で 猫をクリックすると…
あーまだ連動してないね
そろそろ緑の旗を押すの止めたいよね
ノープロブレム！
【ずっと繰り返すブロック】でコスチューム切り替え処理を囲ってみてから——
緑の旗でループを動かす
で 猫をクリックすると…
きたぁぁ！
これだよこれ！
ついにコスチュームと変数が連動したね！最高！
じゃあ変数表示をダブルクリックしてスライダーにしてさ
スライダーの最大値を9999にしてみよう
これでいじってみて！
ちゃんと動いてるよね！
空文字対応
よーし終わりかな？
いやいやいや…
試しに値を０にしてみよう
あちゃ〜
何が起きた？
１桁目は０だよね
でも残りは…ダメだね〜
３桁でも同じくダメだね
左から３つはOK
でも４つ目はダメ〜
理由は空文字に対応してないから
つまりね
スコアが100だとしたら——
１桁目は「１」だよね
２桁目は「０」 ３桁目も「０」だね
じゃ４桁目は分かる？
答えは「 」…空文字だね
４桁目は存在しないからだね
これは良いヒントを得ましたよ
コスチュームを開こう
最初にブランクのコスチュームがあるね
無くても作ればOK
ちなみに順番は関係ない
既存のコスチューム名の数字以外の部分「Glow-」をコピーして
ブランクのコスチュームにペーストしよう
ハイフンの後ろは何もなくてOK
これで空文字用のコスチュームができたから 何桁でも対応できるね
テストしてみよう
ほらね〜
３桁も成功！
４桁ももちろんOK
空文字は使われてないけどね
スライダーをいじって動作確認できたね！
よしよし これで9999まではいいね…
でも５桁や６桁はどうだろう？
ちょっと上限を増やしてみよう
うわっちゃー
クローン４つだと４桁が限界だね
よし コードに戻ろう
繰り返す回数を６回にしてみよう……
じゃじゃーん！できました
カウンターの位置を調整
まぁ画面からハミ出ちゃったね
もっと左に動かせばいいかな？
X座標に-160を入れてみようか
悪くないね
これで全体が見えるね
じゃあ文字の大きさも変えてみようか
え？
おかしいな……
サイズが変わらないぞ！なんか変だね！
んーじゃあ【大きさを変えるブロック】で50％に変えてみようか
どうかな…
ダメだね！変わらないや
いや これ実はまぁ変な話なんだけどさ
コスチューム開いてみて
選択中のコスチュームのサイズが0 x 0でしょ
ゼロの50％は計算できないから サイズが変わらなかったんだよね…
だから始めに他のコスチュームに変えてあげれば——
動くかなと……
ぃーよし！
スクラッチってトリッキーなところあるよね！
まぁ謎が解けたから良しとしよう
じゃ スコアの座標計算に戻ろう！
サイズが小さくなったから 中央に寄せてみよう
たぶんXを-80くらいかな
６桁でも平気そうだね
でも桁が少なくなると中央からズレるのが気になるなぁ
ちょっとかっこわるいよね
中央そろえに挑戦
ここまでは左寄せで作ってきたよね
ここからは中央そろえを実現しよう
今回は中央そろえの方がカッコイイと思う
まず数字をググっと右に寄せて——
全桁の横幅を計算しよう
その合計値の半分だけ左に戻せば中央を算出できるよ
この演算をコーディングしていこう
今回のクローンは６つ
各クローンは１から６の【index】を持ってるね
このフォントでは「サイズ ÷ ２」ずつXをズラして配置したね
この配置処理は 【index】× （サイズ ÷ ２） としても同じになる
演算にしておくと自動で配置がうまくいくよ
でも中央そろえは両端が半分空くから
１文字目が右にズレてしまってるね
これを調整するために【index】から0.5引いて左に戻そう
あとは全桁 ここでは３桁の真ん中を求めよう
だから ３÷２ = 1.5 を導き出して——
この1.5を【index】から引けばOK
カンタン…でしょ？
まぁやってみよう！
まずX座標をセットするよ
あと【index】と——
「サイズ÷２」も複製しておこう
これらを掛け合わせて初期位置を決めるよ
これで左寄せの数字はできたから——
これを中央そろえにしていくよ
さぁ注目
中央そろえで生じる空白を詰めるために【index】から0.5を引くよ
ここからさらに桁の数を引く
あっと 桁の半分だけで良かったね
じゃあ２で割ろう
これを戻せば演算の左側は完成
サイズ÷２と組み合わせれば
いいね
だいぶ長い演算ができたね！
ちゃんと動くかな？試そう
６桁の中央そろえが完成したよ
桁を減らしても平気かな？
５桁……いいね
４桁も！きた！
カンペキな中央そろえだね
もし他の場所に表示させたいなら——
ここでXやY座標を変えるだけだよ
あと大きさも変えられるね
チラつきを防止
どうよ？
ほぼカンペキだけど クローンを調整しよう
最初にチラつくのが分かる？
カスタムブロック定義【setup】を作ろう
「画面を再描画せずに実行する」にチェック
ごっそり移植するよ
元の場所に【setup】を置けば完成
チラつきがなくなったね！
アニメーション
どんなもんよ！
これで必要なことは押さえたよ
最後に１つクールなワザを紹介しよう
アニメーションだよ
【クローンされたとき】に追加するよ
カスタムブロック定義「change costume to」を作って——
引数に「costume」を追加しよう
これをコスチュームを変えるところで使うよ
ここね
コスチューム名を作るブロックを引数にハメて——
【change costume to】に処理を移動しよう
最後に引数をコスチューム名に使うようにして完成
よし！改造したけど 今のところ動きは変わらないよね
でもここからは新しい動きを作るよ
コスチュームを変える前に【もしブロック】を置こう
コスチュームを変える必要があるか調べるよ
もし今とは違うコスチューム名なら
コスチュームを変えよう
まだ何も変わってないね
じゃあコスチュームが変わったら——
大きさも120に変えてみよう
数字が変わった桁だけ大きくなるからね？
仕上げにサイズを元に戻してあげれば完成だよ
X座標をセットした後に【大きさを○ずつ変えるブロック】を置こう……
おっと！
止めよう！
演算を使えばスムーズなサイズ変更ができるよ
変更前の大きさを右側
変更後の大きさを左側
これでサイズが変わる
さらに0.2を掛ければスムーズなアニメーションになるよ
これで全部完成！
試してみよう！
まずスライダーを動かしてみよう
どうよどうよ！いいでしょ！
数字が変わるとポワンってなる感じがいいよね
フルスクリーンにして猫を押してみると…
よっしゃ！
どんなクリッカーゲームででもエモい動きになるでしょ！？
あとはどんなアニメーションがあったら君のゲームに役立つかなぁ！
テキストエンジンに挑戦
もう終わるけど…最後に一個だけいい？
このカウンターに文字も混ぜれると思う？
答えはYES！
コスチュームを開いて——
どれでも文字をインポートしよう
変数【SCORE】は名前変える必要あるかもしれないけど とにかくまぁ——
【SCORE】にbedって値をセットしてみるよ……
あらら 401（エラー）だ
なんでだろ……
あ 凡ミスだね
大文字 / 小文字も重要だったね
大文字のBEDでセットし直そう
はいOK！
カウンターがテキストエンジンに早変わり！
スクラッチスタジオ
ワクワクしちゃうね！
よし終わり！
動画の下の「完成サンプル」からスタジオにいけるから——
この動画観て何か作ったらスタジオに入れてよね！
そういうの見るの大好きだからさ！
おわり
じゃあ本当に終わり
チャンネル登録 高評価 よろしくね
どんどん配信するからさ
チャンネルメンバーも募集中！
いろんなレベルのメンバー限定動画もあるよ
絵文字とかアーリーアクセス動画とか色々！
特典多いので検討してね
じゃ 観てくれてありがとう！また会おう！
スクラッチオン！
スクラッチゲーム攻略
スクラッチゲーム
- あ行
- あ Appel
- あ RPG
- あ あつまれ どうぶつの森
- あ アクションゲーム
- あ アスレチック
- あ アモングアス
- あ アンダーテール
- あ 青の塔
- あ 青鬼
- え エーペックス
- お 落ちゲー
- か行
- か カービィ
- か 格闘ゲーム
- が がっぽり寿司ゲーム
- き キャプテンロケット
- き 恐竜ゲーム
- く クリッカーゲーム
- こ コールオブデューティー
- こ 荒野行動
- さ行
- し シミュレーションゲーム
- し シューティングゲーム
- し 射的・銃ゲーム
- じ ジオメトリーダッシュ
- じ ジャグラー
- す 3Dゲーム
- す スイカゲーム
- す スプラトゥーン
- す スマブラ
- す 寿司打
- せ 戦車ゲーム
- ぜ ゼルダの伝説
- そ ソニック
- た行
- た TACT-AIM
- た タワーディフェンスゲーム
- た 大砲ゲーム
- た 太鼓の達人
- た 戦うゲーム・バトル
- だ ダダサバイバー
- だ ダンシングライン
- だ 大戦争ゲーム
- だ 脱出ゲーム
- つ ツムツム
- つ 壺男
- て テトリス
- て テラリア
- で デルタルーン
- ど ドロップザナンバー
- ど ドロップザボール
- ど ドンキーコング
- な行
- に 2048
- に にゃんこ大戦争
- の 脳トレ
- は行
- は 8番出口
- ぱ パズドラ
- ぱ パックマン
- ぴ ピクミン
- ふ ファイブ・ナイツ・アット・フレディーズ
- ふ フォートナイト
- ふ フォールガイズ
- ふ フライデー・ナイト・ファンキン
- ふ フラッピーバード
- ぶ ブロスタ
- ぶ ブロック崩しゲーム
- ぷ ぷよぷよ
- へ ヘビゲーム
- へ ヘリコプターゲーム
- ぺ Paper.io
- ほ ホラーゲーム
- ほ 放置ゲーム
- ぼ ボンバーマン
- ぼ ボールころころ
- ぼ ボールブラスト
- ぽ ポケモン
- ぽ ポピープレイタイム
- ま行
- ま まち針ゲーム
- ま マイクラ
- ま マインスイーパー
- ま マリオ
- も もちもちスライム
- も モンスト
- も モンハン
- も 桃鉄
- や行
- や 野球
- よ 妖怪ウォッチぷにぷに
- ら行
- れ レースゲーム
- ろ ロックマン
- ろ ロブロックス
- 他
- わ わんこ大戦争
- ヴ ヴァロラント
- 趣味全般
- あ アニメーション
- あ アート
- い イラスト
- う UNO（ウノ）
- う 歌・曲のスクリプト演奏
- え エレベーター
- お オセロ
- お 音楽
- か カオスバトル
- か カードゲーム
- か 仮面ライダー
- く クレーンゲーム
- く 車運転ゲーム
- け 消しゴム落とし
- こ 工作
- し 将棋
- す スクラッチの文化
- つ 釣りゲー
- で デザインゲーム
- で 電車
- ど ドナルド（マック）
- ば バイク
- ぱ パズル
- ひ 飛行機
- べ ベイブレード
- め メダルゲーム
- め 迷路
- り 料理
- 映像作品、テレビ番組、漫画、動画などに関連したもの
- い イカゲーム
- が ガンダム
- き 鬼滅の刃
- し 進撃の巨人
- じ 呪術廻戦
- す すとぷり
- と 逃走中
- ど ドラえもん
- ど ドラゴンボール
- ね ネプリーグ
- ま マッシュル
- わ ワンピース
- ゲームセンター系
- げ 激カザーン
- す スロット
- ぱ パチンコ
- ほ ホリアテール
- み みんなでダービー（競馬）
- れ 連射でアタック
- kawaii系
- あ アイコン
- き 着せ替えゲーム
- ぺ ペット（育成）ゲーム
- スポーツ・運動系
- お 鬼ごっこ
- ご ゴルフ
- さ サッカー
- す スケボー
- す スポーツ全般
- た 卓球
- て テニス
- ば バスケ
- ぼ ボクシング
- ゆ 雪合戦・雪遊び
