3

HaxeUI と HaxeFlixel の両方を使用しようとしましたが、HaxeUI のインターフェイスが白い背景の上に表示され、その下のすべてがカバーされています。また、HaxeUI と HaxeFlixel をある程度連携させることはできたとしても、HaxeFlixel で状態が変化したときに HaxeUI の UI を変更する方法が明確ではありません。使用したコードは次のとおりです。

private function setupGame():Void {

    Toolkit.theme = new GradientTheme();
    Toolkit.init();

    var stageWidth:Int = Lib.current.stage.stageWidth;
    var stageHeight:Int = Lib.current.stage.stageHeight;

    if (zoom == -1) {
        var ratioX:Float = stageWidth / gameWidth;
        var ratioY:Float = stageHeight / gameHeight;
        zoom = Math.min(ratioX, ratioY);
        gameWidth = Math.ceil(stageWidth / zoom);
        gameHeight = Math.ceil(stageHeight / zoom);
    }

    trace('stage: ${stageWidth}x${stageHeight}, game: ${gameWidth}x${gameHeight}, zoom=$zoom');
    addChild(new FlxGame(gameWidth, gameHeight, initialState, zoom, framerate, framerate, skipSplash, startFullscreen));

    Toolkit.openFullscreen(function(root:Root) {
        var view:IDisplayObject = Toolkit.processXmlResource("assets/xml/haxeui-resource.xml");
        root.addChild(view);
    });
}

おそらく、HaxeUI と HaxeFlixel の両方に独自のメイン ループがあり、イベント処理に互換性がない可能性があると推測できますが、念のため、誰かがより明確な答えを得ることができますか?

編集：

実際、openPopup を使用すると、はるかに優れています。

Toolkit.openPopup( { x:20, y:150, width:100, height:100 }, function(root:Root) {
            var view:IDisplayObject = Toolkit.processXmlResource("assets/xml/haxeui-naming.xml");
            root.addChild(view);
        });

画面の残りの部分 (HaxeFlixel で管理) と対話することは可能ですが、HaxeFlixel で管理される画面の一部に存在するマウス ポインターは、HaxeUI ユーザー インターフェイス要素の下に残ります。

4

3 に答える 3

1

Flixel と HaxeUI を一緒に使用すると、2 つのアプリケーションを同時に実行するようなものになります。ただし、どちらもバックエンドとして OpenFL に依存しており、それぞれが表示ツリーに接続されています。

私が現在試しているテクニックの 1 つは、Flixel のサブ状態を開き、サブ状態内で Toolkit.openFullscreen() を呼び出すことです。この内部から、ルートの背景のアルファを 0 に設定できます。これにより、Flixel がレンダリングに使用する下層のビットマップを透かして見ることができます。

以下は、Flixel のサブステート内にエディター インターフェイスを「埋め込む」方法の最小限の例です。

import haxe.ui.toolkit.core.Toolkit;
import haxe.ui.toolkit.core.RootManager;
import haxe.ui.toolkit.themes.DefaultTheme;

import flixel.FlxG;
import flixel.FlxSubState;

// This would typically be a Haxe UI XMLController
import app.MainEditor;

class HaxeUIState extends FlxSubState
{

    override public function create()
    {
        super.create();

        // Flixel uses a sprite-based cursor by default,
        // so you need to enable the system cursor to be
        // able to see what you're clicking.
        FlxG.mouse.useSystemCursor = true;

        Toolkit.theme = new DefaultTheme();
        Toolkit.init();
        Toolkit.openFullscreen(function (root) {
            var editor = new MainEditor();

            // Allows you to see what's going on in the sub state
            root.style.backgroundAlpha = 0;
            root.addChild(editor.view);
        });
    }

    override public function destroy()
    {
        super.destroy();

        // Switch back to Flixel's cursor
        FlxG.mouse.useSystemCursor = true;

        // Not sure if this is the "correct" way to close the UI,
        // but it works for my purposes. Alternatively you could
        // try opening the editor in advance, but hiding it
        // until the sub-state opens.
        RootManager.instance.destroyAllRoots();
    }

    // As far as I can tell, the update function continues to get
    // called even while Haxe UI is open.
    override public function update() {
        super.update();

        if (FlxG.keys.justPressed.ESCAPE) {
          // This will implicitly trigger destroy().
          close();
        }
    }
}

このようにして、さまざまな Flixel 状態をさまざまな Haxe UI コントローラーに関連付けることができます。(注: 厳密にサブ状態である必要はありません。それが私の場合に最も効果的でした。)

于 2015-09-26T06:24:36.413 に答える
0

haxeui でフルスクリーンまたはポップアップを開くと、プログラム フローがブロックされます (update() および draw() 関数は呼び出されません)。代わりにflixel-uiを確認する必要があります。

于 2015-08-22T15:26:54.423 に答える