如何在PIXI.js里面使用json文件来管理瓦片集(tileset)?
如何在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"
}
}
注意事项如下:
- meta.image是图片的相对位置,大概绝对位置也可以吧没试过,一般放在一起就够了
- hasira和sakura就是自己定义的别名
- 在别名对象里面设置图片的位置和大小
最后附上PIXI使用这个json文件的代码片段:
let loader = PIXI.loader
loader
.add('/assets/200001.json')
.load(() => {
app.stage.addChild(new Sprite(TextureCache['hasira']))
})
如何在PIXI.js里面使用json文件来管理瓦片集(tileset)?的更多相关文章
- 使用grunt-init自动创建gruntfile.js和package.json文件
使用grunt-init可以自动创建gruntfile.js和package.json文件.下面说一下过程: 1.全局安装grunt-init npm install -g grunt-init 2. ...
- 如何在vue中请求本地json文件
1..修改webpack.base.conf.js 文件中添加'/static': resolve('static'),如下所示,此时存放于static的json文件就可以通过/static/xxx. ...
- iis配置js支持读取json文件配置
默认情况下,iis不支持解析.json文件,这就需要我们自己在iis下配置方法一:iis配置1.点击开始菜单选择控制面板: 2.控制面板内点击管理工具,选择Internet信息服务(IIS)管理器. ...
- js fs read json 文件json字符串无法解析
读取 xxx.txt(里面就是一段 json)-> JSON.parse( fs.readFileSync( xxx.txt ) ) -> 报 SyntaxError: unexpecte ...
- vue 中如何对公共css、 js 方法进行单文件统一管理,全局调用
1.前言 最近,为公司开发交付的一个后台管理系统项目,我使用了 Vue 框架进行开发实践. 模块化.组件化.工程化的开发体验非常好.良好的 api,优雅的设计,对于工程师非常友好. 但是由于模块比较多 ...
- vue使用axios读取本地json文件来显示echarts折线图
编辑器:HBuilderx axios文档:http://www.axios-js.com/zh-cn/docs/ echarts实例:https://echarts.apache.org/examp ...
- gulp-rev同时将js和css文件写在一个rev-manifest.json文件里面的方式探讨
参考: https://segmentfault.com/q/1010000002876613 https://github.com/sindresorhus/gulp-rev 测试发现,在官网上最主 ...
- 如何在Hadoop的MapReduce程序中处理JSON文件
简介: 最近在写MapReduce程序处理日志时,需要解析JSON配置文件,简化Java程序和处理逻辑.但是Hadoop本身似乎没有内置对JSON文件的解析功能,我们不得不求助于第三方JSON工具包. ...
- vue.js学习笔记(二):如何加载本地json文件
在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地 ...
随机推荐
- 用navicat远程连接mysql:Can't connect to MySQL server (10060)
出现这种现象的原因有两个,一个是当前用户被mysql服务器拒绝,另外一个原因是3306端口被被防火墙禁掉,无法连接到该端口.解决方法如下: 1.设置远程用户访问权限: // 任何远程主机都可以访问数据 ...
- Python(IO model)
day34 IO model 举例:https://blog.csdn.net/ZWE7616175/article/details/80591587 参考:http://www.cnblogs.co ...
- 01-Python的基础知识1
基础即常识. - Python的对象模型 - Python中一切皆对象. - 内置对象:数字,字符串,列表,元组,集合等等. - 基本输入 - 基本模式 变量 = input("提示字 ...
- 深入set和dict
一. 浅拷贝和深拷贝 浅拷贝:就是创建一个具有相同类型,相同值但不同id的新对象. 浅拷贝产生的新对象中可变对象的值在发生改变时,会对原对象的值也做出改变,因为这些值是同一个引用. a = [1 ...
- 在 iOS 上编译 webkit 源码
准备工作 买一台 mac 下载并安装 Xcode 下载源码 git clone git://git.webkit.org/WebKit.git WebKit 这个可能要耗费很久很久 编译源码 打开 X ...
- D10——C语言基础学PYTHON
C语言基础学习PYTHON——基础学习D10 20180906内容纲要: 1.协程 (1)yield (2)greenlet (3)gevent (4)gevent实现单线程下socket多并发 2. ...
- python3异常处理 try
一. 简介 在编程过程中为了增加友好性,在程序出现Bug时一般不会直接将错误信息展示给用户,而是提供一个友好的输出提示. 二. 使用 1.异常基础 常用结构: try: pass except Exc ...
- DIV居中的几种方法
1. body{ text-align:center; } 缺点:body内所有内容一并居中 2. .center{ position: fixed; left: 50%; } 缺点:需要设置posi ...
- js03
我们接着来学习js的一些基础知识点. 1.document: document是window对象的一个属性.window对象表示浏览器中打开的窗口.如果文档包含框架(frame或者iframe),浏览 ...
- linux初始
运维 IT运维,指IT公司中,运行和维护服务器的工作 核心工作: 数据不能丢失 7*24小时运行 提高用户访问效率 一句换 管服务器的 服务器 要管服务器那就得先了解服务器 服务器也称为伺 ...