Introduction to PixiJs demo

We’ll take a quick look at Pixi and introduce some of its core modules, which will be updated later. All subsequent demos will use Typescript as the development language

Produce a quick visual demo

Create a canvas, add a Sprite, and keep the Sprite moving

• Initialize the size of the canvas

Determine the size of the canvas,demo inherits Application, so just call

super({
    width?,
    height?,
    backgroudColor?
    ...
})
Copy the code

Of course option can be {},Application has a default width and height (800*600), the most critical step is document.body.append(this.view) to create the canvas and add it to the HTML

• Create a Sprite

Pixi.sprite.from (spritePath) There are many ways to create a Sprite, but here’s one of them.

• Add to stage

stage.addChild(displayObj)

• Let the sprites move

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; }); }}Copy the code

knowledge

Methods to create Sprite

• let sprite = new PIXI.Sprite(PIXI.Texture.from(imgPath))
• let sprite = PIXI.Sprite.from(imgPath)
• Multiple ticker scenarios,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()
Copy the code

• other

Pixi core module

Pixi is a modular rendering engine. The display, update, and generated reality objects in PIXI are modular components that depend on piXI. In addition, Pixi provides a modulary-based customization Tool called PixiJs Customize Tool

The major components

This is just a brief introduction, with a general impression of the pixi modules as a whole, followed by a detailed analysis of each module

component	describe
sdfs	sdfs
Renderer @pixi/core	At the heart of pixi is this Renderer, which is responsible for displaying the scene diagram and rendering it on the screen, based on WebGL
Container @pixi/display	Display object, the main real object for creating scene diagrams, Graphyics, text are based on container<br
Loader @pixi/loader	Loader, asynchronous, used to clip images, audio and other resources
Ticker @pixi/ticker	Ticker provides periodic clock-based callback, and the update logic in the project is typically on a per-clock basis Cycles (per frame) are responded to and multiple tickers can exist at the same time
Application @pixi/app	Application is a simple wrapper that encapsulates Loader, Ticker, Renderer, etc The development of
Interaction @pixi/interaction	Event interaction encapsulation, including touch, click related events,
Accessibility @pixi/accessibility	Tools for achieving keyboard and screen reader accessibility