はじめに
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スライスというものを作る必要があります。
参考
親子関係について
子から親を取得したい
gameObject.transform.parent.gameObject;
子からルートのオブジェクトを取得したい
gameObject.transform.root
親に子を配置したい
childObject.transform.SetParent(GameObject.Find("ParentObject").transform, false);
参考
フェードアウト、フェードインをしたい
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;
以下加筆中...