スクラッチのその次は？スクラッチブロック→Unityコード　変換表　「見た目」編

2023年9月5日

スクラッチからUnityへシフトアップ

第二回目の今回は「見た目」偏です。

Unityで見た目を管理するには「UI」という機能が必須です。コスチューム変更はアニメーション機能を使うと便利です。

こんにちは！と言う

Unityで文字を表示させる方法は次の2つがあります。

Debug.Logメソッドを使って、Consoleに表示
Text などの UI を使ってScene上に表示

スクラッチと同じように、キャラクターにしゃべらせるには、UIを使うのが良いでしょう。

１，Consoleに表示

Debug.Logメソッドはプログラムの動きを確認したり、バグを検出するときに使用します。シーン上には表示されません。

Debug.Log("こんにちは！");

2，シーン（ステージ）上に表示

事前準備として、しゃべらせたいキャラクターの子要素にUI の Text を配置します。

Inspector の RectTransformコンポーネントではキャラクターに対する相対的な座標、Textの幅、高さなどを指定します。

Textコンポーネントではフォントサイズ、フォントスタイル、整列位置などを指定します。

UIツールを使用するには、NameSpace と呼ばれるスクリプトファイルの上部で以下のようにUIを使用する宣言をします。尚、このスクリプトファイルは発言する対象（サンプルではCat）にアタッチします。

using UnityEngine.UI;

次にUI の Text コンポーネント型の変数の宣言と初期値の取得、及びテキストを置き換える関数を作ります。

Text catText;  //Textコンポーネント型の変数を宣言

void Start()
{
    //子要素が持つTextコンポーネントを取得し、変数に代入
    catText = GetComponentInChildren<Text>();  
}

void Say(string s)  //指定した言葉を発する関数を作成
{
    catText.text = s;    //受け取った引数をテキストに表示
}

作った関数を利用して発言をするときは以下のコードを記述します。

 Say("こんにちは！");    //こんにちは！と言う

こんにちは！と2秒言う

コンソールには2秒だけ表示するという機能はありません。今回はUIを使ってステージ上でキャラクターに言葉を2秒間言わせます。

上の「こんにち！はと言う」ブロックで用意した様に、キャラクターに UI の Text を子要素として配置します。

NameSpaceに UIを使用する宣言をします。

using UnityEngine.UI;

次にUI の Text コンポーネント型の変数の宣言と初期値の取得します。テキストは2秒後に消す必要があるので、テキストを置き換える関数はコルーチンにします。

Text catText;  //Textコンポーネント型の変数を宣言

void Start()
{
    //子要素が持つTextコンポーネントを取得し、変数に代入
    catText = GetComponentInChildren<Text>();  
}

//引数:s の文字を表示、引数:t秒後に消す関数
IEnumerator Say(string s,float t)　
{
    catText.text = s;                    //引数:s でテキストを更新
    yield return  new WaitForSeconds(t); //引数:t秒待機
    catText.text = null;                 //テキスト文字をnull（無し）に
}

作った関数を利用して発言をするときは以下のコードを記述します。

StartCoroutine( Say("こんにちは！",2.0f));  //2秒後にこんにちは！と言う

うーん...と考える／うーん...と2秒考える

「〇〇という」「〇〇と2秒言う」と同じです。

コスチュームを〇にする

コスチュームは、AnimatorコンポーネントでAnimationを発動する方法と、SpriteRendererコンポーネントで Sprite を変える方法があります。今回はスクラッチに近い、SpriteRenderer コンポーネントの Spriteプロパティを変更する方法をご紹介します。

事前に SpriteRenderer コンポーネント型の変数の宣言と初期値の取得、変更するコスチューム（スプライト）をアクセス修飾子 public で宣言、Inspector から Assign します。

SpriteRenderer sr;      //SpritRenderer型の変数を宣言
public Sprite catImg;   //変更する画像をpublicで宣言

void Start()
{
    sr = GetComponent<SpriteRenderer>();  //srの初期値を取得
}

変更するときは次のコードを記述します。

 sr.sprite = catImage;   //コスチュームを指定した画像に変更

次のコスチュームにする

複数のコスチュームを切り替えるには、SpriteRendererコンポーネントを使う方法とAnimatorコンポーネント使う方法があります。

１，SpriteRendererコンポーネント

事前に SpriteRenderer コンポーネント型の変数の宣言と初期値の取得、変更するコスチューム（スプライト）をアクセス修飾子 public で配列として宣言、Inspector から配列に変更するスプライトの数だけ順番にAssignします。

SpriteRenderer sr;          //SpritRenderer型の変数を宣言
public Sprite[] picoImage;  //使用するコスチューム（Sprite）を配列で登録
int count;                  //コスチュームの順番を管理

void Start()
{
    sr = GetComponent<SpriteRenderer>();  //srの初期値を取得
}

インスペクターから作成した配列に、変更したい順にスプライトをAssignします。

コスチュームを変更させるには、SpriteRendererコンポーネントの画像を順番に置き換えます。

int num = count % picoImage.Length;  //次の番号はcountを配列数で割った値に
sr.sprite = picoImage[num];          //スプライト番号を指定
count++;                             //count を更新

活用例

ずっと、次の処理を繰り返す

　もしどれかのキーが押されたら、

　　0.2秒待つ

　　次のコスチュームにする

float currentTime;    //経過時間を管理

void Update()
{
    currentTime += Time.deltaTime;          //経過時間を更新
    //もし何かのキーがおされた、かつ、経過時間が0.2秒を越えたら
    if (Input.anyKey && currentTime > 0.2f)
    {
        int num = count % picoImage.Length;  //次のコスチューム番号を算出
        sr.sprite = picoImage[num];          //コスチュームを指定
        currentTime = 0;                     //経過時間をリセット
        count++;                             //countを更新        
    }
}

２，Animatorコンポーネント

Animatorコンポーネントを使ったコスチューム変更を行うには、事前にAnimationを作る必要があります。

事前にAnimatorコンポーネントを使う変数を宣言し初期値を取得します。

Animator animator;      //Animatorコンポーネント型の変数を宣言

void Start()
{
     animator = GetComponent<Animator>();    //初期値を取得
     animator.enabled = false;               //アニメーションを無効にする
 }

必要に応じアニメーションの有効、無効を切り替えます。

 animator.enabled = true;               //アニメーションを有効にする

活用例

もしどれかのキーが押されたら　　次のコスチュームにする

そうでなければ　　コスチュームを止める

void Update()
{
    if (Input.anyKey){ animator.enabled = true; }
    else{ animator.enabled = false; }
}

背景を〇する

背景を必要とするのは2Dのケースがほとんどかと思いますので、2Dを前提で説明します。

事前に UI の Panel を使って背景を準備します。

通常UIは最前面に配置されるので、Canvas の Render Mode を Screen Space-Camera にし、RenderCamera に MainCamera を指定、SortingLayer を使って最背面に表示させましょう。

Panel には最初の背景を指定します

まずはUIを使うので、NameSpace で UI を使う宣言をします。

using UnityEngine.UI;

Panel の Imageコンポーネントにアクセスするための変数と、変更後の背景画像を変数で宣言します。

public Sprite bgSprite;      //画像を管理する変数
public Image image;          //パネルの Imageコンポーネント

インスペクターから変数：bgSprite に変更したい画像を、変数：Image に用意した Panel をそれぞれAssignします。

背景画像を変更するには次のコードを記述します。

 image.sprite = bgSprite;

次の背景にする

「背景を〇にする」と同じ手順で、UIを用意します。

まずはUIを使うので、NameSpace で UI を使う宣言をします。

using UnityEngine.UI;

Panel の Imageコンポーネントにアクセスするための変数と、複数の背景画像を管理する配列を宣言します。

public Sprite[] bgSprites;   //画像を管理する配列
public Image image;          //パネルの Imageコンポーネント
int count;                   //コスチュームの順番を管理する変数

インスペクターから配列：bgSprites に変更したい複数の画像を、変数：Image に用意した Panel をそれぞれAssignします。

背景画像を順番に変更するには、変更したい場所で次のコードを記述します。

count++;
int num = count % bgSprites.Length;
image.sprite = bgSprites[num];

大きさを 10 ずつ変える

大きさは　transformコンポーネントの Scale プロパティが管理しています。

スクラッチは基準の大きさが100で、10ずつ変えるということは10％ずつ大きくなることです。Unityでは基準の大きさが 1 なので、0.1ずつ大きくなります。

 transform.localScale += Vector3.one * 0.1f;

大きさを 100% にする

大きさは　transformコンポーネントの Scale プロパティが管理しています。大きさを100％にするということは、基準の大きさにするということです。

transform.localScale = Vector3.one;

「〇〇」の効果を〇ずつ変える

色の効果は 3DオブジェクトではRendererコンポーネント、2DコンポーネントではSpriteRendererコンポーネントが管理します。

スクラッチでは「色」「魚眼レンズ」「渦巻き」「ピクセル」「モザイク」「明るさ」「幽霊」それぞれの効果を指定することが出来ますが、Unityでは標準機能で「色」「明るさ」「幽霊」の効果を変更することが出来ます。

色の効果を〇ずつ変える

Unityで色の指定には赤、緑、青の強さを指定するRGB形式と、色相、彩度、明るさを指定す HSV形式があります。

スクラッチの色の効果はHSV形式の色相に相当し、Inspector では0度～360度で同じ色相に戻るように設計されています。(Scratchでは0～200で１周）

コードで指定するには HSVToRGBメソッドを使用し、H,S,Vそれぞれ0～1の間の値で指定します。

今回の事例では2Dオブジェクトで指定します。

事前に変数の宣言と初期値の取得を行います。

float hue;          //現在の色相
SpriteRenderer sr;  //spriteRendererコンポーネント

void Start()
{
    sr = GetComponent<SpriteRenderer>();   //コンポーネントの取得
}

色を更新するには HSVToRGBメソッドを使用します。サンプルでは hue の値を1ずつ更新していますが、必要に応じ変化する数値を指定します。

hue++;      //現在の色相をインクリメント
//色相を変更させて、新しい色で更新
sr.color = Color.HSVToRGB(hue % 360 / 360, 1.0f, 1.0f);

明るさの効果を〇ずつ変える

明るさの効果を指定する場合は HSV のSaturation（彩度）を指定すればよいのですが、変更では正しく表示されないようです。

またRGB形式でRed,Green,Blueそれぞれの値を徐々に大きくすることで、明るく（白身をつよく）することが出来ます。ただし、初期状態が白の2Dのスプライトの場合、この効果は発揮されません。

明るさの効果を暗くする場合は、同様にRed,Green,Blueそれぞれの値を小さくすることで、暗く（黒みを強く）することが出来ます。このケースでは2Dのスプライトでも効果が発揮されます。

今回のサンプルでは、3DオブジェクトにMaterialを適用します。

事前にMaterialを用意(Create→Material）し、任意の色を指定します。これを3Dオブジェクトの MeshRenderer の Materials にAssign（直接オブジェクトにドラッグ＆ドロップでも可）します。

事前に変数の宣言と初期値の取得を行います。

変数：changeSpeed　には、明るくしたい時はプラスの値を、暗くしたい時はマイナスの値を指定します。

Renderer rend;      //Materialを持つRendererコンポーネント
float changeSpeed = 0.01f;  //明るさの効果の変更速度

void Start()
{
    rend = GetComponent<Renderer>();    //初期値を取得    
}

明るさの効果を更新する場合は、Red、Green、Blue、それぞれの値を変更し、Materialの色を更新します。

float r = rend.material.color.r + changeSpeed;  //赤の値を変更
float g = rend.material.color.g + changeSpeed;  //緑の値を変更
float b = rend.material.color.b + changeSpeed;  //青の値を変更
rend.material.color = new Color(r, g, b);       //明るさを更新

幽霊の効果を〇ずつ変える

幽霊の効果はRGBAのAの値（Alpha値）を変更します。

スクラッチでは大きくなるほど幽霊の効果が強くなりますが、Unityでは逆で小さくなるほど透明に近くなります。

明るさの効果で準備した素材と同じ様に、3DオブジェクトのRenderコンポーネントに任意のMaterialをセットします。

この際、MaterialのRendring Mode を「Fade」に切り替え、Alpha値の変更で透明になるように指定します。 ※この作業は２Dのスプライトの色を変更する場合には必要ありません。

事前に変数の宣言と初期値の取得を行います。

変数：ghoatSpeed　には、幽霊の効果が進む速度を指定します。

Renderer rend;      //Materialを持つRendererコンポーネント
float ghostSpeed = 0.01f;  //幽霊の効果の変更速度

void Start()
{
    rend = GetComponent<Renderer>();    //初期値を取得    
}

幽霊の効果を変更する際は、既存の Red,Green,Blue の変化量は0、Alpha値のみ変更されるようにします。

rend.material.color -= new Color(0, 0, 0, ghostSpeed);

画像効果をなくす

「〇〇」の効果を〇にする　のブロックで変更した値をもとに戻します。

変更前に現在の色の各値を変数として保存、再度呼び出すことで画像効果がリセットされます。

事前に変数の宣言と初期値の取得を行います。

変数：ghoatSpeed　には、幽霊の効果が進む速度を指定します。

Renderer rend;      //Materialを持つRendererコンポーネント
Color myColor;      //変更前のcolor情報
void Start()
{
    rend = GetComponent<Renderer>();    //初期値を取得
    myColor = rend.material.color;      //変更前の色を取得  
}

後は任意の場所で、変更前の color に戻します。

rend.material.color = myColor;    //事前に保存している情報にリセット

隠す

オブジェクトを隠すには、Renderコンポーネント、またはSpriteRendererコンポーネントの enabled プロパティを false にして無効化にします。この時オブジェクトの見た目が透明になるだけで、実際には元の場所に存在しています。

GetComponent<Renderer>().enabled = false;

表示する

オブジェクトを再表示するには、Renderコンポーネント、またはSpriteRendererコンポーネントの enabled プロパティを true にして有効化します。

GetComponent<Renderer>().enabled = true;

最前面へ移動する

最前面、最背面などのLayerは、Rendererコンポーネント、またはSpriteRendererコンポーネントが管理しています。Layerを最前面、最背面に移動するには、Order in Layerプロパティを使うこともできますが、今回は Sorting Layerプロパティを使用します。

事前に下のように最前面のLayer、最背面のLayerを準備します。

最前面へ移動する場合

 GetComponent<SpriteRenderer>().sortingLayerName = "ForeGround";

最背面へ移動する場合

 GetComponent<SpriteRenderer>().sortingLayerName = "BackGround";

１層　手前に出す／奥に下げる

Layerの順番は Rendererコンポーネント、またはSpriteRendererコンポーネントが管理しています。

1層手前に出す場合

 GetComponent<SpriteRenderer>().sortingOrder += 1;

1層奥に下げる場合

 GetComponent<SpriteRenderer>().sortingOrder -= 1;

コスチュームの名前

コスチュームの名前、今回はAnimationに置き換えて説明します。Unityでは一つのオブジェクトに複数のアニメーションクリップを持たせることが出来ます。この中で現在起動しているアニメーションは、Animatorコンポーネントが持つGetCurrentAnimatorStateInfo() メソッドで取得したオブジェクトの IsNama プロパティが持ちます。

 GetComponent<Animator>().GetCurrentAnimatorStateInfo(0).IsName

使用例

Animator animator
animator = GetComponent<Animator>();
//もし今動いているアニメーションクリップの名前が「idle」なら
if(animator.GetCurrentAnimatorStateInfo(0).IsName("idle"))
{
    animator.SetBool("isRun", true); //isRun パラメータを true にする
}

背景の番号

背景の番号は「次の背景にする」で使用した配列の番号(変数：num)になります。

大きさ

大きさは　transformコンポーネントの Scaleプロパティが管理しています。Scaleプロパティはx,y,z それぞれの軸を持っており、使用する場合は localscale.x などの様に対象の軸を指定する必要があります。

transform.localScale

使用例

もし大きさが100％より大きいなら、大きさを100％にする

if (transform.localScale.x > 1)
{
    transform.localScale = Vector3.one;
}

ファイブボックスでは、スクラッチはもう卒業、という方向けにUnityの個別指導のオンラインレッスンを行っています。

ご興味のある方は当サイト、オンラインレッスンから、無料体験授業へお問い合わせ下さい。

スクラッチのその次は？スクラッチブロック→Unityコード　変換表　「見た目」編

こんにちは！と言う

１，Consoleに表示

2，シーン（ステージ）上に表示

こんにちは！と2秒言う

うーん...と考える／うーん...と2秒考える

コスチュームを〇にする

次のコスチュームにする

１，SpriteRendererコンポーネント

２，Animatorコンポーネント

Animatorコンポーネントを使ったコスチューム変更を行うには、事前にAnimationを作る必要があります。

背景を〇する

次の背景にする

大きさを 10 ずつ変える

大きさを 100% にする

「〇〇」の効果を〇ずつ変える

色の効果を〇ずつ変える

画像効果をなくす

隠す

表示する

最前面へ移動する

１層　手前に出す／奥に下げる

コスチュームの名前

背景の番号

大きさ

最新記事

Comments

スクラッチのその次は？スクラッチブロック→Unityコード 変換表 「見た目」編

こんにちは！と言う

１，Consoleに表示

2，シーン（ステージ）上に表示

こんにちは！と2秒言う

うーん...と考える ／ うーん...と2秒考える

コスチュームを〇にする

次のコスチュームにする

１，SpriteRendererコンポーネント

２，Animatorコンポーネント

Animatorコンポーネントを使ったコスチューム変更を行うには、事前にAnimationを作る必要があります。

背景を〇する

次の背景にする

大きさを 10 ずつ変える

大きさを 100% にする

「〇〇」の効果を〇ずつ変える

色の効果を〇ずつ変える

画像効果をなくす

隠す

表示する

最前面へ移動する

１層 手前に出す／奥に下げる

コスチュームの名前

背景の番号

大きさ

最新記事

Comments

スクラッチのその次は？スクラッチブロック→Unityコード　変換表　「見た目」編

うーん...と考える／うーん...と2秒考える

１層　手前に出す／奥に下げる