本記事について

Turbowarpのカスタム拡張機能を作る方法の説明、その４です。

前記事までで、外部Javascriptファイルを読み込む処理、読み込むファイルをブロックで指定できるようにする、ところまでをやりました。

今回は、テスト用Javascriptのなかで『Scratch』操作をさせてみようと思います。

やりたいことの提示

ブロックで入力したSTEP数だけ動かす
～あらかじめ設定されている向きの方向に動かす
位置情報を言う（ふきだし）
～「〇〇と言う」と「〇〇と考える」をプルダウンで選択可能
～「〇〇秒の間だけ」の機能もつける

動画解説

カスタム拡張機能コード

コードGithub

拡張機能コンスタント

Extension.js

/**
 * Turbowarpの『カスタム拡張機能』を使おう【４】
 * 外部JSファイルにて、Scratch標準ブロックを再現させる
 * １）指定されたSTEP数だけ動かす
 * ２）現在の位置を吹き出し表示する（言う、考える）
 */
((Scratch) => {
    const ExtensionID = 'MYEXTENSION';
    const ExtensionName = '独自拡張練習';
    // 歯車画像URL
    const GEAR_IMAGE_SVG_URI 
        = 'https://amami-harhid.github.io/turbowarpExtensions/assets/gear.svg';
    // テスト用JSファイルの場所 URL
    const TEST_URL 
        = 'http://127.0.0.1:5500/turbowarpExtensions/_04_extension';

拡張機能定義情報（カラー付き）

    const MyExtensionInfo = {
        id : ExtensionID, 
        name : ExtensionName,
        color1 : '#000000', // 背景を黒に( 文字色は白固定なので背景を白にすると文字が読めない )
        color2 : '#ffffff', // ブロックリストの円周の色( 白 )
        color3 : '#0000ff', // ブロックの周囲の線の色（ 青 )

color1, color2, color3 はオプション、省略可能。

        blocks : [

            {
                opcode: 'loadJSFileSetting',
                blockType: Scratch.BlockType.COMMAND,
                text: '[IMG_GEAR]JSファイルを指定する[JSURL]',
                arguments: {
                    IMG_GEAR: {
                        type: Scratch.ArgumentType.IMAGE,       //タイプ
                        dataURI: GEAR_IMAGE_SVG_URI,            //歯車画像のURI
                    },
                    JSURL: {
                        type: Scratch.ArgumentType.STRING,
                        defaultValue: `${TEST_URL}/sub.js`,
                    },
                },
            },

            {
                opcode: 'setup',
                blockType: Scratch.BlockType.COMMAND,
                text: '[IMG_GEAR]事前準備',
                arguments: {
                    IMG_GEAR: {
                        type: Scratch.ArgumentType.IMAGE,       //タイプ
                        dataURI: GEAR_IMAGE_SVG_URI,            //歯車画像のURI
                    },
                },
            },

            {
                opcode : 'moveStep',
                blockType : Scratch.BlockType.COMMAND,
                text : '[GEAR_IMAGE] 動かす [STEPS]',
                arguments: {
                    GEAR_IMAGE : {
                        type: Scratch.ArgumentType.IMAGE,
                        dataURI: GEAR_IMAGE_SVG_URI,
                    },
                    STEPS : {
                        type: Scratch.ArgumentType.NUMBER,
                        defaultValue: 10,
                    }
                },
            },

位置を知らせる（プルダウン付き）

            {
                opcode : 'sayPosition',
                blockType : Scratch.BlockType.COMMAND,
                text : '[GEAR_IMAGE] 位置を知らせる [TYPE]',
                arguments: {
                    GEAR_IMAGE : {
                        type: Scratch.ArgumentType.IMAGE,
                        dataURI: GEAR_IMAGE_SVG_URI,
                    },
                    TYPE : {
                        type: Scratch.ArgumentType.STRING,
                        menu: 'FukidashiMenu',  // menusのキー
                        defaultValue: 'say',
                    },
                },
            },

〇秒、位置を知らせる（プルダウン付き）

            {
                opcode : 'sayPositionForSec',
                blockType : Scratch.BlockType.COMMAND,
                text : '[GEAR_IMAGE] [SECS]秒、位置を知らせる [TYPE]',
                arguments: {
                    GEAR_IMAGE : {
                        type: Scratch.ArgumentType.IMAGE,
                        dataURI: GEAR_IMAGE_SVG_URI,
                    },
                    SECS : {
                        type: Scratch.ArgumentType.NUMBER,
                        defaultValue: 2,
                    },
                    TYPE : {
                        type: Scratch.ArgumentType.STRING,
                        menu: 'FukidashiMenu',  // menusのキー
                        defaultValue: 'say',
                    },
                },
            },

],

プルダウンメニューの定義

        // メニューの定義
        menus: {
            FukidashiMenu: {
                items: [
                    {'text':'話す','value':'say'},
                    {'text':'考える','value':'think'},
                ],
            }
        }
    }

拡張機能のクラス

sayPositionForSecメソッドにはasyncをつけている。終わるまで待つ必要がある(await)ため。

    class MyExtension {
        getInfo() {
            return MyExtensionInfo;
        }
        /**
         * ロードするJSファイルのURLを設定する
         * @param {*} args 
         * @param {*} util 
         */
        loadJSFileSetting( args, util ){
            this.jsUrl = args.JSURL;
        }
        /**
         * JSファイルをロードする
         * @param {*} args 
         * @param {*} util 
         */
        async setup( args, util ){
            console.log(this.jsUrl)
            try{
                const _t = new Date().getTime();
                const sub = await import(`${this.jsUrl}?_t=${_t}`);
                // 読み込むJSは export {TestJS} をしている前提。
                this.testJS = new sub.TestJS(); 
            }catch(e){
                const message = '読み込みに失敗した、'
                    +'もしくはクラス定義が存在しないみたいです';
                console.error( message, e );
                alert(message);
            }
        }
        moveStep( args, util ) {
            console.log( 'moveStep STEPS=', args.STEPS );
            // sub.js 内のメソッドを実行する
            this.testJS.moveStep(args, util);
        }
        sayPosition( args, util ) {
            console.log( 'sayPosition TYPE=', args.TYPE ); // say or think
            // sub.js 内のメソッドを実行する
            this.testJS.sayPosition(args, util);
        }
        async sayPositionForSec( args, util ) {
            console.log( 'sayPosition TYPE=', args.TYPE ); // say or think
            console.log( 'sayPosition SECS=', args.SECS);   // second
            // sub.js 内のメソッドを実行する
            await this.testJS.sayPositionForSec(args, util);
        }
    }

    Scratch.extensions.register(new MyExtension());

})(Scratch);

外部ファイル

コードGITHUB

角度(°) を radianに直す共通処理を書いてます

const MathUtil = class{
    static degToRad (deg) {
        return deg * Math.PI / 180;
    }
}

クラスの定義( TestJS )

const TestJS = class{

向きの方向へ指定したSTEPS分、位置を移動させる処理

Scratch VM のコードを真似しています。

    moveStep(args, util){

        // 向きの方向へ STEPSの長さ分 位置を変える（移動させる）
        const steps = Scratch.Cast.toNumber(args.STEPS);
        const radians = MathUtil.degToRad(90 - util.target.direction);
        const dx = steps * Math.cos(radians);
        const dy = steps * Math.sin(radians);
        util.target.setXY(util.target.x + dx, util.target.y + dy);

    }

話す処理（言う:say, 考える: think )

    sayPosition(args, util){
        
        const type = args.TYPE;
        const position = {x:util.target.x, y:util.target.y};
        const message = `x=(${position.x}), y=(${position.y})`;
        util.runtime.emit('SAY', util.target, type, message);
    }

〇秒間、話す処理（言う:say, 考える: think )

〇秒間経過した後にブランクで言い直しています。

    async sayPositionForSec(args, util){

        const type = args.TYPE;
        const position = {x:util.target.x, y:util.target.y};
        const message = `x=(${position.x}), y=(${position.y})`;
        util.runtime.emit('SAY', util.target, type, message);
        const secs = Scratch.Cast.toNumber(args.SECS);
        await this._sleep(secs*1000); // 秒数だけ待つ（次の処理へ進ませない）
        util.runtime.emit('SAY', util.target, type, ''); // ふきだしバブルを消す
    }

〇ミリ秒停止させる処理 ( Promiseを使っています )

    async _sleep(msec){
        return new Promise(resolve => setTimeout(resolve, msec));
    }
}

最後につける

export {TestJS};

続き

次の記事【５】へ続きます。