flickering button texture

[sh-dave]

See the sample code here: https://github.com/sh-dave/haxeui-kha-testsuite/blob/master/src/kenneyButtonFlicker/Main.hx

Expected Behavior

• When you hover the button with the mouse, the texture should not disappear.

Current Behavior

• When you hover the button with the mouse, the texture will disappear for a single frame.
• See the screenshot below. It's a debug-html5 build (electron) showing the devtools. I'm highlighted the frame where the the mouse entered the button and the texture disappeared, only the button text is visible. All frames before or after this are fine.

Steps to Reproduce (for bugs)

1. Clone the haxeui-kha-testsuite and open in vscode with the Kha Extension Pack installed
2. Edit the khafile.js and uncomment the line // suite.addParameter('--main kenneyButtonFlicker.Main'); to pull in the proper Main function, comment out any other that might be active.

Media

Your Environment

• Version used:

  • haxeui-core@5f4a1feb
  • haxeui-kha@df552b0f
  • haxeui-theme-kenney@ddc4cd04

• Environment name and version (e.g. Chrome 39, node.js 5.4):

  • debug-html5 build

• Operating System and version (desktop or mobile):

  • Linux + Windows Desktop

• Link to your project:

  • https://github.com/sh-dave/haxeui-kha-testsuite

[ianharrigan]

This is an interesting one, i can defo reproduce... any thoughts / hints on how i might get around this? All im doing in the backend is g.drawScaledSubImage and the image should be loaded and available - so im not sure why there is a flicker at all...

[ianharrigan]

So this is really confusing, i just tried (to test) to create an Image and draw the parts to that:

                    var img:Image = Image.create(Std.int(w), Std.int(h));
                    for (i in 0...srcRects.length) {
                        var srcRect = new Rectangle(srcRects[i].left + trc.left,
                                                    srcRects[i].top + trc.top,
                                                    srcRects[i].width,
                                                    srcRects[i].height);
                        var dstRect = dstRects[i];
                        /*
                        g.drawScaledSubImage(imageInfo.data, srcRect.left, srcRect.top, srcRect.width, srcRect.height,
                                                             x + dstRect.left, y + dstRect.top, dstRect.width, dstRect.height);
                                                             */
                        img.g2.drawScaledSubImage(imageInfo.data, srcRect.left, srcRect.top, srcRect.width, srcRect.height,
                                                             x + dstRect.left, y + dstRect.top, dstRect.width, dstRect.height);
                    }

Whats strange is i never use that img later, but it still appears! I would have expected it to not appear, so maybe this is a hint of whats going on? Ie, creating the Image shows it?? Im a little confused to be honest.

[sh-dave]

In your example, you should create the image via Image.createRenderTarget(). You're also missing the begin/end around the img.g2.drawScaledSubImage() call.

var img: Image = Image.createRenderTarget(Std.int(w), Std.int(h));
img.g2.begin();

for loop...

img.g2.end()

[ianharrigan]

I've tried these:

                    var img:Image = Image.createRenderTarget(Std.int(w), Std.int(h));
                    //img.g2.begin();                                     
                    for (i in 0...srcRects.length) {
                        var srcRect = new Rectangle(srcRects[i].left + trc.left,
                                                    srcRects[i].top + trc.top,
                                                    srcRects[i].width,
                                                    srcRects[i].height);
                        var dstRect = dstRects[i];
                        /*
                        g.drawScaledSubImage(imageInfo.data, srcRect.left, srcRect.top, srcRect.width, srcRect.height,
                                                             x + dstRect.left, y + dstRect.top, dstRect.width, dstRect.height);
                                                             */
                        img.g2.begin(); 
                        img.g2.drawScaledSubImage(imageInfo.data, srcRect.left, srcRect.top, srcRect.width, srcRect.height,
                                                             x + dstRect.left, y + dstRect.top, dstRect.width, dstRect.height);
                        img.g2.end();                                     
                    }
                    //img.g2.end();                                     

But i keep getting "End before you begin"

[sh-dave]

I think the problem might be in the async logic in StyleHelper.hx. You expect the getImage() callback to return immediately, but that won't happen for unloaded resources.

if (style.backgroundImage != null) {
        // i added a trace here
    Toolkit.assets.getImage(style.backgroundImage, function(imageInfo:ImageInfo) {
        ...
                // i added a trace
                var rects:Slice9Rects = Slice9.buildRects(w, h, trc.width, trc.height, slice);
                ...
    });
}

I added some traces to verify (the number is the frame the function is called).

• normally (for already loaded assets) you have 2 traces for stylehelper, line 78 and 114
• in frame 49 it triggers the hover (haxe/ui/components/Button.hx:404: 49)
• for frame 50 you have the stylehelper trace at line 78
• then the image loading kicks in
• and after that you have a stylehelper trace for line 114
  • but by this time the g2 state could be whatever (most likely already ended?, clipped, opacity 0, ...)

kenneyButtonFlicker/Main.hx:30: 48
haxe/ui/backend/kha/StyleHelper.hx:78: 48
haxe/ui/backend/kha/StyleHelper.hx:114: 48
kenneyButtonFlicker/Main.hx:30: 49
haxe/ui/backend/kha/StyleHelper.hx:78: 49
haxe/ui/backend/kha/StyleHelper.hx:114: 49
haxe/ui/components/Button.hx:404: 49
kenneyButtonFlicker/Main.hx:30: 50
haxe/ui/backend/kha/StyleHelper.hx:78: 50
haxe/ui/ToolkitAssets.hx:87: 50
haxe/ui/backend/AssetsImpl.hx:47: 50
haxe/ui/backend/AssetsImpl.hx:68: 50
kha/Image.hx:94: 50
kha/Image.hx:96: 50
haxe/ui/backend/AssetsImpl.hx:70: 50
haxe/ui/backend/AssetsImpl.hx:50: 50
haxe/ui/backend/kha/StyleHelper.hx:114: 50
kenneyButtonFlicker/Main.hx:30: 51
haxe/ui/backend/kha/StyleHelper.hx:78: 51
haxe/ui/backend/kha/StyleHelper.hx:114: 51
kenneyButtonFlicker/Main.hx:30: 52
haxe/ui/backend/kha/StyleHelper.hx:78: 52
haxe/ui/backend/kha/StyleHelper.hx:114: 52
kenneyButtonFlicker/Main.hx:30: 53
haxe/ui/backend/kha/StyleHelper.hx:78: 53
haxe/ui/backend/kha/StyleHelper.hx:114: 53
kenneyButtonFlicker/Main.hx:30: 54

[ianharrigan]

OK, so that should be fixed now... feels a little icky / hacky... lemme know what you think...

Cheers, Ian

[sh-dave]

I've seen way worse hacks :smiley: