actionscript-3 - AS3 Flixel - 从外部构建 UI

Question

我在我的游戏中使用了大量的 XML。这在一定程度上受到了我花时间修改一款名为 Dungeon Siege 的旧 PC 游戏的影响，该游戏使用 skrit 文件，如游戏引擎解析的外部指令。

我已经能够通过这种方法获得非常基本的 UI/菜单，但是手动输入每个组件的每个值变得很痛苦，而且收效甚微。我一直在研究不同的 UI 方法，它们仍然可以满足我对外部“指令”文件的需求。最吸引我的是Adobe Photoshop to HTML。像这样的东西-> http://www.psdtoweb.de/。

它将 PSD 中的所有元素组织成 html 和图像文件——这正是我所需要的……如果我能在我的代码中访问它就好了。我下载了 HTMLWrapper，http://www.as3gamegears.com/misc/htmlwrapper/，但不知道如何将它与本地文件一起使用。

我想要一个可以导出为 AS3 可用格式的可视化 UI 构建程序。有什么建议么？

如果您对我现有的代码/方法感到好奇，这里有一些代码和 XML：

package com.MenuFactory.Objects 
{
import flash.geom.Point;
import com.MenuFactory.Utils.FlxGroupXY;
import org.flixel.FlxSprite;
import org.flixel.FlxG;
import org.flixel.FlxText;

/**
 * ...
 * @author PHaZerous
 */
public class MenuLayer extends FlxGroupXY
{
    public var layerXML:XML;
    private var layerNum:int;

    public var mItems:Vector.<MenuItem> = new Vector.<MenuItem>;
    private var positions:Vector.<Point> = new Vector.<Point>;
    private var boxSizes:Vector.<Point> = new Vector.<Point>;

    private var titleLabel:FlxText;
    public var descriptionText:FlxText;
    public var currentItem:MenuItem;
    public var previousItem:MenuItem;
    public var highlightColor:uint;
    private var background:FlxSprite;

    public function MenuLayer(_layerXML:XML) 
    {
        layerXML = _layerXML;

        importObjects();

        // Set up defaults.
        layerNum = layerXML.meta.layerNum;
        currentItem = mItems[layerXML.meta.currentItem];
        currentItem.highlight(highlightColor);

        displayObjects();
    }

    private function importObjects():void
    {
        //////////////////////////////////////////////////////
        // Background
        background = new FlxSprite(0, 0);
        background.makeGraphic(FlxG.width, FlxG.height, layerXML.meta.backgroundColor);
        add(background);

        //////////////////////////////////////////////////////
        // IMPORT POSITIONS
        var tempPoint:Point;
        for (var j:int = 0; j < layerXML.positions.children().length(); j++)
        {
            tempPoint = new Point(layerXML.positions.children()[j].@x, 
                                  layerXML.positions.children()[j].@y);
            positions.push(tempPoint);
        }

        //////////////////////////////////////////////////////
        // IMPORT BUTTON SIZES
        var tempPoint2:Point;
        for (var k:int = 0; k < layerXML.boxSizes.children().length(); k++)
        {
            tempPoint2 = new Point(layerXML.boxSizes.children()[k].@width, 
                                  layerXML.boxSizes.children()[k].@height);
            boxSizes.push(tempPoint2);
        }

        //////////////////////////////////////////////////////
        // IMPORT MENU ITEMS
        var loopNum:int = layerXML.mItem.length();
        for (var i:int = 0; i < loopNum; i++)
        {
            var item:MenuItem = new MenuItem(0, 0, layerXML.mItem[i].label, true);
            item.description = layerXML.mItem[i].description;
            item.position = layerXML.mItem[i].buttonFormat.@position;
            item.arrayPosition = i;
            item.link = layerXML.mItem[i].link;
            item.borderWidth = boxSizes[layerXML.mItem[i].buttonFormat.@size].x;
            item.borderHeight = boxSizes[layerXML.mItem[i].buttonFormat.@size].y;
            item.borderColor = layerXML.mItem[i].buttonFormat.@color;
            item.textSize = layerXML.mItem[i].textFormat.@size;
            item.textColor = layerXML.mItem[i].textFormat.@color;
            item.buildButton();
            mItems.push(item);
        }

        //////////////////////////////////////////////////////
        // IMPORT META
        titleLabel = new FlxText(layerXML.meta.title.@x, 
                                 layerXML.meta.title.@y, 1000, layerXML.meta.title);
        titleLabel.size = layerXML.meta.title.@size;
        titleLabel.color = layerXML.meta.title.@color;

        highlightColor = layerXML.meta.highlightColor;

        descriptionText = new FlxText(layerXML.meta.desciption.@x, 
                                      layerXML.meta.description.@y, 1000, "Default");
        descriptionText.size = layerXML.meta.description.@size;
        descriptionText.color = layerXML.meta.description.@color;
    }

    private function displayObjects():void
    {
        if (mItems.length > positions.length)
        {
            for (var i:int = 0; i < positions.length; i++)
            {
                mItems[i].x = positions[i].x;
                mItems[i].y = positions[i].y;
                add(mItems[i]);
            }
        }

        else if (mItems.length <= positions.length)
        {
            for (var j:int = 0; j < mItems.length; j++)
            {
                mItems[j].x = positions[j].x;
                mItems[j].y = positions[j].y;
                add(mItems[j]);
            }
        }

        add(titleLabel);
        add(descriptionText);
    }
}

}

<data>
<meta>
    <name>Pause_Menu</name>
    <refClass>com.Actors.BasicActor</refClass>
    <keys up="UP" down="DOWN" left="LEFT" right="RIGHT" select="SPACE" />
    <size width="" height=""></size>
</meta>
<layer>
    <meta>
        <name>Pause_Base_Menu</name>
        <layerNum>0</layerNum>
        <title font="" size="14" color="0x88CC88" x="10" y="10">Current Location</title>
        <description font="" size="20" color="0x004400" x="10" y="500">Main Menu</description>
        <highlightColor>0x88CC88</highlightColor>
        <currentItem>1</currentItem>
        <backgroundColor>0xFF7C151D</backgroundColor>
    </meta>

    <positions>
        <0 x="10" y="100" />
        <1 x="100" y="150" />
        <2 x="100" y="200" />
        <3 x="100" y="250" />
    </positions>

    <boxSizes>
        <0 width="100" height="30" />
        <1 width="200" height="30" />
        <2 width="300" height="30" />
    </boxSizes>

    <mItem>
        <buttonFormat position="0" size="0" color="0xFFFFFFFF" />
        <textFormat font="" size="16" color="0x116611" />
        <label>EXIT</label>
        <description>Exit the menu.</description>
        <link>%%kill</link>
    </mItem>

    <mItem>
        <buttonFormat position="1" size="0" color="0xFFFFFFFF" />
        <textFormat font="" size="16" color="0x116611" />
        <label>Inventory</label>
        <description>The items in your bag.</description>
        <link>%%swapLayer@@1</link>
    </mItem>

    <mItem>
        <buttonFormat position="2" size="0" color="0xFFFFFFFF" />
        <textFormat font="" size="16" color="0x116611" />
        <label>Teleport</label>
        <description>Zap yourself somewhere else.</description>
        <link>%%swapLayer@@2</link>
    </mItem>
</layer>

<layer>
    <meta>
        <name>Inventory_Menu</name>
        <layerNum>1</layerNum>
        <title font="" size="14" color="0x88CC88" x="10" y="10">Inventory</title>
        <textFormat font="" size="16" color="0x55AA55" />
        <description font="" size="20" color="0x004400" x="10" y="500">2nd Menu</description>
        <highlightColor>0xFFCC00</highlightColor>
        <currentItem>0</currentItem>
        <backgroundColor>0xAA668899</backgroundColor>
    </meta>

    <positions>
        <0 x="10" y="100" />
        <1 x="100" y="150" />
        <2 x="100" y="200" />
        <3 x="100" y="250" />
    </positions>

    <boxSizes>
        <0 width="100" height="30" />
        <1 width="200" height="60" />
        <2 width="50" height="150" />
    </boxSizes>

    <mItem>
        <buttonFormat position="0" size="0" color="0xFFAAFFFF" />
        <textFormat font="" size="16" color="0x116611" />
        <label>Back</label>
        <description>Return to previous menu.</description>
        <link>%%swapLayer@@previousLayer</link>
    </mItem>
</layer>

<layer>
    <meta>
        <name>Teleport_Menu</name>
        <layerNum>2</layerNum>
        <title font="" size="14" color="0x88CC88" x="10" y="10">Teleport</title>
        <textFormat font="" size="16" color="0x55AA55" />
        <description font="" size="20" color="0x004400" x="10" y="500">3rd Menu</description>
        <highlightColor>0x00BB00</highlightColor>
        <currentItem>0</currentItem>
        <backgroundColor>0x88CCDA99</backgroundColor>
    </meta>

    <positions>
        <0 x="10" y="100" />
        <1 x="100" y="150" />
        <2 x="100" y="200" />
        <3 x="100" y="250" />
    </positions>

    <boxSizes>
        <0 width="100" height="30" />
        <1 width="200" height="60" />
        <2 width="50" height="150" />
    </boxSizes>

    <mItem>
        <buttonFormat position="0" size="0" color="0xFFAAFFFF" />
        <textFormat font="" size="16" color="0x116611" />
        <label>BACK</label>
        <description>Return to previous menu.</description>
        <link>%%swapLayer@@previousLayer</link>
    </mItem>

    <mItem>
        <buttonFormat position="1" size="0" color="0xFFAAFFFF" />
        <textFormat font="" size="16" color="0x116611" />
        <label>BR Corner</label>
        <description>Jump to the bottom-right corner of the map.</description>
        <link>%%swapLayer@@previousLayer</link>
    </mItem>

    <mItem>
        <buttonFormat position="2" size="1" color="0xFFAAFFFF" />
        <textFormat font="" size="16" color="0x116611" />
        <label>Center</label>
        <description>Jump to the center of the map.</description>
        <link>%%swapLayer@@previousLayer</link>
    </mItem>
</layer>