HTML(CSS)+JavascriptでできることをUnity2Dで実現する #初心者

はじめに

Webよりのフロントエンドエンジニアが初めてUnity案件に携わり、得られた知見をまとめてみました。
なお、今回制作したものはunity2Dをメインとした実装となったため、3Dへの言及はありませんのであしからず。

この記事の対象者

Webエンジニア
HTMLコーダー
Unity初心者

筆者技術スペック

Unityは初心者本で操作したのみ
Javascript & HTMLが主戦場のフロントエンドがメインのエンジニア

ケース別対応方法

当然ですがWebフロントエンドとお作法が全く違うので、これ簡単にできるだろー、と思っていた機能の実装が容易ではありません。
細かいことを言えばいくらでもありますが、ここでは代表的なものを取り上げます。
なお、この記事ではDOTween ProとTextMesh Proという2つのプラグインを使った書き方で記述しています。

HexColorで色を指定したい

Unityでのカラー指定は通常「RGBA」値で (0, 1, 1, 1)のような記述となりますが、HexColorに慣れている場合、指定がしにくく感じます。そんな時にはColorUtility.TryParseHtmlStringを使うと指定が楽になります。

Color ChangeHexColor (string hexColor) { // hexColorに#FFFFFFなどを指定
  Color color = default(Color);
  ColorUtility.TryParseHtmlString(hexColor, out color);
  return color;
}

参考

ColorUtility.TryParseHtmlString（Unity公式）

平面オブジェクトを角丸にしたい

CSSではborder-radiusの値を調整することで対応可能ですが、Unity2DではSpriteとゲームオブジェクトを丸くすることはできないので、Sprite Editorで9x9スライスというものを作る必要があります。

参考

"9x9 Slice" Spriteを作成する

親子関係について

子から親を取得したい

gameObject.transform.parent.gameObject;

子からルートのオブジェクトを取得したい

gameObject.transform.root

親に子を配置したい

childObject.transform.SetParent(GameObject.Find("ParentObject").transform, false);

参考

オブジェクトの親子関係のまとめ - Unity

フェードアウト、フェードインをしたい

AssetStoreで販売配布されている「DOTween」や「iTween」を使えば簡単に対応可能ですが、HTMLのように親子関係にある親に対してフェードをかけても子には反映されません。そんな時はforeachでgameObject.transformから子オブジェクトを探索して一括して操作を行います。SpriteRendererが存在していないGameObjectに処理をするのは無意味なので、if文で有無をチェックして実行させます。

foreach (Transform child in parentObject.transform){
  if(child.GetComponent<SpriteRenderer>()) {
    child.GetComponent<SpriteRenderer>().DOFade(0f, 0.8f);
  }
}

テキストに対してもフェードをかけたい（TextMesh Pro）

「DOTween」は大変便利ですが、TextMeshProへのフェードアウト・フェードインには対応していません。しかし有料の「DOTween Pro」ではTextMeshProの操作に対応しています。他のライブラリやプリミティブな実装も調べましたが、これを使った実装が最もシンプルでした。

foreach (Transform child in parentObject.transform){
  if(child.GetComponent<TextMeshPro>()) {
    child.GetComponent<TextMeshPro>().DOFade(0f, 0.8f);
  }else if(child.GetComponent<SpriteRenderer>()) {
    child.GetComponent<SpriteRenderer>().DOFade(0f, 0.8f);
  }
}

テキストエリアの高さを取得したい（TextMesh Pro）

テキストエリアの高さや横幅を動的に設定・取得したい場合は、preferredHeightプロパティを使うことで対応可能です。
この値はテキストが入力された後に取得できます（テキスト入力前は0）
幅を取得する場合でも、同様にpreferredWidthプロパティが用意されています。

targetObject.GetComponent<TextMeshProUGUI> ().text = "dummyText";
float fixHeight = targetObject.GetComponent<TextMeshProUGUI>().preferredHeight;

以下加筆中...