16. 自动化插件生成系统

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

https://user-images.githubusercontent.com/3390845/53645159-3d5e3300-3c73-11e9-9027-071660c28bfb.pngimage

随着scratch3越来越完善,我们发现很多用户都想自己实现自己的插件。但是编写scratch3的插件并不是一件简单的事情,这需要比较扎实的JavaScript开发能力.

而对于专业的JavaScript程序员来说,写scratch3插件又很浪费时间。这个webapp的目的就是可以让你在10分钟内完成自己的scratch3插件框架代码。希望大家喜欢~

16.1. 使用方法

Step2

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

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

https://user-images.githubusercontent.com/3390845/53679660-5cf46a80-3d0a-11e9-96f1-befbda4b9372.pngimage

Step3

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

https://user-images.githubusercontent.com/3390845/53679671-9927cb00-3d0a-11e9-8412-9efc5038dfb5.pngimage

Step4

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

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

  • 注意插件ID同样需要为英文字母,并且不能包含特殊字符串

https://user-images.githubusercontent.com/3390845/53679707-089dba80-3d0b-11e9-9251-2d07f37a5114.pngimage

Step5

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

https://user-images.githubusercontent.com/3390845/53679761-e35d7c00-3d0b-11e9-9df5-27a95c9ef18c.pngimage

Step6

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

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


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

Step7

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

https://user-images.githubusercontent.com/3390845/53679811-bbbae380-3d0c-11e9-9143-b6b262a0b3cf.pngimage

Step8

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

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

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

https://user-images.githubusercontent.com/3390845/53679853-7d71f400-3d0d-11e9-872a-b20a57d59115.pngimage

Step9

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

https://user-images.githubusercontent.com/3390845/53679874-c164f900-3d0d-11e9-8391-6786c5200341.pngimage

最终效果

https://user-images.githubusercontent.com/3390845/53679884-ec4f4d00-3d0d-11e9-95cf-55e9e0db67a4.pngimage


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