界面修改
安装
下载scratch-gui项目，并进入目录，执行下面的命令安装依赖包。
git clone https://github.com/LLK/scratch-gui.git
cd scratch-gui
npm install目录结构
├── build # 编译后的文件夹 │ ├── static # 静态资源 │ ├── chunks # scratch核心加载器 │ ├── index.html # scratch编辑器 │ ├── player.html # scratch播放器 │ ├── lib.min.js # scratch核心 ├── src │ ├── components # UI组件 │ ├── containers # 容器组件，承载容器组件业务逻辑 │ ├── css # 全局通用css │ ├── examples # 集成测试用例 │ ├── extensions # 拓展案例 │ ├── lib # 插件及高阶组件 │ ├── audio # 声音插件 │ ├── backpack # 背包插件 │ ├── default-project # 默认项目 │ ├── libraries # 素材库相关 │ ├── video # 视频模块 │ ├── playground # 编译后页面的模版 │ ├── reducers # 全局状态控制 ├── test # 测试用例 ├── translations # 翻译库 ├── README.md └── package.json └── webpack.config.js
启动
执行下面命令，启动项目。
npm run start启动成功后，可以看到控制台输出Compiled successfully.，表示编译完成。
浏览器输入http://localhost:8601/，即可访问项目，如下。
更改Logo
在src/components/memu-bar/文件夹上传你的Logo图，然后在menu-bar.jsx中找到替换掉。
# 替换成你的logo图
import scratchLogo from './scratch-logo.png';
然后，我们还能找到另外一个地方也用了logo图，找到并替换。
更改主题色
找到css/color.css文件，找到如下参数，更改即可。
修改菜单栏
菜单栏的有些功能，我们不需要，可以隐藏起来。
主要改动的是menu-bar.jsx文件，而且还是MenuBar组件的render()方法。
对于不需要的组件，我们完全可以把代码注释或者删除掉。
角色背景
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) }
背景标签有这些（如果标签不够，也可以自己创建）：
| 标签 | 含义 |
|---|---|
| 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": {} }
离线版本
即使部署在国内网络，访问量很大的情况下，有些图片加载还是很慢。我们完全可以通过本地加载角色和背景资源。这样我们就完全可以构建一个离线版本的 Scratch 应用啦，即使电脑不连接互联网也能够使用。
Server 服务
首先，我们编写一个 Server 服务，用来做静态资源服务器。
这个文件的名字叫app.js。
const express = require('express');
const path = require('path');
const app = express();
// 静态资源
app.use('/source', express.static(path.join(__dirname, 'source')));
// 启动服务
async function startServer() {
return new Promise((resolve, reject) => {
try {
// HTTP 服务
const server = app.listen(13865, '127.0.0.1', () => {
console.log(`* 🚀 启动资源服务`);
});
server.on('error', reject);
} catch (error) {
reject(error);
} finally {
resolve();
}
});
}
module.exports = { startServer };然后，我们要在这个服务的目录下创建source文件夹，将图片、声音等资源文件都放进来。如下所示。
启动服务
Electron 在启动的时候，是在index.js文件里面。我们找到ready的监听事件，然后导入我们的startServer服务。如下所示。
更改 GUI 配置
我们看到，服务启动后，地址是http://localhost:13865，所以要把 GUI 中的配置更改掉。主要改两个地方文件。
src/container/library-items.jsx
src/lib/project-fetcher-hoc.jsx这样，GUI 就会加载本地的服务，资源的加载速度提高不少。
翻译国际化
Scratch作为一个全球软件，提供了很多国家的语言版本。但是在国内，我们主要使用的还是英语和中文为主，其他的小语种，我们完全可以不用加载。
scratch-I10n
scratch-gui项目的国际化依赖于scratch-I10n项目，我们先把这个下载下来。
首先，执行npm install安装依赖。
支持语言
Scratch支持的语言有上百种，但是我们在国内，主要使用的语言有：中文、英文、日语或者韩语等。对于其他的语言选择，我们完全可以省略掉。
支持的语言配置在src/supported-locales.js文件中。
文件中有locales变量，表示当前支持的语言，我们把不需要的删除掉，只保留常用的国际语言即可。
上面是我的一些国际语言，前面是他们的语言代码。
[!note]
zh 是语言代码，cn是简体中文，一般大陆使用。tw是繁体中文，台湾省使用。还有，hk表示香港特别行政区。
修改文字
对于一些界面的文字，我们想修改也可以在editor目录中，找到对应的语言JSON文件修改即可。
重新编译
修改完成后，就可以重新编译了。执行npm run build来进行编译。编译成功后，生成dist文件夹和locales文件夹。
npm link
为了方便改动，我们就不用发包了。在scratch-I10n项目下执行命令：
cd scratch-l10n
npm link这样，本地的node_modules中的scratch-I10n项目就会关联到当前目录中。
然后，进入scratch-gui项目中，执行下面的关联命令：
cd scratch-gui
npm link scratch-l10n这样，scratch-gui依赖的项目就会关联到我们的scratch-l10n目录下了。
我们启动Scratch，就可以发现，支持的语言减少了。
新增翻译
如果新增翻译，需要在editor目录对应的JSON文件中添加。
字体调节
Scratch在1.0和2.0的版本中，都支持字体调节。但是在3.0版本中，这个功能消失了。而且，在分辨率低的情况下，界面上的中文文字看不清楚。下面，我们就来解决这个问题。
菜单栏文字
对于菜单栏文字比较好改，我们找到src/css/utils.css文件，在里面找到$menu-bar-standard-font-size配置改就可以了。
[!note]
如果针对页面上某一个字体需要调整，可以直接在项目中全局搜索。
舞台文字
舞台的文字在src/components/stage-selector/stage-selector.css中，全局搜索font-size，然后修改字体大小即可。
标签文字
这些标签文字，也可以放大。
找到所在的css文件，把label的标签设置大一些就可以了。
积木菜单文字
的文字在src/components/blocks/blocks.css中，全局搜索font-size，然后修改字体大小即可。
但是，我们发现只有积木块的菜单栏字体改变了。积木块的字体还是没有改变。
积木块的文字需要单独的项目——scratch-blocks。
积木块字体
scratch-blocks项目：https://github.com/LLK/scratch-blocks
由于这个项目编译比较麻烦，需要安装Python环境，而且还不一定能够成功。
为了方便起见，我们不用npm link方式了，直接在node_modules文件夹中找到scratch-blocks，在里面修改。
首先，我们打开浏览器控制台，找到积木文字的class有哪些。
然后，我们去搜索，在node_modules/scratch-blocks/core/css.js中，我们看到了字体的定义。
原来的字体是12pt，经过测验，我定义成为14pt效果比较好。
注意，在node_modules/scratch-blocks/core/css.js中还是未编译的，所以单纯改动css.js文件不build编译的话就没有效果。
真正需要修改这几个文件下面的font-size属性，这几个文件比较大，全局修改比较耗时。
特定字体
如果发现还有字体大小偏小，可以进行逐个微调，Chrome浏览器的元素定位可以帮忙找到代码所在的位置。
比如，这个菜单，就这样找到的。
有任何问题都可以直接联系作者，合作、交流、咨询都欢
