How to confine player sprite movements to an irregular map

Phaser 3
1

I am a novice coder, I used to use ActionScript 3.0 like 10 years ago and im trying to recode my game into javascript format. in my AS3.0 game, I had a little playable “ship” that was controlled by arrowkeys and was confined to “rivers”. The rivers were an image and AS3 had a neat function using HittestPoint to detect collisions between the player ship and the irregularly shapred rivers and I would keep the player ship confined to the rivers.
Im surprised to find out that there is no equivalently easy way to do this in javascript. My map/rivers are too irregularly shaped to use tile based collision detection and I attempted to do a pixel perfect collision detection to test if player ship overlaps the map png. but it didnt work well. Anyone have good tutorials?

2

:wave:

function HitTest(gameObject, x, y, minAlpha = 255) {
  const { texture } = gameObject;
  const localPoint = gameObject.getLocalPoint(x, y);

  return (
    texture.manager.getPixelAlpha(
      Math.floor(localPoint.x),
      Math.floor(localPoint.y),
      texture.key
    ) >= minAlpha
  );
}
3

Thank you for your reply samme, I actually have seen similar solutions you have posted in the past and attempted to use them. I was able to adapt this solution with the HitTest function , and i was able to adjust the alpha of my “rivers” that correctly identify the borders. however I am unable to confine the player (which is controlled by arrow keys using the setVelocity functions). the problem it appears is that the hittest function correctly identifies the overlap, however when i disable the speed, it leaves the player in the same spot and so it becomes disabled and i cannot move it.
I tried to revert the .x and .y position to previous coordinates when the hittest function showed no overlap, but it still moves it back where it overlaps, I guess the player ship jumps too much forward.
I was going to use the phaser editor next to see if i can draw a collider boundary instead