canvasにボタン　何故動く

[【完走目指す】初心者が25日で強くなる Advent Calendar 2022](https://qiita.com/advent-calendar/2022/aruhitoganbaru)
8日目の記事です。そろそろ基礎知識はマスターできたでしょうか。今日か明日あたりで備忘録を終わりにして、実際に作る工程に進みます。実際にやってみれば、文字を見るだけでは得られない知識が得られるでしょう。

---
# Canvas
Hierarchyを右クリック > UI で、何かしら(Textとか、Buttonとか)を押したときに出てくるCanvas。
作ったものはCanvasにくっついていて、うまく動作する。
![スクリーンショット_20221206_211903.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961125/2649fcd3-a483-fb86-e75c-cc21e5d4b07a.png)
![スクリーンショット_20221206_212122.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961125/ee73cf40-2960-913e-407a-360a1eceae17.png)

では、もしCanvasからくっついているものを外したらどうなるだろうか。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961125/d08f51ad-ddc5-f152-b9cb-8e36696bc4e3.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961125/a74603b5-a3c2-3911-4d0f-edfadca4ec37.png)
消えた。でかでかと表示されていたボタンが、消えた。

では、なぜ消えたのだろうか。

## Canvasのせい
Canvasについて詳しく調べていく。
>Canvas コンポーネントは UI が配置、描画される抽象的な領域です。すべての UI 要素は Canvas コンポーネントがアタッチされたゲームオブジェクトの子でなければなりません。メニュー( GameObject > Create UI )から UI 要素オブジェクトを作るとき、シーンに一つも Canvas オブジェクトがなければ自動的に作成されます。

https://docs.unity3d.com/ja/2020.3/Manual/class-Canvas.html

UI要素であるButtonやTextはCanvas上でしか動かないということだろう。
UI要素。なにこれ。まずUIについて調べる必要がありそうだ。

https://www.sejuku.net/blog/56370

ついでにcanvasの説明も

https://www.sejuku.net/blog/56615

要は、CanvasがないとUI要素は作れないということだ。

ところで、できないといわれるとやってみたくなる。
ButtonやTextをがんばってUI要素じゃなくすることはできるのだろうか。
あるいは、Canvas以外のオブジェクトをcanvas代わりにできるのだろうか。
## やってみた。
3パターンくらい。
その前に、canvasから外したButtonの残骸をご覧ください
![スクリーンショット_20221207_020755.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961125/de60ed5f-2308-0c54-e2ab-32c611812548.png)
目で見える部分は消滅しました。
緑の枠が動かせる状態です。

## 1.Colorをいじる
色を変えれば見えるようになるのでは?
![スクリーンショット_20221207_025641.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961125/6627441f-2d4d-c39f-6c61-d6039695b15f.png)
赤色とか紫とか。
結果
変らない。
写真を載せる必要もないだろう。
## 2.そのほかの設定もいじる
例えばtextのほうとか。ボタン関係ないところとかも一通りいじってみた。

結果
無理だった。

## 3.ボタンにCanvasをつける
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961125/1ba3a682-374f-7bc7-96cf-87cfb47f14da.png)
これを3Dオブジェクトのcubeにつけます。
結果は、
![スクリーンショット_20221207_021255.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961125/3b23f406-9be4-2a77-3bb9-5e59f34d6cf8.png)
見た感じ、canvasの文字はない。成功だろうか。


　では、sceneは、
![スクリーンショット_20221207_021443.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961125/6078647d-f170-245e-d701-b8816aa8e187.png)
#### なんでだよ！！！
Canvas、できてた。何となく予想はしていたが。
でも、ヒエラルキーのほうからCanvasを消し去ることができた。
Graphic Raycasterがないので、ボタンは動かないです。写真では調整済みですが、ボタンのサイズがとても大きくなりました。
## まとめ

Canvasを消し去っても意味はない
---
できたとは言えないだろう。Canvasは必須。その強さをわかっていただけただろうか。
Canvasはガンガン使い倒していこう。
余談ですが、この記事を作るのに５時間かかりました。
講義もバイトもある大学生の限界です。
あと、途中からですます調が混ざっていることに気づいたでしょうか。
内容と関係がないので、このままいきます。
でもボリュームに欠けるので、おまけをつけました。
## 簡単にゲーム作ってみた
押し順を当てるゲームです。
switch構文でintを使えなかったので、if文がいっぱいになっています。
簡単に作れます。

#### 材料
canvas…１個
ボタン…３個
text…１個
### 作り方
1.書く
```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
using TMPro;
public class RndBut  : MonoBehaviour
{
    public GameObject Btn1;
    public GameObject Btn2;
    public TextMeshProUGUI Rs;
    public int Rnd=1;
    public int hantei = 0;
  
    // Start is called before the first frame update
    void Start()
    {
        Rnd = Random.Range(1,3);

      
    }

    // Update is called once per frame
    void Update()
    {
      
       
       if (hantei >0)
        {
            if (Rnd == hantei)
            {
               Rs.text = "win";
            }
            else
            {
                Rs.text = "lose";
            }
        }else
        {
            Rs.text = "select!";

        }

    }
```
```
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class ButPush : MonoBehaviour
{
    public GameObject But1;
    public GameObject But2;
   public  RndBut Btn;
    
    

    // Update is called once per frame
    
    public void OnClick()
    {
        if (this.gameObject == But1)
        {
             Btn.hantei= 1;
        }
        if (this.gameObject == But2)
        {
            Btn.hantei = 2;
        }
        But1.SetActive(false);
        But2.SetActive(false);
    }
}

```
2ボタンやテキストにつけて、いい感じに調整する。
![スクリーンショット_20221207_233547.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961125/cb83ce92-853c-d1e6-90ee-1fd4f33ba503.png)


![スクリーンショット_20221207_233157.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2961125/4f4bfd19-45fd-4f50-c5a9-cae067cc051b.png)

できました
ボタンを押すと二分の一で当たります。


8日目　終わり