haxeui / haxeui-kha

The Kha backend of the HaxeUI framework -
http://haxeui.org
MIT License
45 stars 16 forks source link

strange image scaling for Toolkit.scale > 1 #58

Closed sh-dave closed 3 years ago

sh-dave commented 3 years ago

Expected Behavior

When using Toolkit.scale greater than 1.0 (trying to get a decent sized ui for an android test build), the image component gets smaller for some reason. I expected the image to stay the same size, only the button should get bigger?

(What i originally wanted to use is actually the styles background-image: xxx.png property. But this one doesn't allow to specify the scaleMode (fit, fill, fitinside, ...) for when the component size doesn't match the image dimensions, so i tried with an image component as a quick "fix". Should i add another issue/feature request for this?)

Current Behavior

Toolkit.scale = 1.0

Screenshot_2021-10-26_14-01-34

Toolkit.scale = 2.0

Screenshot_2021-10-26_14-01-18

Toolkit.scale = 3.0

Screenshot_2021-10-26_14-02-02

Steps to Reproduce (for bugs)

@:xml('
<box styleNames="my-view">
    <style>
        .my-view {
            width: 100%;
            height: 100%;
        }

        .logo {
            width: 100%;
            height: 100%;
        }
    </style>

    <image resource="big_kha_Logo.png" styleNames="logo" />
    <button text="CLICK" styleNames="click-me" />
</box>'
)
private class View extends Box {
    public function new() {
        super();
    }
}

class Main {
    public static function main() {
        kha.System.start({ width: Std.int(632 / 2), height: Std.int(612 / 2) }, function( _ ) {
            kha.Assets.loadEverything(function() {
                haxe.ui.Toolkit.theme = 'dark';
                haxe.ui.Toolkit.init({});
                haxe.ui.core.Screen.instance.addComponent(new View());
                haxe.ui.core.Screen.instance.options.noBatch = true;
                haxe.ui.Toolkit.scale = 3.0;

                kha.System.notifyOnFrames(function( fbs ) {
                    final fb = fbs[0];
                    final g2 = fb.g2;

                    g2.begin(true, 0xff004040);
                        haxe.ui.core.Screen.instance.renderTo(g2);
                    g2.end();
                });
            });
        });
    }
}

Your Environment

latest git everything

sh-dave commented 3 years ago

Any insights?

ianharrigan commented 3 years ago

Sorry, totally forgot about this, ill have a play now.

ianharrigan commented 3 years ago

Im actually getting an error on a kha js project:

MouseHelper.hx:24 Uncaught TypeError: Cannot read properties of undefined (reading 'notify')
    at Function.haxe_ui_backend_kha_MouseHelper.init (MouseHelper.hx:24)
    at haxe_ui_core_Screen.haxe_ui_backend_ScreenImpl [as __class__] (ScreenImpl.hx:26)
    at new haxe_ui_core_Screen (Screen.hx:25)
    at Function.haxe_ui_core_Screen.get_instance (Screen.hx:14)
    at Function.haxe_ui_Toolkit.get_screen (Toolkit.hx:103)
    at Function.haxe_ui_Toolkit.init (Toolkit.hx:79)
    at haxe_ui_HaxeUIApp.init (HaxeUIApp.hx:32)
    at haxe_ui_HaxeUIApp.ready (HaxeUIApp.hx:23)
    at Function.Main.main (Main.hx:8)
    at SyncBuilder.hx:9

:/

EDIT Mouse.get() is returning null

ianharrigan commented 3 years ago

OK, that should be fixed now. Can you close if this is working now?

Cheers! Ian

sh-dave commented 3 years ago

Works now, thanks!