TypeScracherとは何？

特徴

Scratch3風 ～ Scratch3でやれることを「同様に」で表現できることを目指しています。

イベント起動型

イベント起動

Scratch3のハットブロックに対応したスレッド定義(非同期/並列動作)

体系的なメソッド構成

直観的に使える体系的なメソッド構成

Scratch3のブロックグループに対応したメソッドグループを用意しています。

• Motion(動き)
• Looks(見た目)
• Sound(音)
• Events(イベント)
• Control(制御)
• Sensing(調べる)
• Pen(ペン)
• Operations(演算)
• Variables(変数)

Scratch3座標系

ステージの大きさは、横 480ピクセル、縦 360ピクセル、とScratch3と同じにしています。

座標(X,Y)は ステージの中央が(X,Y)=(0,0)であり、座標の扱いはScratch3と完全に同じです。

Scratch3と同等の衝突判定

衝突判定は、Scratch3と同じく、見えたままの判定を提供します。

Scratch3と同等の色判定

色判定も、Scratch3と同じく、見えたままの判定を提供します。

画像ファイル

SVG画像、BITMAP画像、どちらも使用可能です。

Scratch3から出力した画像はそのまま使用することができます。

音ファイル

Scratch3で使える音ファイルは、すべてTypsScratcherでも利用可能です。

繰り返しループはフレームに連動

フレームごとに繰り返しループを１回分処理します。これは　Scratch3と同じです。

描画フレーム１回でループを１回分 実行する(=10歩動かす)

---

async function* ( this: Sprite ) {
    // ずっと繰り返す
    for(;;) {
        this.Motion.move.steps( 10 ); // 10 動かす
        
        yield; // 次のフレームになるまで一時停止する
    }
}

---

---

プログラミングが楽

体系的なメソッド構成

• 体系的なメソッド構成 ～ 提供するメソッドはScratch3のブロック群を参考にして構成されています。
• コーディングが楽 ～ Typescriptのコード補完により、候補メソッドを教えてくれます。

---

マウスで触れたら再生（離れたら停止）

マウスを重ねるとGIF再生

危ないコードを回避

• 危ないコードを回避 ～ 危ないコードを教えてくれて、適切なコードに補正可能です(ESLINTを利用)。

• 繰り返し処理の中身が 『空』 の場合、エラーになります。
• 繰り返し処理の最後に 『yield』 を書き忘れたとき、エラーになります。

マウスで触れたら再生（離れたら停止）

マウスを重ねるとGIF再生

---

機能拡張への道

機能拡張

『TypeScratcher』が提供するクラスを継承し、機能拡張された「スプライトクラス」を作り出すことも可能です。 typescriptを使いこなして、独自の機能拡張にも挑戦しましょう。

---

• スプライトクラス『Ts.Sprite』を継承して、独自機能を組み込む例

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

class Wall extends Ts.Sprite {
    /** プロパティ type */
    public type: number = -1; // 初期値は -1

    /**
     * クローンしたときにプロパティ『type』を引き継ぐようにする
     */
    protected makeClone( name: string ): Sprite {
        const clone = new Wall( name );
        clone.type = this.type;
        return clone;
    }
}