前回記事にてMakeCode ArcadeのImageを拡大するツールを作った事を紹介しました。
これが我ながらかなり便利に使え、今後のMakeCode Arcadeの開発にも威力を発揮してくれそうだったので次なるツールを考えています。
その次なるツールが文字列Imageを作成するツールです。
ツールが必要なワケ
次のツール作成になぜ「文字列Imageを作成するツール」を選んだのか？
そのワケはImage作りと同じくらい大変だからです。
文字列の表示方法
MakeCode Arcadeには文字列を表示する方法がいくつか存在しています。
例として3つの方法を紹介します。
- スプライトにしゃべらせる
- タイトルで表示する
- Imageに文字列を書く
スプライトにしゃべらせる
文字サイズは良い感じですが吹き出しが必ず表示され、長い文字列はスクロールで表示されてしまいます。
それでも大丈夫って時にはこれで良いのですが複数行を一度に表示させたい場合には使えません。
タイトルで表示する
文字サイズは大きい感じでタイトル標準の帯のような表示になってしまいます。
スプライト同様に長い場合はスクロールされ、2行までならサブタイトルを使えば実現できるものの3行以上は無理です。
Imageに文字列を書く
Imageのため、文字サイズも行数も書体も自由自在です。
その代わり標準で準備されているブロックではないため文字の変更はImageを直接変更する必要があります。
そして最大の問題としてその文字を1つずつドットを手打ちしていく必要があります。
現状
これらの方法の中で一番融通が利く方法として3番目の「Imageに文字列を書く」を採用しています。
これが工数増の原因になっているので文字列から自動でImageを作ってくれるツールが必要になりました。
ツール案
まずは大雑把にどんなツールを作るべきか考えます。
- 書体が色々あると良いけどまずは1種類で考える(後のバージョンアップで増やせば良い)
- 文字列を入力するとImageが出てくる単純な操作感が良い
- Imageのイメージ(レビューみたいな感じ)が出ると良い
- 縁取りや影とかもできると良い
- 吹き出しや枠が追加できると便利かな
- etc
まぁやりたい事を並べていくと大変になりそうなのでまずは単純に文字列からImageが出力できるツールを作ろうと思います。
書体については以前から参考にさせて頂いている美咲フォントを採用します。
理由としては8×8(実質は7×7で右と下に1ドット分の余白があるため並べて配置しても文字が繋がらない)に対応し、なおかつ画数の多い漢字でも比較的読み取りやすかったからです。
実現検討
まずは作業に移る前にどうやってこのツールを実装させるのか、実現検討をします。
美咲フォントにはあらかじめPNG画像が含まれています。
ペイントツールで中身を確認すると1文字が8×8で書かれていたのでこのファイルを使って各文字のImage情報とする事にしました。
次に必要な確認は文字からこのPNG画像のどこを抜き出すのかを見つける事です。
単純に考えて文字からは文字コードが取得できるのでこの文字コードからPNG画像の該当箇所が特定できれば良さそうです。
そこで文字コードについて調べてみるとJIS、SJIS、Unicodeなど複数の文字コードが存在する事が分かりました。
美咲フォントはJIS準拠と書かれていたのでJISコードの一覧と比べてみたところ並びが一致している事が分かりました。
この一覧は丁寧に上位バイトと下位バイトの組み合わせでどの文字になるかまで記載してくれていました。
ここまで分かれば文字列のドットまで作る事が出来そうな事が分かったので後は前回のツールと同じようにMakeCode ArcadeのImageのフォーマットに合わせて出力してやればその文字列をコピーしてMakeCode Arcadeのイメージエディターに貼り付けは可能です。
これで実装方法のイメージも沸いたのでツール作成へと進みます。
まとめ
今回は試行編という事で検討段階までの紹介です。
実際にこの記事を執筆中はまだツールの完成は出来ていませんが目途は立ってきています。
次回の記事では実装について紹介できると思います。
(追記)完成編を記事にしましたので続きはこちらへどうぞ。
コメント