Instantiating objects on one canvas based on positions on another canvas?

Unity Engine
1

Hi all -

So, having released a game on the app store, I know I should know this but - how do instantiate objects on one canvas based on the position of an object of another canvas?

For example: I have an image on Canvas A and I want to instantiate an arrow pointing to that image on Canvas B. However, if I simply use the following code, the image will be instantiated in the center of Canvas A.

GameObject go = Instantiate(imageA, CanvasA);
go.transform.position = canvasBImage.transform.position;

What I want to do is to ensure that the image gets instantiated with a specific reference to the position of the image on Canvas B.

For those interested, Iā€™m working on a tutorial overlay system. Canvas A is the semi-transparent tutorial overlay screen, while images on Canvas B are actual UI elements. The idea is to use highlights and arrows on Canvas A to point to specific elements on Canvas B.

I suspect I need to much about with converting the positions of both canvases into some sort of a global, unified world reference system - but I honestly donā€™t know where to start looking. For what its worth, I was one of those happy newbies who were content to keep everything confined to a single canvas - until, you know, realizing just how big of a performance hit it was.

2

Assuming the canvases were the same size, and both objects were anchored the same (I think?) , you could use localPosition, I think.

If they are different sizes, then you might want to work out their relative position (eg: 15% in from the left, and 40% of the screen height).

One other option would be to simply use just 1 canvas. :slight_smile: Maybe itā€™s just me, but I always only use one. With the exception of some world canvas I could theoretically imagine using one day, one canvas always works for me. Maybe Iā€™ve just never gotten to a point of wanting another. Who knows.

1 Like
3

Hi Methos!

Thanks for your quick reply. The canvases are indeed the same size - but using local positions somehow results in the X coordinate being correct while the Y coordinate is not.

The idea of using a separate canvas for the tutorial overlay is that, once Iā€™ve cracked this, implementing any number of tutorial elements would be ridiculously easy. Besides, Iā€™ve already got two ā€œworkingā€ canvases running (one for one of my major sub-menus, another for the rest of the game) - so I already need an overlay solution that would cut across both canvases.

Either way, thanks again for trying to help!

4

No problem. Thatā€™s a little odd that only 1 coordinate worked. Did you make sure the other settings of the rect transform were the same?
As I wrote, I do not ever use more than 1 canvas, but this still seems like a somewhat simple issue, even without experience :slight_smile:

I just tested it and itā€™s working for me.
Quick n easy setup (not sure if itā€™s like yours):
Canvas :

  • child canvas #1:
  • 1 image, x, y position whatever
  • 1 extra image (instead of prefab)
  • child canvas #2:
    ā†’ includes script with canvas #2 as destination, extra image as ā€˜prefabā€™ and target transform as first image in canvas #1.
public Transform canvas;
public RectTransform RTMatch;
public GameObject prefab;

private void Start()
{
   GameObject newobj = Instantiate(prefab);
   newobj.transform.SetParent(canvas);
   newobj.transform.localPosition = RTMatch.localPosition;
}
1 Like
5

Hi Method -

Thank you - I think youā€™re right! Upon digging further, it seems that the local position Y coordinate of the objects Iā€™m trying to point the arrow at is wrong - which explains why the X coordinate was right but the Y one was not. Well, thatā€™s a start - let me see if I can dig down to the bottom of this. Thanks again!

6

Okay, good luck. Hope you get it figured out :slight_smile: