# 背包界面

[【点击下载背包界面教材】](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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://q1c.gitbook.io/dragoncore-course/interface/inventory.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.