如何在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"
}
}

注意事项如下:

  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']))
    })

原文地址:https://www.cnblogs.com/uturobako/p/pixijs-use-json-manage-tileset.html

时间: 2024-10-04 04:18:43

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

js 读取本地Json 文件

注意:把json 文件当做js 引用到页面上(city.js) <script src="zepto.min.js"></script>    <script src="city.js"></script>    <script type="text/javascript">        $(function () {            $.getJSON("city.j

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

默认情况下,iis不支持解析.json文件,这就需要我们自己在iis下配置方法一:iis配置1.点击开始菜单选择控制面板: 2.控制面板内点击管理工具,选择Internet信息服务(IIS)管理器. . 3.点击MIME类型4.操作内点击“添加...”文件扩展名:.jsonMIME类型:application/json.. 点击“处理程序映射”操作内选择“添加脚本映射”请求路径为:*.json,可执行文件:C:\WINDOWS\system32\inetsrv\asp.dll名称:JSON 以上

js 实现读取json 文件,实现批量发送请求

最终文件结构: request-demo node_module run.js data.json package.js 准备工作: 新建一个项目文件夹,执行以下命令, 会自动在该文件下生成 node_module 文件夹: npm install fs npm install axios npm install babel-cli npm install babel-preset-es2015 创建一个 data.json ,内容如下 { "profiles":[ { "i

nodejs 提取配置项到 json 文件

在写 nodejs 服务端代码时,我们常涉及到定义监听端口号.最大连接数.时间限制等等配置.我们当然可以把这些配置直接写在 js 代码里,为什么要提取到 json 文件呢? 难道仅因为它们“看起来像”配置项,我们就把它们提取到 json 文件单独管理吗?如果仅因为这样,那就有点牵强了.我们来考虑一下这样的情景,当部署到线上时,一台机器需要部署两个甚至更多的实例,是的,因为 nodejs 能使用的内存作了限制(64位为1.4GB,32位为0.7GB).那么,我们就需要监听不同端口号!那么把其它常见

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

在项目开发的过程中,因为无法和后台的数据做交互,所以我们可以自建一个假数据文件(如data.json)到项目文件夹中,这样我们就可以模仿后台的数据进行开发.但是,如何在一个vue.js 项目中引入本地的json文件呢,下面就将步骤贴出来.(此时项目是由webpack打包而成). 整个项目是由webpack打包而成,具体步骤上网查找.具体项目结构如下: 1:我们找到bulid>dev-server.js,然后打开 2:在里面加入这段代码. var app = express() var appDa

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

参考: https://segmentfault.com/q/1010000002876613 https://github.com/sindresorhus/gulp-rev 测试发现,在官网上最主要的做法是: 加入如下参数: { base: 'build/assets', merge: true } 其中base为存放上一个生成的rev-manifest.json文件,然后merge为是否拼合进去,最后再输出到base这个目录上,就可以实现js和css文件同在一个rev-manifest.j

【Node.js学习笔记八】package.json文件中使用的指令

指令 说明 示例 name 包的唯一名字 "name": "camelot" preferGlobal 表示该模块更倾向于在全局范围内安装 "preferGlobal": true version 该模块的版本 "version": 0.0.1 author 项目的作者 "author": "[email protected]" description 模块的文字说明(描述) "

FileSaver.js导出json文件和文本

最近刚刚写了个json数据导出生成Excel文件的,顺便总结下利用FileSaver.js导出其他文件的,这里要注意的一个点就是,当导出的是json文件或是txt文件时,导出的内容要是字符串,特别当时导出的数据是json数据时,要记得转一把.好了,不多说,直接上一个小小的demo,如下: 下载地址: https://github.com/eligrey/FileSaver.js 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <me

js vs2013中允许js访问json文件的解决方案

js  vs2013中允许js访问json文件的解决方案 <?xml version="1.0" encoding="utf-8"?> <!-- 有关如何配置 ASP.NET 应用程序的详细信息,请访问 http://go.microsoft.com/fwlink/?LinkId=169433 --> <configuration> <system.web> <compilation debug="tr