Zinc Engine 指南
2024/2/17 11:41:00 Scratch

Zinc Engine 是一个在 Scratch 中渲染用户界面的工具,通过 Zinc Engine 可以仅使用代码块就快速构建出灵活的界面。

使用工具包中提供的代码块构建界面

这是一个实验性项目,仍需进一步改进以提升性能。

预览

下载引擎本体及工具包

优化

通过将作品中需要打印的文字存储为为矢量造型、在需要打印时直接图章的方式可以一定程度上地提升 Zinc Engine 的性能。通过下方的工具即可一键对使用 Zinc Engine 的作品进行优化 ↓

感谢:Unifontopentype.jsjszipcrypto-js

使用指南

入门

在开始前,请先将角色 【Zinc Engine】(引擎本体) 和 【Zinc Engine】工具包 导入到作品中。

用户界面由一个个的组件组成,通过提供的自定义模块可以控制组件的属性以及组件的创建、加入页面和删除,我们提供了这些自定义模块:

上方的模块可以在角色 【Zinc Engine】工具包 中找到

整个页面的根组件 ID 为空,是自动创建的。整个页面的第一个组件应该被加入到这个根组件中。

这是一个 Hello World 页面:

Hello, world!

(左侧的积木先是清空了组件列表,然后创建了 ID 为 title1 的文本组件 Text,创建完成后将这个组件的 text 属性值设为了 Hello, world!,最后加入到了 ID 为空的根组件中)

搭建完成后,请运行左侧的积木并点击绿旗,即可看到渲染出来的页面。

Tips:

组件

属性

通过设置组件的属性可以自定义组件的样式,对于可交互组件如滑动条 Slider、复选框 Checkbox 和输入框 Input,还可以通过属性 value 来获取该组件的当前的值。下面是所有组件都拥有的可选属性

同时 Zinc Engine 还支持动态属性,使用动态属性可以在鼠标悬停或按下时应用不同的属性,类似 CSS 中的选择器。若要设置动态属性,请先将组件的 listenHover 属性设为 true,并设置属性名前带有 hover:active: 的属性。
若属性 hover:background 的值为 #f6f6f6,则当鼠标悬停在该元素上时,就将该元素的背景 background 设为 #f6f6f6

事件

当用户和组件发生交互时会触发事件。当触发事件时,列表 [ Engine - 事件 ] 中会新增一项 @[ID] [Event] 并广播 [ Zinc Engine - 触发事件]。

如一个 ID 为 Button1 的按钮触发点击事件 click 时,列表中就会新增一项 @Button1 click,并广播 [ Zinc Engine - 触发事件 ]。

现在有这些事件:

监听事件的示例

如果希望监听事件,可以使用广播接收器,接收到广播 [ Zinc Engine - 触发事件 ] 后检查列表 [ Engine - 事件 ] 是否有希望监听的事件,如果有的话就进行对应的处理,然后删除列表 [ Engine - 事件 ] 中的这一项事件(否则会导致事件被错误地重复触发)。

提升

配置

通过修改列表 [ Engine - 配置 ] 可以修改引擎的配置,格式为一项配置名、一项配置值,如:

@quality
8
@smoothScroll
1
@devMode
1

可选配置项有:

声明

  1. Zinc Engine by waterblock79 is licensed under CC BY 4.0.
  2. 作品中内嵌了 Unifont 15.1.04,遵守 SIL Open Font License (OFL) version 1.1,在此表示由衷的感谢!(根据 Unifont 官网:“As of Unifont version 13.0.04, the fonts are dual-licensed under the SIL Open Font License (OFL) version 1.1 and the GNU GPL 2+ with the GNU font embedding exception. The SIL OFL is available at OFL-1.1.txt.”)