Posted at
Unity #2Day 10

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

More than 1 year has passed since last update.


はじめに

Webよりのフロントエンドエンジニアが初めてUnity案件に携わり、得られた知見をまとめてみました。

なお、今回制作したものはunity2Dをメインとした実装となったため、3Dへの言及はありませんのであしからず。


この記事の対象者


  • Webエンジニア

  • HTMLコーダー

  • Unity初心者


筆者技術スペック


  • Unityは初心者本で操作したのみ

  • Javascript & HTMLが主戦場のフロントエンドがメインのエンジニア


ケース別対応方法

当然ですがWebフロントエンドとお作法が全く違うので、これ簡単にできるだろー、と思っていた機能の実装が容易ではありません。

細かいことを言えばいくらでもありますが、ここでは代表的なものを取り上げます。

なお、この記事ではDOTween ProTextMesh 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;

以下加筆中...