Scale9grid issue on html5

Hi there ^^
I’ve some dialog boxes whose background scales pretty bad, so in flash i used a 9scale grid to only stretch the center part of the box, here’s how it’s in flash:

The red part is the rectangle for the 9scalegrid property (it’s not exported in the game) so you can see if i’m doing something wrong.
That’s the code for the red rectangle.

_background.scale9Grid = new Rectangle(32, 28, 141, 3);

But that’s the result i’m getting once the background of the box is stretched: (the corners are streched but they shouldn’t )

Is it not supported for the html5 export ? or am i doing something wrong ? At first i thought the gradient was the cause, so i changed to an unified color but the issue is still there :frowning:.

Thanks for reading :slight_smile:

scale9Grid is not supported yet, but it would be valuable

Oh okay :confused:

Thanks for the info ! i’ll try to do it by hand then ^^.

In case it helps, here’s one way to do it.

Thank you :slight_smile:

I was trying to trace where the render code would be for (what I assume is) IBitmapData where it’s called after being set to dirty once the scale9Grid mode or other parameter is set.

Are there any high level notes/thoughts on how difficult would this be to implement for html5 target?

Thanks

We have support for scale9Grid now in OpenFL :slight_smile:

Still some kinks though so take a look and see how it is working for you :slight_smile:

Hi there

The scale9grid working for vectors but unfortunately not working for bitmaps or bitmapfill graphics
I tried on Flash, Windows, HTML, and Hashline.

var bd = Assets.getBitmapData("rect-skin");
var scale9Grid = new Rectangle(10, 10, 12, 12);

// no scale bitmap
var bmp = new Bitmap(bd);
addChild(bmp);
	
// scale-grid bitmap
var bmp = new Bitmap(bd);
bmp.scale9Grid = scale9Grid
addChild(bmp);
bmp.x = 48;
bmp.width = 128;
bmp.height = 128;
	
// scale-grid shape
var shape = new Shape();
shape.graphics.beginBitmapFill(bd);
shape.graphics.drawRect(0, 0, bd.width, bd.height);
shape.graphics.endFill();
shape.scale9Grid = scale9Grid;
addChild(shape);
shape.x = 200;
shape.width = 128;
shape.height = 128;

.
scale9grid

Thanks for reading and helps.

I think for nine slice, you have to draw the bitmap data into a shape for each of the nine sections separately before assigning the scale9grid. Something like:

var shape = new Shape();
// top row
shape.graphics.beginBitmapFill(bd);
shape.graphics.drawRect(0, 0, scale9Grid.x, scale9Grid.y);
shape.graphics.endFill();

shape.graphics.beginBitmapFill(bd);
shape.graphics.drawRect(scale9Grid.x, 0, scale9Grid.width, scale9Grid.y);
shape.graphics.endFill();

shape.graphics.beginBitmapFill(bd);
shape.graphics.drawRect(scale9Grid.right, 0, bd.width - scale9Grid.right, scale9Grid.y);
shape.graphics.endFill();

// center
shape.graphics.beginBitmapFill(bd);
shape.graphics.drawRect(0, scale9Grid.y, scale9Grid.x, scale9Grid.height);
shape.graphics.endFill();

shape.graphics.beginBitmapFill(bd);
shape.graphics.drawRect(scale9Grid.x, scale9Grid.y, scale9Grid.width, scale9Grid.height);
shape.graphics.endFill();

shape.graphics.beginBitmapFill(bd);
shape.graphics.drawRect(scale9Grid.right, scale9Grid.y, bd.width - scale9Grid.right, scale9Grid.height);
shape.graphics.endFill();

// bottom
shape.graphics.beginBitmapFill(bd);
shape.graphics.drawRect(0, scale9Grid.bottom, scale9Grid.x, bd.height - scale9Grid.bottom);
shape.graphics.endFill();

shape.graphics.beginBitmapFill(bd);
shape.graphics.drawRect(scale9Grid.x, scale9Grid.bottom, scale9Grid.width, bd.height - scale9Grid.bottom);
shape.graphics.endFill();

shape.graphics.beginBitmapFill(bd);
shape.graphics.drawRect(scale9Grid.right, scale9Grid.bottom, bd.width - scale9Grid.right, bd.height - scale9Grid.bottom);
shape.graphics.endFill();

// assign the 9 slice rect
shape.scale9Grid = scale9Grid;
addChild(shape);
1 Like

Thanks Tamar. May I try the manual solution for slicing for this.

The better way

// scale grid shape
var shape = new Shape();
var cols:Array<Float> = [scale9Grid.left, scale9Grid.right, bitmapData.width];
var rows:Array<Float> = [scale9Grid.top, scale9Grid.bottom, bitmapData.height];
var left:Float = 0;
for (i in 0...3) {
  var top:Float = 0;
  for (j in 0...3) {
    shape.graphics.beginBitmapFill(bitmapData);
    shape.graphics.drawRect(left, top, cols[i] - left, rows[j] - top);
    shape.graphics.endFill();
    top = rows[j];
  }
  left = cols[i];
}
shape.scale9Grid = scale9Grid;
addChild(shape);
shape.x = 200;
shape.width = 128;
shape.height = 128;