How can I detect a color?

Phaser 3
1

Hello,

I have built a little game with my daughter in the graphical editor scratch (https://scratch.mit.edu/projects/370939695 )
The game is about a melon going through several labyrinths. The labyrinth is just an underlying svg with black lines.
Now I am trying to build this with JavaScript and Phaser.

I have encountered a problem and am not sure how to solve it: In Scratch we used a method to detect when touching a color, but something like that seems to not exist in JavaScript.
I used the overlap function to achieve the same result, but it doesn’t work correctly on transparent pixels…

So I have different ideas

  1. Is there any way I can tell the overlap function to ignore transparent pixels?
  2. Is there any way to tell if there is a black pixel in a certain area? (I could make the melon a circle and test if there is a pixel in that circle when both objects overlap)
  3. I could make different “wall” objects and try to rebuild the maps in the SVG-files with them. I think it would be very tedious, so I would rather not do that (plus I think it would blow up the code when I try to load that and put every line into a certain position)

It would be great if anyone had any idea.
(I try to put my JavaScript source code into the “examples” section and link it here.)
edit: I got it into github … but other then that … I am a noob :frowning: https://github.com/LeonieLionheard/Alles-Melone-

2

getPixelAlpha

Have a look at:

Obviously you would need a more accurate process callback…

1 Like
3

I am not sure how to use this.
I tried to give out the pixelAlpha from the point where my cursor is.

console.log(this.textures.getPixelAlpha(this.input.mousePointer.x, this.input.mousePointer.y, 'level_2'));

but I get only “null”. Shouldn’t I get a number between 0 and 254?

4

If the coordinate is out of bounds it will return null.

0,0 is topleft of your texture (“level_2”). So checking your pointer x y will be out of bounds because those values are greater then the texture resolution.
You need to do some clever math :slight_smile:

1 Like
5

Ah thanks. That works with the test.

… yeah … clever Math indeed.
I thought about coordinates in that whole canvas and not about the element itself.

How do I get the Center of melon in reference to that element?

6

I’m not sure it’s relevant in your case. The melon would be half way in before you collide.
For now, just do it the brute force way. Calculate the intersection (overlapping rectangle) between melon and level, and then for non alpha pixels in melon check the corresponding pixel in level.

You need to do some switching between screen and texture coordinates, offsets etc.

7

I don’t know what you mean with “halfway in”. The phaser-overlap funktion works.
My Problem is that it works with transparent pixels, too.
So the overlap function can already be called before it even reaches a black line.

That switching between screen and texture coordinates doesn’t seem to be so simple.

8

Look at the CodePen example. See where they collide? The balls are halfway in. That’s because it only checks the center pixel. It would work fine if your melon was 1 pixel :slight_smile:

Make a drawing (on paper) of your melon and an obstacle with an overlap.
Mark the width and height of both bounding rectangles.
Mark all the screen coordinates (make some up).
Then for instance topright of melon is the topleft screen coordinate melon + melon width.
Etc. Stare at it a bit. It will come to you :slight_smile: