Irregular shape object collision in 2D mode or maybe ISO mode?

Hello. I'm not well familiar with Wade yet, but I wanted to create a collision that works with irregular shapes of objects. I created a working collision with:



let collision = this.getOverlappingObjects();
for (let i = 0; i < collision.length; i++){
    if(collision[i].getName() === 'SceneObject_0'){

However, it is limited to a square. How can I create the same effect but in an irregular shape?

Physics Shape Editor would be ideal for this purpose, but can I implement it somehow?

I wanted to point out that the movement of my element takes place like this:

let sheep = wade.getSceneObject('sheep'),

x = data.screenPosition.x,

y = data.screenPosition.y;

sheep.moveTo(x, y, 100);


I don't want to create movement in the isometric mode because there is a limit to 4 directions (unless I can somehow increase it to eight ??). But this option which I chose seems to me more flexible due to the ability to move in each direction. Can anyone solve a similar problem?


PS: Will I be able to use pathfinding in the future with solutions that I have adopted?




All 7 Comments

Hi Tomash

First let me note that you can easily use 8 directions for your IsoCharacters, by doing for example


Valid values for setMovementType are 'diagonal', 'straight' and 'both' which means 'diagonal' + 'straight', so 8 directions. In this case you'll have to add some animations to your sprite for the new directions (n, s, w, e).

If you are happy to use 8 directions, then things are much simpler in terms of pathfinding and handling animations. In fact the IsoCharacter code does all that for you.

If however you want to have some sort of free movement, you can absolutely do that. But you'd have to rewrite some of the pathfinding and animation handling code. You could still use wade.findPath(), but since it works based on a grid, you'd have maintain your own grid and keep track of which cells are occupied by which objects.

If you need irregular shapes, then you could use the Physics Shape Editor as you said. In this case though, I would strongly recommend letting the physics engine handle your collisions. For an isometric game, you'll want to disable gravity and, in response to onCollision events, you'll want to half the impulse along the y axis, to take into account the isometric perspective. However, if using the physics engine, I would not recommend using _.sheep.moveTo() to move around. Instead I'd use _.sheep.setVelocity(), so you try to move somewhere, but if there are obstacles in-between, the physics engine handles the collisions.

I think this sort of free movement is much more common for 2d top-down tilemaps rather than isometric maps, because with an isometric perspective you cannot really rotate your sprites, so you are restricted to a limited set of angles for your animations. In my personal opinion it's more natural to move at those angles only, alternatively I'd consider using a top-down tilemap, for which I'd suggest looking at this simple tilemap game tutorial. We are also working on a tilemap editor, but that's not quite ready yet (though it should be "soon" :) ) but in the meantime you can import maps.




Thank you Gio for the answer!

If I can make a scene that looks like in an ISO tutorial but allows me to move in 8 directions, then that's exactly what I need :). My biggest problem is the lack of knowledge of useful commands so it is difficult for me to choose the most optimal solution.

I will try to create an isometric project and, if need be, ask for advice.

One more question. In the ISO tutorial, the character walks around an obstacle. What if the obstacle is much smaller than the tile. Will it still have to block all this?

Thanks for the help!!!



Pathfinding for IsoCharacter (and more generally pathfinding using wade.findPath) works by looking at whether each tile is collidable or not. You cannot have only a part of a tile that is collidable, it's either all the tile or no collision.

However you can have objects that occupy more than one tile (by setting their collisionMap property). But in most cases, a good rule of thumb is to make the tiles as small as possible while still managing to fit one character per tile. In the isometric tutorial, tiles are way larger than they need to be, they just need to be big enough to contain the feet of the largest character, in that case the sheep.



OK I understand. I will decide for now to isometry in 8 directions :).

And how can I manipulate the sizes of tiles?


Currently you can do this when calling wade.iso.init(...), but there seems to be no easy way to change the tile size from the editor. I'm making a note to add this in a future version.

You could also achieve the same result by making your isometric objects bigger though, and then move the camera away a bit. For example if you set the camera's z coordinate to 2, then everything appears twice as small.

I realize this isn't super user-friendly, we'll try to make it easier to just set the tile size from the editor.



tileSize should solve the problem. I also found this in the documentation but I do not know how to implement it. Should I snip it in app.js in this.init? Could you show me an example block of code?



Hi again and sorry for the delay in getting back to you.

Yes what you just said is right, in app.js in the init function, before you load any scene, add this code:

wade.iso.init({tileSize: {x: 64, y: 32}});


Post a reply
Add Attachment
Submit Reply
Login to Reply