例題：スプライトを移動させよう

スプライトを移動させてみましょう

旗をクリックしたら少しだけ進ませてみましょう。
イメージを作る部分はサブモジュールで分離しましょう。

動作例

緑の旗をクリックするたびに、スプライトを少しだけ右側へ移動させます。

---

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

---

sub/images.ts

sub/images.ts

イメージを作るサブモジュールの説明は割愛します。

index.ts

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

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

// イメージ作成
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 ) {
    // Motion.move.steps : 指定した数だけ動かす
    this.Motion.move.steps(5);
}

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

index.ts

ここでは、『旗クリックされたときのイベント』を受けて実行するイベント定義をしています。
スプライトやステージのインスタンスを使い『〇〇.Event.flagPresser().func』として、旗をクリックするたびに動作する『スレッド』を作り出します。

『スレッド』は同時に複数存在でき、『スレッド』は同時並列で動作します。
イベントを定義する関数の代表的な形は『async function*( ) { }』です。

『this』

スレッドのコードの中に書かれている『this』は、スプライトやステージのインスタンスです。
『this』は、自分のことを表すプログラミング用語です。
『function() { }』に紐づいているインスタンスを『this』として扱っているわけです。

『cat.Event.flagPresser().func』の場合 スレッドのなかの『this』は　『cat』です。
スレッドのなかではできる限り『this』を使うようにしましょう。