javascript - Hitboxes 创建策略和等距移相器实现

Question

过去几天我一直在使用 Phaser 及其等距插件。我陷入了一个问题，无法找到解决方案。我正在尝试为我的玩家 Angular 色创建考虑深度的碰撞箱(就像在等距游戏中一样):

1有深度，而 2没有。我相信在等距世界中，深度至关重要，因此 1是要走的路。嗯，这就是问题开始的地方。我能够创建“正常”的二维碰撞箱，但无法制作等距碰撞箱。我制作命中框的策略如下:

• 创建一个 hitboxes 组；
• 将各个碰撞箱添加到该组中(头部碰撞箱、躯干碰撞箱、出拳碰撞箱……)；
• 将 hitboxes 组添加到玩家作为该玩家的子级；
• 创建一个函数，允许我在需要时启用碰撞盒并检查碰撞；
• 创建一个函数，允许我在不再需要碰撞框时禁用它们；
• 考虑到这些碰撞盒只是空的 Sprite (iso或非iso，具体取决于碰撞盒的类型)， Sprite 没有图像，但可以有一个物理体来检查碰撞；它们当然是“看不见的”。

我不知道还有其他制作碰撞盒的方法(至少在移相器中)。该方法应该适用于等距和非等距碰撞箱。

<小时/>

至于我在phaser中的具体情况:

我让我的碰撞箱跟随玩家，因为我将它们添加为该玩家的子项。这样他们就可以获得玩家的固定位置。对于 2d hitboxes 效果很好，但是当玩家使用等距碰撞箱时，我无法将等距碰撞箱固定到玩家。我相信这是因为等距插件中缺少某些内容，无法将等距 Sprite 作为子/父关系正确添加到另一个等距 Sprite 中。我已经在这里讨论过这个问题: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 中将重力设置为 false body 会直接穿过地面的情况。在情况 3 中我不必设置类似的东西因为碰撞箱根本没有掉落(它已修复......)；

由于这显然效果不佳，我还尝试设置 x、y 和 z 中的 hitbox 位置，使用 (hitbox.x,hitbox.y,hitbox.z) 等于玩家位置 (player.x,player .y,player.z) 在更新函数中。它应该以某种方式模拟父/子关系的用途。然而它并没有起作用...

正如我之前所说，我不知道在移相器中执行此操作的另一种方法。我想以某种方式解决这个问题。如果您需要更多信息，请询问。抱歉有任何错误，感谢您的关注。

编辑:

我没有找到完美的解决方案，但我能够创建一个函数来检查两个矩形之间的交集。然而，当我“攻击”并且目标位于玩家上方时，它仍然检测为碰撞。可能需要关心深度排序或类似的事情......

Answer 1

我创建了一个基于 Phaser Js 的库来处理碰撞盒(创建它们并管理带有碰撞盒的 Sprite 的动画和 Action )。

也许对你有帮助。首先获取/tool 文件夹:https://github.com/Shadoworker/LaliaSprite

并按照以下步骤操作:

步骤 1. 在/tool 文件夹中本地(服务器)运行项目您可以使用 wamp | xamp |曼普

.生成两个文件: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) ...

仅此而已!希望这会有所帮助!