Question

我正在从上到下制作一条无尽的直道，并使用单个bitmapData，我在多个瓷砖中使用它。通过使用计算其比例值应该是什么的公式，这些图块从上到下正确排列（让我们说屏幕的顶部到底部）。根据其位置计算第一个图块的比例值，然后根据其先前图块计算所有其他图块。这很有效，除了当所有循环都可以看到底部瓷砖（第一个）的宽度略大于它应该（大约5个像素太大）。当第一个瓷砖离开屏幕时，它会被发送回屏幕顶部，而下一个瓷砖将扮演顶部瓷砖的角色......但是由于轻微的宽度放大，当转换发生时，道路的尺寸略有跳跃。这意味着我的公式在计算第一个图块的比例时很接近但略有错误。公式有什么问题，应该纠正什么？

var speedFactor:Number = speed / _length;//size of screen top to bottom 
var bitmap:RoadTile = tiles[0]; 
bitmap.y += speedFactor * bitmap.y; //scaled speed      
var distance:Number = _length - bitmap.y;//calculate position and determine scale           
if(distance < 0)
{
    distance = _length + Math.abs(distance);
}
else
{
    distance = bitmap.y;
}           
var scale:Number = (distance / _length);    
bitmap.scaleX = bitmap.scaleY = scale;  
//scale is calculated but is slightly wrong.

您可以在此处查看结果：http://angrybot.us/tests/road/

注意屏幕底部的道路宽度略有变化，然后在顶部瓷砖被移除并发送回开头时跳回到正常状态。我现在通过应用面具获得了更好的结果，但这真的只是一个黑客。通过根据屏幕底部需要的宽度调整顶部瓷砖的比例，我也得到了更好的结果。虽然还不完美。

我想我知道自己错过了什么，我将继续努力：在公式中添加图形的角度。这里，瓷砖侧面的角度为28°（发动机与不同侧角的瓷砖一起工作）。基本上需要将角度添加到公式中，以便当顶部瓷砖向下移动时，根据瓷砖宽度需要在屏幕底部的位置计算其新的比例（该宽度需要始终相同，因此不在道路显示中发生跳跃）

Answer 1

好的，最后得到了一个准确的结果：

因此，从梯形图形制成并从上到下对齐的瓷砖开始（比例从前一个瓷砖计算）。为了使所有内容无缝循环，您需要应用trig当然。首先计算或定义2个梯形宽度（长一个和短一个）。然后使用图块的高度（未应用比例）计算边的角度和所需的宽度（在屏幕底部的图块循环的宽度必须始终在该位置）（在我的情况下，我使用的是图形中间注册，但任何事情都可行）：

var base:Number = (upperWidth - lowerWidth) / 2;
var length:Number = textureData.height;         
targetAngle = Math.atan(base / length)//this is our angle                   
oppositeAngle = Math.PI / 2 - angle;//opposite angle            
var side:Number = (length / 2) / Math.tan(oppositeAngle);           
endTargetWidth = upperWidth - (side * 2)//this is the width that the top tile must always have at the bottom of the screen.

接下来在循环中我们为我们的顶部拼贴添加了一些速度（无论你想出什么系统但是拼贴都有一些提升）

var tilePos:Number = tile.y;//new position
var tileScale:Number = tile.scaleX;         
var targetPos:Number = (_length - tilePos) / tileScale;// where is the tile positioned according to the length and rescaled to 1? (bottom of screen)        
var sidetarget:Number = (textureData.height / 2) + targetPos;//(since I'm using middle registration)            
var side:Number = sidetarget / Math.tan(oppositeAngle);//that's it we get the extra length at scale 1
var projectedTileWidth:Number = lowerWidth + (side * 2);// this is the width of the tile at bottom of screen at scale 1
//we know the width the tile is gonna have (at scale 1) at bottom of screen
// and we know what width we need so let's divide and get our true correct scale value      
var scale:Number = endTargetWidth / projectedTileWidth
//now we apply that to our tile and the jumping issue is gone.

我没有展示如何对齐以下瓷砖但是它很简单，因为下一个瓷砖宽度需要是：图形宽度（upperWidth）*前一个瓷砖比例

无尽道路的精确比例公式

1 个答案: