TypeScracherとは何？

簡単なサンプル

---

※ 動画再生ボタンを押して再生しましょう

---

index.ts

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

// 画像を読み込みます。ここではScratch財団が公開してる画像URLを使います
const CatASvg = 'https://cdn.assets.scratch.mit.edu/internalapi/asset/bcf454acf82e4504149f7ffe07081dbc.svg/get';
const BlueskySvg = 'https://cdn.assets.scratch.mit.edu/internalapi/asset/e7c147730f19d284bcd7b3f00af19bb6.svg/get';

// イメージを作成します
const CatAImage = new Ts.Image( { CatASvg } );
const BlueskyImage = new Ts.Image( { BlueskySvg } );

// スプライトを作成します
const cat = new Ts.Sprite( "cat" );
cat.Costume.add( CatAImage ); // イメージ追加

// ステージを作成します
const stage = new Ts.Stage();
stage.Backdrop.add( BlueskyImage ); // 背景追加

// 旗クリックされたときのイベントを定義します
cat.Event.flagPresser().func = async function*( this: Sprite ) {
    // ずっと繰り返す
    for( ;; ) {
        // Motion.move.steps: 指定した数だけ動かします
        this.Motion.move.steps( 5 );
        // Motion.move.ifOnEdgeBounce: もし端についていたら跳ね返る
        this.Motion.move.ifOnEdgeBounce();
        
        yield; // 次のフレームになるまで一時停止する
    }
}

// エンジンを開始します
Ts.engine.start();

コードプログラミングならでは

前半部 #1 ～ #18 は 素材の読み込みやスプライト作成などの事前準備のコードです。
Scratch3では事前準備のステップが非常に簡単ですが、コードプログラミングではちょっと面倒ですね
この準備作業は「はしょれない」ので、面倒といわずに付き合ってくださいね。