ScaleGrid9 doesn't scale in html5 target vs Flash (An Exploration)

#1

I’ve been trying to understand the difference between scale9Grid when targetting html5 and flash as of lately. I’ve been trying to port a AS3/Flash project over to Html5 and have had a great deal of functional success - but there are some issues that we’ve found in particular scale9Grid doesn’t seem to work the same.

I created a demo project which draws a rounded corner box filled with a repeating bitmap fill and then a rect drawn over it to indicate the scale9Grid rectangle. It created a series of boxes with each scale9Grid rectangle stepping inward.

scale9grid
scale9grid.PNG645×736 357 KB

The image was produced with the following code - it creates a 70x70 square and stretches it to 300x70:

package ;

import openfl.display.Sprite;
import openfl.geom.Rectangle;

import openfl.display.Bitmap;
import openfl.display.BitmapData;

import openfl.utils.Assets; 

class MoUITests extends Sprite {

    var rpatt:BitmapData;
    
    public function new () {
        super();

        var rwidth = 70;
        this.rpatt = Assets.getBitmapData ("assets/repeating.jpg");

        for (i in 1...8) {
            var border = i*2;
            var dbox = createDummyBox( 2,
                            rwidth,
                            new Rectangle(  border,
                                            border,
                                            rwidth - (border*2),
                                            rwidth - (border*2))
                            );

            this.addChild(dbox);
            dbox.y = (i*rwidth) + (i * 5);
            dbox.width = 300;
        }
        
    }

    function createDummyBox(border:Int, rwidth:Int, cutgrid:Rectangle):Sprite {
        var dummy = new Sprite();

        var matrix = new openfl.geom.Matrix();
        matrix.scale(0.1,0.1);

        var g = dummy.graphics;
        //g.beginFill(0xFF,0.5);
        g.beginBitmapFill(this.rpatt, matrix, true);
        g.lineStyle(border,0);
        g.drawRoundRect(0,0,rwidth,rwidth,10,10);
        g.endFill();

        g.lineStyle(1,0,1);

        g.drawRect( cutgrid.x,
                    cutgrid.y,
                    cutgrid.width,
                    cutgrid.height);

        
        trace(cutgrid);
        dummy.scale9Grid = cutgrid;

        return dummy;
    }
}

What’s curious and confusing to me is in the html5 image you’ll notice that the left hand border blurs both the box border and the scale9grid rect border. It reduces the left hand border smudging by the 4th row - which it shouldn’t be smudging at all because the scale9grid rect should always be encompassing the the outside border.

Any ideas would be appreciated - I’ll be returning to this thread as a I expand my test and exploration.

#2

Could you attach your “repeating.jpg” image? This looks like a great acid test for us to use when working with the scale9Grid feature

#3

repeating
repeating.jpg1300×1300 172 KB

I’d love to help if I can - where would someone start if poking around with this? I was looking at the IBitmap interface trying to understand where the redraw function handled when the dirty flag was set but didn’t get too far into it.

#4

Thanks!

I just added your test to the OpenFL functional tests using a similar pattern with a free license

Running it works like this:

cd path/to/openfl
hxp functional-test (target)

It’s also possible to skip to a specific test like this:

hxp functional-test neko -Dtest=Scale9GridTest2

Running it using -Dcairo I get similar results to Flash though imperfect, but I see the same result when running in the standard GL renderer.

Here’s the Cairo Scale 9 grid:

Here’s the current OpenGL/Context3D version:


#5

Hello,

I have been struggling with scale9Grid targetting HTML5 as well - until switching over to the development branches of both Lime and OpenFL.

I can now get the above example to run (with the associated problems), however a number of other things break including renamed libraries, deprecated syntax and swf resource import.

I see that most of the code for scale9Grid is identical between 8.9.6 and development_v9 - does anyone know if it is possible or very difficult to enable this feature in the current release?