• エモいカウンターの作り方|グリフパッチ流スクラッチ講座

エモいカウンターの作り方|グリフパッチ流スクラッチ講座を作成した著者 グリフパッチ

この動画の和訳解説は、グリフパッチさんご本人から許可をいただいて掲載しております。
グリフパッチさんのYOUTUBEチャンネルはこちらからどうぞ。

スタータープロジェクト

なし

完成サンプル
サンプル
難易度

挑戦レベル

チャプター数
全15章

「エモいカウンターの作り方|グリフパッチ流スクラッチ講座 」の解説

グリフパッチ(動画)
さいじゃく(翻訳)
もう変数でスコアを表示するの飽きたよね?エモいカウンターを実装する方法がバチっと分かります!

イントロ

やぁみんな、グリフパッチです

カウンターが変数のままでガッカリしたことない?

こんなやつ

でも、もう大丈夫!今回の動画を観れば——

もっとクールなカウンターを作れるよ!

考え方はカンタン

まず0から9のコスチュームを用意してー

ちょっとコードを加るだけ

クリッカーゲームのカウント表示

じゃあ、一緒にやってみよう!

プロジェクトを作ったら 変数SCOREを用意しよう

全てのスプライト用にしといてね

スコアを1加算 っと

スプライトがクリックされたらスコアを1ずつ加算しよう

これが1番シンプルなコードだね

猫をクリックしたらスコアが増えるね!

でもやっぱりこの表示がイマイチだな

小さすぎるし 分かりにくいし…

変数の表示方法は変えられるけど 全然ワクワクしないよね〜

僕らが目指すのはさ もっとこう——

デカくて!

カラフルで!

超ファンキーなやつだよね!

実現のカギはコスチュームだよ

フォントの準備

よぉし、やるぞ!

まずはScoreスプライトを作ろう

次にコスチュームを選んで——

「glow」で検索しよう

そしたら数字のフォントが見つかるよね

最初はゼロを選ぼう

ほらっ! 変数表示より断然いい!

じゃあ1から9も追加しよう

「glow」をコピペして検索すればラクチン

あと このフォントじゃなくてもいいよ

自分で描くのもアリ!

ユニークな見た目のゲームが作れるよ

ふぅ やっと終わった!

コスチュームを真ん中にして 変数はどけとこう 

いいね!

次は変数の値とコスチュームを連動させていこう

コスチューム名の作成

思い通り動かなくても大丈夫

問題を小さなカタマリに分解して取り組むのがコツだよ

たとえば「117」を表示するには——

まず最初の「1」に注目してみよう

まずは緑の旗が押されたら XとY座標を変えよう

XとYに初期値が入ってるね!

【言うブロック】に変数を入れると 値の確認がカンタンだよ

緑の旗を押してみよう

変数の値「117」が見えたね

でも今は1桁目だけ扱いたいんだったね

【○番目の文字ブロック】で変数の1桁目を取得できちゃうよ!

うん 期待通り1桁目の「1」が取れたね!

次に値とコスチュームを合わせよう

コスチュームのタブを押して「1」を探そう

今はコスチューム名が「Glow-」で始まってるね

「Glow-」の後に0や1が続いてるから カンタンそうだね!

「Glow-」って文字と数字を組み合わせればいいだけだよ

コードに戻ろう

【○と○ブロック】の左に 1文字目が大文字の「Glow-」を入れよう

そこに【○番目の文字ブロック】をハメる

全体を【言うブロック】に戻すと——

「Glow-1」ってコスチューム名が完成していることが確認できるね!

じゃ 【言うブロック】はやめて——

【コスチュームを○にするブロック】に移し替えようか

よぉし!テストしよう!

きた!

コスチューム名が大文字 / 小文字もしっかり合ってれば

フォントが変わったはず!

ちゃんと動くか 他の数字でも試しておこう

あと まだ緑の旗を押さないとフォントが変わらないね

クローンで2桁以上も表示

では スコアが10以上になったらどうなるか——

次のチュートリアルに進もう!

2桁以上を実現するためにはクローンを使うよ

まず【繰り返しブロック】を置こう

とりあえず4回繰り返そうか

コスチュームを変えたら クローンを作ろう

でもクローン同士が重ならないように 位置を右にズラす必要があるね

X座標を変えるんだけど どのくらい変えたらいい?

大きさはスプライトによるから固定にできないよね

ちょっと実験してみよう

【大きさ】を使って右に動かしてみるね

これでスプライトの大きさが100なら 横に100歩ズレるよ

うん まぁいいね

ちょっと離れ過ぎかな〜

1文字分の余計なスペースがありそう

いい目安にはなったね

距離を半分にしてみよう

X座標を 【大きさ】÷2 にしてみようか

これでどうかな……

OK!すごく良くなった!

君の使ってるフォントに合わせて——

ここの2を変えてスペースを調整してね

クローンごとの変数

で クローンはできたけど 全部同じ数字だね……

理由は全部1桁目を参照してるからだね

本当は各クローンに各桁を表示させたいわけだ

変数の1桁目…2桁目…3桁目ってね

と そのまえに気づいた?

さっき4回繰り返したのに ここに5桁の数字があるんだよね

実は5番目はクローンじゃなくて本体

これは直しておこう

緑の旗を押したら【隠すブロック】を使おう

【クローンされたとき】に——

【表示するブロック】を置けば クローンだけ見えるね

テストするよ

はい直った!

【クローンされたときブロック】にコスチュームを変える処理を移しておこう

これで各クローンがコスチュームを切り替える動きが明確になったね

ただ まだクローンが1桁目を参照したままだね

各クローンが参照する桁を定義する変数を作ろう

名前はindexにしよう

各クローンだけが使うので「このスプライトのみ」にチェックしよう

【繰り返しブロック】の前で indexを1にしよう

【繰り返しブロック】の最後でindexを1ずつ増やそう

indexの確認には【言うブロック】が便利だよ

【index】をハメてテストしてみよう

ほらね!

各クローンが持つindexの値が見えたね

1から順に加算されてるね

これで準備完了だ!

あとは【index】を桁のところにハメるだけ

じゃあテストしてみよう

スコアを4321にして動かすよ……

きた〜!4…3…2…1ってなってるね!

エモいカウンターになったよね

変数と数字の連動

【言うブロック】消してみようか そうすると…

超いいね!

で 猫をクリックすると…

あーまだ連動してないね

そろそろ緑の旗を押すの止めたいよね

ノープロブレム!

【ずっと繰り返すブロック】でコスチューム切り替え処理を囲ってみてから——

緑の旗でループを動かす

で 猫をクリックすると…

きたぁぁ!

これだよこれ!

ついにコスチュームと変数が連動したね!最高!

じゃあ変数表示をダブルクリックしてスライダーにしてさ

スライダーの最大値を9999にしてみよう

これでいじってみて!

ちゃんと動いてるよね!

空文字対応

よーし終わりかな?

いやいやいや…

試しに値を0にしてみよう

あちゃ〜

何が起きた?

1桁目は0だよね

でも残りは…ダメだね〜

3桁でも同じくダメだね

左から3つはOK

でも4つ目はダメ〜

理由は空文字に対応してないから

つまりね

スコアが100だとしたら——

1桁目は「1」だよね

2桁目は「0」 3桁目も「0」だね

じゃ4桁目は分かる?

答えは「 」…空文字だね

4桁目は存在しないからだね

これは良いヒントを得ましたよ

コスチュームを開こう

最初にブランクのコスチュームがあるね

無くても作ればOK

ちなみに順番は関係ない

既存のコスチューム名の数字以外の部分「Glow-」をコピーして

ブランクのコスチュームにペーストしよう

ハイフンの後ろは何もなくてOK

これで空文字用のコスチュームができたから 何桁でも対応できるね

テストしてみよう

ほらね〜

3桁も成功!

4桁ももちろんOK

空文字は使われてないけどね

スライダーをいじって動作確認できたね!

よしよし これで9999まではいいね…

でも5桁や6桁はどうだろう?

ちょっと上限を増やしてみよう

うわっちゃー

クローン4つだと4桁が限界だね

よし コードに戻ろう

繰り返す回数を6回にしてみよう……

じゃじゃーん!できました

カウンターの位置を調整

まぁ画面からハミ出ちゃったね

もっと左に動かせばいいかな?

X座標に-160を入れてみようか

悪くないね

これで全体が見えるね

じゃあ文字の大きさも変えてみようか

え?

おかしいな……

サイズが変わらないぞ!なんか変だね!

んーじゃあ【大きさを変えるブロック】で50%に変えてみようか

どうかな…

ダメだね!変わらないや

いや これ実はまぁ変な話なんだけどさ

コスチューム開いてみて

選択中のコスチュームのサイズが0 x 0でしょ

ゼロの50%は計算できないから サイズが変わらなかったんだよね…

だから始めに他のコスチュームに変えてあげれば——

動くかなと……

ぃーよし!

スクラッチってトリッキーなところあるよね!

まぁ謎が解けたから良しとしよう

じゃ スコアの座標計算に戻ろう!

サイズが小さくなったから 中央に寄せてみよう

たぶんXを-80くらいかな

6桁でも平気そうだね

でも桁が少なくなると中央からズレるのが気になるなぁ

ちょっとかっこわるいよね

中央そろえに挑戦

ここまでは左寄せで作ってきたよね

ここからは中央そろえを実現しよう

今回は中央そろえの方がカッコイイと思う

まず数字をググっと右に寄せて——

全桁の横幅を計算しよう

その合計値の半分だけ左に戻せば中央を算出できるよ

この演算をコーディングしていこう

今回のクローンは6つ

各クローンは1から6の【index】を持ってるね

このフォントでは「サイズ ÷ 2」ずつXをズラして配置したね

この配置処理は 【index】× (サイズ ÷ 2) としても同じになる

演算にしておくと自動で配置がうまくいくよ

でも中央そろえは両端が半分空くから

1文字目が右にズレてしまってるね

これを調整するために【index】から0.5引いて左に戻そう

あとは全桁 ここでは3桁の真ん中を求めよう

だから 3÷2 = 1.5 を導き出して——

この1.5を【index】から引けばOK

カンタン…でしょ?

まぁやってみよう!

まずX座標をセットするよ

あと【index】と——

「サイズ÷2」も複製しておこう

これらを掛け合わせて初期位置を決めるよ

これで左寄せの数字はできたから——

これを中央そろえにしていくよ

さぁ注目

中央そろえで生じる空白を詰めるために【index】から0.5を引くよ

ここからさらに桁の数を引く

あっと 桁の半分だけで良かったね

じゃあ2で割ろう

これを戻せば演算の左側は完成

サイズ÷2と組み合わせれば

いいね

だいぶ長い演算ができたね!

ちゃんと動くかな?試そう

6桁の中央そろえが完成したよ

桁を減らしても平気かな?

5桁……いいね

4桁も!きた!

カンペキな中央そろえだね

もし他の場所に表示させたいなら——

ここでXやY座標を変えるだけだよ

あと大きさも変えられるね

チラつきを防止

どうよ?

ほぼカンペキだけど クローンを調整しよう

最初にチラつくのが分かる?

カスタムブロック定義【setup】を作ろう

「画面を再描画せずに実行する」にチェック

ごっそり移植するよ

元の場所に【setup】を置けば完成

チラつきがなくなったね!

アニメーション

どんなもんよ!

これで必要なことは押さえたよ

最後に1つクールなワザを紹介しよう

アニメーションだよ

【クローンされたとき】に追加するよ

カスタムブロック定義「change costume to」を作って——

引数に「costume」を追加しよう

これをコスチュームを変えるところで使うよ

ここね

コスチューム名を作るブロックを引数にハメて——

【change costume to】に処理を移動しよう

最後に引数をコスチューム名に使うようにして完成

よし!改造したけど 今のところ動きは変わらないよね

でもここからは新しい動きを作るよ

コスチュームを変える前に【もしブロック】を置こう

コスチュームを変える必要があるか調べるよ

もし今とは違うコスチューム名なら

コスチュームを変えよう

まだ何も変わってないね

じゃあコスチュームが変わったら——

大きさも120に変えてみよう

数字が変わった桁だけ大きくなるからね?

仕上げにサイズを元に戻してあげれば完成だよ

X座標をセットした後に【大きさを○ずつ変えるブロック】を置こう……

おっと!

止めよう!

演算を使えばスムーズなサイズ変更ができるよ

変更前の大きさを右側
変更後の大きさを左側

これでサイズが変わる

さらに0.2を掛ければスムーズなアニメーションになるよ

これで全部完成!

試してみよう!

まずスライダーを動かしてみよう

どうよどうよ!いいでしょ!

数字が変わるとポワンってなる感じがいいよね

フルスクリーンにして猫を押してみると…

よっしゃ!

どんなクリッカーゲームででもエモい動きになるでしょ!?

あとはどんなアニメーションがあったら君のゲームに役立つかなぁ!

テキストエンジンに挑戦

もう終わるけど…最後に一個だけいい?

このカウンターに文字も混ぜれると思う?

答えはYES!

コスチュームを開いて——

どれでも文字をインポートしよう

変数【SCORE】は名前変える必要あるかもしれないけど とにかくまぁ——

【SCORE】にbedって値をセットしてみるよ……

あらら 401(エラー)だ

なんでだろ……

あ 凡ミスだね

大文字 / 小文字も重要だったね

大文字のBEDでセットし直そう

はいOK!

カウンターがテキストエンジンに早変わり!

スクラッチスタジオ

ワクワクしちゃうね!

よし終わり!

動画の下の「完成サンプル」からスタジオにいけるから——

この動画観て何か作ったらスタジオに入れてよね!

そういうの見るの大好きだからさ!

おわり

じゃあ本当に終わり

チャンネル登録 高評価 よろしくね

どんどん配信するからさ

チャンネルメンバーも募集中!

いろんなレベルのメンバー限定動画もあるよ

絵文字とかアーリーアクセス動画とか色々!

特典多いので検討してね

じゃ 観てくれてありがとう!また会おう!

スクラッチオン!