2.pixi.js编写的塔防游戏(类似保卫萝卜)-场景编辑器

 游戏说明

一个用pixi.js编写的h5塔防游戏，可以用electron打包为exe，支持移动端，也可以用webview控件打包为app在移动端使用

环境说明

  cnpm@6.2.0  
  npm@6.14.13  
  node@12.22.7  
  npminstall@3.28.0  
  yarn@1.22.10  
  
  npm config list  
  electron_mirror = "https://npm.taobao.org/mirrors/electron/"  
  home = "https://www.npmjs.org"  
  registry = "https://registry.npmmirror.com/"  

目录说明：

目录说明可以点击下面的链接

目录

场景编辑器目录：

 rightBarRenderConfig.ts 为右侧属性栏可配置项

enum.ts 为枚举项

viewUtils.ts 是工具类

headMenk.ts 顶部菜单控制类

imageList.ts 为弹窗选择游戏中可视化资源类

rightBar.ts 为右侧属性栏类

index.ts为core核心对象类

运行场景编辑器：

npm run devtiled

使用截图：

场景编辑器设计思路：

首先是分层渲染

背景填充 -> 整图 -> 填充方块 -> 地形方块

设计思路：

一般场景编辑其实就是编辑场景的数据，然后通过数据在主程序中渲染出来 主要达到可以编辑数据的思路。

采用bootstrap作为主要ui框架

然后编写右侧属性栏来配置场景数据，右侧属性栏通过渲染input输入类型，选择输入类型，来坐渲染项 然后通过配置数据来配置可编辑的key

 场景中的属性均通过可配置项来配置 只需要编写很少的渲染代码就可以完成很大数据量的可视化编辑。

这是我们要做的目标:​

项目开源地址:

GitHub - yinhui1129754/towerDefense: 一个使用pixi.js编写的类似保卫萝卜的塔防游戏。

游戏开发交流群：

859055710