Javascript Hitboxs的创建策略和&；等轴测移相器的实现

在过去的几天里，我一直在玩phaser及其等距插件。我陷入了一个问题，找不到解决办法。我正在尝试为我的玩家角色创建具有深度的命中框（就像在等距游戏中一样）：

有深度，但没有深度。我相信在一个等距的世界里，深度是必不可少的，所以拥有是前进的方向。问题就从这里开始。我能够创建“普通”2d点击框，但我无法创建等距点击框。我制作Hitbox的策略如下所示：

• 创建一个Hitboxs组
• 将单个点击框添加到该组中（头部点击框、躯干点击框、穿孔机点击框等）
• 将Hitboxs组作为该玩家的子玩家添加到该玩家
• 创建一个函数，允许我在需要时启用Hitbox并检查碰撞
• 创建一个功能，允许我在不再需要时禁用Hitbox
• 考虑到这些点击框只是空的精灵（iso或非iso，取决于点击框的类型），精灵没有图像，但可以有一个物理实体来检查碰撞；它们当然是“看不见的”

我不知道还有其他方法可以制作Hitbox（至少在phaser中）。该方法应适用于等轴测和非等轴测复选框

---

至于我在phaser的具体情况：

我让我的命中框跟随玩家，因为我将它们作为该玩家的孩子添加。这样他们就可以给球员一个固定的位置。对于2d打盒效果很好，但是当我的等轴测打盒固定在玩家身上时，我无法将其固定在玩家身上。我相信这是因为在等轴测插件中缺少了一些东西，不能正确地将一个等轴测精灵添加到另一个等轴测精灵中作为子/父关系。我已经在这里讨论过了：

在这两种情况下，具有Hitbox的玩家：

在我的游戏中，我有一个2d打盒，它被固定在玩家身上。在hitbox中，不会固定到玩家

情况代码：

至于有关情况的守则：

    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);

一些意见：

• 这种情况下的方法具有更多用于“Z”轴的参数
• 在这种情况下，如果我没有将重力设为false，身体就会穿过地面。我不需要在这种情况下设置任何类似的设置，因为hitbox根本没有掉下来（它是固定的…）

由于这显然不能很好地工作，我还尝试在更新函数中使用（hitbox.x，hitbox.y，hitbox.z）等于玩家位置（player.x，player.y，player.z）在x，y和z中设置hitbox位置。它应该以某种方式模拟父/子关系的用途。但是它没有起作用

正如我之前所说，我不知道在phaser中做这件事的其他方法。我想以某种方式解决这个问题。如果您需要更多信息，请询问。对于任何错误，我深表歉意，感谢您的关注

编辑：

---

我没有找到一个完美的解决方案，但我能够创建一个函数来检查两个矩形之间的交点。然而，当我“攻击”并且目标在玩家上方时，它仍然会检测到碰撞。可能需要注意深度排序之类的…

我已经创建了一个基于phaser Js的库来处理Hitbox（创建它们并管理带有Hitbox的精灵的动画和动作）

这可能对你有帮助。首先在以下位置获取/tool文件夹：

并遵循以下步骤：

第一步。在本地（服务器）运行/tool文件夹中的项目，您可以使用wamp | xamp | mamp

生成了两个文件：yoursprite.png（在/sprites文件夹中）和yoursprite.json（在/json文件夹中）

第二步。创建新的PhaserJS游戏项目a。在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 

c。在create函数中，执行以下操作

//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。在更新功能中，执行以下操作：

 //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);

//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) ...

---

就这些！希望这能有帮助

我创建了一个基于phaser Js的库，用于处理Hitbox（创建Hitbox并管理带有Hitbox的精灵的动画和动作）

这可能对你有帮助。首先在以下位置获取/tool文件夹：

并遵循以下步骤：

第一步。在本地（服务器）运行/tool文件夹中的项目，您可以使用wamp | xamp | mamp

生成了两个文件：yoursprite.png（在/sprites文件夹中）和yoursprite.json（在/json文件夹中）

第二步。创建新的PhaserJS游戏项目a。在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 

c。在create函数中，执行以下操作

//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。在更新功能中，执行以下操作：

 //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);

//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) ...

---

就这些！希望这能有帮助

从您的编辑中，这个问题现在是否没有意义，应该关闭（或者您的解决方案作为答案发布），或者您是否希望更新您的问题以询问其他问题？@jamesskep我的解决方案有点令人讨厌。我不会说这是“解决方案”，但因为没有更好的答案……从你的编辑来看，这个问题现在是否没有意义，应该关闭（或者你的解决方案作为答案发布），或者你想更新你的问题以问另一个问题？@jamesskep我的解决方案有点令人讨厌。我不会说这是“解决方案”，但既然没有更好的答案。。。