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ブラウザに依って異なっている。主に以下のようになっている。
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]
これで、思い描いていたゲームらしくなってきた!
≫ ゲーム開発を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)
ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【導入篇】 enchant.jsのダウンロードと開発準備
ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【RPG(ロールプレイングゲーム)篇】 戦闘シーンに1体の敵キャラ(エネミー/モンスター)を配置する
ピンバック: materialize.jp » ゲーム開発をenchant.js(HTML5 + JavaScript)で! 【検証篇】 バーチャルパッド(十字方向キーパッド)を表示してキーボード上でキー押下すると、そのキーを押下しっぱなし
ピンバック: materialize.jp » WebViewで画面の右横にできる隙間を消す方法(スクロールバー表示領域を消す方法)
ピンバック: materialize.jp » adbコマンドを気軽に使えるようにする方法(adbのPATHを通す方法)
ピンバック: materialize.jp » Androidアプリのランチャーアイコンを「Android風アイコンジェネレータ」で作成する
ピンバック: materialize.jp » 秀丸(テキストエディタ)で行の先頭に文字を一括挿入する方法
ピンバック: materialize.jp » 秀丸(テキストエディタ)で行の後尾に文字を一括挿入する方法
ピンバック: materialize.jp » 成長著しい「アイコン型広告」(アスタ)をAndroidアプリに導入する方法
ピンバック: materialize.jp » アスタの「アイコン型広告」の背景色を変更する方法(Androidアプリ)