平滑视图区域转换

您可以在此JSFiddle中看到：http://jsfiddle.net/EychPixels/pABPv/1/，当您使用箭头键移动角色直到视图区域随之移动时，角色似乎移回1瓦然后移出1瓦。有没有一种方法可以解决这个问题，就像用角色动画化视图区域一样？对于使用jQuery使用.animate的角色动画，是否可以对视图区域做同样的事情？如果是这样，我可以看到使用我的代码的这个例子吗？平滑视图区域转换

如果您需要更多的细节来回答这个问题，请问。

来源

2013-03-03 Anzwur

没有显示字符图像。 – 2013-03-03 01:27:36

我会很快修复的 – Anzwur 2013-03-03 01:28:02

@ jimjimmy1995该角色已被修复http://jsfiddle.net/EychPixels/pABPv/1/ – Anzwur 2013-03-03 01:30:35

对于您当前的代码，如果视口应该动画化，则阻力最小的路径（即需要更改较少代码的路径）将在动画期间将now传递给绘图函数。然后，您可以按照@ jimjimmy1995的建议（撤消player.x更改并执行相反的world.x更改）。

This fiddle提供了一个粗略的例子（仅适用于“down”键）。详细信息：

确定视是否会在动画过程中移动：

var move = Math.round(playerY+1) - Math.floor(0.5 * vHeight) > vY;

传递now功能draw（仅当视口将移动）：

 step: function(now) { 
      playerY = now; 
      draw(move ? now-start : 0); 
     }

在draw中调整视口和玩家位置：

function draw(now) { 
    if (!now) 
     now = 0; 
    ... 
      theY = (y-now) * 32; 
    ... 
    context.fillRect((playerX-vX)*32, (playerY-vY-now)*32, 32, 32);

绘制一个“额外”瓷砖，以补偿空白（在示例中未实现）;
当动画结束时，再次绘制，now == 0（在示例中未实现）。

仍然有一些小故障，但应作为未来改进的基础。

来源

2013-03-03 02:02:46 mgibsonbr

平滑视图区域转换

回答

相关问题