前几天我开始开发一个用
HTML和
javascript编写的动画里程表,我打算在我开发的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
容器定义如下所示(我也在里程表和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); //HP - Hundred digit (left)
container.addChild(hph);
hpt = new HPPP(128,0);//HP - Ten digit (middle)
container.addChild(hpt);
hpu = new HPPP(160,0); //HP - Unit digit (right)
container.addChild(hpu);
pph = new HPPP(96,140,0);//PP - Hundred digit (left)
container.addChild(pph);
ppt = new HPPP(128,0); //PP - Ten digit (middle)
container.addChild(ppt);
ppu = new HPPP(160,0); //PP - Unit digit (right)
container.addChild(ppu);
}
直到现在,我经历了两个场景：第一个(其中onClick = controller(),为“设置新值”按钮),如果代码执行没有修改,程序将运行,里程表编号将更新瞬间,这意味着不会有动画.
然而,如果在update()方法的开头添加了controller()方法,则数字将非常快速地生成动画,但是不会遵守由差异值定义的限制(这意味着它将无限期地从000到999).
我仍然非常新鲜的HTML和JavaScript开发,我甚至不知道Pixi.js将是最好的选择.无论如何,是否可以为这个里程表执行平滑和受控的动画？
由于我没有从我的代码发布许多细节,我将在这里提供我的项目的源代码(注意：可以使用node.js提示执行)：
http://www.mediafire.com/download/gfvpajsk7ft1gcd/parallax_odometer.rar
