[英]How can I achieve a wraparound effect in an arcade-like game?
我正在开发Spacewar游戏的克隆版! 。 在游戏中,船只可以行驶到地图的边缘并环绕到另一侧,有时会分成两半,在屏幕的每一侧都是一半(当船只进入弯角时,它们会分成四部分)。 您可以在这里玩游戏。
现在,我正在使用模数运算符将div
包裹在屏幕周围,但是它并没有像我希望的那样将块分割成两半。 有什么办法可以在JavaScript或jQuery中实现?
这取决于您如何渲染飞船。 我假设您正在使用精灵。 让:
xs,ys
是目标屏幕分辨率 txs,tys
是精灵分辨率 x0,y0
是精灵位置(左上角) x
轴向右移动, y
轴向下移动, (0,0)
是展位精灵和屏幕的左上角 我知道两种基本方法:
直接在精灵渲染中包装坐标。
这是最简单的方法,但是您需要访问精灵渲染。 找到它们应该如下所示的渲染循环:
for (y=y0,ty=0;ty<tys;ty++,y++) for (x=x0,tx=0;tx<txs;tx++,x++) { color=sprite[ty][tx]; if (color!=color_transparent) screen[y][x]=color; }
因此,只需在其中添加x,y
包装即可:
while (x0>=xs) x0-=xs; // just normalize start position while (x0< 0) x0+=xs; while (y0>=ys) y0-=ys; while (y0< 0) y0+=ys; for (y=y0,ty=0;ty<tys;ty++,y++) { if (y>=ys) y=0; // wrap y for (x=x0,tx=0;tx<txs;tx++,x++) { if (x>=xs) x=0; // wrap x color=sprite[ty][tx]; if (color!=color_transparent) screen[y][x]=color; } }
粗略地说,渲染循环中的这些条件会使事情放慢一点。 因此,您可以通过将代码复制到4个实例(每个实例均基于其自己的坐标集)进行优化,以便if
不再位于循环内。
分割包裹的精灵
这种方法要快一些( if
在渲染循环中为s,则不需要额外的操作),并且也不需要篡改渲染代码。 这个想法是照常渲染非包装的精灵,如果检测到包装,则在包装的位置渲染2/4
精灵副本
因此,在代码中将如下所示:
// just normalize start position while (x0>=xs) x0-=xs; while (x0< 0) x0+=xs; while (y0>=ys) y0-=ys; while (y0< 0) y0+=ys; render_sprite(x0,y0,sprite); // compute copies coordinates x1=x0; if (x1+txs>xs) x1-=xs; y1=y0; if (y1+tys>ys) y1-=ys; // render copies if (x0!=x1) render_sprite(x1,y0,sprite); if (y0!=y1) render_sprite(x0,y1,sprite); if ((x0!=x1)&&(y0!=y1)) render_sprite(x1,y1,sprite);
顺便说一句。 如果您正在考虑使用此方法,则可以在几何GLSL着色器中完成。
您提供的有趣链接。 他们已经实现了完整的CPU仿真,并运行了以汇编语言编写的游戏。
改进模数
无论如何,如果您使用画布来渲染精灵(图像),最简单的方法是对模进行修改以处理负值。
使用负值时,常规模会崩溃。
x = 100 % 200; // 100
x = 300 % 200; // 100
x = -100 % 200; // -100 the wrong sign should be 100
x = -50 % 200; // -50 wrong sign wrong direction should be 150
您需要模以始终在正确的方向上返回正值。 要处理负数,请对模进行两次模运算,第一个将在所需范围内,但要在+/-范围内。 然后通过增加范围使负数为正。 然后,只需再次做模。
var range = 200;
var x = 150;
x = ((x % range) + range) % range; // result 150
x = -50;
x = ((x % range) + range) % range; // result 150 correct.
简单包装
使用上述模算法,检查边界并根据需要渲染子画面很简单。
// assuming ctx is canvas context 2D
// canvas is the canvas.
// img is a HTMLImageElement
var canW = canvas.width; // the canvas size
var canH = canvas.height;
// draw a sprite that is wrapped around the edges of the canvas
function drawWrappedSprite(img,x,y){
x1 = ((x % canW) + canW) % canW; // wrap around correcting for negative values
y1 = ((y % canH) + canH) % canH;
x2 = x1 + img.width; // get right and bottom
y2 = y1 + img.height;
ctx.drawImage(img, x1, y1); // draw first copy
if(x2 > canW){ // check if touching right side
ctx.drawImage(img, x1 - canW, y1); // draw left copy
if(y2 > canH){ // check if touching bottom
ctx.drawImage(img, x1 - canW, y1 - canH); // draw top copy
}
}
if(y2 > canH){
ctx.drawImage(img, x1 , y1 - canH); // draw top copy
}
}
包装旋转的精灵
由于游戏具有旋转的子画面,因此上述功能将不起作用,因为旋转会更改子画面的大小。 要处理旋转的精灵,您需要检查其最大大小。 这是横跨精灵的对角线的长度,可通过sqrt(width * width + height * height)
找到sqrt(width * width + height * height)
假设您想让精灵围绕其中心旋转,您可以通过将x,y中心位置的对角线减去一半并将其相加来找到精灵的最大范围(顶部,底部,左侧和右侧)。 作为第一个函数,对模进行模运算并根据需要绘制精灵。
在某些情况下,即使看不见精灵,也会在相反的一侧绘制精灵。 如果要绘制大量精灵(100+),则可能需要获取确切的范围而不是最大范围,但是您必须转换精灵的至少一个角以获取水平和垂直范围。 然后,只需使用这些值即可,而不要像函数中那样进行diag
。
// assuming ctx is canvas context 2D
// canvas is the canvas.
// img is a HTMLImageElement
var canW = canvas.width; // the canvas size
var canH = canvas.height;
// draws sprite rotated about its center by r
function drawWrappedRotatedSprite(img,x,y,r){ // x,y center pos, r rotation in radians
var diag = Math.sqrt(img.width * img.width + img.height * img.height); // get diagonal size
diag /= 2; // half the diagonal
x1 = (((x - diag) % canW) + canW) % canW; // get left extent position and
y1 = (((y - diag) % canH) + canH) % canH; // wrap around correcting for negative values
var w = - img.width / 2; // get image width height
var h = - img.height / 2 // offset in rotated space
x2 = x1 + diag * 2; // get right and bottom max extent
y2 = y1 + diag * 2;
ctx.setTransform(1,0,0,1,x1 + diag, y1 + diag); // set origin
ctx.rotate(r); // set rotation
ctx.drawImage(img, w, h); // draw image rotated around its center
if(x2 > canW){ // check if touching right side
ctx.setTransform(1,0,0,1,x1 + diag - canW, y1 + diag); // set origin
ctx.rotate(r); // set rotation
ctx.drawImage(img,w,h); // draw image rotated around its center
if(y2 > canH){ // check if touching bottom
ctx.setTransform(1,0,0,1,x1 + diag - canW, y1 + diag - canH); // set origin
ctx.rotate(r); // set rotation
ctx.drawImage(img,w,h); // draw image rotated around its center
}
}
if(y2 > canH){
ctx.setTransform(1,0,0,1,x1 + diag, y1 + diag - canH); // set origin
ctx.rotate(r); // set rotation
ctx.drawImage(img,w,h); // draw top image rotated around its center
}
ctx.setTransform(1,0,0,1,0,0); // reset the transform (should only do this after all sprites
// using this function have been drawn
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.