Scratch二次开发——2 修改角色、背景图

松露老师

华东师范大学软件工程硕士

Scratch的角色和背景加载需要访问国外，网络不好的情况下，很容易出现我这样的情况，有些资源加载不出来。

所以，需要将角色和背景的资源下载到国内的OSS服务，加速访问速度。

资源路径

首先，搜索找到在项目中的位置。

配置文件

然后，找到角色、背景等的配置文件。

 backdrops.json  背景
 costumes.json   造型
 sprites.json    角色
 sounds.json     声音

他们都是JSON文件，我们就可以写一个Node.js爬虫服务，将资源都下载到本地。

配置代理

在爬虫前，首先要保证电脑可以访问Google服务。

浏览器能访问Google后，但是终端（命令行）无法访问，因为命令行没有走代理。

配置终端，在 ~/.zshrc 文件后面加上这两行配置。

 # SSR代理
 alias proxy='export all_proxy=socks5://127.0.0.1:1086'
 alias unproxy='unset all_proxy'

其中， 127.0.0.1:1086 是我本机的代理服务，你们可以根据自己的来配置。

然后，更新配置。

 source ~/.zshrc

然后在命令行执行下面命令，就可以启动代理。

 proxy

测试一下，终端访问Google。

 curl https://www.google.com

如果能返回，则表示终端也配置成功。

如果不需要代理，则执行下面命令。

 unproxy

爬虫脚本

爬虫脚本如下。

 const sounds = require('../src/lib/libraries/sounds.json');
 const sprites = require('../src/lib/libraries/sprites.json');
 const backdrops = require('../src/lib/libraries/backdrops.json');
 const costumes = require('../src/lib/libraries/costumes.json');
 const fs = require('fs');
 const request = require('request');
 const downImg = (opts = {}, path = '') => {
     console.log('request', opts);
     return new Promise((resolve, reject) => {
         request
             .get(opts)
             .pipe(fs.createWriteStream(path))
             .on("error", (e) => {
                 resolve('');
             .on("finish", () => {
                 console.log("finish");
                 resolve("ok");
             .on("close", () => {
                 console.log("close");
 (async ()=>{
     const list = [...sounds, ...sprites, ...backdrops, ...costumes];
     for (const obj of list){
         const fileName = obj.md5ext;
         const url = `https://cdn.assets.scratch.mit.edu/internalapi/asset/${obj.md5ext}/get/`;
         await downImg({url}, fileName);
     console.log('结束');
 })();

然后，执行这个文件，就能够把Scratch官网的资源爬取下来了。

下载成功后，资源情况如下：

背景图：85个
造型：883个
声音：350个

上传至OSS

资源上传至OSS或者服务器上，能够访问到。

更改配置

角色地址

修改 src/container/library-items.jsx 文件的路径，修改角色造型的获取链接。

背景图片地址

修改 src/lib/project-fetcher-hoc.jsx 文件，修改背景图片的获取链接。

声音/造型地址

最后，修改 src/lib/storage.js 文件，如下。

配置完成后，启动服务。即使没有代理也能够访问到资源啦，访问速度也快了不少！

自定义背景

除了用Scratch官网的背景，我们还可以添加自己的背景。

背景的文件是 backdrops.json ，我们先看一个背景的数据结构。

 {
   "name": "Arctic", # 背景名
   "tags": [         # 标签
     "outdoors",
     "cold",
     "north pole",
     "south pole",
     "ice",
     "antarctica",
     "robert hunter"
   "assetId": "67e0db3305b3c8bac3a363b1c428892e",    # 背景ID(MD5)
   "bitmapResolution": 2,    # 分辨率
   "dataFormat": "png",  # 文件格式
   "md5ext": "67e0db3305b3c8bac3a363b1c428892e.png", # 背景文件名
   "rotationCenterX": 480,   # x轴(图片长/bitmapResolution)
   "rotationCenterY": 360    # y轴(图片高/bitmapResolution)
 }

背景标签有这些（如果标签不够，也可以自己创建）：

标签	含义

我们创建一个背景图片（大小960*720），如下所示。

然后，我们生成一个MD5加密，可以用这个OKTools网站（ https:// oktools.net/hash ）生成，如下。

然后，我们把这个背景图片命名为 f43da51c986d9b51718d55ebfe577336.png ，把背景图片上传到你的服务中。

我们在 backdrops.json 文件中添加这个配置，如下：

{
  "name": "Paris Tower",
  "tags": [
    "outdoors"
  "assetId": "f43da51c986d9b51718d55ebfe577336",
  "bitmapResolution": 2,
  "dataFormat": "png",
  "md5ext": "f43da51c986d9b51718d55ebfe577336.png",
  "rotationCenterX": 480,
  "rotationCenterY": 360
}

这样，我们就能够在背景中看到我们刚添加的啦。

自定义角色

同样的道理，我们也可以添加自己的角色。

角色文件是 sprites.json ，角色有些复杂，我们先看一个角色文件的数据结构。

{
  # 角色名
  "name": "Cat",
  # 标签
  "tags": [
    "animals",
    "cat",
    "kitten",
    "kitty",
    "mammal",
    "orange",
    "scratch cat"
  "isStage": false,
  "variables": {},
  # 造型
  "costumes": [
      "assetId": "bcf454acf82e4504149f7ffe07081dbc",
      "name": "cat-a",
      "bitmapResolution": 1,
      "md5ext": "bcf454acf82e4504149f7ffe07081dbc.svg",
      "dataFormat": "svg",
      "rotationCenterX": 48,
      "rotationCenterY": 50
      "assetId": "0fb9be3e8397c983338cb71dc84d0b25",
      "name": "cat-b",
      "bitmapResolution": 1,
      "md5ext": "0fb9be3e8397c983338cb71dc84d0b25.svg",
      "dataFormat": "svg",
      "rotationCenterX": 46,
      "rotationCenterY": 53
  # 声音
  "sounds": [
      "assetId": "83c36d806dc92327b9e7049a565c6bff",
      "name": "Meow",
      "dataFormat": "wav",
      "format": "",
      "rate": 44100,
      "sampleCount": 37376,