TypeScratcher Lessons

Appearance

Stage(ステージ) ​

ステージを作る ​

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

const stage = new Ts.Stage();

Stage

new Ts.Stage( ) のように 引数は無しです。

スプライトの場合は名前を付けるために引数を渡していましたが、ステージの場合は１個だけの存在なので、名前による区別は不要としています（仕様）。
生成したインスタンスは、コンスタント宣言をしましょう（推奨）。

const stage = ～

ステージ背景(backdrop) ​

イメージを読み込んだ後に、ステージへ背景(backdrop)を設定します。

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

// イメージを取り出す
import { WaterImage, BlueskyImage } from "./sub/images";

// ステージを作る
const stage = new Ts.Stage();

// 背景(Backdrop)へイメージを追加する
stage.Backdrop.add( WaterImage, BlueskyImage );
// これで、ステージ へ ２つの背景を持たせました。

Backdrop の渡し方

stage.Backdrop.add( WaterImage, BlueskyImage ) と 背景イメージを引数で渡してください。



最初に渡したイメージが、デフォルトの背景になります。

背景を１個も渡さないときは、ステージは存在はしますが、描画はされずに見えないままです。

表示する背景を変える ​

『Looks』(見た目)

背景の操作は『Looks』(見た目)系を使います。

次の背景にする ​

typescript

// 『次の背景にする』
stage.Looks.backdrop.next();

次の背景にする

現在表示している背景の次の背景を表示します。
最後の背景を表示しているとき、「次の背景」は先頭の背景です。

背景を◎◎にする ​

typescript

// 『背景を◎◎にする』
// イメージの名前を指定する。
stage.Looks.backdrop.name = BlueskyImage.name;
// イメージはステージへ設定している背景である必要がある。

背景を◎◎にする

指定する背景イメージは、背景追加『stage.Backdrop.add( ～, ～, )』にて追加している背景イメージとします
追加されていないイメージを指定した場合は、この処理の結果、何も変化しません。

背景を◎◎にして待つ ​

typescript

// 『背景を◎◎にして待つ』
async function*( this:Stage ) { 
    // ステージのスレッドのなかで実行する
    // 背景が切り替わったときのスレッドが終わるまで待つ。
    await this.Looks.backdrop.switchAndWait( BlueskyImage.name );
}

背景を◎◎にして待つ

指定する背景イメージは、背景追加『stage.Backdrop.add( ～, ～, )』にて追加している背景イメージとします
追加されていないイメージを指定した場合は、この処理の結果、何も変化しません。

背景が◎◎になったときのスレッド

背景が◎◎になったときのスレッドは別に定義しておきます。
当該スレッド定義がない場合は、「待つ」ことはしません。

背景が◎◎になったときのスレッド ​

typescript
// 背景が◎◎になったときのスレッドの定義
stage.Event.backdropSwitcher(BlueSkyImage).func = async function* ( this:Stage ) {

}

背景が◎◎になったときのスレッド

『backdropSwitcher()』の引数は、イメージインスタンスです。
背景が切り替わったときに定義したスレッドが起動します。