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

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

ただいまの
回答率

90.75%

  • C#

    6538questions

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

  • Unity

    3567questions

    Unityは、ユニティテクノロジーが開発したゲームエンジンです。 主にモバイルやブラウザ向けのゲーム製作に利用されていましたが、3Dの重力付きゲームが簡単に作成できることから需要が増え、現在はマルチプラットフォームに対応しています。 言語はC言語/C++で書かれていますが、C#、JavaScript、Booで書かれたコードにも対応しています。

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

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 154

ichi_goo

score 12

実現したいこと

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

前提

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

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

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

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

発生している問題

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

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

該当のソースコード

                // Nodeを追加する
                var item = Instantiate(Node) as RectTransform;
                item.SetParent(NodeParent.transform, false);
                // Node情報更新
                Text text = item.GetComponentInChildren<Text>();
                if (text.name == "Number")
                {
                    // Nodeの名前を変更
                    // リストのインデックスを選択する
                    // 1からカウント
                    text.text = string.Format("No.{0}", MarkingList.Count);
                }
                item.name = text.text;

                foreach(Image image in item.GetComponentsInChildren<Image>())
                {
                    if(image.name == "MarkingKind")
                    {
                        // マテリアルを変更(アイコンの画像が変わる)
                        image.material = MaterialList[MaterialIndex];
                        Color c = plane.GetComponent<Renderer>().material.color;
                        image.material.color = new Color(c.r, c.g, c.b, c.a);
                        break;
                    }
                }


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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/30 14:34 編集

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

    キャンセル

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

  • ただいまの回答率 90.75%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • C#

    6538questions

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

  • Unity

    3567questions

    Unityは、ユニティテクノロジーが開発したゲームエンジンです。 主にモバイルやブラウザ向けのゲーム製作に利用されていましたが、3Dの重力付きゲームが簡単に作成できることから需要が増え、現在はマルチプラットフォームに対応しています。 言語はC言語/C++で書かれていますが、C#、JavaScript、Booで書かれたコードにも対応しています。