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

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.

Code (CSharp):

1. GameObject go = Instantiate(imageA, CanvasA);
2. 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.

 

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. 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.

 

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!

 

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

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.

Code (csharp):

1.  
2. public Transform canvas;
3. public RectTransform RTMatch;
4. public GameObject prefab;
5.  
6. private void Start()
7. {
8.    GameObject newobj = Instantiate(prefab);
9.    newobj.transform.SetParent(canvas);
10.    newobj.transform.localPosition = RTMatch.localPosition;
11. }

 

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!

 

Okay, good luck. Hope you get it figured out