Scratch的角色和背景加载需要访问国外，网络不好的情况下，很容易出现我这样的情况，有些资源加载不出来。
所以，需要将角色和背景的资源下载到国内的OSS服务，加速访问速度。
资源路径
首先，搜索找到在项目中的位置。
配置文件
然后，找到角色、背景等的配置文件。
backdrops.json 背景
costumes.json 造型
sprites.json 角色
sounds.json 声音
他们都是JSON文件，我们就可以写一个Node.js爬虫服务，将资源都下载到本地。
配置代理
在爬虫前， 首先要保证电脑可以访问Google服务。
浏览器能访问Google后，但是终端（命令行）无法访问，因为命令行没有走代理。
配置终端，在~/.zshrc文件后面加上这两行配置。
# SSR代理
aliasproxy='export all_proxy=socks5://127.0.0.1:1086'
aliasunproxy='unset all_proxy'
其中，127.0.0.1:1086是我本机的代理服务，你们可以根据自己的来配置。
然后，更新配置。
source~/.zshrc
然后在命令行执行下面命令，就可以启动代理。
proxy
测试一下，终端访问Google。
curl https://www.google.com
如果能返回，则表示终端也配置成功。
如果不需要代理，则执行下面命令。
unproxy
爬虫脚本
爬虫脚本如下。
constsounds=require('../src/lib/libraries/sounds.json');
constsprites=require('../src/lib/libraries/sprites.json');
constbackdrops=require('../src/lib/libraries/backdrops.json');
constcostumes=require('../src/lib/libraries/costumes.json');
constfs=require('fs');
constrequest=require('request');
constdownImg=(opts={},path='')=>{
console.log('request',opts);
returnnewPromise((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()=>{
constlist=[...sounds,...sprites,...backdrops,...costumes];
for(constobjoflist){
constfileName=obj.md5ext;
consturl=`https://cdn.assets.scratch.mit.edu/internalapi/asset/${obj.md5ext}/get/`;
awaitdownImg({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)
}
背景标签有这些（如果标签不够，也可以自己创建）：
标签含义
fantasy奇幻
music音乐
sports运动
outdoors户外
indoors室内
space太空
underwater水下
patterns图案
我们创建一个背景图片（大小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,
"md5ext": "83c36d806dc92327b9e7049a565c6bff.wav"
}
],
# 积木
"blocks": {}
}