思い通りの位置にUIが表示できない。

１前提、問題
unityで簡単な将棋を作ろうとしています。将棋盤は四角いボタンをGrid Layout Groupで並べて将棋盤を作りました。Grid　Layout GroupはSyogiFieldsという空のゲームオブジェクトにコンポーネントとして追加しております。また、将棋盤の構成要素である四角いボタン(SyogiField)はSyogiFieldsの子要素としています。
そこで、将棋駒を指定したマス目のボタンの位置に置きたいのですが、全然思い通りに配置されません。
以下が実行時の画像です。

見て分かる通り、駒がマス目の上に配置されていません。

また、駒を生成するスクリプトは以下の通りです。

using
1using System.Collections.Generic;
2using UnityEngine;
3using UnityEngine.UI;
4using Photon.Realtime;
5using Photon.Pun;
6
7
8
9public class PhotonManagerScript : MonoBehaviourPunCallbacks
10{
11    [SerializeField]
12    GameObject King;
13    [SerializeField]
14    Canvas canvas;
15
16    private GameObject SyogiField;
17    private Transform SyogiParent;
18    Vector2 KingPoint;
19    
20    public int sizeX = 3;
21    public int sizeY = 4;
22
23
24    GameObject[,] SyogiFieldList = new GameObject[3,4];
25    // Start is called before the first frame update
26    void Start()
27    {
28        PhotonNetwork.ConnectUsingSettings();
29        SyogiField = Resources.Load("SyogiField") as GameObject;
30        SyogiParent = GameObject.Find("SyogiFields").transform;
31    }
32
33    public override void OnConnectedToMaster()
34    {
35        PhotonNetwork.JoinOrCreateRoom("room", new RoomOptions(), TypedLobby.Default);
36    }
37
38    public override void OnJoinedRoom()
39    {
40        Debug.Log("Success !");
41        for(int i = 0; i < sizeX; i++)
42        {
43            for(int j = 0; j < sizeY; j++)
44            {
45                GameObject SyogiBan = Instantiate(SyogiField);
46                SyogiBan.transform.SetParent(SyogiParent);
47
48                SyogiFieldList[i, j] = SyogiBan;
49            }
50        }
51        KingPoint = SyogiFieldList[2, 1].GetComponent<RectTransform>().anchoredPosition;
52        GameObject InsKing = Instantiate(King,KingPoint,Quaternion.identity);
53        Debug.Log(KingPoint);
54        InsKing.transform.SetParent(canvas.transform,false);
55
56    }
57    
58コード

オンライン対戦にしようとしているのでPhotonを使用しております。KingPointに駒の生成位置を代入してます。SyogiFieldListというのに一個一個のマス目が入っていて、その中の一要素を取り出しその座標を求めてその座標にコマを生成しようとしています。
ちなみに、KingPointを表示させた結果(249.3,-170.0)と表示されました。

本当はマス目の上に配置されるように生成したいのですが、どうもオブジェクトの座標を求めて代入するとおかしくなってしまうようです。

２試したこと
KingPointにnew Vector2(0,0)を代入してみました。すると、Canvasの真ん中に表示されました。
しかし、将棋盤の位置を求めて代入したところ先ほどの写真のようになってしまいました。また、SyogiFieldListの[]内の数字を変えても先ほどの写真と同じようになりました。
そして、「将棋盤を構成する四角いボタンが空のオブジェクトの子要素としているがために、将棋駒の四角いボタンから位置を取得しようとしても正しい位置が取得できないのかもしれない」と思ったのですが、SogiFieldListの[]内の番号を変えても、将棋駒の位置に変化は見られなかったので、この考えは違うのではと考えました。

３最後に
今までUIにあまり深く踏み込んでこなかったのでよくわかってなく、解決策もよくわかりません。
もし、分かる方がいらっしゃいましたら、助けていただけるとありがたいです。
また、追加で必要な情報がございましたら、おしゃってください。出来る限りの対応をさせていただきます。

bboydaisuke

2020/07/13 14:24

スクリプトじゃなくて、シーンにオブジェクトを手動で配置することはできますか？それとも、自分で配置することはできるんだけどもスクリプトからやろうとすると思い通りにできない、ということですか？手動で配置することができないなら、まずそこから学ぶ必要があります。

bboydaisuke

2020/07/13 14:58

「将棋の駒」のスプライトを描画しているコンポーネントは何でしょうか。Sprite Renderer なら、UI を表示している領域と Sprite Renderer により表示されるワールド座標系は違います。次元が違う、という感じで、ワールド座標系とスクリーン座標を逐次変換する必要があります。それは正直説明も作るのも面倒臭すぎるので、将棋の駒は UI 上に Image または RawImage コンポーネントで表示すれば、同じ次元・同じ座標系になるので相当楽になると思います。

ligo

2020/07/13 21:48

御回答ありがとうございます。手動で配置するというのはドラッグアンドドロップしてScene上に表示させたり位置をずらしたりできるかということでしょうか？そのような意味でしたら、可能です。しかし、質問の方で挙げさせて頂いたスクリプトで生成しようとするとどうしても将棋盤の上に配置されません。座標は将棋駒も将棋盤もスクリーン座標系です。こちら側の回答はこのような感じでよろしいでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

KingPointはRectTransform上での位置（＝Canvas上での位置）ですが、
Instantiateで設定されるのはTransformによる位置（＝3D空間での位置）です。

なのでSetParentの後に
InsKing.GetComponent<RectTransform>().anchoredPosition = KingPoint;
を入れてください。

なおこれでもずれる場合、アンカーが違っている場合があります。
基本的なレイアウト - Unity マニュアル
このページの「Rect Transform」の画像にある「Anchors」の部分の値が
ボタンと将棋の駒で同一か確認してください。

投稿2020/07/14 00:13

sakura_hana

総合スコア11427

ligo

2020/07/14 00:59

御回答ありがとうございます。おっしゃる通りにやってみたのですが、やはり、生成位置は先に挙げさせていただいた画像と同じ位置になってしまいました。KingPointを表示させたところKingPoint自体の座標がおかしいようです。また、アンカーに関して、おっしゃる通りコマのアンカーはCanvasの中央にきているのに対してSyogiFieldのアンカーは親オブジェクトであるSyogiFieldsの左上の部分にありました。実行前はアンカーは中央に指定されているのですがGrid Layout Groupの子要素にすると変わってしまようです。僕の現在のスキルではどのように解決すればいいのかわからないので、ご指導いただけるとありがたいです。