PixiJs入门demo

通过一个简单的demo 对Pixi有个了解，然后介绍下Pixi的几个核心模块，后面陆续更新具体模块的知识，后续所有文章demo 均以Typescript 作为开发语言

快速产出一个可见效果demo

创建一个画布，添加一个精灵，并让精灵可以持续动起来

初始化画布的大小

确定画布的大小,demo是继承了Application,所以只要调用

super({
    width?,
    height?,
    backgroudColor?
    ...
})
复制代码

当然option 可以为{},Application有默认的宽度和高度（800*600），最关键的一步document.body.append(this.view)创建canvas 并添加到html中

创建一个精灵

创建一个精灵有很多中方法，这里先说一种，下面会详细介绍,PIXI.Sprite.from(spritePath)

添加到舞台

stage.addChild(displayObj)

让精灵动起来

class App extends PIXI.Application {
    bunnySprite = PIXI.Sprite.from('assets/bunny.png')
    constructor() {
                super({
                width: 800,
                height: 600,
                backgroundColor: 0x1099bb
            })
        this.bootStrap()
     }
    bootStrap() {
        document.body.append(this.view)
        this.renderComponent()
        this.startCustomTicker()
    }
    renderComponent() {
        this.stage.addChild(this.bunnySprite)
    }
    startCustomTicker() {
        let elapsed = 0.0;
        let time = Date.now()
        this.ticker.add((delta) => {
            elapsed += delta;
            this.bunnySprite.x = 100.0 + Math.cos(elapsed / 50.0) * 100.0;
        });
    }
}
复制代码

知识点

创建Sprite的方法

let sprite = new PIXI.Sprite(PIXI.Texture.from(imgPath))
let sprite = PIXI.Sprite.from(imgPath)
多个ticker的场景,this.ticker.add(() => {})

import * as PIXI from 'pixi.js'
class App extends PIXI.Application {
    bunnySprite = PIXI.Sprite.from('assets/bunny.png')
    bunnySprite2 = new PIXI.Sprite(PIXI.Texture.from('assets/bunny.png'))
    constructor() {
        super({
        width: 800,
        height: 600,
        backgroundColor: 0x1099bb
        })
        this.bootStrap()
        this.renderComponent()
        this.startCustomTicker()
    }
    bootStrap() {
        document.body.append(this.view)
    }
    renderComponent() {
        this.stage.addChild(this.bunnySprite)
        this.stage.addChild(this.bunnySprite2)
    }

    startCustomTicker() {
        let elapsed = 0.0;
        let time = Date.now()
        this.ticker.add((delta) => {
            elapsed += delta;
            this.bunnySprite.x = 100.0 + Math.cos(elapsed / 50.0) * 100.0;
        });
        this.bunnySprite2.y = 200
        this.ticker.add((delta) => {
        elapsed += delta;
        this.bunnySprite2.x = 100.0 + Math.cos(elapsed / 50.0) * 100.0;
        });
    }
}
(window as any).debugApp = new App()
复制代码

其他

pixi 核心模块

pixi 是一个模块化的渲染引擎，pixi中的展示，更新，生成的现实对象都是依赖于pixi的模块化组件。另外，pixi提供了基于模块化自定义工具 PixiJs Customize Tool

主要组件

这里只是简单的介绍，对pixi整体模块有个大概的印象，后面会展开对每个模块详细的分析

组件	描述
sdfs	sdfs
Renderer `@pixi/core`	pixi的核心就是这个renderer，它负责展示场景图，并将其绘制在屏幕上，基于webgl
Container `@pixi/display`	创建场景图的主要现实对象display object，我们常用的sprite， graphyics，text都是基于container<br
Loader `@pixi/loader`	加载器，异步的，用来夹在图片，音频等资源
Ticker `@pixi/ticker`	Ticker提供了基于时钟的定期的callback，项目的中更新逻辑一般情况下会在每个时钟周期（每一帧）作出响应，同一时间可以以欧多个ticker存在
Application `@pixi/app`	Application是一个简单的封装，把Loader, Ticker and Renderer等做一层封装，方便项目的开发
Interaction `@pixi/interaction`	事件交互的封装，包含了touch，click相关的事件，
Accessibility `@pixi/accessibility`	用于实现键盘和屏幕阅读器的可访问性的工具

快速产出一个可见效果demo

知识点

创建Sprite的方法

pixi 核心模块

主要组件

猜你喜欢