C

C#

help

Join Server

Check if a UiElement touch another UiElement [Answered]

Zzonedetec9/16/2022
Hey guys,
I am doing a rock paper scissors who play alone and do a "fight".
Look at the image. How can I know if one element touch another one. Like an "element come in contact event"

Thanks guys.

PS: I need to know what is the element that touch the element we have on the variable
ImageImage
YYawnder9/16/2022
(I can safely say you're not speaking Québec-French)
YYawnder9/16/2022
But for your question: You have the position and size of the items?
Zzonedetec9/16/2022
yes
YYawnder9/16/2022
Are they all considered circles, square, or something else?
Zzonedetec9/16/2022
square
Zzonedetec9/16/2022
I can show the border
Zzonedetec9/16/2022
you want to for loop each element to see if the x and y are the same ?
YYawnder9/16/2022
Then you check if any corner of an item is within the boundaries of another.
YYawnder9/16/2022
Not the same. Contained within.
Zzonedetec9/16/2022
but isnt that too much ? a 100 for loop in a 100 for loop ?
Zzonedetec9/16/2022
will the program be slower?
YYawnder9/16/2022
It's not quite that many though.
Zzonedetec9/16/2022
okay I see
Zzonedetec9/16/2022
I'm gonna do it I keep you in jus (idk how to say in english lol)
YYawnder9/16/2022
for (int i = 0; i < [Whatever]; i++)
{
  for (int j = i + 1; j < [Whatever]; j++)
  {
  }
}
YYawnder9/16/2022
See how the inner for starts at i + 1, not 0.
Zzonedetec9/16/2022
I'm gonna do a foreach loop on that case, it will be more faster and useful
Zzonedetec9/16/2022
and if(uielement is not x) so it avoid counting the same
YYawnder9/16/2022
Say it in French and I'll tell you the word you're looking for 😉
Zzonedetec9/16/2022
je te tiens au courant
Zzonedetec9/16/2022
xD
YYawnder9/16/2022
"I'll keep you posted."
Zzonedetec9/16/2022
I see
YYawnder9/16/2022
I wouldn't do that. If you do, you can't start the inner loop at the current index of the outer one.
YYawnder9/16/2022
And it's not only "is not".
YYawnder9/16/2022
Go for a simpler example. Let's say you have 3 coins (a, b, c). How would you check if any coins touch.
Zzonedetec9/16/2022
Oh I see. I wanted to put this is the foreach loop I already have that make a random move for every element but it will be better to make it out of this loop
YYawnder9/16/2022
You check if A touches B, if A touches C, if B touches C. You never check if B touches A or C touches A since you already did the other way around.
Zzonedetec9/16/2022
I see
Zzonedetec9/16/2022
okay that smart
Zzonedetec9/16/2022
I would never think of it
YYawnder9/16/2022
And to see if they overlap, since they're all the same size, you check if a corner is inscribed within a rectangle.
Zzonedetec9/16/2022
I'm gonna afk I come back to you later
YYawnder9/16/2022
Meaning:
corner.X >= shape2.Left && corner.X <= shape2.Right &&
corner.Y >= shape2.Top && corner.Y <= shape2.Bottom
YYawnder9/16/2022
Sure
YYawnder9/16/2022
(if you don't understand something I say, I can translate. I just have to keep it generally in English to allow for anyone to step in and help.)
Zzonedetec9/16/2022
Okay so I tried to follow your step but it did not work, or I did mess up with the direction

for (int i = 0; i < Canvas_Board.Children.Count; i++)
{
    for (int j = i + 1; j < Canvas_Board.Children.Count; j++)
    {
        if(Canvas.GetLeft(Canvas_Board.Children[i]) - ElementSize / 2 >= Canvas.GetLeft(Canvas_Board.Children[j]) - ElementSize / 2 &&

            Canvas.GetRight(Canvas_Board.Children[i]) - ElementSize / 2 <= Canvas.GetRight(Canvas_Board.Children[j]) - ElementSize / 2 &&

            Canvas.GetTop(Canvas_Board.Children[i]) - ElementSize / 2 >= Canvas.GetTop(Canvas_Board.Children[j]) - ElementSize / 2 &&

            Canvas.GetBottom(Canvas_Board.Children[i]) - ElementSize / 2 <= Canvas.GetBottom(Canvas_Board.Children[j]) - ElementSize / 2)
        {
            (Canvas_Board.Children[i] as Border).BorderBrush = Brushes.Red;
            (Canvas_Board.Children[i] as Border).BorderThickness = new Thickness(5);
        }
    }
}
YYawnder9/16/2022
Not quite. I think you should break it down first. Extract the values you'll need, it will make it easier to debug:
// Between the two for:
var corner1X = ...
var corner1Y = ...
var corner2X = ...
var corner2Y = ...
var corner3X = ...
var corner3Y = ...
var corner4X = ...
var corner4Y = ...

// In the two for:
var leftBound = ...
var rightBound = ...
var topBound = ...
var bottomBound = ...

And then do your checks.
YYawnder9/16/2022
So for example, corner1X will probably be Canvas.GetLeft(Canvas_Board.Children[i]) while corner2X will probably be Canvas.GetLeft(Canvas_Board.Children[i]) + ElementSize
Zzonedetec9/16/2022
Okay I see thank you, so corner3 = right and corner4 = bottom?
YYawnder9/16/2022
I went with 1 = top left, then clockwise.
YYawnder9/16/2022
Or you can do
1 2

3 4
YYawnder9/16/2022
It's not important, as long as you know!
Zzonedetec9/16/2022
Okay so with all the respect I have for you this was really too much complicated for me. I found another solution on the internet using Rect.Intersect(), and it work really really great with few lines. But thanks a lot for the time you take to help me

                for (int i = 0; i < Canvas_Board.Children.Count; i++)
                {
                    for (int j = i + 1; j < Canvas_Board.Children.Count; j++)
                    {
                        var intercession = Rect.Intersect(new Rect(Canvas.GetLeft(Canvas_Board.Children[i]), Canvas.GetTop(Canvas_Board.Children[i]), ElementSize, ElementSize),
                            new Rect(Canvas.GetLeft(Canvas_Board.Children[j]), Canvas.GetTop(Canvas_Board.Children[j]), ElementSize, ElementSize)) == Rect.Empty ? false : true;

                        if (intercession)
                        {
                            (Canvas_Board.Children[i] as Border).BorderBrush = Brushes.Red;
                            (Canvas_Board.Children[i] as Border).BorderThickness = new Thickness(5);
                            (Canvas_Board.Children[j] as Border).BorderBrush = Brushes.Red;
                            (Canvas_Board.Children[j] as Border).BorderThickness = new Thickness(5);
                        }
                    }
                }
Zzonedetec9/16/2022
Image
AAccord9/17/2022
✅ This post has been marked as answered!