pixi.js淘宝小程序快速上手指南

最新推荐文章于 2024-04-18 09:42:29 发布

Hoitsuhan

最新推荐文章于 2024-04-18 09:42:29 发布

阅读量1.6k

点赞数 1

分类专栏：小程序 pixi.js 文章标签： typescript javascript vue.js 小程序

本文链接：https://blog.csdn.net/Hoitsuhan/article/details/108548788

版权

Pixi.JS淘宝小程序快速上手指南

1.Pixi.JS基本介绍

2.新建一个H5 pixi项目

2.1 导入pixi.js的包

2.2 在dom中写一个div，之后pixi.js会在它后面注入

2.3 创建pixi.js应用

2.4 PixiApplication.ts

3.2 app.json 里添加 enableSkia 配置

3.3 往页面axml里面添加canvas，并添加事件把手

3.4 使用 Pixi 接口

3.5 移植pixi

4.总结

1.Pixi.JS基本介绍

Pixi是一个超快的2D渲染引擎。这意味着什么呢？这意味着它会帮助你用JavaScript或者其他HTML5技术来显示媒体，创建动画或管理交互式图像，从而制作一个游戏或应用。它拥有语义化的，简洁的API接口并且加入了一些非常有用的特性。比如支持纹理贴图集和为精灵（交互式图像）提供了一个简单的动画系统。它也提供了一个完备的场景图，你可以在精灵图层里面创建另一个精灵，当然也可以让精灵响应你的鼠标或触摸事件。最重要的的是，Pixi没有妨碍你的编程方式，你可以自己选择使用多少它的功能，你可以遵循你自己的编码风格，或让Pixi与其他有用的框架无缝集成。

——pixi官网

PixiJS官网

中文文档

中文教程

2.新建一个H5 pixi项目

淘宝小程序官方API不支持实时预览pixijs，所以我们要新建一个h5的项目，完成后移植到淘宝小程序。

2.1 导入pixi.js的包

npm install pixi.js

2.2 在dom中写一个div，之后pixi.js会在它后面注入

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <title></title>
  </head>
  <body>
    <div id="app" class="index-page"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2.3 创建pixi.js应用

import PIXI from './class/PIXI'
import PixiApp from './class/PixiApplication';

const app = new PIXI.Application({
  width: 750,
  height: 1247,
  resolution: 0.5,
  transparent: true
});

const dom = window.document.getElementById('app');

if (dom) {
  dom.appendChild(app.view);
  const pixiapp = new PixiApp(app);
}

这里是封装了一个PixiApplication，代码都写在PixiApplication.ts里面了。然后把创建好的节点插入到dom里面。

2.4 PixiApplication.ts

import PIXI from "./PIXI";

export default class PixiApplication {
  public app: PIXI.Application;

  constructor(application: PIXI.Application) {
    this.app = application;
    const { app } = this;
    this.init();
  }

  public init() {
  // 这里写初始化代码
  }
}

2.5 创建精灵(Sprite)

什么是精灵(Sprite)？精灵就是pixi中会动的动画元素，创建精灵需要加载纹理(Texture)，纹理就是用来生成精灵的图片。这里我把每个精灵封装成一个类了。用的时候直接调用。精灵有许多属性，具体可以参照官方API文档。

import PIXI from "./PIXI";

/**
 * 炸弹Sprite封装
 */

export default class Bomb extends PIXI.Sprite {
  public vy: number; // 下落速度
  public vx: number; // 横移速度

  constructor(points?: number, v