Scratchでかっこいいフォントを使ってスコアを表示したい

• オリジナルのフォントを作るには
• ベクター画像に変更しよう
• ベクター画像をScratchに取り込もう
• 画像をつかってスコアを表示しよう
• 再描画しない設定でチラつきをなくす
• バックパックに入れていつでもつかえるようにする
• さいごに

オリジナルのフォントを作るには

ウィンドウズに標準[ひょうじゅん]で入っている「ペイント」を使います。


ペイントでなくてもお絵かきできるツールならなんでもOKです。

Windows8なら、スタートメニューの中に入っていると思います。


Windows8以前[いぜん]なら、 「スタート」→「すべてのプログラム」→「アクセサリ」→「ペイント」です。

ペイントを開いたら、まっしろなキャンバスになっていると思います。
まずはサイズを変[か]えましょう。



ウィンドウの左上あたりに「サイズ変更[へんこう]」というボタンがありますのでクリックします。



サイズ変更[へんこう]のウィンドウが開きます。

まず「縦横比を維持する」のチェックを外しましょう。

単位を「ピクセル」にして、ヨコ500ピクセル×タテ500ピクセルぐらいにします。
シンプルな形にするなら、100×100くらいでもOK！

（このサイズはベクター画像に変換するためのサイズなので
png画像のまま使うなら、もっと小さいサイズでもOKです。20×20とか…）

できたら「OK」をおしてペイントに戻ります。



サイズがきまったら、数字をかきます。
エンピツツールとバケツツールを使って、いい感じに描きましょう。

いっぺんに全部の数字を描くのではなく
１つの画像ファイルにつき、1文字ずつ描きます。



数字がかけたら保存しましょう。
「Ctrl + S」キーを押すか、ペイントの左上にある「ファイル」から
「名前をつけて保存」をえらびましょう。

画像ファイルは何でもいいですが、今回はpngにします。

名前は「１.png」にしました。

ベクター画像に変換しよう

pngで画像がつくれたら、拡大縮小してもキレイな「ベクター画像」に変換しましょう。

このサイトにアクセスして下さい。
ラスタ画像svg化スクリプト「potrace.js」

ここで、png画像からベクター画像に変換することができます。


 
先ほど作った、「1.png」の画像を
「ここに画像をドロップ」という部分まで、マウスでドラッグして、はなします。


png画像を左のウィンドウに入れると、こんな感じになります。
ここで、右下の「実行」ボタンを押しましょう。

線と塗りを分けたい時は、こちらの方法で試してください。
関連記事：手書き画像をベクターにしてScratchで表示してみよう 




すると「実行」ボタンの左側に[svg]というリンクが現れます。

このリンクを右クリックして「名前をつけてリンク先を保存」というメニューを選びましょう。


 
svgファイルに好きな名前をつけます。
今回は「1.svg」という名前で保存します。

これで、png画像からsvg画像へ変換することができました。

ベクター画像をScratchに取り込もう

作ったベクター画像（svg）をScratchに取り込みましょう。



まずは、スプライトリストから「新しいスプライトを追加」で 筆マークをクリックします。
するとからっぽのスプライトができるので
コスチューム編集画面から「新しいコスチューム 」のなかの
フォルダアイコンをクリックします。



さきほど作った「1.svg」を開きます。



取り込んだ画像がめちゃくちゃでかいので小さくします。
コスチュームを縮小ボタンで小さくしてもいいですし
「大きさを○％にする」のブロックで小さくしてもいいです。

大きさブロックのほうが楽ちんですね。

からっぽの「コスチューム1」は消しておきましょう。

この作業を10回繰り返します。（数字の0～9まで）
めちゃくちゃめんどくさくないですか？

皆さんが何気なく使っているフォントは（こんな作り方じゃないですが）
１文字1文字 てまひまかけて作られています。
すごいですよね。


さて、出来上がったものがこちらになります。
https://scratch.mit.edu/projects/107590185/#editor


 
コスチュームの名前は、数字と同じにしておきましょう。
1の画像は「1」という名前のコスチュームにします。 

画像をつかってスコアを表示しよう

サンプルのプロジェクトのなかの数字のスクリプトを見てみましょう。


 number1というスプライトです。


「スコア変数」の中に、スコアが入っていて
スコア変数の中身を確認しながら、スタンプしていっています。



 ためしに、ステージにある「スコア」のスライダーをドラッグで動かしてみて下さい
すると「スコア変数」の中身がかわり
左上のスコアの数字もかわります。 


では、スクリプトを詳しくみていきましょう。

 
スクリプトはこんな感じになっています。

数字は１ケタずつクローンしてもいいんですが
クローンはパソコンによってはすごく動作が重くなるので
今回はスタンプにしました。

変数「i」はループカウント用の変数です。
繰り返しのなかで１ずつふやしていて、
スコアの何文字目を表示すればいいかを指定します。 

スコアは１秒ごとに更新していますが
このへんはゲームの設定により変えて下さい。

再描画しない設定でチラつきをなくす

今回「定義ブロック」を使ったのにはわけがあります。
ふつうに、定義ブロックを使わずにスコアをスタンプすることもできますが
そのままだと、スコアをスタンプするたびに
スコアの部分がチラつくようになっていまします。

これはスタンプするときに「再描画」が行われているためです。
1文字スタンプするごとに１回画面がリフレッシュされるので
４桁あれば、４回再描画することになります。




コンピュータは計算は速いのですが、描画するのは少し苦手です。
なので「処理が終わるまでは、画面を再描画しない」
という設定をしてあげると、高速で処理が終わった後に、１回だけ描画すればよいので
画面のチラつきをなくすことができるのです。



画面を再描画しないためには、「定義ブロック」のオプションを使います。

その他のカテゴリから「ブロックを作る」ボタンをクリックします。
新しいブロックを作るウィンドウが開いたら
「▼オプション」をクリックし、「画面を再描画せずに実行する」にチェックを入れます。

これで、この定義ブロック内にかかれたスクリプトは
定義ブロックが終わるまでは、再描画されなくなります。

バックパックに入れていつでもつかえるようにする

スプライトは、バックパックに入れておけば、他のプロジェクトを作るときにも
さっと取り出して使うことができるので便利です。
スクリプトも一緒にコピーされるので、スコアの数字をバックパックにいれておけば
いつでもすぐに使うことができます。


 
まず、スクリプト画面の下の方にある
「バックパック　▲　」とかかれた部分の▲をクリックします。



 
バックパックが開いたら、保存しておきたいスプライトをドラッグして
バックパックの中に入れましょう。



ほかのプロジェクトで使いたい時は
まず「スコア」変数を用意してから…
（スコア変数はほかのスプライトから操作できるように
「すべてのスプライト用」で作りたいのであらかじめ用意しておく）



スコア変数ができたら、バックパックにいれておいた数字のスプライトを
スプライトリストのなかにドラッグ＆ドロップします。

これで、ゲーム内でスコア変数の中身をかえてあげるだけで
スコアが表示されるようになりました。

スコアの表示場所はゲームによって変わると思いますので
そのつど設定してあげて下さいね。

さいごに

今回は、SVGに変換したり、定義ブロックをつかったり、バックパックをつかったり
普段使わない要素がいろいろあったと思いますが
どれも便利な機能なので、おぼえて使ってみて下さい。

オリジナルフォントができたら、ぜひ見てみたいので、教えて下さいね。