什么是 affinity-engine-styles-bundle？
affinity-engine-styles-bundle是一个可以用于创建基于Affinity引擎的HTML5游戏的npm包。它提供了一系列的样式与特效，帮助开发者快速创建一个有特色的游戏界面。
安装 affinity-engine-styles-bundle
在安装之前，我们需要先确认系统上是否已经安装了node.js和npm。可以在命令行中输入如下命令来检查：
---- -- --- --
如果未安装，请前往nodejs官网进行下载安装：https://nodejs.org/en/
安装affinity-engine-styles-bundle：
--- ------- -----------------------------
使用 affinity-engine-styles-bundle
在项目中使用之前，需要先在Affinity引擎中创建一个theme。
------ - ----- - ---- ------------------
------ ------ ---- --------------------------------
----- ----- - --------------
-------- -
------
-
---注意，上述代码中，styles是 affinifty-engine-styles-bundle 的一个默认输出模块。
在创建了theme之后，可以使用affinity-engine-styles-bundle提供的样式。可以在Affinity Scenery Builder中通过theme的添加模块来添加affinity-engine-styles-bundle提供的模块。
affinity-engine-styles-bundle提供的样式
1. buttons
------- ---------------------------------------
样式提供了两种不同的按钮风格，这里使用的是默认风格。按钮也支持hover特效。
2. backgrounds
---- --------------------------------- ------------
affinity-engine-styles-bundle 可以提供16进制颜色和背景图像。
3. borders
---- ----------------------- --- ----- ------------
可定义四个位置的边框，还可以设置边框的弧度和颜色。
4. sizes
---- ---------------------- ------ ---------------- -------------
可自定义元素的宽度和高度。
5. positioning
---- ------------------------- --------- ------------- -- -------------- ---------
可定义元素的位置样式，如普通定位，绝对位置以及固定位置，并可定位元素的方向。
示例代码
------ - ----- - ---- ------------------
------ ------ ---- --------------------------------
----- ----- - --------------
-------- -
------
-
---
---- --------------------------------- ------
---- ------------------------------------
---- ---------------------- ------ ---------------- ------ ---------------- --- ----- ------ ----------------------- -----------
---- ------------------------- --------- ------------- -- -------------- ----
--- ---------------------- ------------ ----------
------
------总结
affinity-engine-styles-bundle为开发者提供了许多常用的CSS属性样式，大大提升了开发者的开发效率。使用上也非常简单，只需要在Affinity引擎中初次引入即可。希望这篇文章能帮助到你更好的使用它。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005535e81e8991b448d0986