Scratch用フォントを作ろう

はじめに

Scratchでは ふきだし を使うことでプログラムで文字を表示できますが、フォントを指定することはできません。自分の好きなフォントで文字を表示したい場合、数字やアルファベット、ひらがななどの文字を一文字ずつ画像化して、その画像を並べて表現することになります。

しかし、数字やアルファベット、ひらがな、カタカナだけでも、数百個の画像を作らなければなりません。根性があれば、FireAlpacaで作ることも可能ですが、今回は、その画像をProcessingを使って自動生成させてみましょう。

美咲フォントについて

美咲フォントの 全角文字は幅7px、高さ7pxで作られており、上と右に各1pxずつ余白を含んだ8px × 8pxで構成されています。

一方、半角文字は幅3px、高さ7pxで作られており、上と右に各1pxずつ余白を含んだ4px × 8pxで構成されています。

STEP1

下記の記事を参考に半角の A が保存されるプログラムを作りなさい。

processingで描いたものをpngに保存する

要件は下記の通り

  • フォント:美咲フォント
  • 倍率:4倍
  • フォントカラー:color(104, 104, 80)
  • 画像形式:透過PNG
  • ファイル名:char0001.png
  • 生成文字:A(半角)

STEP2

下記に示す文字の画像が生成されるように改善しなさい。

  • フォント:美咲フォント
  • 倍率:とりあえず4倍(ただし、簡単に変更できるようにすること)
  • フォントカラー:color(104, 104, 80)
  • 画像形式:透過PNG
  • ファイル名:charXXXX.png(XXXX は 0001 ~ 0070 のような形にする)
  • 生成文字:1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ:!+-*_<>()
texts = [u"1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ:!+-*_<>()",
         u"ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをん",
         u"ァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶ!ー~★●"
]

STEP3

下記に示す全角文字を含めた文字の画像が生成されるように改善しなさい。

  • 文字列は下記のように配列に格納されているものとする。
  • 半角文字と全角文字で画像サイズを分けること
    例)2倍の場合、半角文字:8px × 16px、全角文字:16px × 16px
texts = [u"1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ:!+-*_<>()",
         u"ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞただちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみむめもゃやゅゆょよらりるれろゎわゐゑをん",
         u"ァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミムメモャヤュユョヨラリルレロヮワヰヱヲンヴヵヶ!ー~★●"
]