从0到1，轻松搭建PixiJs实战项目

2023-10-15 17:25:43





## PixiJs系列实战课程- 基础篇-02初始化

欢迎来到PixiJs系列实战课程！在本系列课程中，您将学习如何使用PixiJs引擎创建2D游戏和应用程序。

在本教程中，我们将介绍如何初始化一个新的PixiJs项目。

### 1. 前提条件

在开始之前，您需要确保已经安装了以下软件：

* Node.js
* npm
* VSCode
* Live-Server

### 2. 创建一个新的PixiJs项目

要创建一个新的PixiJs项目，请按照以下步骤操作：

1. 打开VSCode，然后创建一个新的文件夹。
2. 在该文件夹中，运行以下命令：

npm init -y


这将创建一个新的package.json文件。

3. 在package.json文件中，添加以下代码：

{
"name": "my-pixi-project",
"version": "1.0.0",
"description": "My PixiJS project",
"main": "index.js",
"scripts": {
"start": "live-server"
},
"dependencies": {
"pixi.js": "^6.0.0"
}
}


4. 运行以下命令安装依赖项：

npm install


5. 创建一个名为index.html的文件，并添加以下代码：

```

创建一个名为index.js的文件，并添加以下代码：

import * as PIXI from 'pixi.js';

// 创建一个PixiJS应用程序
const app = new PIXI.Application({
  width: 512,
  height: 512,
  backgroundColor: 0x000000,
});

// 将应用程序添加到DOM
document.body.appendChild(app.view);

// 创建一个精灵
const sprite = new PIXI.Sprite(PIXI.Texture.from('image.png'));

// 将精灵添加到场景中
app.stage.addChild(sprite);

// 渲染场景
app.renderer.render(app.stage);