Robloxで画面メニュー（GUI）をつくる：入門編

# 概要
- 画面上に選択肢やHPなどを出す
    - 「マップ選択」とか「警察か犯罪者か、どっちを選ぶか」とか
    - 画面上に自分のHPや所持コイン数を出すとか
     
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/67604f83-d622-294c-e2b8-3f2b06b57bf7.png)

# GUIとは
- GUIはGraphical User Interfaceの略

# どうやってGUIを画面に出すか
1. ExploerからStarterGUIを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/6fcfb3e4-86bf-1a6b-3945-0706b9e9624e.png)
2. StarterGUIのとなりの「＋」マークをおす
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/ce70cdab-34b0-2c60-1a4a-b741ee1341c1.png)
3. ScreenGUIをえらぶと、からっぽのScreenGUIが画面に追加される（まだ見えない）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/0a75edb7-71f9-75c9-c318-5ab39ef0b4c0.png)
4. ScreenGUI上にTextLabelを追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/930258e5-4aa8-aa10-d1ab-37a948437c64.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/9e86f335-7cd1-af90-4f07-1cb7926f6d4b.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/cf84457a-f59a-f371-44c0-32a39c797343.png)

# GUIをいろいろ変えてみる
1. TextLabelを選択してからPropertyウィンドウをひらく
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/be7c32e8-e9af-3354-6ad4-15480f5e6224.png)

2. フォント（Fontは文字の形です）をえらべます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/552280f4-a6b4-bcfa-8bc5-bdf9cdacf567.png)
3. 表示する文字や、そのサイズを変えられます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/e5ed4755-698d-3db4-754a-5c6c2bd5d366.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/6a74606d-d980-9927-5964-df83f65ac6f5.png)
4. ラベルの枠の太さや色を変えられます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/b612f100-d79b-5ca4-1462-cb217315ba0b.png)
5. ラベル全体の大きさを変えられます（Scale）

| ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/07ce8a02-b6e5-35ab-c99a-8297c5338808.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/ccf8d189-1f4e-4560-65da-2dcf7b700dc1.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/4d3f8a4c-d0b7-6a65-8492-9fe11aaa9595.png) |
|:-----------------:|:------------------:|:------------------:|
| Scale=0.1 | Scale=0.5 | Scale=0.95 |
| 画面の左上にちょっぴり | 画面1/4に表示 | 画面ほぼ全体に表示 |



# GUIにおける座標について
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/e819d36b-f4ec-2e1c-a562-8e6dc42ecacb.png)

# GUIへ画像を出す方法
1. ScreenGUIにImageLabelを追加（TextLabelと同じ方法）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/f3f97c5f-7d13-fc78-3a4a-1c37086ec9ba.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/1134b344-f521-db20-f844-a3b47806c303.png)
2. ※まずあなたのRobloxゲームを、世界中に大して公開しておく必要があります。
[自分のつくったRobloxを世界中へ公開する方法](https://qiita.com/PrivateUeno/items/6245fc1017cde7ff7e68)
3. ImageラベルのPropertyにある「Image」から画像をアップロード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/cd84bb68-9f7f-a91a-5d96-eb2cf5bf568c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/628f9490-8e2c-ca10-d6a4-d09d880267bb.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/206887/56093c19-5a8b-9bdb-3226-8f38d92a7712.png)