文字列がTextにピッタリ収まるサイズを取得する方法と注意点【Unity】【uGUI】 - (:3[kanのメモ帳]
この記事でのバージョン Unity 2017.2.0f3 はじめに 今回はタイトル通り、uGUIのTextで文字列がぴったり収まるサイズを取得する方法のご紹介です！ preferredWidth, preferredHeight 方法は簡単、TextのpreferredWidth, preferredHeightを参照するだけ。 //Textを取得 Text text = GetComponent<Text>(); //取得したTextをピッタリ収まるようにサイズ変更 text.rectTransform.sizeDelta = new Vector2(text.preferredWidth, text.preferredHeight); これでFont, Font Style, Font Size等、諸々の数値を考慮した状態でピッタリ収まるようになります。 ただし、以下のようにTextの
![文字列がTextにピッタリ収まるサイズを取得する方法と注意点【Unity】【uGUI】 - (:3[kanのメモ帳]](https://cdn-ak-scissors.b.st-hatena.com/image/square/fcde538ba81826be274b8edce501af14acf8f965/height=288;version=1;width=512/https%3A%2F%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fdb42472e3a29396cc535cdcf754e831cbb18596b%2Fbackend%3Dimagemagick%3Bheight%3D1300%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.f.st-hatena.com%252Fimages%252Ffotolife%252Fk%252Fkan_kikuchi%252F20171106%252F20171106070439.gif)
uGUIチュートリアル – Metal Brage
uGUI Unity4.6から搭載されたuGUIの使い方を解説します。uGUIはUnity Editorに統合された非常にパワフルなUIシステムです。ボタンやテキスト、スライダーなど多くのUIが用意されておりそれらのUIを3Dオブジェクトと同様にシーンへの配置や、Sceneビュー上での操作、Inspectorビューでのプロパティの設定をすることができます。またAsset Storeで販売されている類似GUIシステムより高速です。従来のUIを使用している方は早めにuGUIに乗り換えることをお勧めします。 セクション まずはCanvasからはじめましょう Canvas 画面解像度とスケーリング UIの操作 イメージエレメント テキストの表示 ボタンとクリック時の処理
【Unity】uGUIをキャラクターの上に表示する手っ取り早い方法【RenderMode別】
RenderModeによって異なる、HUDの表示方法 uGUIをキャラクターの頭上に表示（HUD）して、オブジェクトの移動に追従させる方法は、CanvasのRenderModeによって異なります。 今回はその実装の手っ取り早い方法について、RenderMode別に解説します。 RenderModeについての詳しい解説は、こちら をご覧ください。 ※使用しているUnityのバージョンは2017.1.0f3です。 [Unity_317×90] Screen Space – Overlayの場合 © Unity Technologies Japan/UCL CanvasのRenderModeがScree Space – Overlayの場合、UIの位置をキャラクターに合わせて変化させるためには、キャラクターのワールド座標をスクリーン座標に変換してからUIに教える必要があります。 ワールド座標から
【Unity】ＵＩを端末に合わせたサイズに調節する
端末のサイズに合わせて ゲームのＵＩのサイズを自動で変更させましょう。 １：UIを設置する Canvasに２つのボタンを設置しました。 以下の２枚の画像はそれぞれ端末の解像度が ・２４０×４００ ・４８０×８００ の２つの画面サイズの端末で 表示したときの画面です。 自分が想定した画面以外だと ＵＩの大きさが変化してレイアウトが崩れているのがわかります。 240×400 480×800 ４８０×８００だとボタンが小さく表示され、 レイアウトが崩れてしまっています。 ２：Canvas Scalar 端末のサイズに合わせてＵＩの表示する 大きさを自動で調節させるために CanVas Scalarの設定を変更します。 まずはCanvasを選択します。 Canvasを選択 InspectorのCanvas Scalarに注目 ３：UI Scale Mode UI Scale Modeを変更して 解
DOTween Examples はこんな感じ (GIFアニメ) - Qiita
DOTween DOTween とは Unity 向け トゥイーンアニメーションエンジンです。 OSS であり Demigiant/dotween にはサンプルとして以下の６つのシーンが含まれています。 Basics Follow Materials Paths Sequences UGUI それぞれのシーンがどの様な動きをしているのかパッと見て分かるように GIFアニメ を作成しました。 Basics 基本的な座標移動の操作。 Color を操作する事もできる。 Follow 指定したオブジェクトに付いていくような動作。 Materials Materials の Color, Emission, Offset の操作。 Paths 複数の座標情報を用意し、それを辿る移動アニメーションが可能。座標間の補完方法は２種類ある。 Sequences 専用の Sequence オブジェクトを用意
UnityのuGUIのクリック範囲を広げたり制限したりする方法 - テラシュールブログ
Unityのボタンは画像の範囲でクリック判定を行います。 この範囲は基本的にGraphicクラスが表示されている範囲に適応されます。要するに「画像が表現されている範囲（の四角）」に適応されます。 この当たり判定の範囲を絞るには、ICanvasRaycastFilterを使用します。この範囲を設定することで、実際に当たり判定が発生する範囲を限定することができます。 例えばボタンの当たり判定を円形にくりぬくような場合、以下の様なコードが使用できます。 円形当たり判定のボタン 逆に当たり判定の範囲を広げる場合、以下のコードが使用できます。 このコードは単純に画像を描画せずGraphicの当たり判定の範囲だけを使用します。 GraphicRaycasterの当たり判定だけを使う このコードをImageの変わりに設定し、Buttonの子オブジェクトに設定すると、RectTranformのサイズをボタ
UnityのuGUIのテキスト表示機能について解説してみる - テラシュールブログ
UnityのuGUIでテキスト表示の扱いについて解説します。 目次 目次 Textの機能 文字のエフェクト 自動改行と禁則処理 フォントサイズと描画範囲 フォントがぼやける問題（uGUIの場合） Textの機能 TextはuGUIでテキストを表示する機能です。 作成するには、以下の操作を行います。 Hierarchy>Create>UI>Text (もしくはメニューバー>GameObject>UI>Text ) あとはTextの内容を差し替えることで画面にテキストを表示出来ます。またFontに自前のフォントを指定してフォントを変更したり、Font Sizeで文字を大きくしたり、Line Spacingで行間の幅を指定する事ができます。 文字の位置はAlignmentで決定します。テキストの位置を行の頭に合わせるか行末に合わせるか、またテキストの初期座標を範囲の真ん中にするか範囲の上にするか
Unityの新GUI、UGUIのイベント制御について - テラシュールブログ
Unityの新GUIシステム、（通称）UGUIのイベント制御について紹介します。 エディタのGUI上での設定 ソースコードでの操作 エディタ操作をスクリプトで設定 参考 関連 エディタのGUI上での設定 UGUIのボタンのコールバックは、AnimationEventのようにオブジェクトのメソッドを呼び出すことが出来ます。 例えばUI>ButtonでButtonを作った際も、下のようなインターフェースが設定されています。このインターフェースの「＋」をクリックし、操作したいGameObjectをドラッグ＆ドロップして登録、最後にメソッドを選択すればOKです。これでButtonをクリックした際に、登録したイベントが呼ばれます。 uGUIでボタンのクリックイベントを取得 - チラ裏Unity またクリック以外の操作もEventTriggerをアタッチする事で設定することが出来ます。EventTri
uGUI の画像部分のローカライズ処理の一案 - 強火で進め
昨日開催された、「【年末だよ】Unity お・と・な のLT大会2【ポロりもあるよ】」の会場での会話で、 uGUI の画像部分のローカライズ処理をどうするかという話が出て、自分は「国コード(正しくは言語コードですね(^_^;))を使ってフォルダ分けして読み込めばできません？」と回答しました。 まぁ、その方法で大丈夫だとは思いますが念の為に検証してみました。結果を先に言うと上手く行きました。 サンプル サンプルをこちらにアップして有ります。 サンプルの内容としてはシーンの読み込み時に Button の画像を現在のシステムに設定してある言語に合わせた画像に差し替えるというものです。 システムの言語の設定が日本語の場合には「開始」という画像、英語の場合には「START」という画像が使われます。 実装方法 実装方法としては Resources フォルダに以下の様な構成でファイルを準備。 デフォルト
uGUIのアスペクト比を固定する（修正版） - テラシュールブログ
以前uGUIのアスペクト比固定方法について記載しましたが、バージョンアップに伴い方法が変更されていたので新しい方法を書いておきます。 アスペクト比の固定 アスペクト比の固定は所謂レターボックスと呼ばれる手法を使用します。また、厳密にはアスペクト比の固定ではなく想定解像度の設定による複数解像度の対応を行います。 この機能であれば複数のアスペクト比だけでなく複数の解像度にも対応することが出来ます。最近の解像度は「600x800から2160x3840」まで非常に幅が広いので（そのくせ画面サイズはそこまで変わらずっていう）物のサイズがリアル解像度に依存しないこの方法は若干使えます。 設定方法 設定方法を紹介します。と言っても、実は先日のuGUIでノベルゲームのようなものを作る。その１で紹介しています。 メニューバー>GameObject>UI>Panel で、UIのベースを作成します。 作成したC
UnityのuGUIのUIにシェーダーを適応する - テラシュールブログ
uGUIのUIは今までのUIと違い、独自のシェーダーを適応することが出来ます。例えば、下のように「y軸で縞模様を作る」のようなエフェクトを付与・動的に変更する事が出来ます。 やり方は単純です。 まずUnity 4.6のダウンロードページからBuilt-in Shaders for Unityを入手します。 それを解凍し、Assets直下に入れます。今後はこのシェーダーをコピーしカスタマイズしていきます。uGUIのシェーダーをカスタマイズしなければuGUIの機能（表示順番の管理やエフェクト等）を使用できない為です。 後は、ImageコンポーネントのMaterialにカスタマイズしたシェーダーを適応したマテリアルをアタッチします。これだけです。 シェーダーをカスタマイズする事で、単純なスプライトの移動等では表現が面倒な表現を比較的少ない負荷で実装することが出来ます。 やってみると意外と面白いの
Unity 4.6Beta uGUI 履修1:Buttonを配置してみた。 - ゲーム開発奮闘記
参考にしたサイト テラシュールブログ様Unityの新GUI、uGUIはどうなる？こうなる！ YouTubeUnity 4.6 - New UI System overviewこちらもテラシュールブログ様のページにあったリンクです。 ■ uGUI 学習内容 Spriteの配置 SpriteのBorder設定 Button作成 ButtonにAnchorの設定 Buttonアニメーション Buttonを押した時(OnClick)して、SendMessageを送る Buttonを押してエフェクトをInstanceする まずは、完成品のUnity Sceneを。 画面左側に並ぶ、Eff_Hit_1〜7がボタンになっています。 押すと、エフェクトが再生されます。 1.Spreiteの配置 まずは、Textureのインポートから。 ①ProjectにTextureのFrame.pngを読み込む。 サン
【Unity、uGUI】チュートリアル見ながら触ってみる。01.Canvas
Screen Space Overlay : RenderMode もっとも基本的なRenderModeであり、規定値。 これを選択するとUIはシーン上にオーバーレイ表示され、最前面に描画される。 カメラなしでも表示できる。 このモードの場合、Canvasのサイズは自動的にスクリーンサイズに合うように変更される。 また、スクリーンサイズが変更になる場合も自動的に追従する。 よくあるGUI（操作ボタンとか）はこれで問題なさそうね。 Rect Transform Canvasを含むすべてのUI要素はこのコンポーネント(RectTransformComponent)を持ってる。 UI要素はこのコンポーネントに基づいて動作する。（らしい、よく理解できんかった） RenderModeにScreen Space Overlayを選んでいる場合、Canvasのこのコンポーネントの値はすべて自動的に入力さ
Unity 4.6オープンβスタート。新GUI「uGUI」の試用が可能に - テラシュールブログ
Unity の新UIシステムである（通称）uGUIが追加された最新のUnity 4.6オープンβが開始されました。 Unity - Beta - Unity 4.6 使い方については、チュートリアルが提供されています。 チュートリアルでは、ボタン・テキスト・レイアウトといった基本的な機能から、スクロールバー・アニメーションといった物を紹介しています。 Unity - UI Tutorial また追加で、Spriteの移動専用の操作タイプが追加された模様です。今まではSpriteを動かすためにはSpriteRendererを開き操作する必要がありましたが、この項目によりもう少し手軽に操作出来るようになりそうです。 ちなみにuGUIは通称で、一般的には「UI」と表現する方針みたいです。（particle systemをsyurikenと言っているような物） 専用のフォーラムもある模様。日本人（
【GTMF 2014】Unityに待望のメインGUIツールが登場！「uGUI」の革新性とは？ / GameBusiness.jp
世界中で圧倒的な人気を誇るUnityですが、意外にもメニューやボタンといったGUIまわりのツールは、それほど洗練されていません。特に日本のモバイル・ソーシャルゲームのように、ゲームシーンごとにたくさんの画面があり、それぞれでGUIが異なるといったゲーム制作は、どちらかといえば苦手な部類に入ります。そのため、こうした複雑なGUIを作成する上では、外部アセットの「NGUI」が一般的に使用されてきました。 こうした状況を改善すべく、今夏に予定されているUnity4.6のバージョンアップで、新たに実装される機能が「uGUI」です。5月に開催されたUnite Japanでは、一足先に「自分だけの Unity GUI を作ってみよう」として情報が共有され、開発者間で大きな注目を集めました。GTMF2014大阪でユニティ・テクノロジーズ・ジャパンの大前広樹氏は「uGUI：新しいGUIシステム詳細解説」
テラシュールウェア [Unity]Unityの新GUI、uGUIはどうなる？こうなる！
Unityの次期バージョン、Unity 4.6から待望のuGUIが搭載される。uGUIについてはUniteのセッションで既に紹介されていたが、さらに先日、追撃の紹介ビデオが公開された。 しかし、約30分もあるビデオなので見るの面倒！ なので情報を少しまとめてみた。 絵は動画のキャプチャ！ Canvasが基本 uGUIはCanvasの単位でUIを描画するらしい。ビデオではImageを追加したタイミングで、自動的に追加されていた。 Canvasには「Screen Space - Overlay」「Screen Space - Camera」「world space」があり、この設定により表現方法が若干変わるらしい。Overlayは今までのUnity-GUIのように最前面カメラへの描画、Screen Space - cameraは指定したカメラから見たUI、world spaceはワールド座標の
![テラシュールウェア [Unity]Unityの新GUI、uGUIはどうなる？こうなる！](https://cdn-ak-scissors.b.st-hatena.com/image/square/bcafc2ae81f53c2c3d1197d3649eee1f41e2e01b/height=288;version=1;width=512/http%3A%2F%2Fblog-imgs-69-origin.fc2.com%2Ft%2Fe%2Fr%2Fterasur%2F2014060717070807es.jpg)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
『UnityのuGUI入門してみた』