top of page
検索
    • 2023年9月5日
    • 読了時間: 11分

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

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

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






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


 
スクラッチブロック　こんにちは！という

こんにちは！と言う





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

  1. Debug.Logメソッドを使って、Consoleに表示

  2. Text などの UI を使ってScene上に表示

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


１，Consoleに表示


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

Debug.Log("こんにちは！");
Unity　コンソール



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


Unty　Textコンポーネントの画像

事前準備として、しゃべらせたいキャラクターの子要素に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秒考える


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

 
スクラッチブロック　コスチュームを〇にする

コスチュームを〇にする




Unity　SpriteRendererコンポーネントの画像

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


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

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

void Start()
{
    sr = GetComponent<SpriteRenderer>();  //srの初期値を取得
}
Unity　スクリプトファイルのAssign

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

 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します。

Unityスクリプトファイルの配列にスプライトを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を作る必要があります。

Unity　アニメーションクリップと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 には最初の背景を指定します

UnityUICanvasとPanelの設定

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

using UnityEngine.UI;

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

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

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

Unity　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します。

Unity　アニメーションの変更スプライトのAssign

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

count++;
int num = count % bgSprites.Length;
image.sprite = bgSprites[num];
 
スクラッチブロック　大きさを10ずつ変える

大きさを 10 ずつ変える


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

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

 transform.localScale += Vector3.one * 0.1f;
 
スクラッチブロック　大きさを100％にする

大きさを 100% にする


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

transform.localScale = Vector3.one;
 
スクラッチブロック　色の効果を〇ずつ変える

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


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

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


色の効果を〇ずつ変える

スクラッチブロック　色の効果を25ずつ変える



Unity　collarピッカーHSV

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);

 

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

スクラッチブロック　明るさの効果を25ずつ変える




UnitycollarピッカーRGB方式

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


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

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


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

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

Unity　マテリアルカラーの変更

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

変数：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);       //明るさを更新
 

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

スクラッチブロック明るさの効果を25ずつ変える




Unity　collarピッカー幽霊の効果

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

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







Unity　RendererMode の変更

明るさの効果で準備した素材と同じ様に、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を準備します。

Unity　Sottinglayer の作成

  • 最前面へ移動する場合

 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％にする

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




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

 

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

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

ファイブボックス　上田教室

bottom of page