dxdrawimage [Help] Menu using dxDrawImage

[mehmet]

Hello dudes,

I make a circular menu like in gta 5.  For this I use dxDrawImage,  the menu is divided into 8 pictures.
For effect, I hover to change the picture. 

But the hover area is big. When an empty place is induced. That changes the picture.
How to fix it? (Sorry for my English)

[IIYAMA]

@mehmet

You can use something like this:

https://wiki.multitheftauto.com/wiki/Math.isPointInPolygon

 

Or calculate the angle + distance from the centre. (this one will give the best result without relying on the browser)

• https://wiki.multitheftauto.com/wiki/FindRotation
• https://wiki.multitheftauto.com/wiki/GetDistanceBetweenPoints2D

 

Or use the browser + svg.(HTML + SVG knowledge required)

<svg id="Laag_1" data-name="Laag 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><style>.cls-1{opacity:0.53;}</style></defs><title>Tekengebied 2</title><path class="cls-1" d="M104.52,305.93a155.81,155.81,0,0,1,.31-114.35L18.44,155.8A249.16,249.16,0,0,0,17.55,342Z"/><path class="cls-1" d="M187.74,392.47a155.86,155.86,0,0,1-80.93-81l-87,36A249.16,249.16,0,0,0,151.57,479.79Z"/><path class="cls-1" d="M107.13,186.05a155.82,155.82,0,0,1,80.92-80.38L152.49,19.82A249.13,249.13,0,0,0,20.77,150.27Z"/><path class="cls-1" d="M158,17.55l35.56,85.84a155.77,155.77,0,0,1,113.78.24l35.51-85.71A249.12,249.12,0,0,0,158,17.55Z"/><path class="cls-1" d="M312.92,105.93a155.78,155.78,0,0,1,80.43,80.36l86-35.64a249.15,249.15,0,0,0-131-130.44Z"/><path class="cls-1" d="M395.65,191.83A155.82,155.82,0,0,1,396,305.68l86.65,35.89a249.08,249.08,0,0,0-.9-185.38Z"/><path class="cls-1" d="M307.69,394.51a155.75,155.75,0,0,1-114.4.25l-36.18,87.32a249.11,249.11,0,0,0,186.7-.37Z"/><path class="cls-1" d="M393.67,311.23a155.82,155.82,0,0,1-80.44,81l36.12,87.18a249.18,249.18,0,0,0,131-132.26Z"/><path d="M28.16,153.33A240.89,240.89,0,0,1,155.55,27.21l-3.06-7.39A249.13,249.13,0,0,0,20.77,150.27Z"/><path d="M158,17.55l3.06,7.39a240.85,240.85,0,0,1,178.72.37l3.07-7.39A249.12,249.12,0,0,0,158,17.55Z"/><path d="M154.63,472.4A240.9,240.9,0,0,1,27.21,344.45l-7.39,3.06A249.16,249.16,0,0,0,151.57,479.79Z"/><path d="M24.94,338.9a240.95,240.95,0,0,1,.89-180l-7.39-3.06A249.16,249.16,0,0,0,17.55,342Z"/><path d="M474.32,159.25a240.93,240.93,0,0,1,.9,179.26l7.39,3.06a249.08,249.08,0,0,0-.9-185.38Z"/><path d="M345.37,27.6A240.87,240.87,0,0,1,472,153.71l7.39-3.06a249.15,249.15,0,0,0-131-130.44Z"/><path d="M340.75,474.32a240.88,240.88,0,0,1-180.57.37l-3.07,7.39a249.11,249.11,0,0,0,186.7-.37Z"/><path d="M473,344.07A240.87,240.87,0,0,1,346.29,472l3.06,7.39a249.18,249.18,0,0,0,131-132.26Z"/></svg>

 

Edited January 26, 2019 by IIYAMA

[mehmet]

13 minutes ago, IIYAMA said:

@mehmet

You can use something like this:

https://wiki.multitheftauto.com/wiki/Math.isPointInPolygon

 

Or calculate the angle + distance from the centre. (this one will give the best result without relying on the browser)

• https://wiki.multitheftauto.com/wiki/FindRotation
• https://wiki.multitheftauto.com/wiki/GetDistanceBetweenPoints2D

 

Or use the browser + svg.(HTML + SVG knowledge required)

<svg id="Laag_1" data-name="Laag 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><defs><style>.cls-1{opacity:0.53;}</style></defs><title>Tekengebied 2</title><path class="cls-1" d="M104.52,305.93a155.81,155.81,0,0,1,.31-114.35L18.44,155.8A249.16,249.16,0,0,0,17.55,342Z"/><path class="cls-1" d="M187.74,392.47a155.86,155.86,0,0,1-80.93-81l-87,36A249.16,249.16,0,0,0,151.57,479.79Z"/><path class="cls-1" d="M107.13,186.05a155.82,155.82,0,0,1,80.92-80.38L152.49,19.82A249.13,249.13,0,0,0,20.77,150.27Z"/><path class="cls-1" d="M158,17.55l35.56,85.84a155.77,155.77,0,0,1,113.78.24l35.51-85.71A249.12,249.12,0,0,0,158,17.55Z"/><path class="cls-1" d="M312.92,105.93a155.78,155.78,0,0,1,80.43,80.36l86-35.64a249.15,249.15,0,0,0-131-130.44Z"/><path class="cls-1" d="M395.65,191.83A155.82,155.82,0,0,1,396,305.68l86.65,35.89a249.08,249.08,0,0,0-.9-185.38Z"/><path class="cls-1" d="M307.69,394.51a155.75,155.75,0,0,1-114.4.25l-36.18,87.32a249.11,249.11,0,0,0,186.7-.37Z"/><path class="cls-1" d="M393.67,311.23a155.82,155.82,0,0,1-80.44,81l36.12,87.18a249.18,249.18,0,0,0,131-132.26Z"/><path d="M28.16,153.33A240.89,240.89,0,0,1,155.55,27.21l-3.06-7.39A249.13,249.13,0,0,0,20.77,150.27Z"/><path d="M158,17.55l3.06,7.39a240.85,240.85,0,0,1,178.72.37l3.07-7.39A249.12,249.12,0,0,0,158,17.55Z"/><path d="M154.63,472.4A240.9,240.9,0,0,1,27.21,344.45l-7.39,3.06A249.16,249.16,0,0,0,151.57,479.79Z"/><path d="M24.94,338.9a240.95,240.95,0,0,1,.89-180l-7.39-3.06A249.16,249.16,0,0,0,17.55,342Z"/><path d="M474.32,159.25a240.93,240.93,0,0,1,.9,179.26l7.39,3.06a249.08,249.08,0,0,0-.9-185.38Z"/><path d="M345.37,27.6A240.87,240.87,0,0,1,472,153.71l7.39-3.06a249.15,249.15,0,0,0-131-130.44Z"/><path d="M340.75,474.32a240.88,240.88,0,0,1-180.57.37l-3.07,7.39a249.11,249.11,0,0,0,186.7-.37Z"/><path d="M473,344.07A240.87,240.87,0,0,1,346.29,472l3.06,7.39a249.18,249.18,0,0,0,131-132.26Z"/></svg>

 

Is this option not easier?

using pixel = dxGetTexturePixels(image) to get the pixel and then dxGetPixelColor(pixel) to get the pixel color, and check if the color isnt white ( aka nothing on it )

[IIYAMA]

9 minutes ago, mehmet said:

Is this option not easier?

using pixel = dxGetTexturePixels(image) to get the pixel and then dxGetPixelColor(pixel) to get the pixel color, and check if the color isnt white ( aka nothing on it )

• It doesn't tell you which field you selected.
• dxGetTexturePixels is a very slow process.(unless it is only done once at the start)

 

But feel free to try it your way. I am interested in what you discover on the way.

Edited January 26, 2019 by IIYAMA

[mehmet]

1 minute ago, IIYAMA said:

• It doesn't tell you which field you selected.
• dxGetTexturePixels is a very slow process.(unless it is only done once at the start)

 

But feel free to try it your way.

well, I then tried this option. It seems easier to me

https://wiki.multitheftauto.com/wiki/Math.isPointInPolygon

[IIYAMA]

3 minutes ago, mehmet said:

well, I then tried this option. It seems easier to me

https://wiki.multitheftauto.com/wiki/Math.isPointInPolygon

yea that can work. I recommend to open the design in Photoshop/something-similar and get all the positions from there. (you might need to do a little bit of maths afterwards to adjust it to the (possible) responsive layout in game)

Edited January 26, 2019 by IIYAMA

[thisdp]

If you use dgs, then detect area is ready for you. It uses dxGetTexturePixels, but optimized.

 

Edited January 27, 2019 by thisdp

[mehmet]

are there other ways?

[IIYAMA]

21 hours ago, mehmet said:

are there other ways?

There are already 4 ways to do this, is that not enough?

A 5e way. Calculate the distance from the center of the image.

A 6e way. Compromise, use a different design that is easier to calculate the button detection.

[mehmet]

 @IIYAMA

I just can not figure out how to use

https://wiki.multitheftauto.com/wiki/Math.isPointInPolygon

okay, I will go on to be my friend)) I wonder why you chose such a nickname? This is such a monitor))

 

[Pirulax]

Well, since this is a circle you could just use getDistanceBetweenPoints2D and findRotation.

[thisdp]

14 hours ago, Pirulax said:

Well, since this is a circle you could just use getDistanceBetweenPoints2D and findRotation.

Tell you the truth,  getDistanceBetweenPoints2D and findRotation doesn't work accurately in this case.

[IIYAMA]

3 hours ago, thisdp said:

Tell you the truth,  getDistanceBetweenPoints2D and findRotation doesn't work accurately in this case.

Hmmmm

Why not? The circle is perfect rounded. While making my svg version a while ago, I checked that fact.

[Pirulax]

6 hours ago, thisdp said:

Tell you the truth,  getDistanceBetweenPoints2D and findRotation doesn't work accurately in this case.

I'd work perfectly, it's a perfect circle.

[thisdp]

Ah, i am wrong.. After thinking for a while, i found the algorithm is a little bit complicated..

Edited January 29, 2019 by thisdp

[mehmet]

Thank you all. I did)))))

[mehmet]