SpriteKit 的 SKPhysicsBody 与多边形辅助工具
Posted
技术标签:
【中文标题】SpriteKit 的 SKPhysicsBody 与多边形辅助工具【英文标题】：SpriteKit's SKPhysicsBody with polygon helper tool 【发布时间】：2013-10-03 02:59:02 【问题描述】：我想知道是否有一个工具可以用于在 SpriteKit 中轻松生成复杂的物理体。我想要一个具有多边形形状的基于体积的物理体。 SpriteKit 允许使用该方法创建这样的主体：
+ (SKPhysicsBody *)bodyWithPolygonFromPath:(CGPathRef)path
不幸的是，手动生成此类路径是一项耗时的任务，并且在测试时可能会出现问题。有一个 SpriteHelper 应用程序可让您在易于使用的可视化编辑器中定义身体形状，但此应用程序无法导出可在此处使用的路径。它是为 cocos2d 制作的，它做了很多我不需要的东西，比如纹理打包等，我不能与 SpriteKit 一起使用。有谁知道一个解决方案，可以轻松定义 CGPath，甚至可以从具有 alpha 通道的 png 图像自动生成它们？虽然根据我的经验，自动生成功能需要优化，因为当纹理可能具有更复杂的形状时，身体形状应该尽可能简单。
【问题讨论】：
PhysicsEditor 将很快获得 Sprite Kit 更新。 @LearnCocos2D 我肯定会在添加 SpriteKit 支持时购买它。我希望可以选择以 Objective-c 代码格式（CGPath 声明或类似的东西）导出碰撞形状。导出到外部库读取的自定义文件格式不是我想要的。 代码导出是一个非常糟糕的主意，因为它很容易损坏，好的工具总是写入自定义文件格式（通常为 xml），然后提供加载器代码 我正在寻找的是解决这个问题的方法。我真的不需要导出任何其他东西，只需要描述物理形状的 CGPath。用于导出的 XML 格式是不错的选择，但前提是其中不会有任何额外数据。在运行时解析 XML 应该简单且快速处理。我不知道当前版本的 PhysicsEditor 是如何工作的，但我绝对不喜欢 SpriteHelper 中导出物理形状的唯一方法是生成包含有关纹理图集、精灵位置等所有信息的巨大文件。 见：adriancooney.ie/SKImport/Editor 【参考方案1】：我正在寻找完全相同的东西，因为我已经为此目的做了一个小型网络应用程序。
SKPhysicsBody Path Generator
作为示例中的操作：
2015-02-13 更新：脚本
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SpriteKit Tools - SKPhysicsBody Path Generator</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<style>
/* disable responsive */
.container
max-width: none;
width: 970px;
#sprite
background-color: #eee;
position: absolute;
#path
cursor: crosshair;
opacity: 0.5;
</style>
</head>
<body>
<div class="container">
<h1>SKPhysicsBody Path Generator</h1>
<p class="lead">Want to use [SKPhysicsBody bodyWithPolygonFromPath:path] easier way like me? Here with a small helper for easier path drawing, hope it help others too.</p>
<div class="row">
<div class="col-md-6">
<h5>Basic Instruction</h5>
<ol>
<li><small>Drag and drop the sprite image into drop zone.</small></li>
<li><small>Start drawing path by clicking on coordinates.</small></li>
</ol>
</div>
<div class="col-md-6">
<h5>Some Rules / Known Issue</h5>
<ul>
<li><small>Path need to be as a convex polygonal path with counterclockwise winding and no self intersections. The points are specified relative to the owning node’s origin. <a href="https://developer.apple.com/documentation/spritekit/skphysicsbody/1520379-bodywithpolygonfrompath" target="_blank">(documentation link)</a></small></li>
<li><small>Please use Chrome for best compatibility as I have not tested on other browsers.</small></li>
</ul>
</div>
</div>
<hr>
<div class="btn-group">
<button class="btn btn-primary" type="button" onclick="resetShape()">Reset Shape</button>
<button class="btn btn-primary" type="button" onclick="location.reload()">Reset All</button>
</div>
<input type="checkbox" onclick="toggleRetinaMode()" id="retinaCheckbox" checked> Retina? (please check before declaring path)
<br><br>
<canvas id="sprite" ></canvas>
<canvas id="path" ></canvas>
<p class="text-muted"><small>X:<span id="tooltipX">0</span> Y:<span id="tooltipY">0</span></small></p>
<br>
<h5>Output</h5>
<pre>
SKSpriteNode *sprite = [SKSpriteNode spriteNodeWithImageNamed:@"<span id="codeImgName">img</span>"];
CGFloat offsetX = sprite.frame.size.width * sprite.anchorPoint.x;
CGFloat offsetY = sprite.frame.size.height * sprite.anchorPoint.y;
CGMutablePathRef path = CGPathCreateMutable();
<span id="codeCGPath"></span>
CGPathCloseSubpath(path);
sprite.physicsBody = [SKPhysicsBody bodyWithPolygonFromPath:path];
</pre>
</div>
<script>
// reference from http://davidwalsh.name/resize-image-canvas
var spriteCanvas = document.getElementById('sprite');
var spriteContext = spriteCanvas.getContext('2d');
spriteContext.fillText('Drop Sprite Image Here', 400, 50);
var pathCanvas = document.getElementById('path');
var pathContext = pathCanvas.getContext('2d');
function render(src)
var image = new Image();
image.onload = function()
spriteContext.clearRect(0, 0, spriteCanvas.width, spriteCanvas.height);
spriteCanvas.width = image.width;
spriteCanvas.height = image.height;
spriteContext.drawImage(image, 0, 0, image.width, image.height);
pathContext.clearRect(0, 0, pathCanvas.width, pathCanvas.height);
pathCanvas.width = image.width;
pathCanvas.height = image.height;
;
image.src = src;
function loadImage(src)
if(!src.type.match(/image.*/))
console.log('Dropped file is not image format');
return;
var reader = new FileReader();
reader.onload = function(e)
render(e.target.result);
;
reader.readAsDataURL(src);
var fileName = src.name;
var codeImgName = document.getElementById('codeImgName');
codeImgName.innerHTML = fileName;
spriteCanvas.addEventListener('dragover', function(e)
e.preventDefault();
, true);
spriteCanvas.addEventListener('drop', function(e)
e.preventDefault();
loadImage(e.dataTransfer.files[0]);
, true);
var retinaMode = true;
function toggleRetinaMode()
var status = document.getElementById('retinaCheckbox');
retinaMode = status.checked ? true : false;
var actualX = 0;
var actualY = 0;
var displayX = document.getElementById('tooltipX');
var displayY = document.getElementById('tooltipY');
pathCanvas.onmousemove = function(e)
actualX = e.pageX - this.offsetLeft;
actualY = e.pageY - this.offsetTop;
displayX.innerHTML = retinaMode ? Math.floor(actualX / 2) : actualX;
displayY.innerHTML = retinaMode ? Math.floor((spriteCanvas.height - actualY - 1) / 2) : spriteCanvas.height - actualY - 1;
var pathArray = new Array();
pathCanvas.onclick = function(e)
var coor =
actualX: actualX,
actualY: actualY,
displayX: displayX.innerHTML,
displayY: displayY.innerHTML,
;
pathArray.push(coor);
refreshShape(pathArray);
var codeCGPath = document.getElementById('codeCGPath');
function refreshShape(pathArray)
pathContext.clearRect(0, 0, pathCanvas.width, pathCanvas.height);
pathContext.beginPath();
for(var i in pathArray)
if(i == 0)
pathContext.moveTo(pathArray[i].actualX, pathArray[i].actualY);
codeCGPath.innerHTML = 'CGPathMoveToPoint(path, NULL, '+pathArray[i].displayX+' - offsetX, '+pathArray[i].displayY+' - offsetY);<br>';
continue;
pathContext.lineTo(pathArray[i].actualX, pathArray[i].actualY);
codeCGPath.innerHTML += 'CGPathAddLineToPoint(path, NULL, '+pathArray[i].displayX+' - offsetX, '+pathArray[i].displayY+' - offsetY);<br>';
pathContext.closePath();
pathContext.lineWidth = 1;
pathContext.strokeStyle = 'blue';
pathContext.stroke();
pathContext.fillStyle = 'blue';
pathContext.fill();
function resetShape()
pathArray = new Array();
codeCGPath.innerHTML = null;
pathContext.clearRect(0, 0, pathCanvas.width, pathCanvas.height);
</script>
</body>
</html>【讨论】：
是的！这正是我想要的！我想很多人都同意你所做的值得进一步发展。我有什么地方可以写功能请求吗？ @Darrarski ，是的。只需将其留在下面的评论部分。我在编码时意识到了一些功能，但我暂时将复杂的东西留待将来填写并暂时启动并运行基本功能（因为我现在正在进行游戏开发）。无论如何，我会鼓励你离开评论部分，其他人可能会在发布同样的内容之前阅读。 :) 这是我见过的最有用的东西之一。伟大的工作。 我很想制作虚假的 SO 帐户，这样我就可以更多地投票... 了不起的工作@DazChong！ 非常好！效果很好，节省了大量时间！【参考方案2】：我创建了一个编辑器和加载器类来创建复杂的 SKPhysicsBodies 并将它们导入到您的代码中。它允许您在一个非常漂亮的界面中跟踪您的精灵、添加多个主体并导出所有内容。查看SKImport here 和editor。
【讨论】：
【参考方案3】：我知道这有点晚了，但我刚刚为此创建了一个很酷的工具，它会自动在精灵图像周围创建一条路径（因此您不必自己手动单击这些点），然后您可以调整各种设置以更好地满足您的要求。该工具还输出 Objective C 和 Swift 程序代码，用于添加精灵物理体的路径。希望它对某些人有所帮助。谢谢：
http://www.radicalphase.com/pathgen/
【讨论】：
太糟糕了...链接已失效 抱歉域名已过期 - 工具又回来了！ :) 新更新：现在包括强制凸模式（默认启用）以确保与 SpriteKit 物理实体 100% 兼容，并减少点数 - 尽情享受吧！ :)【参考方案4】：这是为 Swift 改编的原始脚本（来自 DazChong）
SKPhysicsBody Path Generator Swift 版
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SpriteKit Tools - SKPhysicsBody Path Generator (Swift version </title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<style>
/* disable responsive */
.container
max-width: none;
width: 970px;
#sprite
background-color: #eee;
position: absolute;
#path
cursor: crosshair;
opacity: 0.5;
</style>
</head>
<body>
<div class="container">
<h1>SKPhysicsBody Path Generator</h1>
<p class="lead">Want to use SKPhysicsBody(polygonFromPath: path) easier way like me? Here with a small helper for easier path drawing, hope it help others too.</p>
<div class="row">
<div class="col-md-6">
<h5>Basic Instruction</h5>
<ol>
<li><small>Drag and drop the sprite image into drop zone.</small></li>
<li><small>Start drawing path by clicking on coordinates.</small></li>
</ol>
</div>
<div class="col-md-6">
<h5>Some Rules / Known Issue</h5>
<ul>
<li><small>Path need to be as a convex polygonal path with counterclockwise winding and no self intersections. The points are specified relative to the owning node’s origin. <a href="https://developer.apple.com/library/ios/documentation/SpriteKit/Reference/SKPhysicsBody_Ref/Reference/Reference.html#//apple_ref/occ/clm/SKPhysicsBody/bodyWithPolygonFromPath:" target="_blank">(documentation link)</a></small></li>
<li><small>Please use Chrome for best compatibility as I have not tested on other browsers.</small></li>
</ul>
</div>
</div>
<hr>
<div class="btn-group">
<button class="btn btn-primary" type="button" onclick="resetShape()">Reset Shape</button>
<button class="btn btn-primary" type="button" onclick="location.reload()">Reset All</button>
</div>
<input type="checkbox" onclick="toggleRetinaMode()" id="retinaCheckbox" checked> Retina? (please check before declaring path)
<br><br>
<canvas id="sprite" ></canvas>
<canvas id="path" ></canvas>
<p class="text-muted"><small>X:<span id="tooltipX">0</span> Y:<span id="tooltipY">0</span></small></p>
<br>
<h5>Output</h5>
<pre>
let sprite = SKSpriteNode(imageNamed: "codeImgName")
let offsetX = sprite.size.width * sprite.anchorPoint.x
let offsetY = sprite.size.height * sprite.anchorPoint.y
let path = CGPathCreateMutable()
<span id="codeCGPath"></span>
CGPathCloseSubpath(path)
sprite.physicsBody = SKPhysicsBody(polygonFromPath: path)
</pre>
</div>
<script>
// reference from http://davidwalsh.name/resize-image-canvas
var spriteCanvas = document.getElementById('sprite');
var spriteContext = spriteCanvas.getContext('2d');
spriteContext.fillText('Drop Sprite Image Here', 400, 50);
var pathCanvas = document.getElementById('path');
var pathContext = pathCanvas.getContext('2d');
function render(src)
var image = new Image();
image.onload = function()
spriteContext.clearRect(0, 0, spriteCanvas.width, spriteCanvas.height);
spriteCanvas.width = image.width;
spriteCanvas.height = image.height;
spriteContext.drawImage(image, 0, 0, image.width, image.height);
pathContext.clearRect(0, 0, pathCanvas.width, pathCanvas.height);
pathCanvas.width = image.width;
pathCanvas.height = image.height;
;
image.src = src;
function loadImage(src)
if(!src.type.match(/image.*/))
console.log('Dropped file is not image format');
return;
var reader = new FileReader();
reader.onload = function(e)
render(e.target.result);
;
reader.readAsDataURL(src);
var fileName = src.name;
var codeImgName = document.getElementById('codeImgName');
codeImgName.innerHTML = fileName;
spriteCanvas.addEventListener('dragover', function(e)
e.preventDefault();
, true);
spriteCanvas.addEventListener('drop', function(e)
e.preventDefault();
loadImage(e.dataTransfer.files[0]);
, true);
var retinaMode = true;
function toggleRetinaMode()
var status = document.getElementById('retinaCheckbox');
retinaMode = status.checked ? true : false;
var actualX = 0;
var actualY = 0;
var displayX = document.getElementById('tooltipX');
var displayY = document.getElementById('tooltipY');
pathCanvas.onmousemove = function(e)
actualX = e.pageX - this.offsetLeft;
actualY = e.pageY - this.offsetTop;
displayX.innerHTML = retinaMode ? Math.floor(actualX / 2) : actualX;
displayY.innerHTML = retinaMode ? Math.floor((spriteCanvas.height - actualY - 1) / 2) : spriteCanvas.height - actualY - 1;
var pathArray = new Array();
pathCanvas.onclick = function(e)
var coor =
actualX: actualX,
actualY: actualY,
displayX: displayX.innerHTML,
displayY: displayY.innerHTML,
;
pathArray.push(coor);
refreshShape(pathArray);
var codeCGPath = document.getElementById('codeCGPath');
function refreshShape(pathArray)
pathContext.clearRect(0, 0, pathCanvas.width, pathCanvas.height);
pathContext.beginPath();
for(var i in pathArray)
if(i == 0)
pathContext.moveTo(pathArray[i].actualX, pathArray[i].actualY);
codeCGPath.innerHTML = 'CGPathMoveToPoint(path, nil, '+pathArray[i].displayX+' - offsetX, '+pathArray[i].displayY+' - offsetY)<br>';
continue;
pathContext.lineTo(pathArray[i].actualX, pathArray[i].actualY);
codeCGPath.innerHTML += 'CGPathAddLineToPoint(path, nil, '+pathArray[i].displayX+' - offsetX, '+pathArray[i].displayY+' - offsetY)<br>';
pathContext.closePath();
pathContext.lineWidth = 1;
pathContext.strokeStyle = 'blue';
pathContext.stroke();
pathContext.fillStyle = 'blue';
pathContext.fill();
function resetShape()
pathArray = new Array();
codeCGPath.innerHTML = null;
pathContext.clearRect(0, 0, pathCanvas.width, pathCanvas.height);
</script>
</body>
</html>【讨论】：
【参考方案5】：似乎缺少 Skphysicsbody 路径生成器工具。 我写了一个在 mac 上做同样事情的应用程序：https://itunes.apple.com/us/app/physicsbodymaker/id951249779?ls=1&mt=12
【讨论】：
【参考方案6】：这是对 Xelt 在 Swift 3 中的回答的改编。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>SpriteKit Tools - SKPhysicsBody Path Generator (Swift version </title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<style>
/* disable responsive */
.container
max-width: none;
width: 970px;
#sprite
background-color: #eee;
position: absolute;
#path
cursor: crosshair;
opacity: 0.5;
</style>
</head>
<body>
<div class="container">
<h1>SKPhysicsBody Path Generator</h1>
<p class="lead">Want to use SKPhysicsBody(polygonFromPath: path) easier way like me? Here with a small helper for easier path drawing, hope it help others too.</p>
<div class="row">
<div class="col-md-6">
<h5>Basic Instruction</h5>
<ol>
<li><small>Drag and drop the sprite image into drop zone.</small></li>
<li><small>Start drawing path by clicking on coordinates.</small></li>
</ol>
</div>
<div class="col-md-6">
<h5>Some Rules / Known Issue</h5>
<ul>
<li><small>Path need to be as a convex polygonal path with counterclockwise winding and no self intersections. The points are specified relative to the owning node’s origin. <a href="https://developer.apple.com/library/ios/documentation/SpriteKit/Reference/SKPhysicsBody_Ref/Reference/Reference.html#//apple_ref/occ/clm/SKPhysicsBody/bodyWithPolygonFromPath:" target="_blank">(documentation link)</a></small></li>
<li><small>Please use Chrome for best compatibility as I have not tested on other browsers.</small></li>
</ul>
</div>
</div>
<hr>
<div class="btn-group">
<button class="btn btn-primary" type="button" onclick="resetShape()">Reset Shape</button>
<button class="btn btn-primary" type="button" onclick="location.reload()">Reset All</button>
</div>
<input type="checkbox" onclick="toggleRetinaMode()" id="retinaCheckbox" checked> Retina? (please check before declaring path)
<br><br>
<canvas id="sprite" ></canvas>
<canvas id="path" ></canvas>
<p class="text-muted"><small>X:<span id="tooltipX">0</span> Y:<span id="tooltipY">0</span></small></p>
<br>
<h5>Output</h5>
<pre>
let sprite = SKSpriteNode(imageNamed: "codeImgName")
let offsetX = sprite.size.width * sprite.anchorPoint.x
let offsetY = sprite.size.height * sprite.anchorPoint.y
let path = CGMutablePath()
<span id="codeCGPath"></span>
path.closeSubpath()
sprite.physicsBody = SKPhysicsBody(polygonFromPath: path)
</pre>
</div>
<script>
// reference from http://davidwalsh.name/resize-image-canvas
var spriteCanvas = document.getElementById('sprite');
var spriteContext = spriteCanvas.getContext('2d');
spriteContext.fillText('Drop Sprite Image Here', 400, 50);
var pathCanvas = document.getElementById('path');
var pathContext = pathCanvas.getContext('2d');
function render(src)
var image = new Image();
image.onload = function()
spriteContext.clearRect(0, 0, spriteCanvas.width, spriteCanvas.height);
spriteCanvas.width = image.width;
spriteCanvas.height = image.height;
spriteContext.drawImage(image, 0, 0, image.width, image.height);
pathContext.clearRect(0, 0, pathCanvas.width, pathCanvas.height);
pathCanvas.width = image.width;
pathCanvas.height = image.height;
;
image.src = src;
function loadImage(src)
if(!src.type.match(/image.*/))
console.log('Dropped file is not image format');
return;
var reader = new FileReader();
reader.onload = function(e)
render(e.target.result);
;
reader.readAsDataURL(src);
var fileName = src.name;
var codeImgName = document.getElementById('codeImgName');
codeImgName.innerHTML = fileName;
spriteCanvas.addEventListener('dragover', function(e)
e.preventDefault();
, true);
spriteCanvas.addEventListener('drop', function(e)
e.preventDefault();
loadImage(e.dataTransfer.files[0]);
, true);
var retinaMode = true;
function toggleRetinaMode()
var status = document.getElementById('retinaCheckbox');
retinaMode = status.checked ? true : false;
var actualX = 0;
var actualY = 0;
var displayX = document.getElementById('tooltipX');
var displayY = document.getElementById('tooltipY');
pathCanvas.onmousemove = function(e)
actualX = e.pageX - this.offsetLeft;
actualY = e.pageY - this.offsetTop;
displayX.innerHTML = retinaMode ? Math.floor(actualX / 2) : actualX;
displayY.innerHTML = retinaMode ? Math.floor((spriteCanvas.height - actualY - 1) / 2) : spriteCanvas.height - actualY - 1;
var pathArray = new Array();
pathCanvas.onclick = function(e)
var coor =
actualX: actualX,
actualY: actualY,
displayX: displayX.innerHTML,
displayY: displayY.innerHTML,
;
pathArray.push(coor);
refreshShape(pathArray);
var codeCGPath = document.getElementById('codeCGPath');
function refreshShape(pathArray)
pathContext.clearRect(0, 0, pathCanvas.width, pathCanvas.height);
pathContext.beginPath();
for(var i in pathArray)
if(i == 0)
pathContext.moveTo(pathArray[i].actualX, pathArray[i].actualY);
codeCGPath.innerHTML = 'path.move(to: CGPoint(x: '+pathArray[i].displayX+' - offsetX, y: '+pathArray[i].displayY+' - offsetY))<br>';
continue;
pathContext.lineTo(pathArray[i].actualX, pathArray[i].actualY);
codeCGPath.innerHTML += 'path.addLine(to: CGPoint(x: '+pathArray[i].displayX+' - offsetX, y: '+pathArray[i].displayY+' - offsetY))<br>';
pathContext.closePath();
pathContext.lineWidth = 1;
pathContext.strokeStyle = 'blue';
pathContext.stroke();
pathContext.fillStyle = 'blue';
pathContext.fill();
function resetShape()
pathArray = new Array();
codeCGPath.innerHTML = null;
pathContext.clearRect(0, 0, pathCanvas.width, pathCanvas.height);
</script>
</body>
</html>【讨论】：
【参考方案7】：DazChong 出品的很棒的小网络应用程序。也等不及PhysicsEditor的更新了！！
这个one也在开发中
您可以在 alpha 阶段下载它here
【讨论】：
这太棒了！感谢分享。也许应用标题应包含“SpriteKit”，以便于搜索登陆。 @DazChong 是的，潜力巨大。我喜欢你的网络应用，可惜 SpriteKit 只允许 12 分的路径。如果你不知道，也有这个但是 $$$$ paintcodeapp.com 路径的 12 个点的问题比这更严重，因为它必须基本上是由直线连接的 12 个点。我尝试使用具有 12 个点但在此期间使用贝塞尔曲线的形状，并收到诸如“使用超过 300 个点”之类的消息或任何类似的巨大数字。 Apple 在这方面做得很糟糕，顺便说一句，SpriteKit 是一堆错误：我报告了至少 20 个我在使用它的一周内发现的错误。【参考方案8】：您现在可以这样做，从您的 sprite 的 PNG 生成物理体：
SKSpriteNode *yourPhysicsSprite = [SKSpriteNode spriteNodeWithImageNamed:@"yourPNG"];
yourPhysicsSprite.physicsBody = [SKPhysicsBody bodyWithTexture:yourPhysicsSprite.texture alphaThreshold:0.0f size:yourPhysicsSprite.texture.size];
比手工操作更不精确，可能成本更高，但效果很好。
【讨论】：
当我问这个问题时，在 SpriteKit 中是不可能的。现在有可能，但效率不高。 现在是否可以从 XCode 内部进行这种从路径生成多边形？如果是这样，它在哪里？我仍然有这个问题。 大家都知道，iOS9 中存在一个巨大的错误，它会阻止您使用纹理来制作准确的物理实体。奇怪的是，它在 iOS8 和 iOS10 中都有效，但在 iOS9 中存在大量问题，直到今天仍未修复（尽管有一些不是很好的解决方法）。以上是关于SpriteKit 的 SKPhysicsBody 与多边形辅助工具的主要内容，如果未能解决你的问题，请参考以下文章
SpriteKit 的 SKPhysicsBody 与多边形辅助工具
iOS -- SpriteKit框架之SKPhysicsBody的移动和连接
使用“bodyWithTexture”（SpriteKit）时更改 SKPhysicsBody 的中心点
SpriteKit：SKSpriteNode 包含另一个 SKSpriteNodes 但只有一个 SKPhysicsBody