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
  1. 按照提示步骤逐步输入信息

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

初始化 Tiny.js 插件库

  1. 打开命令行工具输入
$ tiny plugin
  1. 按照提示步骤逐步输入信息

注意:

  • 插件名为必填项,会自动在开头补充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

使用资源文件:

var sprite = Tiny.Sprite.fromImage(RESOURCES['infobubble1PNG']);
// 或
var sprite = new Tiny.Sprite(Tiny.TextureCache['infobubble1PNG']);

// resourceTemplate 为 ES6 的模版
const sprite = new Tiny.Sprite(Tiny.TextureCache[infobubble1PNG])

生成 tileset 文件

此功能依赖 ImageMagick,所以使用之前请确认是否已经安装,识别方法:which convertwhich 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/animals
    name: '', //默认为:tileset
    trim: false, //是否移除图片周边的透明空白,默认为:false
    padding: 2, //图片与图片的间距,默认为:0
    outFold: '', //默认为:{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',
  } ],
  ...
};
  • tilesetDefaulttileset 的通用配置,方便配置多个 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.jsonmole_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 互动引擎,了解更多?