@canvasengine/tilemap - Canvas引擎 Tilemap Kit

刚从 pixijs/ tilemap( 最新 pixijs 的固定) 中预留

这个软件包提供低等长方形平面执行,为高性能渲染和a 外出画布倒置.

版本兼容性

安装 :

npm install --save @canvasengine/tilemap

您也可以使用浏览器捆绑 :

<script src="https://cdn.jsdelivr.net/npm/@pixi/tilemap@latest/dist/pixi-tilemap.js"></script>

使用量

简言之,你创造的瓦片会在所提供的位置和维度上使出每一瓦的纹理. 一般来说,a 用于加载平板资产的图示表 :

import { Assets } from 'pixi.js';
import { CompositeTilemap } from '@canvasengine/tilemap';

Assets.add('atlas', 'atlas.json');
Assets.load(['atlas']).then(() =>
{
    const tilemap = new CompositeTilemap();

    // Render your first tile at (0, 0)!
    tilemap.tile('grass.png', 0, 0);
});

CompositeTilemap 其实是一种懒惰的分层复合物 Tilemap 实例。 A 类 Tilemap 有固定的瓦数 纹理(平板),它可以制成一个去。 通常情况下, CompositeTilemap 以强有力的方式消除这一限制 够礼貌的了.

演示文稿

• 基本Demo(网络GL)
• 基本演示( WebGPU)

设置

import { settings } from '@pixi/tilemap';

火箭榴弹发射器

相较于香草 rpgmaker, Canvas倒置速度为5x慢. WebGL版本更快,不使用额外的纹理.

RPGMaker 演示

• WebGL 演示
  • 60% 比例
  • 140% 比例
• WebGL 丽蒂娜·德莫
  • 60% 比例
  • 140% 比例
• WebGPU 演示

更多教学

• Alan01252 教学