tic-tiled 是一个基于 TypeScript 和 Pixi.js 的开源游戏引擎，专注于制作瓷砖地图类游戏。本文将介绍 npm 包 tic-tiled 的基本使用方法，包括安装、引用、初始化、数据结构、事件等方面。
安装
安装 tic-tiled 非常简单，只需要在命令行中输入以下命令：
npm install tic-tiled
注意，tic-tiled 依赖于 Pixi.js，因此还需要安装 Pixi.js：
npm install pixi.js
引用
安装完成后，就可以在项目中引用 tic-tiled 了。在 TypeScript 中，可以这样引用：
import { Game } from 'tic-tiled';如果使用 JavaScript，可以这样引用：
const TicTiled = require('tic-tiled');
const Game = TicTiled.Game;初始化
在创建游戏实例之前，需要先初始化 tic-tiled 和 Pixi.js。在 HTML 文件中添加以下代码：
<script src="./node_modules/pixi.js/dist/pixi.min.js"></script> <script src="./node_modules/tic-tiled/dist/tic-tiled.min.js"></script>
这样就可以初始化 tic-tiled 了。在 TypeScript 中，可以这样创建游戏实例：
const options = {
width: 640,
height: 480,
tileWidth: 32,
tileHeight: 32,
};
const game = new Game('canvas', options);其中，'canvas' 是一个 HTML Canvas 标签的 ID，用来渲染游戏场景。options 是一个对象，包含游戏场景的宽度、高度以及每个瓷砖的宽度和高度。这些参数都可以根据实际情况进行调整。
数据结构
tic-tiled 中用到的基本数据结构包括 Tileset、Tile、Layer、Map 等。其中，Tileset 是一个图块集合，包含多个 Tile。Tile 是一个瓷砖，由 Tileset 中的一个图块裁剪而来。Layer 是一个图层，包含多个 Tile。Map 是一个地图，包含多个 Layer。
在 tic-tiled 中，可以使用 Tiled Map Editor 来创建地图文件。地图文件包含地图的基本信息、Tileset、Tile、Layer 等内容。在 tic-tiled 中，可以使用 MapLoader 类加载地图文件。例如：
import { MapLoader } from 'tic-tiled';
const mapLoader = new MapLoader();
mapLoader.load('map.json', (maps) => {
const map = maps[0];
console.log(map);
});这样就可以加载地图文件，并打印出地图的数据结构了。
事件
tic-tiled 中提供的事件包括鼠标事件、键盘事件、碰撞事件等。在 tic-tiled 中，可以使用 EventEmitter 类来处理事件。例如：
-- -------------------- ---- ------- ------ - ------------ - ---- ------------ ----- ------------ - --- --------------- ------------------------ ------- -- - ------------------- --- -------------------------- - -- ---- -- --- ---
这里创建了一个事件监听器，并监听了 click 事件。当事件触发时，会打印出事件对象。
示例代码
下面是一个完整的 tic-tiled 示例代码：
-- -------------------- ---- -------
------ - ----- ---------- ------------ - ---- ------------
----- ------- - -
------ ----
------- ----
---------- ---
----------- ---
--
----- ---- - --- -------------- ---------
----- --------- - --- ------------
-------------------------- ------ -- -
----- --- - --------
----- ------ - -----------
----- ------------ - --- ---------------
------------------------ ------- -- -
-------------------
---
---------------------- -- -
----- --------- - --- -----------------
----- ----- - ------------
-------------------- -- -
----- ------- - ------------------------------
----- ------- - ----------------------------
----- ------ - --- ---------------------
-------- - ------ - --------------
-------- - ------ - ---------------
---------------------------
------------------ - -----
--------------------------------- ------- -- -
-------------------------- - -- --------- -- -------- ---
---
---
-------------------------------
---
---这个代码加载一个名为 map.json 的地图文件，并在 canvas 标签上渲染出来。当用户点击地图上的某个瓷砖时，会触发 click 事件，并打印出用户点击的坐标。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005664b81e8991b448e2692