テキストを画像に

テキストを画像にする

テキストをスプライトとして表示してみよう。

動作例

文字列をイメージ化して表示します。文字列がスプライトであることを示すため、進む、回転する、端に触れたら跳ね返るの動作をさせています。

---

※ TypeScratcherロゴをクリックで表示、緑の旗クリックで動作開始

メッセージ

緑の旗を押して開始します。

「Ohoo my typescratcher」をイメージ化して、スプライトのコスチュームとして使用しています。

文字をスプライトとしている証拠として、文字が端に触れたら跳ね返えらせています。

---

sub/images.ts

import { Typescratcher as Ts } from "@tscratch3/typescratcher";

// 【画像読み込み】
import BluSkySvg from './assets/Blue Sky.svg';
export const BlueSkyImage = new Ts.Image( { BluSkySvg } );

index.ts

import { Typescratcher as Ts } from "@tscratch3/typescratcher";
import type { Sprite } from "@tscratch3/typescratcher";

// イメージを取り込む
import { BlueSkyImage } from './sub/images';

// 【ステージ】(BlueSkyImage)
const stage = new Ts.Stage();
stage.Backdrop.add( BlueSkyImage );

// 文字列イメージ化
const HELLO = 'Ohoo my typescratcher';
const attribute : SvgImageAttributes = {
    fill: '#f00000', // 文字色
    font_family: Ts.ScratchFontFamily.Scratch
};
const helloImage = new Ts.FontImage( attribute );
await helloImage.textToSvg( HELLO );

// 文字スプライトを作成
const moji = new Ts.Sprite( 'moji' );
moji.Costume.add( helloImage );
moji.Looks.size.scale = [ 50, 50 ];

// 旗が押されたときの「文字」のスレッド
moji.Event.flagPresser().func = async function* ( this: Sprite ) {
    // 中心座標
    this.Motion.position.xy = [ 0, 0 ];
    // 右90度
    this.Motion.direction.degree = 90;
    // 回転方法は自由に回転
    this.Motion.rotation.style = Ts.Rotation.ALL_AROUND;
    // ずっと繰り返す
    for( ;; ) {
        // 向いている方向へ進む
        this.Motion.move.steps( 2 );
        // 向きを変える
        this.Motion.direction.degree += 1;
        // もし端に触れたら跳ね返る
        this.Motion.move.ifOnEdgeBounce();
        yield;
    }   
}

// 開始
Ts.engine.start();

index.tsについて

文字列イメージ化
『new Ts.FontImage(attribute)』
これはイメージ作成をするnew Ts.Image({イメージ変数}) の拡張版であり、
『await helloImage.textToSvg(HELLO)』
のように文字列を与えることができます。
出来上がったイメージを スプライトのコスチュームとして使うことができます。