Unity3DでXAMLっぽいのに挑戦中

HTML感覚でGUIデザインできんもんやろか

uGui の使い方も色々覚えてきたので何かライブラリを作ってみようかという気分になってくるわけですが、ごちゃごちゃ色々と書いてるうちにやがてこんな感じのコードになってきました。

    // Use this for initialization
    void Start() {

        // Resources
        var dcUI = Resources.LoadAll<Sprite>("UI001").ToDictionary<Sprite,string>(sprite => sprite.name);

        var button = dcUI["Button001"];
        var grid_head = dcUI["GridHead001"];
        var grid_cell = dcUI["GridCell001"];

        // Vector2
        var top_left = new Vector2(0f, 1f);
        var middle_left = new Vector2(0f, 0.5f);
        var bottom_left = new Vector2(0f, 0f);
        var top_center = new Vector2(0.5f, 1f);
        var middle_center = new Vector2(0.5f, 0.5f);
        var bottom_center = new Vector2(0.5f, 0f);
        var top_right = new Vector2(1f, 1f);
        var middle_right = new Vector2(1f, 0.5f);
        var bottom_right = new Vector2(1f, 0f);

        // Event System
        var event_system = gameObject.UIGetEventSystem();

        // Canvas
        var canvas_object = gameObject.UIGetCanvas();
        // DataGrid
        var data_grid = canvas_object
            .UIAddNode(name: "DataGrid2", anchorMin: top_left, anchorMax: top_left, anchoredPosition: new Vector2(0, -Screen.height + 20), sizeDelta: new Vector2(Screen.width - 20, Screen.height - 20));
        // ScrollView
        var scroll_view = data_grid
            .UIAddNode(name: "ScrollView2", anchorMin: bottom_left, anchorMax: top_right, anchoredPosition: new Vector2(0, 0), sizeDelta: new Vector2(0, 0), pivot: top_left)
                .UISetScrollRect(movementType: ScrollRect.MovementType.Clamped)
                .UISetMask(showMaskGraphic: true)
                .UISetCanvasRender()
                .UISetImage(sprite: button, type: Image.Type.Sliced);
        // Content
        var content = scroll_view
            .UIAddNode(name: "Content2", anchorMin: middle_center, anchorMax: middle_center, anchoredPosition: new Vector2(0, 200), sizeDelta: new Vector2(Screen.width - 20, Screen.height - 20), pivot: top_center)
                .UISetVerticalLayoutGroup()
                .UISetContentSizeFitter(horizontalFit: ContentSizeFitter.FitMode.PreferredSize, verticalFit: ContentSizeFitter.FitMode.PreferredSize)
                .UIAttachContentToScrollRect();
        // Rows
        for (int ii = 0; ii < 60; ii++) {
            // Header
            var row = content
                .UIAddNode(name: "Row", anchorMin: top_left, anchorMax: top_left, sizeDelta: new Vector2(0, 0), pivot: middle_center)
                .UISetHorizontalLayoutGroup(childAlignment: TextAnchor.UpperLeft);
            // Cell
            for (int jj = 0; jj < 20; jj++) {
                row
                    .UIAddNode(name: "Cell", anchorMin: top_left, anchorMax: top_left, sizeDelta: new Vector2(100, 24), pivot: top_left)
                        .UISetCanvasRender()
                        .UISetImage(sprite: ii == 0 ? grid_head : grid_cell, type: Image.Type.Sliced)
                        .UISetLayoutElement(100, 24)
                    // Text
                    .UIAddNode(name: "Text", anchorMin: middle_center, anchorMax: middle_center, anchoredPosition: new Vector2(0, 0), sizeDelta: new Vector2(100, 24), pivot: middle_center)
                        .UISetCanvasRender()
                        .UISetText(Text: "Sample");
            }
        }
        // VScrollBar
        var vscroll_bar = data_grid
            .UIAddNode(name: "VScrollBar", anchorMin: bottom_right, anchorMax: top_right, anchoredPosition: new Vector2(0, 0), sizeDelta: new Vector2(20, 0), pivot: top_left)
                .UISetCanvasRender()
                .UISetImage(sprite: grid_cell, type: Image.Type.Sliced)
                .UISetScrollbar(scrollview: scroll_view, Vertical: true)
            .UIAddNode(name: "Sliding Area", anchorMin: bottom_left, anchorMax: top_right, anchoredPosition: new Vector2(0, 0), sizeDelta: new Vector2(-20, -20), pivot: middle_center)
                .UIAddNode(name: "Handle", anchorMin: Vector2.zero, anchorMax: Vector2.one, anchoredPosition: Vector2.zero, sizeDelta: new Vector2(20, 20), pivot: middle_center)
                    .UISetCanvasRender()
                    .UISetImage(sprite: grid_head, type: Image.Type.Sliced)
                    .UISetHandleToScrollBar();
        // HScrollBar
        var hscroll_bar = data_grid
            .UIAddNode(name: "HScrollBar", anchorMin: bottom_left, anchorMax: bottom_right, anchoredPosition: new Vector2(0, 0), sizeDelta: new Vector2(0, 20), pivot: top_left)
                .UISetCanvasRender()
                .UISetImage(sprite: grid_cell, type: Image.Type.Sliced)
                .UISetScrollbar(scrollview: scroll_view, Horizontal: true)
            .UIAddNode(name: "Sliding Area", anchorMin: bottom_left, anchorMax: top_right, anchoredPosition: new Vector2(0, 0), sizeDelta: new Vector2(-20, -20), pivot: middle_center)
                .UIAddNode(name: "Handle", anchorMin: Vector2.zero, anchorMax: Vector2.one, anchoredPosition: Vector2.zero, sizeDelta: new Vector2(20, 20), pivot: middle_center)
                    .UISetCanvasRender()
                    .UISetImage(sprite: grid_head, type: Image.Type.Sliced)
                    .UISetHandleToScrollBar();

これが・・・

20150226_01

こうなると。

そのうち、スクロールバーとかそういうのはひとつのメソッドにまとめよう。
とか思ってたわけですが、沢山コンポーネントくっつけるのが段々面倒になったので、
じゃぁ、今度は HTML 感覚でデザインするのはどうだろうか?

とか思ったのでまた実験してみました。

	// Use this for initialization
	void Start () {

        var event_system = gameObject.UIGetEventSystem();
        var canvas_object = gameObject.UIGetCanvas();
        var xml =
@"<?xml version='1.0'?>
<ugui xmlins='http://megamin.jp/ns/unity3d/ugui/eugml'>
  <node name='Root' anchoredPosition='center' anchorMin='center' anchorMax='center' sizeDelta='zero' pivot='center'>
    <component name='image' sprite='' type='' />
    <component name='canvasrender' />
    <node name='Node1' anchoredPosition='zero'      anchorMin='zero' anchorMax='one' sizeDelta='one' pivot='center'></node>
    <node name='Node2' anchoredPosition='(0.5,0.5)' anchorMin='zero' anchorMax='one' sizeDelta='one' pivot='center'></node>
    <node name='Node3' anchoredPosition='(0.5,1)'   anchorMin='zero' anchorMax='one' sizeDelta='one' pivot='center'>
      <node name='Node4' anchoredPosition='(0.5,0.5)' anchorMin='zero' anchorMax='one' sizeDelta='one' pivot='center'></node>
      <node name='Node5' anchoredPosition='(0.5,0.5)' anchorMin='zero' anchorMax='one' sizeDelta='one' pivot='center'></node>
      <node name='Node6' anchoredPosition='(0.5,0.5)' anchorMin='zero' anchorMax='one' sizeDelta='one' pivot='center'></node>
    </node>
  </node>
  <node name='Root' anchoredPosition='center' anchorMin='center' anchorMax='center' sizeDelta='zero' pivot='center'>
    <node name='Node7' anchoredPosition='(0.5,0.5)' anchorMin='zero' anchorMax='one' sizeDelta='one' pivot='center'></node>
    <node name='Node7' anchoredPosition='(0.5,0.5)' anchorMin='zero' anchorMax='one' sizeDelta='one' pivot='center'>
      <node name='Node8' anchoredPosition='(0.5,0.5)' anchorMin='zero' anchorMax='one' sizeDelta='one' pivot='center'></node>
      <node name='Node9' anchoredPosition='(0.5,0.5)' anchorMin='zero' anchorMax='one' sizeDelta='one' pivot='center'></node>
    </node>
  </node>
</ugui>";

        AddGui(xml);
    }

こんな感じのコードが

20150226_02

こんな感じになります。
まだコンポーネント生成処理はできてないので、とりあえずノードを追加するだけ。
一応、アンカーやピボットも設定できています。

UIデザインしてから XML に変換するとかできたらフリー版でもアセットバンドルもどきにはなるかもしれない。

ツイートツイート