zoukankan      html  css  js  c++  java
  • 如何在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']))
    	})
    
  • 相关阅读:
    排序算法之冒泡排序的思想以及Java实现
    排序算法之希尔排序的思想以及Java实现
    c# npoi分批往excel追加数据
    c# Timer按月执行任务
    windows服务+定时任务(quartz.net)+nancy
    c# linq分组 lambda分组
    批量插入sql技巧
    解决windows server 2008R2自动关机
    c# DataGridView在使用DataSource时,只显示指定的列或禁止自动生成列
    c# mongodb时间类型字段保存时相差八个小时解决办法
  • 原文地址:https://www.cnblogs.com/uturobako/p/pixijs-use-json-manage-tileset.html
Copyright © 2011-2022 走看看