基本的な文字描画

Akashic Engine で利用できる様々な文字描画方法のサンプルです。

動かし方

ダウンロードした zip ファイルを解凍して以下のコマンドを実行してください。

npm install
akashic-sandbox .

ソースコード

"use strict";

function main() {
  var scene = new g.Scene({
    game: g.game,
    assetIds: ["font", "font_glyphs"] // このシーンでフォント画像とグリフ情報を利用する宣言
  });

  scene.loaded.add(function() {
    /* ダイナミックフォントを定義する */
    var font = new g.DynamicFont({
      game: scene.game,
      fontFamily: g.FontFamily.Serif, // セリフ体・明朝体のフォントファミリーを指定
      size: 40 // 生成するフォントのピクセル数
    });

    /* フォントを元にテキストを描画する */
    var label = new g.Label({
      scene: scene,
      text: "文字を描く",
      font: font, // あらかじめ定義したフォントデータ
      fontSize: 40, // フォントサイズ
      x: 10, // X座標
      y: 10 // Y座標
    });
    scene.append(label);

    /* フォントサイズの変更 */
    var bigLabel = new g.Label({
      scene: scene,
      text: "大きな文字",
      font: font,
      fontSize: 60, // フォントサイズ
      x: 10,
      y: 60
    });
    scene.append(bigLabel);

    /* 横幅の指定 */
    var maxWidthLabel = new g.Label({
      scene: scene,
      text: "描画幅の指定",
      font: font,
      fontSize: 40,
      maxWidth: 80,
      x: 10,
      y: 140
    });
    scene.append(maxWidthLabel);

    /* 文字の左右揃え */
    var leftAlignLabel = new g.Label({
      scene: scene,
      text: "左",
      font: font,
      textAlign: g.TextAlign.Left, // 左揃え
      width: g.game.width,
      fontSize: 40,
      x: 10,
      y: 190
    });
    scene.append(leftAlignLabel);

    var centerAlignLabel = new g.Label({
      scene: scene,
      text: "中央",
      font: font,
      textAlign: g.TextAlign.Center, // 中央揃え
      width: g.game.width, // 左揃えでない場合は中央を決めるためwidth指定が必要
      widthAutoAdjust: false,
      fontSize: 40,
      x: 10,
      y: 190
    });
    scene.append(centerAlignLabel);

    var rightAlignLabel = new g.Label({
      scene: scene,
      text: "右",
      font: font,
      textAlign: g.TextAlign.Right, // 右揃え
      width: g.game.width - 10, // 右揃えは画面外にされないようレイアウトする必要がある
      widthAutoAdjust: false, // 左揃えでない場合は中央を決めるためwidth指定が必要
      fontSize: 40,
      x: 10,
      y: 190
    });
    scene.append(rightAlignLabel);
    /* 任意の文字色を使う */
    var colorLabel = new g.Label({
      scene: scene,
      text: "色を変える",
      font: font,
      fontSize: 40,
      textColor: "red", // 文字色
      x: 10,
      y: 240
    });
    scene.append(colorLabel);

    /* フォントの使い分け */

    /* 縁取りフォントを定義する */
    var strokeFont = new g.DynamicFont({
      game: scene.game,
      fontFamily: g.FontFamily.Serif,
      fontColor: "red",
      strokeColor: "black",
      strokeWidth: 2,
      size: 40
    });

    /* 縁取りフォントを利用 */
    var colorStrokeLabel = new g.Label({
      scene: scene,
      text: "縁取り",
      font: strokeFont, // 縁取りフォントを指定
      fontSize: 40,
      // textColor: "red", // 文字色はフォントの色を使うため指定しない
      x: 240,
      y: 240
    });
    scene.append(colorStrokeLabel);

    /* サンセリフのフォントを定義する */
    var sansFont = new g.DynamicFont({
      game: scene.game,
      fontFamily: g.FontFamily.SansSerif, // サンセリフ体・ゴシック体のフォントファミリーを指定
      size: 40
    });

    /* サンセリフフォントの利用 */
    var sansLabel = new g.Label({
      scene: scene,
      text: "ゴシック体",
      font: sansFont, // サンセリフのフォントデータ
      fontSize: 40,
      x: 10, // X座標
      y: 290 // Y座標
    });
    scene.append(sansLabel);

    /**
     * ビットマップフォント
     *
     * アセットを用意する方法は https://akashic-games.github.io/tutorial/v2/bitmap-font.html を参考
     *
     * PixelMplusフォント
     * http://itouhiro.hatenablog.com/entry/20130602/font
     */

    /* グリフ情報をアセットから取り出す */
    var glyphInfo = JSON.parse(scene.assets["font_glyphs"].data);

    /* ビットマップフォントを定義する */
    var bitmapFont = new g.BitmapFont({
      src: scene.assets["font"], // フォント画像
      map: glyphInfo.map, // フォント画像とグリフ情報の対応マップ
      defaultGlyphWidth: glyphInfo.width, // デフォルト横幅
      defaultGlyphHeight: glyphInfo.height, // デフォルト縦幅
      missingGlyph: glyphInfo.missingGlyph // 代替文字情報
    });

    /* ビットマップフォントの利用 */
    var bitmapLabel = new g.Label({
      scene: scene,
      text: "ビットマップフォント",
      font: bitmapFont, // サンセリフのフォントデータ
      fontSize: 40,
      x: 10, // X座標
      y: 340 // Y座標
    });
    scene.append(bitmapLabel);
  });

  g.game.pushScene(scene);
}

module.exports = main;

© DWANGO Co., Ltd.