> For the complete documentation index, see [llms.txt](https://q1c.gitbook.io/dragoncore-course/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://q1c.gitbook.io/dragoncore-course/interface/inventory.md).

# 背包界面

[【点击下载背包界面教材】](https://pan.bilnn.com/s/ywApHE)

将素材解压成文件夹放入**本地客户端**材质文件夹中的**Dragoncore**中

**这是一张背包的槽位图**

![背包槽位图](https://tu-1302037808.cos.ap-nanjing.myqcloud.com/study/beibao1.png)

#### 我们想要自定义这个界面之前首先需要了解每个槽位的对应数字

在服务端Dragoncore/Gui中创建 **背包.yml**

## **开始配置**

```
match: "GuiInventory"
```

**必填项**，否则配置不会生效

* **"hud"为自动开启,一般用于功能性快捷键提示，血条等**
* **"GuiInventory"代表背包界面**
* **"GuiIngameMenu"代表ESC界面**

```
    allowEscClose: "false"
```

选填项，不写默认为true

选项为false时，界面开启后按ESC将无法退出界面

需要配合Functions的按键监听才能关闭界面

```
Functions:  #该处的方法可利用【方法.执行方法('xxx')】或【方法.异步执行方法('xxx')】来执行

  keyPress: "(方法.取当前按下键=='E' || 方法.取当前按下键=='ESCAPE')?{方法.关闭界面}:0"   
 #keyPress: 在这个界面开启时按下E或ESC都可以触发关闭界面的方法，也可以用于其他方法，关闭界面的方法主要是用于**allowEscClose**为**false**时

  open: |-      #界面打开时，会自动触发open方法
    方法.异步执行方法('每秒更新变量');
  每秒更新变量: |-
    方法.更新变量值('vault_eco_balance');
    方法.更新变量值('playerpoints_points');
    方法.延时(1000);
    方法.异步执行方法('每秒更新变量');
```

只有在**异步方法**里才可以用延时方法

**open** 的下面可以添加 方法.播放声音 ('xxx.ogg') 来提升逼格

教材中将会附上一些ogg格式的音频文件

变量使用的插件是**PlaceholderAPI**

变量值可以随意增加，它可以显示该界面中的文本变量值，如果没有更新项，则变量无效. 更新变量值在界面中没有变量时是一个可选项

可以修改延时来改变动作周期

我们在背包配置中常用的组件有：

* 图片/texture
* 文本/label
* 槽位/slot

组件拥有优先值设定，在配置中的位置越靠下的组件优先值越高

教材中提供了几个可选项，如果要使用，可以自己重新排版

现在开始第一个组件：背包界面的背景

![](https://tu-1302037808.cos.ap-nanjing.myqcloud.com/study/bagbg2.png)

因为是教学，所以不做排版讲解

```
bagbg:                             #组件的名字
  type: "texture"                #这是一个图片组件
  x: "(w-bagbg.width)/2"     #x方向坐标 游戏窗口从左往右的方向
  y: "(h-bagbg.height)/2"      #y方向坐标 游戏窗口从上往下的方向
  width: "500"                   #图片的长度
  height: "260"                  #图片的高度
  texture: "教材/bagbg2.png"    #图片的客户端位置
```

组件名可以包涵组件类别，也可以不包含

```
测试组件_textrue:

测试组件_t:

测试组件:
  type: "texture"
```

这三种都可以作为图片组件，

因为这里图上的格子已经排好了，就可以直接开始写入背包槽位了

```
1-1_slot:                       #这是第一行第一个格子，slot代表格子
  x: "bagbg.x+138.5"            #这里可以直接使用算法，详细的算法可以参照WIKI
  y: "bagbg.y-104.5"
 identifier: "container_9"  
```

**bagbg.x代表组件名为bagbg的组件的x值**

这时候一个槽位就算是添加完成了，但是为什么看起来这么难受呢？

![](https://tu-1302037808.cos.ap-nanjing.myqcloud.com/study/slot2.png)

是不是觉得格子好像跟图片大小不太匹配

这时候我们就要用到一个组件值 **scale**，这是一个**跟 identifier 同级**的组件值

```
  scale: 1.55    #这个组件值可以按比例修改组件的大小，几乎所有的组件都可以使用，很常用
```

这下舒服多了

![](https://tu-1302037808.cos.ap-nanjing.myqcloud.com/study/slot3.png)

就按照这样的格式，把其他格子都写出来

还剩下合成栏和装备栏，也用同样的方法，不过因为之前没有提前摆好格子，所以每个栏位需要额外多一个配套的背景贴图

### 合成栏

像背包背景一样设置栏位背景图片

```
合成栏0_texture:
  x: "bagbg.x+320"
  y: "bagbg.y+15"
  width: 30
  height: 30
  texture: "教材/slot.png"
```

设置5个背景图片，然后设置栏位

```
合成栏0_slot:
  x: "bagbg.x+422.5"
  y: "bagbg.y+37.5"
  identifier: "container_0"
  scale: 1.55
```

位置请自行调整，完成后大概是这样

![](https://tu-1302037808.cos.ap-nanjing.myqcloud.com/study/_4J{GE4`75QGG5YOUCJ$CVB.png)

看起来有些突兀，加个装饰\~

```
合成栏装饰_texture:
  x: "bagbg.x+396"
  y: "bagbg.y+33"
  texture: "教材/装饰1.png"
  width: 20
  height: 32
```

看起来还不错

![](https://tu-1302037808.cos.ap-nanjing.myqcloud.com/study/zs1.png)

还有装备栏没有做

跟背包栏一样先添加背景框，在背景框加上装饰传达信息

![](https://tu-1302037808.cos.ap-nanjing.myqcloud.com/study/tkzs.png)

但是我如果不想加装饰，玩家要怎么才能知道这是什么栏位呢？

这时候我们就要在**slot**组件中加一个**tip**

```
头盔_slot:
  x: "bagbg.x+15+2.5"
  y: "bagbg.y+24+2.5"
  scale: 1.55
  identifier: "container_5"
  tip:
    - "§c§l头盔"
    - "这里可以无限向下添加tip"
```

![](https://tu-1302037808.cos.ap-nanjing.myqcloud.com/study/tkzs2.png)

回到背包，最后我们加上人物模型，画龙点睛

```
玩家模型_entity:
  x: "bagbg.x+70"
  y: "bagbg.y+220"
  entity: "owner"  #这里的意思是实体的拥有者，也就是自己，还可以写aim，代表指针瞄准的实体，对方血条的hud模型就是用的aim
  scale: 1.5
```

![](https://tu-1302037808.cos.ap-nanjing.myqcloud.com/study/bag123.png)

[额外槽位](https://1650773059.gitbook.io/dragoncore-course/zu-jian/ewaicaowei)

但是中间那块好像有些空旷

我们来加上金币和点券的文本吧

```
金币变量_label:
  x: "bagbg.x+168"
  y: "bagbg.y+33"
  texts: 
    - "方法.取变量('vault_eco_balance')"
  tip:
    - "金币"
#如果不想要小数，可以写作 方法.到整数(方法.取变量('vault_eco_balance'))
```

![](https://tu-1302037808.cos.ap-nanjing.myqcloud.com/study/gold1.png)