如何在PIXI.js里面使用json文件来管理瓦片集(tileset)?

PIXI建议我们将素材图片汇总成一个瓦片集(tileset),然后用纹理地图集(texture atlas,通常是一个json文件)对该瓦片集进行管理。我认为这主要是出于对网络传输速度的考量,因为加载一张图片肯定比加载多张图片效率更高。

那么怎么将素材汇总成tileset呢?通常我们使用的是texturepacker,一个高级功能收费的软件。所谓的高级功能反正我是用不上。

这个软件帮我们将素材拼接,然后输出一张tileset图片和一个json格式的texture atlas文件。因为json文件里包含了输入地图集图片的相对地址,所以在PIXI中我们只要加载这个json,引擎就会自动将对应图片加载并解析。最后我们可以直接根据json里面的别名进行引用。

但是,以上操作的前提是,你的素材本身是分离的图片文件。如果现在我在网上找到了一张tileset图片,然后我想用json对其进行管理该怎么办?使用json显然比在代码里写像素值要便于管理。这个时候texturepacker就帮不了我们的忙了,不过,好在texture atlas文件并不复杂,我们可以手动写一个。下面附上一个简单的例子。

{"frames": {

"hasira":
{
"frame": {"x":0,"y":64,"w":64,"h":128},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":0,"y":64,"w":64,"h":128},
"sourceSize": {"w":64,"h":128}
},
"sakura":
{
"frame": {"x":64,"y":64,"w":128,"h":128},
"rotated": false,
"trimmed": false,
"spriteSourceSize": {"x":64,"y":64,"w":128,"h":128},
"sourceSize": {"w":128,"h":128}
}
},
"meta": {
"image": "200001.png"
}
}

注意事项如下:

  1. meta.image是图片的相对位置,大概绝对位置也可以吧没试过,一般放在一起就够了
  2. hasira和sakura就是自己定义的别名
  3. 在别名对象里面设置图片的位置和大小

最后附上PIXI使用这个json文件的代码片段:

let loader = PIXI.loader
loader
.add('/assets/200001.json')
.load(() => {
app.stage.addChild(new Sprite(TextureCache['hasira']))
})

如何在PIXI.js里面使用json文件来管理瓦片集(tileset)?的更多相关文章

  1. 使用grunt-init自动创建gruntfile.js和package.json文件

    使用grunt-init可以自动创建gruntfile.js和package.json文件.下面说一下过程: 1.全局安装grunt-init npm install -g grunt-init 2. ...

  2. 如何在vue中请求本地json文件

    1..修改webpack.base.conf.js 文件中添加'/static': resolve('static'),如下所示,此时存放于static的json文件就可以通过/static/xxx. ...

  3. iis配置js支持读取json文件配置

    默认情况下,iis不支持解析.json文件,这就需要我们自己在iis下配置方法一:iis配置1.点击开始菜单选择控制面板: 2.控制面板内点击管理工具,选择Internet信息服务(IIS)管理器. ...

  4. js fs read json 文件json字符串无法解析

    读取 xxx.txt(里面就是一段 json)-> JSON.parse( fs.readFileSync( xxx.txt ) ) -> 报 SyntaxError: unexpecte ...

  5. vue 中如何对公共css、 js 方法进行单文件统一管理,全局调用

    1.前言 最近,为公司开发交付的一个后台管理系统项目,我使用了 Vue 框架进行开发实践. 模块化.组件化.工程化的开发体验非常好.良好的 api,优雅的设计,对于工程师非常友好. 但是由于模块比较多 ...

  6. vue使用axios读取本地json文件来显示echarts折线图

    编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...

  7. gulp-rev同时将js和css文件写在一个rev-manifest.json文件里面的方式探讨

    参考: https://segmentfault.com/q/1010000002876613 https://github.com/sindresorhus/gulp-rev 测试发现,在官网上最主 ...

  8. 如何在Hadoop的MapReduce程序中处理JSON文件

    简介: 最近在写MapReduce程序处理日志时,需要解析JSON配置文件,简化Java程序和处理逻辑.但是Hadoop本身似乎没有内置对JSON文件的解析功能,我们不得不求助于第三方JSON工具包. ...

  9. vue.js学习笔记(二):如何加载本地json文件

    在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...

随机推荐

  1. Mac OSX sublime text2 各种快捷键

    Mac 快捷键 https://support.apple.com/zh-cn/HT201236 Preferences -> Key Bindings - User [ { "key ...

  2. day 43 mysql 学习 以及pymysql 学习

    前情提要: 本次主要学习sql 的难点, 多表查询以及连接python  一:多表关联 >多表查询的缺点 二:单表的连表查询[自关联查询] 三:子查询 >主查询 >主查询 >主 ...

  3. python学习笔记06-enumerate()

    enumerate()   python 内置函数  枚举 列举的意思 对于一个可迭代的(iterable)/可遍历的对象(如列表.字符串),enumerate将其组成一个索引序列,利用它可以同时获得 ...

  4. 面试题:js如何渲染十万条数据并不卡住界面

    这道题考察了如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次. ...

  5. OpenRefine导入CSV文件,数据清理后导出JSON格式

    第一步:选择要转换的CSV文件. 第二步:选择以逗号分割,并创建项目. 第三步:编辑,去掉特殊字符 Edit Cells > Transform... 第四步:导出文件,选择“Templatin ...

  6. Android IntentFilter匹配规则

    一:显式调用  需要明确指定被启动对象的组件信息,一般是在相同的应用程序内部实现的 Intent intent = new Intent(); intent.setClass(SecondActivi ...

  7. Android的相关事件

    Android的相关事件 1.Toast信息提醒 import android.support.v7.app.AppCompatActivity; import android.os.Bundle; ...

  8. linux 命令 后台运行

    转载 1.在下达的命令后面加上&,就可以使该命令在后台进行工作,这样做最大的好处就是不怕被ctrl+c这个中断指令所中断. 2. 那大家可能又要问了,在后台执行的程序怎么使它恢复到前台来运行呢 ...

  9. apache URL重写 标志表 以及 错误解决方法

    Apache mod_rewrite规则重写的标志一览 1) R[=code](force redirect) 强制外部重定向 强制在替代字符串加上http://thishost[:thisport] ...

  10. 在CentOS上装Redis

    Redis官网 $ wget http://download.redis.io/releases/redis-3.2.5.tar.gz $ tar xzf redis-.tar.gz $ cd red ...