Why does grid draw too slow like Flash Player 10.x and 11.x?

#1

Hi,

i am new for here - I am willing to develop with haxe and lime but i am surpised because it is very slower than Flash Player 20 “Drawing grid byHaxe, Lime and Openfl” like 2D Grids.

I have own example from AS3:

package
{
	import flash.display.Sprite;
	
	public class Grid extends Sprite
	{
		public function Grid()
		{
			super();
			
			drawGrid();
		}
		
		private var grid:Sprite = new Sprite();
		private var numColumns:Number = 128;
		private var numRows:Number = 128;
		private var cellHeight:Number = 32;
		private var cellWidth:Number = 32;
		
		private function drawGrid():void 
		{
			grid.graphics.clear();
			grid.graphics.lineStyle(1, 0x000000);
			
			// we drop in the " + 1 " so that it will cap the right and bottom sides.
			for (var col:Number = 0; col < numColumns + 1; col++)
			{
				for (var row:Number = 0; row < numRows + 1; row++)
				{
					trace(col, row);
					grid.graphics.moveTo(col * cellWidth, 0);
					grid.graphics.lineTo(col * cellWidth, cellHeight * numRows);
					grid.graphics.moveTo(0, row * cellHeight);
					grid.graphics.lineTo(cellWidth * numColumns, row * cellHeight);
				}
			}
			
			addChild(grid);
		}
	}
}

To Haxe format:

package;

import openfl.display.Sprite;

class Main extends Sprite {
	
	private var _grid:Sprite = new Sprite();
	
	private var _numCols:Int = 128;
	private var _numRows:Int = 128;
	
	private var _cellHeight:Float = 16;
	private var _cellWidth:Float = 16;
	
	public function new () {
		
		super ();
		_grid.graphics.clear();
		_grid.graphics.lineStyle(1, 0x000000);
		
		for(col in 0..._numCols)
		{
			for(row in 0..._numRows)
			{
				trace(col, row);
				_grid.graphics.moveTo(col * _cellWidth, 0);
				_grid.graphics.lineTo(col * _cellWidth, _cellHeight * _numRows);
				_grid.graphics.moveTo(0, row * _cellHeight);
				_grid.graphics.lineTo(_cellWidth * _numCols, row * _cellHeight);
			}
		}
			
		addChild(_grid);
		
	}
	
}

Has haxe problem with encoder and copypixel?

Please fix openfl, lime and haxe frameworks thanks

PS: you know that fast drawing http://jacksondunstan.com/articles/506

thanks

and download - if you try my gridexample.

Best regards from Germany

#2

I dont see why you say OpenFl is slower than as3 when you are just drawing some static vector lines, you are not using bitmapData like in your link ref. If you are running the code in flash it should be the same, because rendering the lines is handle by the flash player. In other targets that responsability is handle by OpenFl.

#3

Which target are you using?

Flash should be the same, or a bit faster, I hear. For other platforms, it will depend on the target renderer, and how it handles either openfl.display.Graphics or openfl.display.BitmapData, depending on the method you use. Either is a software-based render process, so it may be slower the first time through, but keep a cache (by not changing the graphics property or by modifying the BitmapData) and it should be able to (on hardware render targets) use hardware rendering to move and manipulate the object from there :slight_smile:

#4

@juakob, i forget it because i don’t know before i know with AS3 with ANE with Adobe Air than it draws faster for me no problem but i can not understand why haxe is very slow if i am using Sprite - That is why - it is wrong.

@singmajesty, thanks for examplation, you mean -> I move grid to OpenFLView than it draws faster, right? Target to Windows! Sorry i am new for haxe, lime and openfl because i am starting with haxe, lime and openfl. I want make own Game Editor like 3D Gamestudio with 3 panels whole grids or Cad like GMax 3D Apps because i want know if my app draws faster whole grid like primitives - if i draw cube to 2D grid ( top / bottom ) than i transform cube to high from 2D grid ( front or side )

Is openglview faster than BitmapData?
If i create 512k ( = 524288 ) width and height of grid than it draws under OpenGLView. Is it good or crazy?

I show you know like Valve Hammer Editor’s grid contents
Just Valve Hammer Editor’s grids

Because i work simple with Game Editor alternative to GameStudio or Blender or other 3D Game Developments

Example nice game editor by Luca from Italy, he works hard awesome air app with lua and more features and he has showed about nice light effects but it is very slow.
Check Away3D Community

But i am trying good game editor with helpful grid contents because i want draw 3 grids if i draw, transform and vector and more… that is very better for me. If you like it too.

I know great game editor by Luca looks like SketchUp Pro or 3D Max Studio or Maya

I hope you understand my story of grid drawings because i want know haxe, lime and openfl work good or not good. If it doesn’t work i should use nme or lime? What is it better?

I hope you help me if my game editor doesn’t get crash. :slight_smile: I would like to give thanks.

PS: If you see my problem why lime app doesn’t show grid if it draws slow ca 10 to 20 secunds than it is here… Sorry my tablet is portrait ( Just Kata T4 by the Philippines since i bought small tablet. )
Check Youtube, Grid Example: youtube.com/watch?v=EL4yaWhij2E

Thanks for understanding and watching…
:slight_smile:

#5

If you do a software pass (BitmapData, Graphics) one-go should do it. You render the background grid, keep it cached as a single bitmap, and move on :slightly_smiling:

I would try doing direct pixel draws on a BitmapData, or you could use a Sprite and bitmapData.draw, or you could even draw a square tile (with grid lines on say the bottom and the right) and then use that as a repeating fill.

You shouldn’t need to use an OpenGLView :slight_smile:

1 Like
#6

Thanks for suggestion but i can not understand - how do i blitting in as3 or cacheAsBitmap?

package;

import flash.display.Bitmap;
import flash.display.BitmapData;
import openfl.display.Sprite;

class Main extends Sprite {
	
	private var _canvas:BitmapData = new BitmapData(2048, 2048, true);
	
	private var _grid:Sprite = new Sprite();
	
	private var _numCols:Int = 128;
	private var _numRows:Int = 128;
	
	private var _cellHeight:Float = 16;
	private var _cellWidth:Float = 16;
	
	public function new () {
		
		super ();
		
		var bitmap:Bitmap = new Bitmap(_canvas);
		bitmap.cacheAsBitmap = true;
		addChild(bitmap);
		
		_grid.graphics.clear();
		_grid.graphics.lineStyle(0.25, 0x000000);
		
		for(col in 0..._numCols)
		{
			for(row in 0..._numRows)
			{
				trace(col, row);
				_grid.graphics.moveTo(col * _cellWidth, 0);
				_grid.graphics.lineTo(col * _cellWidth, _cellHeight * _numRows);
				_grid.graphics.moveTo(0, row * _cellHeight);
				_grid.graphics.lineTo(_cellWidth * _numCols, row * _cellHeight);
			}
		}
		
		var bd:BitmapData = new BitmapData(2048, 2048, true);
		bd.draw(_grid);
		
		_canvas.draw(bd);
	}
}

Than I tried to start app but it is slow why does cacheAsBitmap not work?

Can i get example code? Thanks

#7

Does it work any differently without cacheAsBitmap in terms of performance?

…and what platform are you testing?

#8

what platform are you testing?

I have told you. I am using Windows 7 x64 and Haxe 3.2.x Lime 2.9.0 and openfl 3.6.0

Has lime bug?

PS: Why do you not check my video youtube ( You can copy address than you past and go )

#9

Oh, what I mean is are you building to Flash, HTML5, Neko, Windows… what “openfl test” command are you using, or in FlashDevelop, what is on the target drop-down, next to debug/release?

1 Like
#10

Yes i am using Flash Develop, Build command openfl test windows.
I have tried why does application draw too slow?

How do i know like flash player has fast drawing like cacheAsBitmap, cacheAsSprite and Pixelsnapping. Please tell me! if i want write width and height larger than 500000 uints.
But openfl.display.Sprite draws to slow over than 5 or 10 minutes. still wait. How do i make fast drawing with Sprite class.

Like Starling’s Sprite is bit faster than normal openfl’s Sprite. But i want build real grid look just it is helpping to draw like draw cube or sphere. ( You know 2D grid sees like Adobe Air Ch… I don’t know what is name just it is simple quick creator for 2D Game like collision and player… Possible nape, box2D or Away3D with away physic like earth with sun and movement and texturing …

That is why i want create biggest grid because my development should be finish and release.

Thanks for help.

And can i ask about filesystem
PS: I have problem with embedding resources i have found example like Bitmap was embedded @:bitmap(“assets/images/grid.png”) class gridEmbed extends BitmapData {}

// EDIT:
I found nice trick embed like haxeflag -resource value=“embeds/data.7z@mydata7z” …

Thanks for help. But grid is too slow :frowning: I am really sad because they don’t know how does my lime app show faster with cacheAsBitmap or OpenGL-enalbed sprite i want get grid to lime app please give me chance!

Is it wrong or correct?

#11

Why do you not say me truth about different frameworks like NME, Haxepunk, lime or Snow?

What is sprite faster?

NME is slower than Lime.

Lime is bit faster than Nme.

Please help me! I will know what is “fast drawing” with grid.

Only I am using Windows 7 x64, Haxe 3.2x, Openfl 3.6x and Nme 3.5x Lime 2.9x

I am waiting for your code. Why do i should wait for solution? I am sad because they are not good to support or what does it happen with you?

I think you are good to support with Openfl development.
I am stupid because i have moved to learn from Actionscript 3 to Haxe Language.
That is why! I am new to haxe. You know I am new for here since least weeks.

I don’t like who doesn’t know about cacheAsBitmap or good preformence for fast drawing.

I have big problem with large grid - i want build own game editor. or like Tile editor ps. you know you love Super Mairo or Jazz Jackrabbit 1 / 2 to openfl application.

I want they are happy with old games and they are working 100 % like html5, windows, linux and mac os x like Android, iOS and WebOS etc…

Thanks! PS: I am sorry because i am worry about you…

// EDIT:

Grid was created by BitmapData and Bitmap ahaaaaaaaaaaaa nice trick it is so fast to draw wow. I have found solution by Adobe System. I am shy because update note about grid-like quard

example: AS3:
package
{
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;

	[SWF(width='65356', height='65356', backgroundColor='0x000000')]
	public class testgrid extends Sprite
	{
		public function testgrid()
		{
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;
			var hline_64:BitmapData = new BitmapData(65356, 1, false, 0x333333);
			var hmap:Bitmap;
			var vline_64:BitmapData = new BitmapData(1, 65356, false, 0x333333);
			var vmap:Bitmap;
			
			const MAX_NUM:int = 1024;
			for (var i:int = 0; i< MAX_NUM; i++)
			{
				
				hmap = new Bitmap(hline_64);
				addChild(hmap);
				
				hmap.y = (hmap.height/4 + 64) * int(i % 1024);
				
				vmap = new Bitmap(vline_64);
				addChild(vmap);
				
				vmap.x = (vmap.width/4 + 64) * int(i % 1024);
			}

		}
	}
}

And i try to Flash Player 20 - it is so faster than sprite I think 200x or 300x faster than flash.display.Sprite poah. Thanks i am happy now i develop again… yeah

#12

Still problem with hanging time :frowning: I want load faster??

PLEASE TELL ME! HOW DO I GET FAST GRID??? It is better with Stage3D or normal?

How do i get fast loading grid?

package;

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

class Main extends Sprite {
	
	private var _vline:BitmapData;
	private var _hline:BitmapData;
	
	private var _vmap:Bitmap;
	private var _hmap:Bitmap;
	
	private var _gridContainer:Sprite;
	
	public function new () {
		
		super ();
		
		_gridContainer = new Sprite();
		_gridContainer.graphics.beginFill(0x000000, 1);
		_gridContainer.graphics.drawRect(0, 0, 16385, 16385);
		_gridContainer.graphics.endFill();
		
		addChild(_gridContainer);
		
		_vline = new BitmapData(1, 16384, false, 0x333333);
		_hline = new BitmapData(16384, 1, false, 0x333333);
		
		for (i in 0...1024)
		{
			_hmap = new Bitmap(_hline);
			_hmap.cacheAsBitmap = true;
			_gridContainer.addChild(_hmap);
			
			_hmap.y = (_hmap.height / 4 + 16) * Std.int(i % 1024);
			
			_vmap = new Bitmap(_vline);
			_vmap.cacheAsBitmap = true;
			_gridContainer.addChild(_vmap);
			
			_vmap.x = (_vmap.width / 4 + 16) * Std.int(i % 1024);
		}
	}
}

I am really sad because i can not found example like gn2d or Cadet has fast loading grid.

I will know…

Thanks! I wait for answer!

#13

That number is way too big. You could get by with a much smaller grid.

private static inline var CELL_WIDTH:Int = 16;
private static inline var CELL_HEIGHT:Int = 16;

private var _grid:Bitmap;

public function new()
{
    super();
    drawGrid();
    scrollGridTo(45, 200);
    
    stage.addEventListener(Event.RESIZE, redrawGrid);
}

private function redrawGrid(e:Event):Void
{
    _grid.bitmapData.dispose();
    removeChild(_grid);
    drawGrid();
}

private function drawGrid():Void
{
    var stageWidth:Int = stage.stageWidth;
    var stageHeight:Int = stage.stageHeight;
    
    var gridData:BitmapData = new BitmapData(
        stageWidth + CELL_WIDTH, stageHeight + CELL_HEIGHT, true, 0x00000000);
    
    var hLine:Rectangle = new Rectangle(0, 0, gridData.width, 1);
    var vLine:Rectangle = new Rectangle(0, 0, 1, gridData.height);
    
    while(vLine.x < gridData.width)
    {
        gridData.fillRect(vLine, 0xFF000000);
        
        vLine.x += CELL_WIDTH;
    }
    
    while(hLine.y < gridData.height)
    {
        gridData.fillRect(hLine, 0xFF000000);
        
        hLine.y += CELL_HEIGHT;
    }
    
    _grid = new Bitmap(gridData);
    addChild(_grid);
}

public function scrollGridTo(x:Float, y:Float):Void
{
    _grid.x = x % CELL_WIDTH;
    _grid.y = y % CELL_HEIGHT;
    
    if(_grid.x > 0)
    {
        _grid.x -= CELL_WIDTH;
    }
    if(_grid.y > 0)
    {
        _grid.y -= CELL_HEIGHT;
    }
}

The part of the grid that’s offstage isn’t actually needed, so we can get the same result by using a grid that’s roughly the size of the stage. The illusion works because every time we’re about to reach the edge of the grid, we can pull it backwards by exactly one square, and no one will be able to tell.

How’s do we handle pulling it back? Well, that’s what the modulo operator does, so we just used that.

#14

By the way, is it possible you’re confusing the compile time with the time it takes to draw a grid? 5 minutes isn’t unusual the first time you compile to a C++ target. (And Windows is a C++ target.)

What happens if you compile to Neko, or Flash?

#15

Thanks Player your nice solution!

But if i scroll with mouse wheel if grid to inzoom if i am outside of grid. like limited max range of grid.

I want grid background is black, grid color are dark gray for 8 x 8 and 64 x 64 middle gray and middle cress is dark orange like picture from post #1 for example Valve Hammer Editor’s grid color…

I am using only Windows C++ target, why do you ask about what does it happen? it is faster wow … thanks for help but i will change color of grid… becasue grid background is not white only black :slight_smile: Thanks

#16

Ah, I missed the part where you wanted to zoom in/out on the grid, rather than scrolling it.

import openfl.display.Bitmap;
import openfl.display.BitmapData;
import openfl.events.Event;
import openfl.geom.Rectangle;
import openfl.Lib;

class Grid extends Bitmap
{
    private static inline var CELL_WIDTH:Int = 16;
    
    private static inline var LINE_COLOR:Int = 0xFFFFFFFF;
    
    public var zoomLevel(default, set):Float;
    
    private var fullArea:Rectangle;
    private var hLine:Rectangle;
    
    public function new()
    {
        super();
        init();
        stage.addEventListener(Event.RESIZE, init);
        
        zoomLevel = 1;
    }
    
    private function init(?e:Event):Void
    {
        if(bitmapData != null)
        {
            bitmapData.dispose();
        }
        
        var stageWidth:Int = Lib.current.stage.stageWidth;
        var stageHeight:Int = Lib.current.stage.stageHeight;
        
        bitmapData = new BitmapData(stageWidth, stageHeight, true, 0x00000000);
        
        fullArea = new Rectangle(0, 0, stageWidth, stageHeight);
        hLine = new Rectangle(0, 0, stageWidth, 1);
        vLine = new Rectangle(0, 0, 1, stageHeight);
    }
    
    private function set_zoomLevel(level:Float):Float
    {
        if(level <= 0)
        {
            return zoomLevel;
        }
        
        zoomLevel = level;
        
        var cellWidth:Float = CELL_WIDTH * zoomLevel;
        
        bitmapData.fillRect(fullArea, 0x00000000);
        
        //If the lines are too close together, skip some.
        while(cellWidth < 4)
        {
            cellWidth *= 2;
        }
        
        var x:Float = 0;
        while(x < bitmapData.width)
        {
            vLine.x = Math.round(x);
            bitmapData.fillRect(vLine, LINE_COLOR);
            x += cellWidth;
        }
        
        var y:Float = 0;
        while(hLine.y < bitmapData.height)
        {
            hLine.y = Math.round(y);
            bitmapData.fillRect(hLine, LINE_COLOR);
            hLine.y += cellWidth;
        }
        
        return zoomLevel;
    }
}

To scale the grid, set grid.zoomLevel = /* something */. Setting it to 2, for instance, would zoom in by a factor of 2.

You may notice that set_zoomLevel() redraws the entire grid rather than setting scaleX and scaleY. On some targets, bitmaps perform better when their scale is exactly 1.

You may be wondering what’s up with “increment.” If you zoom out too far, the lines will get too close together, and you won’t be able to use them as a grid anymore. When increment increases, it causes the algorithm to skip some lines.

To add different colors, you’ll want to do some refactoring. The current code isn’t exactly in the right format for drawing multicolored grids.

What you need to do is make a new function. Call this function “drawGrid” or “drawGridLines” or something like that. Next, copy the code that draws grid lines, and paste it into this function.

Once you do this, delete the line-drawing code from set_zoomLevel(), and instead, simply call drawGrid(). Your code should work exactly the same as it did before, except now it’s split into more functions.

The benefit to having this extra function is that you can easily call it multiple times in a row. And if you add some parameters, it can draw a slightly different grid each time you call it.

For instance, add a cellWidth parameter. Now you can call drawGrid(16) followed by drawGrid(64), producing two grids with different-size squares.

The second grid in that example will be invisible, because its lines will be right on top of the first grid’s lines. So to fix this, we need to add a color parameter. Then when we call drawGrid(64, 0xFFDDDDDD), the second grid will be a slightly darker color, and we’ll be able to tell the two grids apart.

Hope this helps!

1 Like
#17

Thanks for suggestion. Now i think because it can not work for if i zoom out than it is too slow…

Okay i am sorry for that. Thanks for helps!

I will close my thread Thanks!

#18

It shouldn’t be too slow.

How often are you calling the function?

1 Like
#19

Thanks for help but i am developing back to grid for AS3 no Haxe because i am thinking for good model editor because KHed and Blender has not good snapping to grid. I am really sad because they create bad models from unsnapping? How do i understand?

I know it is not slow…

How do i move grid? If i drop grid and
How do i know cross like coordinate if coordinate looks like other 3D editors

thanks

#20

The easiest way would be to clear the grid and redraw with different starting coordinates.

At this point, you’ll want to start using a “dirty” flag. Something like this:

class Grid extends Bitmap
{
    //...
    
    public var zoomLevel(default, set):Float = 1;
    public var gridX(default, set):Float = 0;
    public var gridY(default, set):Float = 0;
    
    private var gridDirty:Bool = true;
    
    //...
    
    public function new()
    {
        //...
        
        stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
    }
    
    //...
    
    private function set_zoomLevel(level:Float):Float
    {
        if(level <= 0)
        {
            return zoomLevel;
        }
        
        zoomLevel = level;
        gridDirty = true;
        return zoomLevel;
    }
    private function set_gridX(x:Float):Float
    {
         gridX = x;
         gridDirty = true;
         return gridX;
    }
    private function set_gridY(y:Float):Float
    {
         gridY = y;
         gridDirty = true;
         return gridY;
    }
    
    private function onEnterFrame(e:Event)
    {
        if(gridDirty)
        {
            gridDirty = false;
            
            drawAllGrids();
        }
    }
    
    private function drawAllGrids():Void
    {
        bitmapData.fillRect(fullArea, 0x00000000);
        
        //Implemented as described above.
    }
    
    private function drawGrid(cellWidth:Int, color:Int):Void
    {
        //Implemented as described above, except
        //now it takes gridX and gridY into account.
    }
}