【亲测免费】 PIXI-Miniprogram 项目使用教程

1. 项目的目录结构及介绍

pixi-miniprogram/
├── libs/
│   ├── pixi.js
│   └── pixi-spine.js
├── src/
│   ├── main.js
│   └── config.js
├── package.json
├── README.md
└── .gitignore

• libs/: 包含项目依赖的PIXI引擎及相关库文件。
  • pixi.js: PIXI引擎的核心文件。
  • pixi-spine.js: 用于支持Spine动画的库文件。
• src/: 项目的源代码目录。
  • main.js: 项目的启动文件。
  • config.js: 项目的配置文件。
• package.json: 项目的依赖管理文件。
• README.md: 项目的说明文档。
• .gitignore: Git版本控制忽略文件配置。

2. 项目的启动文件介绍

src/main.js 是项目的启动文件，负责初始化PIXI引擎并加载必要的资源。以下是启动文件的主要内容：

import * as PIXI from '../libs/pixi.js';
import { Spine } from '../libs/pixi-spine';
import config from './config.js';

const app = new PIXI.Application({
    width: config.stageWidth,
    height: config.stageHeight,
    backgroundColor: 0x1099bb,
});

document.body.appendChild(app.view);

// 加载资源
app.loader
    .add('spineboypro', 'assets/spineboypro.json')
    .load((loader, resources) => {
        const spineBoyPro = new Spine(resources.spineboypro.spineData);
        spineBoyPro.x = app.screen.width / 2;
        spineBoyPro.y = 1200;
        spineBoyPro.scale.set(0.5);
        spineBoyPro.state.setAnimation(0, "hoverboard", true);
        app.stage.addChild(spineBoyPro);
    });

3. 项目的配置文件介绍

src/config.js 是项目的配置文件，包含项目运行所需的各种配置参数。以下是配置文件的主要内容：

export default {
    stageWidth: 800,
    stageHeight: 600,
    backgroundColor: 0x1099bb,
    assetsPath: 'assets/',
};

• stageWidth: 舞台宽度。
• stageHeight: 舞台高度。
• backgroundColor: 背景颜色。
• assetsPath: 资源文件路径。

以上是 PIXI-Miniprogram 项目的基本使用教程，涵盖了项目的目录结构、启动文件和配置文件的介绍。希望对您有所帮助！