高性能H5图形游戏渲染引擎PixiJS

大家好，欢迎来到IT知识分享网。

一、介绍：

PixiJS是一个开源的、基于web的渲染系统，它为游戏、数据可视化和其他图形密集型项目提供了极其快速的性能。

二、安装：

在https://github.com/pixijs/pixijs/releases选择版本下载

# 或方式1： <script src="https://pixijs.download/release/pixi.js"></script> # 或方式2： npm i pixi.js import * as PIXI from 'pixi.js'

三、加载精灵到舞台中央

// 初始化画布 const app = new PIXI.Application({ background: 0x, resizeTo: window, antialias: true, // default: false 反锯齿 transparent: false, // default: false 透明度 resolution: 1 // default: 1 分辨率 }) document.body.appendChild(app.view) // 加载精灵图片 const sprite = PIXI.Sprite.from("./images/sample.png") // 设置精灵大小 sprite.width = 100 sprite.height = 100 // 设置精灵对齐的中心点（设置为精灵中心） sprite.anchor.set(0.5) // 设置显示的坐标：舞台中央 sprite.x = app.view.width / 2 sprite.y = app.view.height / 2 // 添加到舞台 app.stage.addChild(sprite)

四、让精灵旋转起来

// 注意，在第三步的基础上，加上如下代码 app.ticker.add((delta)=>{ // 更新旋转的角度，因为旋转具有周期性360度为 // 一周，所以会不断的旋转起来 sprite.rotation += 0.1 * delta })

五、让精灵动起来

// 注意，在第三步的基础上，加上如下代码 // 注意，去掉第四步的内容 let elapsed = 0.0 // 用于累计delta值，这样cos才会有周期性 let defaultY = app.view.height / 2 // 方便计算 app.ticker.add((delta)=>{ elapsed += delta // y轴移动: 在0 ~ 2*defaultY 之间，因为 // Math.cos(elapsed/50)* defaultY 在 -defaultY 到 defaultY 之间 // 因为cos具有周期性，所以会在y轴周期性运动 // 其中50用于控制运动的变化快慢程度 sprite.y = defaultY + Math.cos(elapsed / 50) * defaultY })

六、绘制一个游戏方向盘

// 注意，这段代码完全独立，和前面的步骤无关 // 初始化画布 const app = new PIXI.Application({ background: 0x, resizeTo: window, antialias: true, // default: false 反锯齿 transparent: false, // default: false 透明度 resolution: 1 // default: 1 分辨率 }) <br/> document.body.appendChild(app.view) // 大圆: 摇杆区域 let baseRadius = 75 const base = new PIXI.Graphics() base.beginFill(0xBBBBBB); base.drawCircle(0, 0, baseRadius) base.endFill() // 小圆: 指示方向 const stick = new PIXI.Graphics() stick.beginFill(0x) // 小圆的半径为大圆的1/5，大家可以自行调整 stick.drawCircle(0, 0, baseRadius / 5) stick.endFill() stick.position.set(0, 0) // 两个圆都添加到容器中 joystick.addChild(base) joystick.addChild(stick) // 设置容器的位置: 放在左下角位置 let x = 25 + baseRadius - 10 let y = app.view.height - 200 + 25 + baseRadius joystick.position.set(x, y) // 设置透明度 joystick.alpha = 0.65 // 添加到舞台 app.stage.addChild(joystick)

七、收藏+关注，不迷路