Scratch3.0转换exe方法

本文最后更新于:18 天前

最全的 Scratch3.0 转换 exe 方法

开始之前的准备工作

检查适用性

如果你的作品里有:Canvas,Lazyaudio,翻译,画笔(打印文字),朗读(中文)

劝退,此贴无法帮助你

国内镜像

本教程所使用的网站/软件大部分需要挂梯子上外网

以下是我搬运的国内镜像

htmlifier

forkphorus

以及华为的 nwjs 镜像
nwjs

协议声明

本文原创 转载协议 CC-BY-SA 4.0


教程开始

第一步.将 sb3 转换为 html

方法一.使用 htmlifier 转换

警告!此方法不支持画笔!若作品中使用了画笔,请使用Forephrous转换

打开htmlifier 官网/国内镜像源

首先选择Upload project file,点击浏览上传作品文件

options-选项

选项功能
Project name项目名
Username value用户名块返回值
Show fullscreen button?显示全屏按钮?
Enable turbo mode?开启加速模式?
Load progress indicator?显示加载条?
Loading image加载时显示的图片
Enable compatibility mode?启用兼容模式(限制 30 帧)?
Stretch the canvas to fit?拉伸舞台以适合窗口?
Hide cursor?隐藏鼠标指针?
Lock the pointer on click?锁定 x,y 块的值?
Output a .zip file?输出 zip 还是 html?

Monitor style-显示设置

选项功能
Use custom variable/list monitor colour?列表/变量颜色?若不选,将用透明黑色
Monitor text colour变量/列表的标题文字颜色
Hide the monitor background boxes?隐藏显示器背景框?

Cloud variable source-云变量设置

选项功能
Save cloud variables locally using localStorage将变量存在电脑上(建议选这个)
Use a custom server使用自定义云服务器(如果你有)
Give certain cloud variables special behavious…根据名称赋予某些云变量特殊功能(见下)

如果设置了名称为“?eval”的云变量,它将以 JavaScript 的形式运行变量值并将其存储在名为“?eval output”的云变量中;如果有错误,它将存储在“?评估错误”中。如果您使用的是自定义云服务器,则名称以“?local storage”开头的云变量会将其值存储在 localStorage 中,而不是存储在服务器中。

E羊icques options

选项功能
Does this project use a custom size?自定义舞台宽高(默认 360*480)
Load unofficial extension from URL从链接加载非官方拓展(我不知道这个该咋用 如果感兴趣可以问问煮)
Remove limits such as clone and…去除克隆/列表数量限制?(建议开启)

最后把Download automatically?(自动下载)勾上,然后点HTMLify


方法二.使用 forkphorus 转换

打开Forkphorus 官网/国内镜像源

Project Source选择Project File

点击下面的[选择],选择你的作品文件(sb,sb2,sb3)

展开Player Options

选项功能
Turbo Mode是否打开加速模式
Show Controls显示或隐藏控制栏(不包括全屏按钮).用户可以在启用此功能的情况下启用或禁用加速模式
Username“用户名”积木的返回值 允许留空
Autoplay是否自动运行? Always-是,Never-否,If audio can be played-当音频能播放时
Framerate每秒帧数(FPS) 默认 30,建议改为 60

展开Cloud Variable Options (BETA)

选项功能
Store Cloud Variables是否将云变量值存储在浏览器缓存中(如果是官网作品,请打开此选项,否则关闭)

展开Loading Screen Options

选项功能
Loading screen text设置在加载页显示的文本,建议改成你的项目名

展开Environment Options

选项功能
Packager Environment包装环境,建议选择 None

设置完点击Package Project

最后转换完成,会给你一个project.html


第二步.转换为目标格式

转换为 Linux 应用程序:

感谢AlanCui对 Linux 部分的修正

安装 npm
对 debian 系:

1
sudo apt install npm -y

对 RHOS 系:

1
sudo yum install npm -y

安装 n 以安装 nodejs

1
sudo npm install n

安装 nodejs 最新版

1
sudo n latest

安装 nwjs

1
sudo npm install nw -g

不推荐通过任何直接下载途径安装包,这样可能会导致包混乱,冲突和一系列问题
然后写一个 package.json

1
cat > project.html < EOF
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"main": "project.html" //你放进去的HTML文件的名称
"name": "hpp飞机大战" //名字
"description": "100% pen game" //程序描述
"version": "0.1.0" //版本
"title": "hpp飞机大战" //标题
"icon": "link.png" //图标,link.png是图片的名称,图片要放在解压出的文件夹的根目录
"toolbar": false //是否显示导航栏
"resizable": true //bool值。是否允许调整窗口大小。
"fullscreen": false //bool值,是否全屏
"show_in_taskbar": true //bool值,是否在win任务栏显示图标
"frame": true //bool值,如果设置为false,程序将无边框显示。
"position": "center" //窗口打开时的位置,null是默认,center是中央,mouse是鼠标位置
"width": 800 //主窗口的的宽度。
"height": 670 //主窗口的的高度。
"min_width": 400 //窗口的最小宽度。
"min_height": 335 //窗口的最小高度。
"max_width": 800 //窗口显示的最大宽度,可不设。
"max_height": 670 //窗口显示的最大高度,可不设。
"show": true //bool值,如果设置为false,启动时窗口不可见。
"show_in_taskbar":true //bool值,是否在任务栏显示图标。
"kiosk": false //bool值,是否使用kiosk模式。如果使用kiosk模式,应用程序将全屏显示,并且阻止用户离开应用。
}
1
EOF

然后把 package.json 和 project.html 放到一起,打包

1
2
mv 您的html
cat package.json Demo.html > Demo.nw

这时新打包出来的 nw 文件就可以运行了

1
sudo ./nw Demo.nw

为了保持 bin 集中性,将 app 创建入 bin 文件夹

1
cat "which nw" [您的应用程序名].nw > /bin/[您的应用程序名] && chmod +x /bin/[您的应用程序名]

使用 cat 添加文件头

1
cat "#!/bin/nw" /bin/[您的应用程序名] > /bin/yourAppName

如果需要创建桌面快捷方式:
请准备一个图标文件

1
2
mkdir -v /var/[您的应用程序名]/
mv [您的图标] /var/[您的应用程序名]/[您的图标]

先进入桌面

1
cd [您的桌面牡蛎]

创建文件

1
touch [您的应用程序名].desktop

更改权限

1
chmod +rw ./[您的应用程序名].desktop

开始写入图标文件

1
cat >  [您的应用程序名].desktop < EOF
1
2
3
4
5
6
7
8
9
10
11
12
13
14
[Desktop Entry]
Encoding=UTF-8
Name=[您的应用程序名]
Exec=/bin/[您的应用程序名]
Icon=/var/[您的应用程序名]/[您的图标]
Info="[您的应用程序的信息]"
Categories=GTK;Network;message;
值得注意的是 如果您的桌面环境不支持GTK,请手动更改Categories
Comment="[您的应用程序的注释]"
Terminal=false
值得注意的是 如果nwjs出现错误,您可以将此处更改为ture以开启终端
Type=Application
StartupNotify=true
Name[zh_CN]=[您的应用程序名]
1
EOF

转换为 Windows 应用程序:

前往nwjs 官网获取 nwjs.

请选择NORMAL(不要选 SDK).

网页会根据你的系统下载适合你的版本.

你可能需要开启 vpn 才能下载

若你没有 vpn,请找个哥们帮你下载

将下载的 nwjs 解压.

将上一步生成的 project.html 放入解压出来的文件夹里

你还可以修改同文件夹下的 package.json 来实现更多功能 如下

(我的注释不要有)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"main": "project.html" //你放进去的HTML文件的名称
"name": "hpp飞机大战" //名字
"description": "100% pen game" //程序描述
"version": "0.1.0" //版本
"title": "hpp飞机大战" //标题
"icon": "link.png" //图标,link.png是图片的名称,图片要放在解压出的文件夹的根目录
"toolbar": false //是否显示导航栏
"resizable": true //bool值。是否允许调整窗口大小。
"fullscreen": false //bool值,是否全屏
"show_in_taskbar": true //bool值,是否在win任务栏显示图标
"frame": true //bool值,如果设置为false,程序将无边框显示。
"position": "center" //窗口打开时的位置,null是默认,center是中央,mouse是鼠标位置
"width": 800 //主窗口的的宽度。
"height": 670 //主窗口的的高度。
"min_width": 400 //窗口的最小宽度。
"min_height": 335 //窗口的最小高度。
"max_width": 800 //窗口显示的最大宽度,可不设。
"max_height": 670 //窗口显示的最大高度,可不设。
"show": true //bool值,如果设置为false,启动时窗口不可见。
"show_in_taskbar":true //bool值,是否在任务栏显示图标。
"kiosk": false //bool值,是否使用kiosk模式。如果使用kiosk模式,应用程序将全屏显示,并且阻止用户离开应用。
}

编辑完成后可以运行nw.exe查看效果.
提示:
自定义的icon.png最好是透明背景
如果不用图标就删去package.json里的"icons": {"16":"icon.png"}

他们的网站下载 Make SFX

Make SFX 官网写着支持中文但我死也找不到在哪

Make SFX 界面相当令人生畏.没关系,我会一个个翻译哒

选项设置
Source folder选择 nwjs 的文件夹(包含 nw.exe,package.html 以及一大堆东西的文件夹)
Target SFX file选择 exe 要生成在哪个文件夹(如:桌面)
Target SFX file icon选择生成 exe 的图标 选择 Custom,然后点 Browse 选择一个图标(.ico)
Extraction mode选第二个…选第一个只会解压不会运行
Executable file that will…点 Browse,选到刚才 nwjs 文件夹里的 nw.exe
Command line parameters不知道…神曰:可以留空
Working directory原作者说选第一个
How to delete extracted files原作者说选第一个
Extraction folder第一个,解压到临时文件夹中
Advanced options三个都别选谁选谁爆炸
UAC auto-elevation选择无(None)
Overwrite mode during exetraction第二个,自动覆盖现有文件(方便后期更新)

最后点 Make SFX 然后你可以去冲杯咖啡了(因为实在是太慢了)/滑稽

转换为 MacOS 应用程序:

首先,,,我没有 MAC,以下方法是 google 上找的,我没有验证是否可用,因此可能存在一些错误或更好的处理方法,如果是这种情况,请告诉我!

前往nwjs 官网获取 nwjs.

请选择NORMAL(不要选 SDK).

网页会根据你的系统下载适合你的版本.

你可能需要开启 vpn 才能下载

若你没有 vpn,对不起我也帮不了你

以下内容为机翻可能会有些奇奇怪怪

然后将下载的文件提取档案(?

右键单击或按住 Control 键并单击 nwjs,然后选择显示软件包内容。将之前生成的project.html移到Resources文件夹中。打开两个窗口执行此操作可能是最简单的。

1
2
3
原文:
Extract the archive. Mac users: This may happen automatically.
Right-click or Control+Click nwjs and select Show Package Contents. Move app.nw into the Resources folder. It may be easiest to open two windows to do this.

然后运行 nwjs 查看效果

创建应用程序本身和 credits.html(包含在 NW.js 下载文件中)的 zip 存档。您必须包含 credits.html,否则您可能会违反 NW.js 使用的某些项目的许可。(不是法律建议)

使用Image2icon生成.icns文件。替换应用程序中的 Contents / Resources / app.icns 以更改图标。

1
2
3
4
5
6
原文:
Create a zip archive of the app itself and credits.html (included in the NW.js download). You must include credits.html, otherwise you may be violating the license of some projects used by NW.js. (not legal advice)

See the NW.js documentation for the full list of further steps. Some of the more important and simpler ones are described below.

Use Image2icon to generate a .icns file. Replace Contents/Resources/app.icns in the app to change the icon.

转换为 Android APP:

github 上的方法

待更新

转换为 iOS APP:

github 上的方法

待更新

全文完


本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处