PIXIJS 文档说明

本文介绍了PIXI.js的基本概念和使用方法,包括安装、引入和创建PIXI应用。文章详细讲解了舞台(stage)、容器(container)、加载器(loader)、精灵(sprite)和纹理(texture)等核心概念,并提供了简单的代码示例。此外,还提到了图形(graphics)、文本(text)以及精灵的zIndex属性和交互事件。最后,分享了几个使用PIXI.js实现的示例链接。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

PIXI.js

1.安装:

npm install pixi.js

2.引入:

import * as PIXI from 'pixi.js'

3.使用:
几个基本概念:
PIXI应用
首先我们在使用PIXI.js时需要先创建一个PIXI应用,也就是生成一个实例,可以传入相应的参数设置, 此时会生成一个canvas元素,这个元素就是app的view属性,然后需要将创建出来的元素添加到页面中

let app = new PIXI.Application({
   width: 256, height: 256})
document.body.appendChild(app.view)

舞台/stage
在PIXI中舞台只有一个,即app.stage。舞台的本质是一个容器,所有容器有的属性舞台也有,舞台继承 自容器。
舞台是所有需要被显示的内容的根容器,所有要被显示的对象最后都是要添加到舞台里去的。

app.stage.addChild(diaplayObject)

容器/container
container是用来装载多个显示对象的,使用PIXI.Container()方法来创建,一个舞台(stage)中可以包 含多个container。一般是在需要展示复杂的画面时,可以设置多个容器,将精灵分别放到对应的容器 里,再把容器放到舞台里去,这样就方便后续的操作。如果需要多场景切换时,每个场景就可以是一个 容器,每个场景都有自己的精灵,方便控制和管理。

const container = new PIXI.Container() 
container.addChild(sprite)

加载器/loader
如果页面中需要加载大量的图片时,可能需要耗费很长的时间,所以需要一次性预加载所有的图片,同 时可以跟踪进度

const loader = new PIXI.Loader() 
loader.add('bunny', 'data/bunny.png')      
	  .add('spaceship', 'assets/spritesheet.json')
loader.load((loader, resources) => {
   
    // do something 
})
loader.onProgress.add(() => {
   }) 
loader.onError.add(() => {
   }) 
loader.onLoad.add(() => {
   }) 
loader.onComplete.add(() => {
   })

精灵/sprite
精灵是可以放在容器中的特殊图像对象,可用代码控制图像的基础,比如位置,大小等,也可以通过控 制其他属性来进行交互和动画

const sprite = PIXI.Sprite<
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值