akashic-label による文字描画

拡張文字描画ライブラリの akashic-label で利用できる様々な文字描画方法のサンプルです。 Akashic Engine にあらかじめ組み込まれた文字描画機能よりも多機能で、改行・ルビなどを扱うことが出来ます。

動かし方

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

npm install
akashic-sandbox .

ソースコード

"use strict";
var Label = require("@akashic-extension/akashic-label").Label;

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 Label({
      scene: scene,
      text: "文字を描く",
      font: font, // あらかじめ定義したフォントデータ
      fontSize: 40, // フォントサイズ
      width: g.game.width, // 1行の描画幅を指定
      x: 10, // X座標
      y: 10 // Y座標
    });
    scene.append(label);

    /* 改行して複数行に分割 */
    var linesLabel = new Label({
      scene: scene,
      text: "改行する（一行目）\n改行する（二行目）", // \rまたは\n、\r\n位置で改行
      font: font,
      fontSize: 40,
      width: g.game.width,
      x: 10,
      y: 60
    });
    scene.append(linesLabel);

    /* 自動で改行 */
    var autoNewLineLabel = new Label({
      scene: scene,
      text: "akashic-labelで自動改行",
      font: font,
      fontSize: 40,
      lineBreak: true, // 自動でwidth幅で改行する（初期値はtrue）
      width: 160,
      x: 10,
      y: 160
    });
    scene.append(autoNewLineLabel);

    /* 行間余白の調整 */
    var marginLabel = new Label({
      scene: scene,
      text: "行間余白の調整",
      font: font,
      fontSize: 40,
      width: 200,
      lineGap: 20,
      x: 10,
      y: 340
    });
    scene.append(marginLabel);

    /** ルビの利用 */
    var rubyLabel = new Label({
      scene: scene,
      text: '{"rt":"るび","rb":"ruby"}を使う', // 記法に従ってルビを記述
      font: font,
      fontSize: 40,
      width: g.game.width,
      x: 410,
      y: 10
    });
    scene.append(rubyLabel);

    /** ルビにフォントを利用 */

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

    var rubyFontLabel = new Label({
      scene: scene,
      text: '{"rt":"るび","rb":"ruby"}フォント', // 記法に従ってルビを記述
      font: font,
      fontSize: 40,
      rubyOptions: {
        // ルビ描画オプション
        rubyFont: strokeFont, // ルビ用のフォント
        rubyFontSize: 30 // ルビのフォントサイズ
      },
      width: g.game.width,
      x: 410,
      y: 90
    });
    scene.append(rubyFontLabel);

    /** ルビを含む改行 */
    var rubyNewLineLabel = new Label({
      scene: scene,
      text: '{"rt":"るびもじ","rb":"ルビ文字"}を{"rt":"かいぎょう","rb":"改行"}する', // ルビを壊さないよう改行位置がレイアウトされる
      font: font,
      fontSize: 40,
      width: 100,
      x: 410,
      y: 210
    });
    scene.append(rubyNewLineLabel);
  });

  g.game.pushScene(scene);
}

module.exports = main;