Scratch-Block-Maker

这是Scratch3 的插件生成器webapp， 基于Create React App开发，请访问https://kittenbot.github.io/scratch3-extension/使用.

image

Scratch3插件生成器

随着scratch3越来越完善，我们发现很多用户都想自己实现自己的插件。但是编写scratch3的插件并不是一件简单的事情，这需要比较扎实的JavaScript开发能力；而对于专业的JavaScript程序员来说，写scratch3插件又很浪费时间。这个webapp的目的就是可以让你在10分钟内完成自己的scratch3插件框架代码。希望大家喜欢~

使用方法

Step1

打开网页：https://kittenbot.github.io/scratch3-extension/

Step2

给你的插件取名字和ID。注意插件ID需要全英文，并且不能包含空格和特殊字符串。插件ID在scratch3的运行环境中全局唯一。

之后可以给你的插件选取喜欢的颜色。

image

Step3

给插件选择你喜欢的图标，图标建议使用200x200像素以内的正方形png或svg图片。

image

Step4

之后我们来新建一个积木块，点击添加函数方块. 之后在弹出的模态框中点击添加文字变量，并修改变量的名字为WORD. 注意变量的名字需要为英文字母,并且不能包含特殊字符串, 并推荐全部大写.

最后我们还要更改我们的积木块ID, 积木块ID需要在当前插件中全局唯一. 这里我们将插件ID命名为sayhello.

image

Step5

大家可以点击右上角的生成预览查看我们插件在scratch3中加载的效果。

image

Step6

最后点击右下角的export index.js导出插件源代码.

对于标准的scratch3请将index.js加载到scratch-vm的extension中就行了.

以下步骤只对Kittenblock有效, 大家可以前往https://www.kittenbot.cn/software/下载最新的Kittenblock.

Step7

请到Kittenblock的安装目录的extension目录下新建一个插件的文件夹，这里我们命名为sayhello. 并将刚刚生成的index.js拷贝到该目录下.

image

Step8

在该文件夹下面建立一个名为extension.json的文件,里面放入如下的内容:

{
    "name": "Say Hello",
    "type": "scratch3",
    "image": "logo.png"
}

之后找一张你喜欢的图片作为插件的主图片,命名为logo.png,并放入该文件夹下. 最后我们的sayhello文件夹下有如下三个文件.

image

Step9

打开Kittenblock，并在左下角选择加载外部插件，可以找到我们刚刚加入的插件。

image

最终效果

image

大家只需要在index.js中更改对应的积木执行代码就能实现具体积木的功能了。