ちょっとしたミニゲームやモックなどを作る際、わざわざ画像を用意するのが面倒だなぁと思うことがあります。
そんな時、Font Awesome等のアイコンフォントを画像として使うという手がありますが、phina.jsではこれが簡単に実現できます。
使用するもの
phina.js v0.2.0
Font Awesome v4.7.0
１．アイコンフォントの読み込み
まずはフォントデータを読み込む必要があります。
phina.jsのアセットローダーはフォント読み込みにも対応してますので、これを使ってアイコンフォント（今回はFont Awesome）のwoffファイルを読み込みます。やり方は以下のような感じ。
var ASSETS = {
font: {
fontAwesome: "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff"
}
};
phina.main(function() {
var app = phina.game.GameApp({
assets: ASSETS,
});
app.run();
});
２．アイコンの描画
実際にアイコンを描画する方法は色々ありますが、Labelクラスを使うのが最もお手軽かと思います。
phina.define("MainScene", {
superClass: "phina.display.DisplayScene",
init: function() {
this.superInit();
var iconUnicode = 0xf17b; // 10進数（61819）でもok
phina.display.Label({
text: String.fromCharCode(iconUnicode),
fontFamily: "FontAwesome",
})
.addChildTo(this);
}
});
アイコンの指定はunicode（10進数 or 16進数）で行います。
unicodeはString.fromCharCodeで変換し、Labelクラスのtextパラメータとして渡します。
fontFamilyには使用するアイコンフォント名を指定します。
例えばドロイド君アイコンを表示するサンプルはこんな感じになります。
unicodeはチートシートなどで確認できます。
3. 拡張クラス IconShape
もうちょっと使いやすくするため、一例としてphina.display.Labelを拡張して最適化したIconShapeクラスを最後に紹介します。
phina.define('IconShape', {
superClass: 'phina.display.Label',
init: function(options) {
if (typeof arguments[0] !== 'object') {
options = { text: arguments[0] };
}
else {
options = arguments[0];
}
options = ({}).$safe(options, IconShape.defaults);
this.superInit(options);
// width, heightプロパティをフォントサイズに合わせる
this.setSize(this.fontSize, this.fontSize);
},
_accessor: {
text: {
get: function() { return this._text; },
set: function(v) {
var iconInt = (typeof v === 'string') ? parseInt(v, 16) : v;
this._text = String.fromCharCode(iconInt);
this._lines = (this.text + '').split('\n');
},
}
},
_static: {
defaults: {
text: 'f024',
fontSize: 100,
fontFamily: "FontAwesome",
},
},
});
引数はunicode単体、オブジェクト型どちらにも対応
通常のLabelクラス同様、引数の型で処理を分け、以下のどちらの書き方でもOKとなっています。
IconShape(0xf024);
IconShape({
text: 0xf024,
});
unicodeの文字列指定に対応
accessorをいじり、文字列が渡された場合はparseIntで16進数に変換してるので、IconShape("f17b")みたいな書き方にも対応してます。
デフォルトパラメータ
各種パラメータを指定しなかった場合に適用されます。ここにデフォルトのfontFamilyを指定しておくと便利かも。
_static: {
defaults: {
text: "f024",
fontSize: 100,
fontFamily: "FontAwesome",
},
}
所感
アイコンフォントは割りと充実してますので、これらだけで一本ゲームを作ってみるのも面白いんじゃないかと思いました。
ちなみに使えるサービスやアイコンの種類を確認したり、必要なアイコンだけをまとめてパッケージングする際は以下のようなwebサービスが便利です。
参考
phina.js で Webフォント を使ってみるよ！
HTML5 CanvasとWebGLでアイコンフォント集Font Awesomeを扱う方法