简介
SquareJS 是一款使用 TypeScript 编写的开源游戏引擎，它基于 pixi.js 构建，并提供了一系列的工具和接口，帮助开发者创建 2D 游戏。
其中，squarejs-pixi 是 SquareJS 的一个 npm 包，它封装了 pixi.js 中的核心功能，同时提供了更好的扩展能力和抽象层，使得开发者在创建游戏时更加方便和高效。
在本篇文章中，我们将介绍如何使用 squarejs-pixi 包来开发一个简单的 2D 游戏，并讲解如何使用部分 API。
安装
首先，我们需要安装 squarejs-pixi 包：
npm install squarejs-pixi
这样就可以在项目中使用 SquareJS 并创建游戏了。
创建游戏
我们接下来就可以使用 SquareJS 来创建一个简单的 2D 游戏了。
-- -------------------- ---- -------
------ - ----- ------ - ---- ----------------
----- ------ ------- ---- -
------------- -
--------------- ----
-
-------- -
-- ---------
----- ------ - --- --------
------ ------------------
------- -------------------
---
-----------------------
-
---------- -
-- -------
-
---------- -
-- ----------
-
----------- -
-- --------
-
-
----- ---- - --- ---------
-------------在这个例子中，我们创建了一个名为 MyGame 的类，继承自 Game 类。Game 类是 SquareJS 中的核心类，用于管理整个游戏的生命周期，包括游戏初始化、游戏更新、窗口大小改变以及游戏销毁等。
在 MyGame 类中，我们通过覆盖 Game 类中的一些方法来实现自己的逻辑。在 onInit 方法中，我们创建了一个 Screen 类实例，并设置为游戏的当前屏幕。
在创建完 MyGame 实例后，我们通过调用 start 方法来启动游戏。
游戏对象
游戏中最基本的元素就是游戏对象，它可以是玩家、敌人、子弹等。SquareJS 提供了 GameObject 类，它是所有游戏对象的基类，开发者可以继承它来创建自定义的游戏对象。
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
----- -------- ------- ---------- -
------------- -
--------
-
-------- -
-- -----------
-
---------- -
-- -------
-
----------- -
-- ----------
-
-在这个例子中，我们创建了一个名为 MyObject 的类，它继承自 GameObject 类，并覆盖了三个方法：onInit、onUpdate 和 onDestroy。在这些方法中，我们可以编写自定义逻辑。
游戏场景
游戏中通常会包含多个场景，例如标题场景、游戏场景、结束场景等。SquareJS 提供了 Scene 类，它是所有游戏场景的基类，开发者可以继承它来创建自定义的场景。
-- -------------------- ---- -------
------ - ----- - ---- ----------------
----- ------- ------- ----- -
------------- -
--------
-
-------- -
-- ---------
-
---------- -
-- -------
-
----------- -
-- --------
-
-在这个例子中，我们创建了一个名为 MyScene 的类，它继承自 Scene 类，并覆盖了三个方法：onInit、onUpdate 和 onDestroy。在这些方法中，我们可以编写自定义逻辑。
示例代码
下面是一个完整的示例代码，实现了一个简单的飞机射击游戏。在游戏中，玩家需要控制飞机打败敌人，当敌人被打败时，玩家可以得到一定的分数。
-- -------------------- ---- -------
------ - ----- ------ ------- ------------- ---------- - ---- ----------------
----- ------- ------- ----- -
------- ------ ------ - -- -- ----
------------- -
--------
-
-------- -
-- ----
----- -- - --- --------------
-------- ---------
---
------------------
-- ------
----- --------- - --- ------------
----- ------- ---
------ -
--------- ---
----- --------
--
-- ---
-- ---
---
-------------------------
-- ------
----- ------ - --- --------------
-------- -------------
-- ----------------- - --
-- ------------------ - ----
---
----------------------
-- ----
----- ----- - --- --------------
-------- ------------
-- ----------------- - --
-- ----
---
---------------------
-- ----
----------------- -- -- -
-- -------
----- -- - ---------------------------------------
--------------------------- - -- - --- ----------
-- ------------------------------------- -
----- ------ - --- --------------
-------- -------------
-- ---------
-- -------- - ---
---
----------------------
-
-- -------
-- -------- - ------------------- -
-------------------------- ------- - ---
- ---- -
----------------------------------- - -------------- -----
-
-- -------------- - ----- -
----- ------ - --- --------------
-------- -------------
-- --------
-- ------- - ---
---
----------------------
-
-- ----
----- ------- - ------------------ -- ---------------
--- ------ --- -- -------- -
-- ---------------- --- ------------- -
-- -------------------------- -
----------------------
---------- -- ---
------------------------- ----------------
-
- ---- -- ---------------- --- ------------ -
-- -------------------------- -
----------------------
------------
-
- ---- -- ------ - ----- -
----------------------
-
-
---
-
-
----- ------ ------- ---- -
------------- -
--------------- ----
-
-------- -
-- -----
----- ------ - --- --------
------ ------------------
------- -------------------
---
-----------------------
-------------------- -----------
-
---------- -
-- ----
-
---------- -
-- ----------
-
----------- -
-- --------
-
-
----- ---- - --- ---------
-------------在这个示例代码中，我们创建了一个名为 MyScene 的场景，继承自 Scene 类。在场景的初始化过程中，我们创建了玩家飞机、敌人、背景和分数文本，并注册了 update 事件。
在每帧的 update 事件中，我们更新玩家和敌人的位置，并检测它们之间的碰撞。当玩家的子弹打中敌人时，玩家可以得到一定的分数；当玩家与敌人碰撞时，游戏结束。
结语
本文介绍了如何使用 squarejs-pixi 包来创建一个简单的 2D 游戏，包括游戏对象、游戏场景以及一些常用 API 的使用。希望本文可以对开发者们有所帮助，并能够在 2D 游戏开发中发挥作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600670a68ccae46eb111f1fc