我正在用 HTML5、JS 制作游戏。
在游戏中，由于我的 Sprite 在旋转，所以我通过圆形执行碰撞。
玩家持有不同的武器时会有不同的形状。
玩家的半径是 Sprite 宽度/高度的一半。
Sprite 的大小从 16x16 调整为 50x50 像素(50/16 = 3.125，所以大了 3.125 倍)
我的问题是:如何计算 Sprite 适合的最小圆形的半径？像这样:
普通 Sprite :http://imgur.com/wWS1nDy
红色 = 计算半径(如何？)，蓝色 = 我使用的半径( Sprite 宽度或高度/2):http://imgur.com/kytpRPz
(为了更好地查看图像，请在图像程序或放大的软件中打开它们。)
最佳答案
获得答案的几个步骤...
演示:http://jsfiddle.net/m1erickson/hvT63/
确定播放器像素的边界框(不包括透明像素)。
使用 .getImageData 获取图像的单个像素数据。
检查从左侧开始的每个垂直列并确定第一个玩家像素出现的位置。
从右侧开始检查每个垂直列并确定第一个玩家像素出现的位置。
检查从顶部开始的每个水平行并确定第一个玩家像素出现的位置。
检查从底部开始的每个水平行并确定第一个玩家像素出现的位置。
现在您有了上、左、下和右边界值。
确定边界框的半径(==对 Angular 线的一半):
var dx=right-left;
var dy=bottom-top;
var radius=Math.sqrt(dx*dx+dy*dy)/2;
因此您的包含圆具有计算出的半径。
示例代码:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:20px; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.translate(.5,.5);
var img=new Image();
img.crossOrigin="anonymous";
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sprite.png";
function start(){
var cw=canvas.width;
var ch=canvas.height;
ctx.drawImage(img,cw/2-img.width/2,ch/2-img.height/2);
var data=ctx.getImageData(0,0,cw,ch).data;
var leftX=getLeft(data,cw,ch);
var rightX=getRight(data,cw,ch);
var topY=getTop(data,cw,ch);
var bottomY=getBottom(data,cw,ch);
var w=rightX-leftX;
var h=bottomY-topY;
var cx=leftX+w/2;
var cy=topY+h/2;
var radius=Math.sqrt(w*w+h*h)/2;
ctx.beginPath();
ctx.arc(leftX+w/2,topY+h/2,radius,0,Math.PI*2);
ctx.closePath();
ctx.stroke();
ctx.strokeRect(leftX,topY,w,h);
}
function getLeft(data,width,height){
for(var x=0;x<width;x++)
for(var y=0;y<height;y++)
{
if(data[(width*y+x)*4+3]>0){ return(x); }
}
}
function getRight(data,width,height){
for(var x=width-1;x>=0;x--)
for(var y=height-1;y>=0;y--)
{
if(data[(width*y+x)*4+3]>0){ return(x); }
}
}
function getTop(data,width,height){
for(var y=0;y<height;y++)
for(var x=0;x<width;x++)
{
if(data[(width*y+x)*4+3]>0){ return(y); }
}
}
function getBottom(data,width,height){
for(var y=height-1;y>=0;y--)
for(var x=width-1;x>=0;x--)
{
if(data[(width*y+x)*4+3]>0){ return(y); }
}
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>1. Calc boundingbox of non-transparent pixels<br>2. Calc radius that contains that boundingbox</h4>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
关于javascript - 你如何计算 Sprite 适合的最小圆形的半径？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20786795/