6
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

tmlib.js で Webフォント を使ってみるよ!

はじめに

せっかくゲームを作っているのに、ブラウザ上でのゲームの場合フォントが環境依存になりがち。
これは、JavaScript のライブラリである、tmlib.js でも同じだと思います。

なので端末のフォント制約に影響されない目的で、Webフォントがあるので、これをつかって、tmlib.js でのゲーム内でもちゃんとしたゲームにあったフォントを使うよー!

ってことで、やってみました。

他のやり方等があったらコメントよろしくお願いします。

CSSファイル

font family で指定するフォント名は、@font-face って言うCSSで設定するらしいです。
今覚えた…

index.css
@font-face {
  font-family: 'Madoka Runes';
  src: url('../fonts/maqbsm.ttf') format('truetype');
}

ここで設定する font-family が実際に使用するときのフォント名になるみたい。

HTMLファイル

tmlib.js の html で、css を読み込む。

index.html
<!DOCTYPE html>

<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no" />

  <title>tmlib.js:Madomagi Web Font sample</title>

  <link href="css/index.css" rel="stylesheet" type="text/css" />
  <script src="lib/develop/tmlib.js"></script>
  <script src="main.js"></script>
</head>

<body>
  <canvas id="world"></canvas>
</body>

</html>

これは、普通に link タグで読み込みっと…

スクリプト(CoffeeScript)

いつもどおり tmlib.js のテンプレートで

main.js
# メイン処理(ページ読み込み後に実行される)
tm.main ->

  # アプリケーション作成
  app = tm.display.CanvasApp '#world'

  # リサイズ
  app.resize 640, 400

  # 自動フィット
  app.fitWindow()

  # APバックグラウンド
  app.background = 'rgba(150,150,150,1.0)'

  # 最初のシーンに切り替える
  app.replaceScene TestScene()

  # 実行
  app.run()

メインシーンは以下の通りです。

TestScene.coffee
tm.define 'TestScene',

  superClass: 'tm.app.Scene'

  init: ->
    @superInit()

    labelName = 'mon mignon prêt-à-porter'

    # ラベルを描画する
    @fromJSON
      children:
        label_1:
          type: 'tm.display.Label'
          init: [labelName]
          fillStyle: 'rgba(0,0,0,1.0)'
          x: 640 / 2
          y: 200
        label_2:
          type: 'tm.display.Label'
          init: [labelName]
          fillStyle: 'rgba(0,0,0,1.0)'
          fontFamily: 'Madoka Runes'
          fontSize: 32
          x: 640 / 2
          y: 250

tm.display.LabelfontFamily にフォント名を指定すると、使用されるフォントが変わるんだけど、ここで @font-face で設定しておいたフォント名を指定する。

これで、どの端末でも同じフォントが表示されてゲームの雰囲気とかにあったフォントで表示が可能に!

いいね!(自分でしていくスタイル)

サンプル

tmlib.js:Madomagi Web Font sample

ss20141203a.png

こんな感じに表示されるはずです。

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
6
Help us understand the problem. What are the problem?