Next2D PlayerのAPI [TextField編]

TextFieldのテキスト機能はプレインテキストとHTMLテキストの2つの機能がついています。

プレインテキスト

Stringとして受け取ったテキスト情報をそのまま描画に出力します。

const root = next2d.createRootMovieClip(240, 240, 12, {
    "tagId": "container"
});

const { TextField } = next2d.text;

const textField = new TextField();

textField.defaultTextFormat.size = 16;
textField.text  = "Hello, World.";

textField.x = (240 - textField.width)  / 2;
textField.y = (240 - textField.height) / 2;

root.addChild(textField);

See the Pen [Next2D Player] TextField plain text sample code by Next2D (@next2d) on CodePen.

HTMLテキスト

受け取ったHTMLを解析して、描画に出力します。
お知らせなどの機能で利用できるのではないかと思ってます。

const root = next2d.createRootMovieClip(240, 240, 12, {
    "tagId": "container"
});

const { TextField } = next2d.text;

const textField = new TextField();

textField.multiline = true;
textField.wordWrap  = true;
textField.htmlText  = `<p align="center"><font size="14" color="red"><b>Hello, World.</b></font></p><p><img src="https://next2d-demonstration.herokuapp.com/image/logo.png" width="50" height="50"></p>`;

textField.x = (240 - textField.width)  / 2;
textField.y = (240 - textField.height) / 2;

root.addChild(textField);

See the Pen [Next2D Player] TextField html text sample code by Next2D (@next2d) on CodePen.

リサイズ機能

リサイズ機能はテキストサイズに合わせて枠が拡大縮小するautoSize機能と、枠のサイズに合わせてテキストサイズが拡大縮小するautoFontSize機能です。文字を使った演出などは枠が拡大縮小するautoSize機能がお勧めで、ユーザー情報など、枠に収まってほしいシーンではテキストサイズが拡大縮小するautoFontSize機能がお勧めです。

autoSize

テキストサイズに応じてテキストエリア枠を拡大縮小するautoSize機能のサンプルコードです。

import "https://cdn.skypack.dev/@next2d/player@latest";

const root = next2d.createRootMovieClip(240, 240, 12, {
    "tagId": "container"
});

const { TextField, TextFieldAutoSize } = next2d.text;

const textField = new TextField();

textField.defaultTextFormat.size = 10;

textField.border   = true;
textField.autoSize = TextFieldAutoSize.CENTER;
textField.text     = "autoSize";

textField.x = (240 - textField.width)  / 2;
textField.y = (240 - textField.height) / 2;

root.addChild(textField);

const timerId = setInterval((text_field) => 
{
    // reset
    text_field.text = "";
    
    text_field.defaultTextFormat.size++;
    text_field.text = "autoSize";
    text_field.x = (240 - text_field.width)  / 2;
    text_field.y = (240 - text_field.height) / 2;
    
    // end
    if (text_field.defaultTextFormat.size === 50) {
        clearInterval(timerId);
    }
}, 1000, textField);

See the Pen [Next2D Player] TextField autoSize sample code by Next2D (@next2d) on CodePen.

autoFontSize

テキストエリアの枠のサイズに合わせてテキストサイズが拡大縮小するautoFontSize機能のサンプルコードです。

const root = next2d.createRootMovieClip(240, 240, 12, {
    "tagId": "container"
});

const { TextField, TextFormatAlign } = next2d.text;

const textField = new TextField();

textField.defaultTextFormat.align = TextFormatAlign.CENTER;
textField.defaultTextFormat.size = 10;

textField.border       = true;
textField.multiline    = true;
textField.wordWrap     = true;
textField.autoFontSize = true;
textField.width        = 200;
textField.text         = "autoFontSize";

textField.x = (240 - textField.width)  / 2;
textField.y = (240 - textField.height) / 2;

root.addChild(textField);

let text = "";
const timerId = setInterval((text_field) => 
{
    // reset
    text_field.text = "";
    text += "xyz. ";
    text_field.defaultTextFormat.size++;
    text_field.text = `autoFontSize\nFontSize:${text_field.defaultTextFormat.size}\n${text}`;
    text_field.x = (240 - text_field.width)  / 2;
    text_field.y = (240 - text_field.height) / 2;
    
    // end
    if (text_field.defaultTextFormat.size === 100) {
        clearInterval(timerId);
    }
}, 1000, textField);

See the Pen [Next2D Player] TextField autoFontSize sample code by Next2D (@next2d) on CodePen.

いかがだったでしょうか？
他にも紹介したいNext2D Playerの機能はあるのですが、それはまた別の機会に掲載できればと思います。
明日からはNext2D Frameworkの紹介をできればと思います。