Scratch二次开发教程——2角色背景修改

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": {}

}