pathfinding Movement zone based on background

[NXTaar]

I'm developing point&click quest adventure (something like Machinarium)

I have a background, for example, like on the bkg1.ipg

I want to define some zone where the character can move. Example on bkg1-marked.jpg. Reaching the end of the red zone the character should stop.

Also, it would be great to have ability to make it with some pathfinding like f.e. there are stairs on the background image and the character stays somewhere else on the "first floor". Player clicks on top of the stairs and the character goes there, according to the zone where he can walk

Does Phaser have any tools for that?

 

[ldd]

The most important part is to consider whether you want a 'grid' (made of squares) where your character can move, rectangles, simple convex polygons or something more abstract.

Once you've made that choice, we can help more. The easiest would be a grid of uniform squares, because you can then use say, tiled, 1 tile and then mark that tile as not passable. (2 lines of code?)

/// map.setCollision(40)

//game.physics.arcade.collide(p, layer);

With rectangles, using arcade physics it is also trivial to define three rectangles in your image above where the character is not supposed to collide with your background.

With convex polygons, using p2 collision you are also set.

With more weird shapes, you are on your own (mostly) and it's hard.

 

As for pathfinding, I think there's a A* plugin for phaser, otherwise implementing your own should be trivial (use a A* library, send initial and goal positions, get a result, use in in your game)

[programicks]

My word, Phaser doesn't have anything built in to get getImageData? If not, they should.

For my Point and click engine (sorry, not Phaser - built it before I knew about Phaser):

I draw on canvas a png of the hit area like your red floor, then use getImageData to check its rgb colours and check if they match for the mouse over. Then I draw the room jpg over the top.

Just only check the imagedata once on mouseover for mobile browsers or it drops the frame rate by half. Fine on PC though.

[programicks]

Just realised, I should google phaser image data and a-ah, found this:

https://phaser.io/examples/v2/bitmapdata/get-pixel

This may be of some use to you. Infact I will look at this later myself lol.

[NXTaar]

@programicks Yeah, I've been making an implementation with the  game.make.bitmapData( ) . and it had following issues:

1. You have to load two separate pictures - one the background itself, and the "red zones only" picture.
2. Check rate. F.e. the character is moving at 15px. In theory, it has to check the red zone appearance for each pixel i.e 15 times. In reality, it checks it 4-5 times per 10px. Visually it looks that character can move outside the marked space with some little distance.

At this moment I made an implementation using P2 physics body for the background (made with PhysicsEditor) and loaded via JSON, but I'm not sure that it is a proper implementation.

Maybe there is a way to encode the red zones in the .png somehow?

[programicks]

Hi NXTaar. I am unsure I understand what you are attempting to do. For a point and click, say the red zone is to check if you clicked on the floor, then the character can move. You only need to check for the red colour of the floor once when you click the mouse. If you don't click on the red zone, you have not clicked the floor and the character cannot move. You can of course then use a different colour for an interactive hotspot like an object to collect. The way I do it, is to have all the different colour hotspots in one png.

About loading the two separate images, yes, you will need to draw the png, do the checks, then draw the background or have two canvases for this. I don't know how to do this in Phaser though.

Can you not load the two images in function preload then in the function update (), of Phaser can you draw png, check, draw background at this time?