ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【RPG（ロールプレイングゲーム）篇】　文字列に「8bitファミコン風のWEBフォント（漢字も使える！フリー！）」を採用する

enchant.js / Ubiquitous Entertainment Inc.

　見た目をもっとゲームらしくしたいので、ファミコン風のWEBフォントを採用したいと思う。8bitビットマップ風の無料フォントを見つけたので、それを用いてWEBフォントの適用方法をここでは解説していく。

■「PixelMplus（ピクセル・エムプラス） ‥ 8bitビットマップふうフリーフォント」を採用する

PixelMplus（ピクセル・エムプラス） ‥ 8bitビットマップふうフリーフォント
http://itouhiro.hatenablog.com/entry/20130602/font
[browser-shot width=”600″ url=”http://itouhiro.hatenablog.com/entry/20130602/font”]

　ライセンスはフリー、「M+ FONT LICENSE」参照とある。

これらのフォントはフリー（自由な）ソフトウエアです。
あらゆる改変の有無に関わらず、また商業的な利用であっても、自由にご利用、複製、再配布することができますが、全て無保証とさせていただきます。

M+ FONT LICENSE
http://mplus-fonts.sourceforge.jp/mplus-bitmap-fonts/#license

　何してもOK？　以下のサイトに、より分かり易く書いてあった。

WebFonts として利用できるフリーの和文フォント
http://www.yomotsu.net/wp/?p=565

○　WebFonts として利用可能 (サーバーに UP しても良い)
○　TTF から EOT や WOFF などに変換しても良い
○　フォントファイルの容量を軽くする目的で、アウトラインのポイントを一部省略しても良い
○　フォントファイルの容量を軽くする目的で、Web ページ内に使用しない文字を破棄しても良い

　なるほど！　では、このフォントを採用することにする。漢字も使えるというのがとても嬉しい。ダウンロードは以下からだ。

http://sourceforge.jp/projects/mix-mplus-ipa/downloads/58930/PixelMplus-20130602.zip/

　ダウンロードした「PixelMplus-20130602.zip」を解凍すると、以下の構成になっていた。「PixelMplus12」と「PixelMplus10」の2種類のフォントがあるようだ。

PixelMplus-20130602/
　┗mplus_bitmap_fonts/
　┗PixelMplus10-Bold.ttf
　┗PixelMplus10-Regular.ttf
　┗PixelMplus12-Bold.ttf
　┗PixelMplus12-Regular.ttf
　┗README.txt

　私が今回作成しようと思っていたRPGは、文字の大きさを「20px」で考えていたので、「PixelMplus10」を2倍にして実現することにする。「PixelMplus12」を20pxに拡大すると見栄えが悪い、もしも文字の大きさを24pxにするなら「PixelMplus12」を用いる。

■対応WEBブラウザを網羅する為に「TTF／WOFF／EOT／SVG」を用意する

　WEBフォントの採用形式が、厄介なことにWEBブラウザに依って異なっている。主に以下のようになっている。

EOT　　・・・　IE
WOFF　・・・　Modern Browsers　（Chrome、Safari、Opera、Firefoxなど）
TTF　　・・・　Safari, Android, iOS　（少し古めのスマートフォンなど）
SVG　　・・・　Legacy iOS　（古いiPhoneやiPad、iOS4.1以下など）

　今回採用する「PixelMplus」はライセンスが「形式変換OK！！！」だったので、TTFからWOFF／EOT／SVGへ変換して、それぞれを取得しておこう。

　で、変換には、以下のようなサイトもあるのだが、Option設定が難しく、私にはうまく変換できない。うまくできる人は、このサイトが一番手っ取り早いと思う。

Font Squirrel | Create Your Own @font-face Kits
http://www.fontsquirrel.com/tools/webfont-generator

　なので私は、以下のソフトで変換を行っている。

WOFFコンバータ – 武蔵システム
http://opentype.jp/woffconv.htm
[browser-shot width=”600″ url=”http://opentype.jp/woffconv.htm”]

　このソフトは使い方がすっごい簡単で（先のサイトのせいもあって）、あっ！という間に変換できる。ただし、SVGへは変換ができないので、SVGだけは先のサイトで取得した。

　取得した４つのフォントファイルは、以下のように格納しておこう。フォルダの構成は”ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【導入篇】　バーチャルボタン（Aボタン／Bボタン／Xボタン／Yボタン）を表示してみる”の記事時点のものだ。

「任意」フォルダ
　┗index.html
　┗「js」フォルダ
　　　┗main.js
　　　┗「lib」フォルダ
　　　　　┗enchant.js
　　　　　┗ui.enchant.js
　　　　　┗pad.png
　　　　　┗apad.png
　　　　　┗icon0.png
　　　　　┗font0.png
　┗「img」フォルダ
　　　┗xxx.png
　　　┗button.png
　┗「font」フォルダ
　　　┗PixelMplus10-Regular.eot　　　 ⇒WEBフォント（EOT）
　　　┗PixelMplus10-Regular.svg　　　 ⇒WEBフォント（SVG）
　　　┗PixelMplus10-Regular.ttf　　　 ⇒WEBフォント（TTF）
　　　┗PixelMplus10-Regular.woff　　　 ⇒WEBフォント（WOFF）

　よし、これで準備はオッケー！

■CSSにWEBフォントを指定する

　これまでCSSを用意してこなかったが、この機会にCSSを用意する。main.cssを以下に格納してほしい。

「任意」フォルダ
　┗index.html
　┗「js」フォルダ
　　　┗main.js
　　　┗「lib」フォルダ
　　　　　┗enchant.js
　　　　　┗ui.enchant.js
　　　　　┗pad.png
　　　　　┗apad.png
　　　　　┗icon0.png
　　　　　┗font0.png
　┗「img」フォルダ
　　　┗xxx.png
　　　┗button.png
　┗「font」フォルダ
　　　┗PixelMplus10-Regular.eot
　　　┗PixelMplus10-Regular.svg
　　　┗PixelMplus10-Regular.ttf
　　　┗PixelMplus10-Regular.woff
　┗「css」フォルダ
　　　┗main.css　　　　　　　　　 ⇒WEBフォントの指定をする

　CSS上でのWEBフォントの指定方法は以下の通りだ。

[css firstline=”1″ highlight=”1,2,3,4,5,6,7,8″ title=”main.css”]
@font-face {
font-family: PixelMplus10;
src: url(‘../font/PixelMplus10-Regular.eot’); /* IE9 Compat Modes */
src: url(‘../font/PixelMplus10-Regular.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
url(‘../font/PixelMplus10-Regular.woff’) format(‘woff’), /* Modern Browsers */
url(‘../font/PixelMplus10-Regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘../font/PixelMplus10-Regular.svg#svgFontName’) format(‘svg’); /* Legacy iOS */
}

body {
background: #000;
padding: 0;
margin: 0;
}
[/css]

　IE向けにEOTは「～.eot?#iefix」と記載しておく。そうしないと、次のフォントファイルを読み込みに行ってしまい、エラーとなってしまう。これを書いておけば、ここで読み込みを終えてくれる。

　SVGの「#svgFontName」は特に使う予定はないので、適当な名前をつけておけばOKだ。私はこのまま「#svgFontName」としておく。

■index.htmlからmain.cssを読み込む

　”ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【導入篇】　enchant.jsのダウンロードと開発準備”の記事以来、一度もindex.htmlは変更をしていなかったが、以下のようにmain.cssを読み込むように変更しよう。

[html firstline=”1″ highlight=”7″ title=”index.html”]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>ここにゲームのタイトルを書く</title>
<link type="text/css" rel="stylesheet" media="all" href="./css/main.css">
<script type="text/javascript" src="./js/lib/enchant.js"></script>
<script type="text/javascript" src="./js/lib/ui.enchant.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</head>
<body>
<!– ここにenchant.jsで作られたゲームが表示される –>
</body>
</html>
[/html]

■文字列にWEBフォントを指定する

　長い道のりだったが、ようやく、文字列にWEBフォントを指定できるようになった。

　”ゲーム開発をenchant.js（HTML5 + JavaScript）で！　【RPG（ロールプレイングゲーム）篇】　戦闘シーンにステータスウィンドウ（状態表示枠）を表示する”の記事で、Labelを用いて表示した文字列、すべてにWEBフォントを指定しよう。コードは以下の通りだ。

[javascript firstline=”170″ highlight=”171,178,185,192,201,210,219″ title=”main.js”]
var h = new Label("HP");
h.font = "20px PixelMplus10";
h.color = ‘#f8f8f8’;
h.x = this.x + 12;
h.y = this.y + 36;
scene.addChild( h );

var s = new Label("SP");
s.font = "20px PixelMplus10";
s.color = ‘#f8f8f8’;
s.x = this.x + 12;
s.y = this.y + 66;
scene.addChild( s );

var l = new Label("Lv");
l.font = "20px PixelMplus10";
l.color = ‘#f8f8f8’;
l.x = this.x + 12;
l.y = this.y + 96;
scene.addChild( l );

nameLabel = new Label("マザパク侍");
nameLabel.font = "20px PixelMplus10";
nameLabel.color = ‘#f8f8f8’;
nameLabel.x = this.x + 10;
nameLabel.y = this.y + 10;
nameLabel.width = 100;
nameLabel.textAlign = "center";
scene.addChild( nameLabel );

hpLabel = new Label( hp.toString().toTwoByteAlphaNumeric() );
hpLabel.font = "20px PixelMplus10";
hpLabel.color = ‘#f8f8f8’;
hpLabel.x = this.x + 32;
hpLabel.y = this.y + 36;
hpLabel.width = 80;
hpLabel.textAlign = "right";
scene.addChild( hpLabel );

spLabel = new Label( sp.toString().toTwoByteAlphaNumeric() );
spLabel.font = "20px PixelMplus10";
spLabel.color = ‘#f8f8f8’;
spLabel.x = this.x + 32;
spLabel.y = this.y + 66;
spLabel.width = 80;
spLabel.textAlign = "right";
scene.addChild( spLabel );

lv = new Label("１");
lv.font = "20px PixelMplus10";
lv.color = ‘#f8f8f8’;
lv.x = this.x + 32;
lv.y = this.y + 96;
lv.width = 80;
lv.textAlign = "right";
scene.addChild( lv );
[/javascript]

　これで、思い描いていたゲームらしくなってきた！

（アシベズヘア@ashibehair_m）