![](https://www.ame-name.com/wp-content/uploads/2020/12/touchpanel1-1.gif)
テキストやボタンをワールド空間に置いて、タッチパネルを作ってみました。
まずキャンバスにテキストとボタンを置いて、キャンバスのRender ModeをWorld Spaceにし、画面でなくワールド空間に表示させます。このままだと大きいのでWidthとheightを小さく設定しました。
![](https://www.ame-name.com/wp-content/uploads/2020/12/WS011441-1.jpg)
![](https://www.ame-name.com/wp-content/uploads/2020/12/WS011440-1.jpg)
ボタンを中央に表示してみるとやはり大きすぎるので、ボタンのWidth,Heightも小さくします。
![](https://www.ame-name.com/wp-content/uploads/2020/12/WS011442-1.jpg)
![](https://www.ame-name.com/wp-content/uploads/2020/12/WS011457-1.jpg)
すると、角が丸すぎて変です。
![](https://www.ame-name.com/wp-content/uploads/2020/12/WS011444-1.jpg)
ボタンのImageコンポーネントのImage TypeをSlicedにして、Fill Centerのチェックを入れ、Pixels Per Unit Multiplierの値を上げると良くなりました。
![](https://www.ame-name.com/wp-content/uploads/2020/12/WS011443-1.jpg)
![](https://www.ame-name.com/wp-content/uploads/2020/12/WS011445-1.jpg)
テキストも表示が変なので、CanvasのDynamic Pixels Per Unitの値を上げます。
![](https://www.ame-name.com/wp-content/uploads/2020/12/WS011447-1.jpg)
テキストの大きさはScaleとFont Sizeで変えられます。Horizontal/Vertical Overflowを両方ともOverflowにするとすべて表示されます。
![](https://www.ame-name.com/wp-content/uploads/2020/12/WS011458-1.jpg)
![](https://www.ame-name.com/wp-content/uploads/2020/12/WS011463-1.jpg)
例えば、horizontal OverflowをWrapにして、Widthを下げると、Widthを超えた部分が折り返されます。
![](https://www.ame-name.com/wp-content/uploads/2020/12/WS011460-2.jpg)
![](https://www.ame-name.com/wp-content/uploads/2020/12/WS011459-1.jpg)
![](https://www.ame-name.com/wp-content/uploads/2020/12/WS011461-1.jpg)
![](https://www.ame-name.com/wp-content/uploads/2020/12/WS011462-1.jpg)
ボタンのテキストも同様に設定しました。
ボタンをクリックしたときの処理を+ボタンから追加できます。テキストをアタッチして、プルダウンメニューからText.textを選び、空欄に文字を入れると、クリックした時にテキストがその文字に変わります。
![](https://www.ame-name.com/wp-content/uploads/2020/12/WS011452-1.jpg)
![](https://www.ame-name.com/wp-content/uploads/2020/12/WS011464-1.jpg)
Canvasを回転させると、文字やボタンを斜めに表示できます。
![](https://www.ame-name.com/wp-content/uploads/2020/12/WS011454-1.jpg)
これでワールド空間にタッチパネルを作れました。
![](https://www.ame-name.com/wp-content/uploads/2020/12/WS011455.jpg)