例題：スプライトとステージを表示する

スプライトとステージを表示

画像を読み込み、スプライトや背景を作成して表示してみましょう。
画像を読み込みイメージ化する部分は sub/images.tsとして分離してください。

動作例

スプライトと背景を表示します。

---

※ TypeScratcherロゴをクリックで表示

---

sub/images.ts

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

// 【画像 URL 】ここではScratch財団が公開してる画像URLを使います
// URLを探すビューアー :  https://amami-harhid.github.io/typescratcherAssets/web/
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';

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

sub/sounds.ts

サウンドを作りだすコードです。

このコードを本体(index.ts)の中に書いてもOKですが、サブモジュールとして分離してみました。
『new Image( { 〇〇 } )』を使い、サウンドインスタンスを生成しています。
引数『{ CatSvg }』は、オブジェクトであり、これは 『{ CatSvg: CatSvg }』, 『{ 'CatSvg': CatSvg }』 と同義です。
『new Image( オブジェクト )』は、名前キー付きのオブジェクトを与える仕様ですので『{ }』とすることに注意してください。
『export』 と書かれている部分は、このサブモジュールを使用する側へインスタンスを引き渡すための書き方です。
このサブモジュールは、次に紹介するindex.tsの LINE #4 にて 『import』しています。

index.ts

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

// イメージ作成
import { CatAImage, BlueskyImage } from './sub/images';

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

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

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

sub/sounds.ts

スプライトを new Sprite('名前')でして生成します。
ステージを new Stage() で生成します。
Javascriptの流儀として、それぞれ、const (コンスタント定義) で宣言することを推奨します。
Costume.add( イメージ, イメージ, ... ), Backdrop.add( イメージ, イメージ, ... ) は、コスチューム、背景としてイメージを追加している箇所です。
複数のイメージを渡すときは、カンマ,区切りで渡すとよいです。(例：add(イメージA, イメージB, イメージC))
イメージの配列[ ] の形で引数を渡すときは、add( ... imageArray )と ...をつけるとよいです。