在过去的几天中，我一直在使用Phaser及其等距插件。我陷入了一个问题，找不到解决方案。我正在尝试为玩家角色创建考虑到深度的命中框（就像在等距游戏中一样）：
1具有深度，而2没有。我相信在等距世界中深度是必不可少的，因此使用1是必经之路。那就是问题开始的地方。我能够创建“常规”二维Hitbox，但无法制作等距Hitbox。我制作Hitbox的策略如下：
创建一个hitboxes组；
将单个的击打箱添加到该组（头部的击打箱，躯干的击打箱，打孔的击打箱，...）；
将Hitboxes组作为该播放器的子级添加到播放器；
创建一个函数，使我可以在需要时启用Hitbox，并检查是否存在碰撞；
创建一个函数，当我不再需要Hitbox时，可以禁用它们；
考虑到这些击中框只是空的精灵（取决于击中框的类型是iso还是非iso），这些sprite没有图像，但是可以具有物理物体来检查碰撞；他们当然是“隐形的”。
我不知道其他制作Hitbox的方法（至少在Phaser中）。该方法适用于等距和非等距匹配框。
至于我在移相器中的具体情况：
我让我的Hitbox跟随玩家，因为我将它们添加为该玩家的子代。这样，他们就可以在玩家身上获得固定位置。适用于2d Hitboxs，但是当等距Hitbox时，我无法将等距Hitbox固定在播放器上。我相信这是因为等轴测图插件中缺少某些东西，无法正确地将等轴测图精灵添加到另一个等轴测图精灵作为子级/父级关系。我已经在这里进行了讨论：http://www.html5gamedevs.com/topic/25092-phaser-create-hitboxes-in-isometric。
在两种情况下都具有点击框的玩家：
在3中，我有一个固定在播放器上的2d Hitbox。在4中，点击框不会固定在播放器上。
情况3的代码：
hitboxes = game.add.group();
hitboxes.enableBody = true;
hitbox1 = hitboxes.create(-100,-30,null); // I believe "create" only works with non-iso
hitbox1.body.setSize(65,70,0,-30);
dude.addChild(hitboxes);
至于4情况的代码：
hitboxes = game.add.group();
hitboxes.enableBody = true;
hitboxes.physicsBodyType = Phaser.Plugin.Isometric.ISOARCADE; // need to say that the physics applied is the isometric
hitbox1 = game.add.isoSprite(0,0,0,null,0,hitboxes);
hitbox1.body.allowGravity = false;
hitbox1.body.setSize(100,100,100,0,0,0);
dude.addChild(hitboxes);
一些观察：
情况4中的方法具有更多的“ Z”轴参数；
如果在4情况下不将重力设置为假，则身体将穿过地面。在3情况下，我不必设置任何类似内容，因为Hitbox完全不会掉下来（它是固定的...）；
由于这显然无法很好地解决，因此我还尝试使用等于玩家位置（player.x，player.y，）的（hitbox.x，hitbox.y，hitbox.z）在x，y和z中设置Hitbox位置player.z）中的更新功能。它应该以某种方式模拟父/子关系的用途。但是没有用...
如我之前所说，我不知道在移相器中执行此操作的另一种方法。我想以某种方式解决这个问题。如果您需要更多信息，请询问。抱歉，有任何错误，感谢您的关注。
编辑：
我没有找到完美的解决方案，但是我能够创建一个函数来检查两个矩形之间的交集。但是，当我“攻击”并且目标在玩家上方时，它仍会检测为碰撞。可能需要关心深度排序或类似的事情...
最佳答案
我已经创建了一个基于Phaser Js的库来处理点击框（创建它们并管理带有点击框的sprite的动画和动作）。
它可能会帮助您。首先在以下位置获取/ tool文件夹：https://github.com/Shadoworker/LaliaSprite
并按照以下步骤操作：
步骤1.在/ tool文件夹中本地运行（服务器）项目。 xamp | amp
生成两个文件：yoursprite.png（在/ sprites文件夹中）和yoursprite.json（在/ json文件夹中）
第2步 。创建您的新PhaserJS游戏项目。写在你的index.html
//Load phaser.js (first)
<script src="js/phaser.js"></script>
//Load laliasprite.js*/
<script src="js/laliasprite-2.0.js"></script>
//NB : in laliasprite.js ,comment "box.alpha = 0;" to see hitboxes for debug
b。在预加载功能中，执行以下操作：
//Create new Lalia instance
Lalia = new Lalia();
//Load sprite atlases or spritesheet
//1 . load atlases
Lalia.atlas(game, "yoursprite", 'img/yoursprite_atlas.png', 'json/yoursprite_atlas.json', 'json/yoursprite_atlas_hitboxes.json' );
//2 . load sheet
//Lalia.sheet(game, "yoursprite", 'img/yoursprite_sheet.png', 'json/yoursprite_sheet_hitboxes.json', 180, 240);
C。在您的创建函数中，执行此操作
//Add sprite to game scene
yoursprite = game.add.sprite(100, 30, 'yoursprite');
//Add animation to sprite
yoursprite.animations.add("idle", ["1" ,"2", "3"],1, false);
//Setting yoursprite hitboxes for a specific animation (frames);
Lalia.atlasboxes(yoursprite, 'idle');
//Lalia.sheetboxes(yoursprite, 'idle');
...
//Add other characters
enemy = game.add.sprite(130, 40, 'enemy');
...
//Set objects which will collide with our character (yoursprite) hitboxes
yourspriteColliders.push(enemy);
//yourspriteColliders is the array you will declare in your code to store colliders
...
d。创建动作回调
//Do this when yoursprite is touched at a certain point during "idle" animation
function die()
{
//Kill yoursprite
}
e。在更新功能中，执行以下操作：
//On button taped or keyboard event
yoursprite.animations.playaction('idle','hit', yourspriteColliders, die);
//This means: When yoursprite is playing 'idle' animation, when it's hitboxes that have the type 'hit' are touched by one of the objects in yourspriteColliders array then call the 'die' function to execute a specific action (To die in this example) ...
就这样 ！希望这会有所帮助！
关于javascript - Hitboxs创建策略和＆等距相位器实现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39686303/