私はCreateJSを使って、FF14というゲームのスクリーンショットに文字を入れる「文字入れジェネレータ」というのを実装しました。
その1機能として、縁取り文字を入れれるようにしましたので、そのメモなどを備忘録として残しておきたいと思います。
「文字入れジェネレータ」での使い方
私のブログを読んでいる人の多くはFF14プレイヤーだと思いますので、技術的な話より先に使い方を。
まずは「文字入れジェネレータ」のURLですが、以下になります。
gelehrtecrest.github.io
「文字を縁取りで描きたい場合はチェックを入れる」にチェックを入れる
「文字入れジェネレータ」には以下のような設定の場所があります。
これにチェックをいれると、縁だけ描画されて、中が空白の文字が書き出されます。
二番目以降のロゴで中身を書く
一番目のロゴで縁取り文字を書いて、二番目以降で中身をかけば、最初の絵のような緑で縁取りされた文字が書き出されます。
様々なフォントに対応
今私は、FF14で使用されている文字の二次創作フォント #エデンフォント などの制作を行っています。
blog.gelehrte.com
この様な自作フォントでも縁取り文字を書くことが可能です。
CreateJSでどの様なコードを書くか
ソースコードの一部を途中省略しながら書くと
var content = $('#text'+flag).val();
img = new createjs.Text(content);
img.outline = 1;
このように outlineに数字を入れると、縁取り文字になるようです。
私の「文字入れジェネレータ」のソースコードはGitHubからどうぞ。
github.com
参考サイト
詳しくは以下のサイトを参考にしてください。
naruhodo.repop.jp
終わりに
まだまだCreateJSには知らないオプションとかありそうで、色々活用できそうですね。
簡単に実装できそうなものはどんどん実装してみたいと思います。
今回はココまで、それではー
