質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Unity

Unityは、Unity Technologiesが開発・販売している、IDEを内蔵するゲームエンジンです。主にC#を用いたプログラミングでコンテンツの開発が可能です。

Q&A

解決済

1回答

1682閲覧

ScrollViewで追加したノードのImageがはみでてしまう

ichi_goo

総合スコア18

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Unity

Unityは、Unity Technologiesが開発・販売している、IDEを内蔵するゲームエンジンです。主にC#を用いたプログラミングでコンテンツの開発が可能です。

0グッド

0クリップ

投稿2017/10/26 11:07

###実現したいこと
ScrollView内に追加したノードのImageが
枠内をはみ出さないようにしたいと思っております。
イメージ説明

###前提
VR空間内にアイコンが描かれたPlaneを追加できるようにしています。

追加したPlaneの情報を列挙するために、
VR空間内のメニュー画面の中のScrollViewに
Planeの情報を列挙します。

ScrollViewの内容は以下の通りです。
ノードの情報としてテキスト型の「Number」とImage型の「MarkingKind」を持っています。
ScrollViewの内容

アイコンは数種類から選ぶことができ、
追加された際にMarkingKindを選択したアイコンのマテリアルに変更します。
1種類のノード(Prefab化済)のマテリアルを切り替えます。

###発生している問題
ノードを追加していくと、Imageで作成している部分が下図のように
ScrollViewの範囲をはみ出してしまいます。
左側のテキスト部分は枠内にきちんと収まっております。

どうすればテキスト部分と同じようにImageも枠内からはみ出さずに
表示できるでしょうか?
イメージ説明
###該当のソースコード

C#

1 // Nodeを追加する 2 var item = Instantiate(Node) as RectTransform; 3 item.SetParent(NodeParent.transform, false); 4 // Node情報更新 5 Text text = item.GetComponentInChildren<Text>(); 6 if (text.name == "Number") 7 { 8 // Nodeの名前を変更 9 // リストのインデックスを選択する 10 // 1からカウント 11 text.text = string.Format("No.{0}", MarkingList.Count); 12 } 13 item.name = text.text; 14 15 foreach(Image image in item.GetComponentsInChildren<Image>()) 16 { 17 if(image.name == "MarkingKind") 18 { 19 // マテリアルを変更(アイコンの画像が変わる) 20 image.material = MaterialList[MaterialIndex]; 21 Color c = plane.GetComponent<Renderer>().material.color; 22 image.material.color = new Color(c.r, c.g, c.b, c.a); 23 break; 24 } 25 } 26

MaterialListには以下の通りアテリアルが割り当てられています。
MaterialList

1種類のノードに対してマテリアルを割り当て直すのではなく、
4種類のノードを作成し、それを追加仕分ける方が
よいでしょうか?

できればPrefabにするノードは一つにしたいと考えているのですが……。

ScrollViewのMarkingKindに割り当てた際は以下のようになっています。
イメージ説明

###補足情報(言語/FW/ツール等のバージョンなど)
Unity 2017.1.1f1
Visual Studio 2015/2017

###参考にしたHP
uGUIのScrollViewを使いこなす7つのTips
http://q7z.hatenablog.com/entry/2016/12/03/000027

UnityのuGUIでスクロールビューを作る
http://tsubakit1.hateblo.jp/entry/2014/12/18/040252

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

恐らくシェーダーの問題です。(マスクが上手くかかっていない)
未検証ですが「UI」系のシェーダーを使うと上手くいくかと思います。

ちなみに、シェーダーがこれである必要が無いのなら、
マテリアルの代わりにSpriteの配列にして、
ImageコンポーネントのSource Imageに設定するようにするとスマートかと思います。

投稿2017/10/26 12:08

sakura_hana

総合スコア11425

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ichi_goo

2017/10/30 05:35 編集

反応が遅くなり申し訳ありません。ご回答ありがとうございました。 これから検証を行ってみます。 シェーダーはこれである必要はありませんので、Spriteの配列にしてみようと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問