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

enchant.js
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だけは先のサイトで取得した。

 取得した4つのフォントファイルは、以下のように格納しておこう。フォルダの構成は”ゲーム開発を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("1");
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]

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

enchant76

【関連記事】
 ≫ ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにステータスゲージ(HPゲージ)を表示する
 ≫ ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンにステータスウィンドウ(状態表示枠)を表示する
 ≫ ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに切り替える
 ≫ ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 バーチャルボタン(Aボタン/Bボタン/Xボタン/Yボタン)を表示してみる
 ≫ ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像をバーチャルパッド(十字方向キーパッド)で動かしてみる
 ≫ ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像をキー入力で動かしてみる
 ≫ ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 キャラクター画像を表示してみる
 ≫ ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 enchant.jsのダウンロードと開発準備

(アシベズヘア@ashibehair_m

ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 文字列に「8bitファミコン風のWEBフォント(漢字も使える!フリー!)」を採用する」への10件のフィードバック

  1. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 enchant.jsのダウンロードと開発準備

  2. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに1体の敵キャラ(エネミー/モンスター)を配置する

  3. ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【検証篇】 バーチャルパッド(十字方向キーパッド)を表示してキーボード上でキー押下すると、そのキーを押下しっぱなし

  4. ピンバック: materialize.jp » WebViewで画面の右横にできる隙間を消す方法(スクロールバー表示領域を消す方法)

  5. ピンバック: materialize.jp » adbコマンドを気軽に使えるようにする方法(adbのPATHを通す方法)

  6. ピンバック: materialize.jp » Androidアプリのランチャーアイコンを「Android風アイコンジェネレータ」で作成する

  7. ピンバック: materialize.jp » 秀丸(テキストエディタ)で行の先頭に文字を一括挿入する方法

  8. ピンバック: materialize.jp » 秀丸(テキストエディタ)で行の後尾に文字を一括挿入する方法

  9. ピンバック: materialize.jp » 成長著しい「アイコン型広告」(アスタ)をAndroidアプリに導入する方法

  10. ピンバック: materialize.jp » アスタの「アイコン型広告」の背景色を変更する方法(Androidアプリ)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です