mehmet

[Help] Menu using dxDrawImage

Recommended Posts

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. 

efed35-20170505160427_1.jpg

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

fix.png

Share this post


Link to post

@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)

 

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 by IIYAMA

Share this post


Link to post
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)

 

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 )

Share this post


Link to post
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 by IIYAMA
  • Like 1

Share this post


Link to post
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 by IIYAMA

Share this post


Link to post

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

 

Edited by thisdp

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post

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

Edited by thisdp

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.