egret快速生成位图技巧

两款基本工具:

自动生成位图代码工具 快速生成位图工具

环境配置:

egretUI存储路径

环境配置成功之后的操作步骤如下:

1. 将目标图片 -> 拖动到PS里面

2. 将PS图片转换为智能模式后重命名 -> page2_btn.png|btn ( | -> 图片有点击功能)

3. 文件 -> 脚本 -> PSExportPageXML -> 默认情况下,切出来的图片被导出到目标图片同级目录下

   
   

4. 打开SimpleH5Builder v0.77 -> 文件 -> 新建 -> 回到刚刚新建的文件所在目录 -> 往里面挪入一个模板配置文件

   
   

5. 将之前PS里面生成的文件分别放入在SimpleH5Builder v0.77生成的文件夹中 page -> page , ui -> assets

6. 点击+号 -> 新生成一个页面 -> 此步骤如果成功,会在 项目根目录/src/page 目录下生成一个 与页面名称同名的ts 文件
   (注意: 该页面名字要与生成局部位图的PS原图片名字一致,为了防止项目出问题,在一开始进入PS切图的时候,建议将原始图片备份在一个新的文件夹里面)

   

7. 项目 -> 发布当前页 -> 在wing3中打开

8. 将生成的所有局部位图挪入资源组

9. main文件下运行 -> wy.changeScene(页面名称);