时间戳

首页 > 解决方案 > 如何在 pixi.js 中实现黄油平滑运动（没有任何滞后/尖峰）

2d-games - 如何在 pixi.js 中实现黄油平滑运动（没有任何滞后/尖峰）

问题描述

我正在尝试使用 pixi.js 实现黄油平滑运动。我想这应该是一件简单的事情，但似乎我无法获得它。

有时我会出现尖峰/微滞后。我已经使用最新的 Chrome 版本和最新的 PIXI js（实际上是 5.3.3）在我的 Ubuntu 20.04 开发机器上对其进行了测试。我的旧 Macbook pro（2013 年末）上的最新 Chrome 也发生了同样的事情

这是我正在使用的代码：

const app = new PIXI.Application({
  view: document.querySelector("#view"),
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundColor: 0x0,
  antialias: false
})
const ticker = PIXI.Ticker.system
const box = new PIXI.Graphics()
box.lineStyle(1, 0xff0000)
        .drawRect(
                100, 
                100, 
                100, 
                100)
app.stage.addChild(box)

let speed = 4
app.ticker.add( (dt) => {
  if (box.x < 0) {
    speed *= -1
    box.x += speed * dt
  }
  if (box.x > 800) {
    speed *= -1 
    box.x += speed * dt
  }
  box.x += speed * dt
})

这里是运行版本https://codepen.io/ferama/pen/LYZVBMx

我错过了什么？

标签： 2d-gamespixi.jsgame-loop

解决方案

您将永远无法消除 WebGL 动画中偶尔出现的卡顿。每个 Web 渲染框架（包括 PixiJS）的下面都是对 requestRenderFrame() 的调用。顾名思义，这是对浏览器重新绘制窗口的请求。你不会总是得到一个“确定，现在就做！”的反馈。从浏览器。有时浏览器很忙。有时，您的 javascript 垃圾收集器必须运行。有时蝴蝶在中国扇动翅膀……

关键是，完全控制帧速率的唯一方法是使用 DirectX 等技术，该技术允许完全控制实际渲染和显示硬件（主要是！）。WebGL 根本不适合这个。

推荐阅读