使用 Pixi.js 的里程表动画

Posted

技术标签:

【中文标题】使用 Pixi.js 的里程表动画【英文标题】:Odometer animation using Pixi.js 【发布时间】:2016-06-07 13:10:44 【问题描述】:

几天前,我开始开发一个用 htmljavascript 编写的动画里程表,我打算在我正在开发的 rpg 游戏中使用它。另外,我一直在使用 Pixi.js 来帮助我制作动画。以下 2 张图片是该程序的主要组成部分:

里程表

一行数字:

这是我迄今为止所取得的成就:

基本上,前两个按钮会根据实际 HP 和 PP 文本框中包含的实际 HP 和 PP 值立即更新(没有动画)里程表图像上的数字。如果按下“设置新值”,它将计算实际值和新值之间的差异,将其转换为像素,然后在里程表上执行所需的更改。所有更改均由controller() 方法执行。在这个方法中,当 HP 和 PP 差值都为零时,会有一个 while 循环中断。

我已经成功地对controller() 方法进行了正确编程,因此里程表中的所有数字都按预期进行了更新。但是,我目前在实现动画方面遇到了一些困难。由于我一直在使用Pixi.js,因此我在 HTML 代码中添加了以下方法以创建动画的动作:

function update() 
  renderer.render(container);

  window.requestAnimationFrame(update);

window.requestAnimationFrame(update); //called after the method definition

容器定义如下(我也在Odometer和HPPP的构造类中使用了PIXI.extras.TilingSprite.call()):

  function init() 
    container = new PIXI.Container();
    renderer = PIXI.autoDetectRenderer(224, 219, view:document.getElementById("odometer-canvas"));
    odometer = new Odometer();
    container.addChild(odometer);
    hph = new HPPP(96, 85, 0, 0); //HP - Hundred digit (left)
    container.addChild(hph);
    hpt = new HPPP(128, 85, 0, 0);//HP - Ten digit (middle)
    container.addChild(hpt);
    hpu = new HPPP(160, 85, 0, 0); //HP - Unit digit (right)
    container.addChild(hpu);
    pph = new HPPP(96, 140, 0, 0);//PP - Hundred digit (left)
    container.addChild(pph);
    ppt = new HPPP(128, 140, 0, 0); //PP - Ten digit (middle)
    container.addChild(ppt);
    ppu = new HPPP(160, 140, 0, 0); //PP - Unit digit (right)
    container.addChild(ppu);
  

到目前为止,我经历了 2 个场景:第一个场景(onClick=controller(),用于“设置新值”按钮),如果代码在没有修改的情况下执行,程序将运行并且里程表数字将立即更新,这意味着不会有动画。

但是,如果在update() 方法的开头添加controller() 方法,数字将非常快速地动画,但不会遵守由差值定义的限制(这意味着它将无限期地动画从 000 到 999)。

我对 HTML 和 javascript 开发仍然很陌生,我什至不知道 Pixi.js 是否是这方面的最佳选择。无论如何,是否可以为这个里程表执行流畅且受控的动画?

由于我没有从我的代码中发布很多细节,我将在这里提供我的项目的源代码(注:它可以使用 node.js 提示符执行): http://www.mediafire.com/download/gfvpajsk7ft1gcd/parallax_odometer.rar

【问题讨论】:

我编辑了要嵌入的图像(以防止人们点击离开)如果您认为它太杂乱,请随意撤消(我现在已经 50/50 完成了) 【参考方案1】:

几天前我设法找到了解决此问题的方法。基本上,我在控制方法中弄乱了一些变量(变量值对于 windows.requestAnimationFrame(update) 上的每次迭代都是相同的),并且我还使用了一个 while 循环进行计算,这冻结了窗口选项卡.

不管怎样,我会在清理整理之后上传我的源代码和更正的解决方案。

【讨论】:

很高兴你知道了。有时搞清楚动画可能很困难。

以上是关于使用 Pixi.js 的里程表动画的主要内容,如果未能解决你的问题,请参考以下文章

基于 pixi.js 开发H5游戏黄金矿工

基于 pixi.js 开发H5游戏黄金矿工

用 pixi.js 画一个矩形

Pixi.js 中的自定义字体

Ionic 整合 pixi.js

Typescript + Require.js + PIXI 6 - 导入附加到窗口但在主范围内未定义