# vue式游戏开发pixi.js

**Repository Path**: cnzkai/vue-game-pixi.js

## Basic Information

- **Project Name**: vue式游戏开发pixi.js
- **Description**: 使用pixi.js,模仿vue式游戏开发,js传奇
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 4
- **Created**: 2023-05-31
- **Last Updated**: 2025-05-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 轻量化游戏框架 #
* 纯代码手撸,逻辑更易理解
* tpl文件vscode下切换成html语言模式才有高亮

![传奇图片](about/1.jpg)
![代码图片](about/2.jpg)

### 1分钟入门 ###
* 框架一共6种标签:
0. **tpl**     子模板
1. **box**     容器
2. **img**     图片(精灵)
3. **ani**     动画
4. **txt**     文字
5. **audio**   声音

* 共有属性:
1. **x**       横向坐标
2. **y**       纵向坐标
3. **width**   宽度
4. **height**  高度
5. **visible** 隐藏或显示

* 私有属性:
0. **tpl**

  |属性|说明|类型|示例|
  | --- | --- | --- | ---|
  |src|模板路径|string|tpl/demo.tpl|
1. **box**

  |属性|说明|类型|示例|
  | --- | --- | --- | ---|
  |filter|染色|string|#FF0000|
  |interactive|交互穿透|boolean|true|
2. **img**

  |属性|说明|类型|示例|
  | --- | --- | --- | --- |
  |src|图片路径|string|res/icon.png|
  |radius|圆角|number|50|
  |grid|九宫格|string|7,7,7,7|
  |trimX|横向裁剪|number|10|
  |trimY|纵向裁剪|number|10|
3. **ani**

  |属性|说明|类型|示例|
  | --- | --- | --- | --- |
  |src|图片集路径|string|res/role.png|
  |speed|播放速度|number|20|
  |loop|循环播放|boolean|true|
4. **txt**

  |属性|说明|类型|示例|
  | --- | --- | --- | --- |
  |text|文字内容|string|Hello World|
  |size|文字大小|number|24|
  |color|文字颜色|string|#000000|
5. **audio**

  |属性|说明|类型|示例|
  | --- | --- | --- | --- |
  |src|音频文件路径|string|res/bgm.mp3|
  |volume|声音大小|number|0.5|
  |loop|循环播放|boolean|true|
  |play|自动播放|boolean|true|

* 交互事件:
1. **click** 左键单击
2. **rightclick** 右键单击
3. **down** 鼠标按下
4. **up** 鼠标抬起
5. **move** 鼠标移动
6. **over** 鼠标悬浮于节点
7. **out** 鼠标离开节点

* 其他工具:
1. Sws 2.3 本地webserver预览
2. QD_AtlasPack  图集打包 (打包完需要自行补充首尾)

* QQ群: 88284470

* TODO
1. 父子模板参数传递
2. template内的if else for的支持