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.