npm包 affinity-engine-styles-bundle 使用教程

什么是 affinity-engine-styles-bundle？

affinity-engine-styles-bundle是一个可以用于创建基于Affinity引擎的HTML5游戏的npm包。它提供了一系列的样式与特效，帮助开发者快速创建一个有特色的游戏界面。

安装 affinity-engine-styles-bundle

在安装之前，我们需要先确认系统上是否已经安装了node.js和npm。可以在命令行中输入如下命令来检查：

node -v
npm -v

如果未安装，请前往nodejs官网进行下载安装：https://nodejs.org/en/

安装affinity-engine-styles-bundle：

npm install affinity-engine-styles-bundle

使用 affinity-engine-styles-bundle

在项目中使用之前，需要先在Affinity引擎中创建一个theme。

import { Theme } from 'affinity-engine';
import styles from 'affinity-engine-styles-bundle';

const theme = Theme.create({
  modules: {
    styles
  }
});

注意，上述代码中，styles是 affinifty-engine-styles-bundle 的一个默认输出模块。

在创建了theme之后，可以使用affinity-engine-styles-bundle提供的样式。可以在Affinity Scenery Builder中通过theme的添加模块来添加affinity-engine-styles-bundle提供的模块。

affinity-engine-styles-bundle提供的样式

1. buttons

<button style="affinity-button">Button</button>

样式提供了两种不同的按钮风格，这里使用的是默认风格。按钮也支持hover特效。

2. backgrounds

<div style="affinity-background-color: blue"></div>

affinity-engine-styles-bundle 可以提供16进制颜色和背景图像。

3. borders

<div style="affinity-border: 2px solid blue"></div>

可定义四个位置的边框，还可以设置边框的弧度和颜色。

4. sizes

<div style="affinity-width: 100px; affinity-height: 100px"></div>

可自定义元素的宽度和高度。

5. positioning

<div style="affinity-position: absolute; affinity-top: 0; affinity-left: 0"></div>

可定义元素的位置样式，如普通定位，绝对位置以及固定位置，并可定位元素的方向。

示例代码

-- -------------------- ---- -------
------ - ----- - ---- ------------------
------ ------ ---- --------------------------------

----- ----- - --------------
  -------- -
    ------
  -
---

---- --------------------------------- ------
  ---- ------------------------------------
  ---- ---------------------- ------ ---------------- ------ ---------------- --- ----- ------ ----------------------- -----------
  ---- ------------------------- --------- ------------- -- -------------- ----
    --- ---------------------- ------------ ----------
  ------
------

总结

affinity-engine-styles-bundle为开发者提供了许多常用的CSS属性样式，大大提升了开发者的开发效率。使用上也非常简单，只需要在Affinity引擎中初次引入即可。希望这篇文章能帮助到你更好的使用它。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005535e81e8991b448d0986