# Screeps-GUI-VisualEngine

**Repository Path**: mingzey/Screeps-GUI-VisualEngine

## Basic Information

- **Project Name**: Screeps-GUI-VisualEngine
- **Description**: 一个在编程游戏Screeps中利用官方API绘制的UI的优化调用引擎，使用GUI-VisualEngine(以下简称GVE)提供的封装可以方便的在游戏中写出GUI界面
- **Primary Language**: Unknown
- **License**: MulanPSL-1.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2020-10-01
- **Last Updated**: 2022-10-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Screeps-GUI-VisualEngine

### 介绍
是一个在编程游戏Screeps中利用官方API绘制的UI的优化调用引擎，使用GUI-VisualEngine(以下简称GVE)提供的封装可以方便的在游戏中写出GUI界面
#### 特点
* 将UI绘制结构化、布局化
* 拥有父子级别的UI关系，父级UI的属性将对子级UI起作用
* 可动态化，使用GVE您可以为您的Creep绘制挂件或信息跟随窗口
* 组件化，将UI绘制组件化，您可以自己定义组件也可以使用其他玩家的组件，例如进度条组件，开关组件，加载组件


### 使用教程

1. 下载GVE.js文件放置到您的游戏代码根目录，使用`require("GVE");`加载JS文件即可调用相关API
2. 在main.js中写入
```
const GVE = require("GVE");
GVE.draw(new RoomVisual(), [
        {
            type: "Div",
            layout: {
                x: 1,
                y: 1,
                width: 10,
                height: 16,
                background: "#ffc107",
                opacity: 0.7
            }
        }
    ]
);
```
如果您看到您的房间中在1,1坐标上有一个10*16的黄色正方形，即代表GVE已经成功运行了。
阅读完下面的文档，将有助于你理解GVE并方便的编写GUI


### API文档
---
#### `GVE.draw(RoomVisual,Map)`
##### 描述
在RoomVisual对象上绘制Map中的组件

##### 入参
* RoomVisual 标准的Screeps RoomVisual 对象，可以使用new RoomVisual()或相关方法获得该对象
* Map 组件数组，包含了标准的GVE可识别的组件信息

---
---

组件数组可以包含组件对象，组件对象也可以包含组件数组，他们各自有各自的父级组件，互相依托，下面将讲述他们的定义和相互关系
### 组件数组（Map）
上文和GVE中所有的Map都满足下列结构
```
let map = [
    //组件对象,
    //组件对象,
    //组件对象,
    //...
];
```
---
### 组件对象
上文和GVE中所有的组件对象都满足下列结构
```
let component = {
    type:"Div",//组件类型
    layout:{...},//组件的布局和属性
    child:Map//子组件数组
}
```
---
### GVE 画布坐标系
不同于Screeps的原生Visual对象绘制的结果，GVE绘制的组件将所有绘制的图形向左和向上各偏移了0.5的距离，这样做的效果是
* 画布的(0,0)位于房间的左上角，而不是(0,0)方格的中心
* 使地图的方格变成参考对象，开发者可以便捷的知道UI方块对齐的方格

例如如下Map
```
let map = [
    {
        type:"Div",
        layout:{
            x:0,
            y:0,
            w:5,
            h:5,
            background:"#fff"
        }
    }
]
GVE.draw(new RoomVisual(),map);

```

上述Map将会在地图左上角绘制一个和地图边缘没有距离的白色5*5格方块，而原生的
```
new RoomViusal().rect(0,0,5,5,
    {
        fill:"#fff"
    }
);
```
会在左上角绘制一个与边缘有0.5距离的白色5*5格的方块

### 组件
---
### `Div`
#### 组件描述
容器组件，类似一个盒子，可以包含多个子组件
#### 组件允许的布局属性
* `x` 组件的x轴相对坐标
* `y` 组件的y轴相对坐标
* `width` 组件的宽度
* `height` 组件的高度
* `background` 组件的背景颜色，十六进制颜色代码#AARRGGBB
* `opacity` 透明度，0.0~1.0,1.0为不透明
* `stroke` 边框颜色，十六进制颜色代码#AARRGGBB
#### 组件Map属性
* 允许子控件 是
---

### `Text`
#### 组件描述
文本
#### 组件允许的布局属性
* `x` 组件的x轴相对坐标
* `y` 组件的y轴相对坐标
* `background` 组件的背景颜色，十六进制颜色代码#AARRGGBB
#### 组件Map属性
* 允许子控件 否