ブログ

(Unity2020)BMI計算機をつくる(その2)UIの作成

(1)下準備

  • Create Emptyを作成
  • 名前を「BMI」に変更

 

(2)UIの作成

(ポイント)<ユーザーの入力を受け付ける方法>

  • Canvasの上で右クリック・・・>UI・・・>Input Fieldをクリック
  • 名前を「Input_Weight」に変更
  • 入力エリアの大きさは自由に設定

  • Placeholderを選択
  • Textエリアに「Kg」と入力
  • Font Sizeは自由に変更
  • Alignmentは中央寄せ

 

  • Textを選択
  • Font Sizeは自由に変更
  • Alignmentは中央寄せ

 

  • 体重の入力エリアが完成したら、これを「複製」して「身長」の入力エリアを作成しましょう。
  • 名前は「Input_Height」に変更

 

*Buttonを含めて、残りのUIを作成ましょう。

 

(3)スクリプトの作成

  • 新規にC#スクリプトの作成
  • 名前を「BMI」に変更
  • 下記のコードを書いてチェック

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class BMI : MonoBehaviour
{
    public GameObject input_weight;
    public GameObject input_height;

    private string weight;
    private float w;

    private string height_cm;
    private float h;
    private float height_m;

    private float result;

    public Text bmiLabel;
    public Text degreeLabel;

    public void OnCalculationButtonClicked()
    {
        // ①ユーザーが入力した体重データの処理
        // 入力データは「string型」
        weight = input_weight.GetComponent<InputField>().text;

        // 入力データを計算で使用できるように「float型」に変換する。
        w = float.Parse(weight);

        // ②ユーザーが入力した身長データの処理
        height_cm = input_height.GetComponent<InputField>().text;

        h = float.Parse(height_cm);

        // 身長をメートル換算に変更
        height_m = h / 100;

        // ③BMIの計算
        result = w / (height_m * height_m);

        // ④BMIの結果を画面に表示
        bmiLabel.text = "BMI・・・>" + result.ToString("n1");

        // ⑤肥満判定を画面に表示
        if (result >= 40)
        {
            degreeLabel.text = "肥満判定>肥満度4";
        }
        else if (result >= 35)
        {
            degreeLabel.text = "肥満判定>肥満度3";
        }
        else if (result >= 30)
        {
            degreeLabel.text = "肥満判定>肥満度2";
        }
        else if (result >= 25)
        {
            degreeLabel.text = "肥満判定>肥満度1";
        }
        else if (result >= 18.5)
        {
            degreeLabel.text = "肥満判定>標準体重";
        }
        else
        {
            degreeLabel.text = "肥満判定>低体重";
        }
    }
}

(4)設定

  • BMIオブジェクトにスクリプトを追加
  • 空欄を埋める。

  • ボタンの設定(復習)

 

(5)ゲーム再生

  • 設定が完了したらゲーム再生
  • 体重と身長を半角数字で入力
  • 計算ボタンを押した瞬間、BMIと肥満判定が表示されれば成功です。