tinyjs-cli

简介

Tiny.js 本地开发工具，使用命令行快速创建互动项目、 生成资源配置文件等。

功能一览

-h, --help 查看帮助信息
-V, --version 查看版本信息
init 初始化 Tiny.js 项目
plugin 初始化 Tiny.js 插件库
resource resources.js 生成器
texture-compressor [options] 压缩纹理生成器

环境准备

• nodejs, npm

安装

使用 npm 安装 tinyjs-cli：

$ npm install tinyjs-cli -g

快速上手

初始化 Tiny.js 项目

1. 打开命令行工具输入

$ tiny init

2. 按照提示步骤逐步输入信息

注意： 项目名为必填项，如果不填，将使用当前目录，但是会检测此目录是否是空目录。

初始化 Tiny.js 插件库

1. 打开命令行工具输入

$ tiny plugin

2. 按照提示步骤逐步输入信息

注意：

• 插件名为必填项，会自动在开头补充tinyjs-plugin-，比如：输入dust，实际插件名是tinyjs-plugin-dust
• 插件类型 实际上是选择插件是作为 Class 开发，还是作为 Module 开发。

资源文件管理

tiny-cli 提供一套资源管理方案，执行 tiny resource 一键管理，非常方便易用。

生成 resources.js

配置 tiny-app.config.js 文件：

module.exports={
...
/** * 资源文件所在项目目录，如果就在根目录，此参数给空即可，如果不是，格式如：“alipay/tiny/games/” */appFold: '',/** * 生成的资源配置文件，只扫描 <res> 目录下的资源 */resourceName: 'resources.js',/** * 生成的资源配置模版 * * 默认是： * var RESOURCES = { * <% list.forEach(function(item, i){ %> * '<%= item.name %>': '<%= item.path %>', * <% }); %> * }; * * 也可以输出成 ES6： * <% list.forEach(function(item, i){ %> * import <%= item.name %> from '<%= item.path %>'; * <% }); %> * export { * <% list.forEach(function(item, i){ %> * <%= item.name %>, * <% }); %> * }; */resourceTemplate: '',//为空会使用默认模版
...
};

• appFold：资源文件所在的项目目录，比如：项目目录是 myFirstGame，那么就会去找 myFirstGame/res 下的所有目录及里面的资源。是的，res 是规定，项目下没有就无效
• resourceName： 资源配置文件名，默认是 resources.js，那么执行 tiny resource 就会在 myFirstGame/src 下生成 resources.js，文件内容规则会按照 resourceTemplate 配置的模版输入
• resourceTemplate：生成的资源配置模版，输入的变量是 list: [{name, path}]，其中 name 会转换文件后缀为全大写，并移除资源文件名中的空格和"-"等（/\s|-|\./ig），如：info-bubble 1.png => infobubble1PNG

使用资源文件：

varsprite=Tiny.Sprite.fromImage(RESOURCES['infobubble1PNG']);// 或varsprite=newTiny.Sprite(Tiny.TextureCache['infobubble1PNG']);// resourceTemplate 为 ES6 的模版constsprite=newTiny.Sprite(Tiny.TextureCache[infobubble1PNG])

生成 tileset 文件

此功能依赖 ImageMagick，所以使用之前请确认是否已经安装，识别方法：which convert 或 which identify。 如果没有安装，OSX 设备可以通过 brew 快速安装：brew install imagemagick

假设我们的资源文件目录为：

.
├── frame
│ ├── animals
│ │ ├── ant.png
│ │ ├── bee.png
│ │ └── bird.png
│ └── enemies
│ ├── 1.png
│ ├── 2.png
│ └── 3.png
└── images
├── bg.png
├── cloud.png
├── logo.png
└── mask.png

配置 tiny-app.config.js 文件：

module.exports={
...
/** * tileset 通用配置，会 Assign 这个，对于多个 tileset 较友好 */tilesetDefault: {fold: 'res/images',//默认为：{appFold}/res/images，自定义如：res/images/animalsname: '',//默认为：tilesettrim: false,//是否移除图片周边的透明空白，默认为：falsepadding: 2,//图片与图片的间距，默认为：0outFold: '',//默认为：{appFold}/res/tileset},tileset: [{fold: 'res/frame/animals',name: 'mole_tile',trim: true,padding: 10,outFold: 'res/animals',},{fold: 'res/frame/enemies',},{fold: '',name: 'vendor',}],
...
};

• tilesetDefault：tileset 的通用配置，方便配置多个 tileset
  • fold：资源集合所在目录
  • name：生成的 tileset 文件名
  • trim：是否移除子图片周围的透明空白
  • padding：每个子图片直接的间距
  • outFold：生成的文件输出目录
• tileset：各个 tileset 的配置数组

执行 tiny resource 后的目录结构为：

.
├── animals
│ ├── mole_tile.json
│ └── mole_tile.png
├── frame
├── images
└── tileset
├── tileset_enemies.json
├── tileset_enemies.png
├── vendor.json
└── vendor.png

假设我们的项目目录是 myFirstGame，在根目录下执行 tiny resource 就会在 myFirstGame/res/animals 下生成两个文件 mole_tile.json 和 mole_tile.png，生成的文件的文件名就是 tiny-app.config.js 里配置的 tileset -> name。 其中 mole_tile.png 是一张雪碧图，是组合了 tileset -> fold 下的所有图片，mole_tile.json 是各个子图片的相关属性的定义，使用的方式也很简单。

了解更多，请移步 进阶文档「显示对象->精灵->使用 tileset」

生成压缩纹理

tiny-cli 提供一套压缩纹理的生成方案，执行 tiny texture-compressor 一键生成，非常方便易用。

在生成之前，你需要告诉生成器你想对哪些文件/目录下的文件进行操作，通过以下两种方法都可以：

• 扩展参数：直接在命令后带上文件名或目录名，多个用空格分割，如：
  • tiny texture-compressor res/xxx
  • tiny texture-compressor res/xxx res/xxx.png
• 配置文件：通过在配置文件 tiny-app.config.js 添加字段 compressedTexture 即可，如：
  • compressedTexture: 'res/xxx'
  • compressedTexture: ['res/xxx', 'res/xxx.png']
• 压缩率：在命令后追加 -q low 或 --quality low 来选择你需要的压缩纹理质量，可选值：low, medium, high，默认值：medium
• 纹理类型：在命令后追加 -f basis 或 --format basis 来选择你想要的压缩纹理类型，可选值：basis|astc|pvr（多个以,分割，不设置默认为所有）

默认情况下，生成器会同时生成 astc/pvr 两种格式的 ktx 文件和 basis 格式文件，方便你在多个支持的环境下自动使用。

其他

Tiny.js 是一款轻量级 HTML5 2D 互动引擎，了解更多？