Creating big DisplayObjects best practice

[ASWC]

So I create a big grid that I use as visual help in a drawing application.
Only a little part of this grid appear on the screen at any moment.
This grid can be dragged.

So because this grid can be dragged I create the grid full size right at the start but of course because it's so big I get lag and perf issues so the solution is simple: Not draw the whole grid and only show/draw what's visible on the screen.

Now how do you guys do it?

I can think of a few different ways to do that but if some of you had to deal with that before and could share their experience here that would be great! ;)

[TomMalufe]

I'm a pure coder usually. If I can do something in code instead of in the IDE I will. So in the case of a grid, I would make a blank sprite and use it's graphics property to draw out the grid.
Dragging or zooming (in/out) the grid would just be calling a function that cleared the graphics object and redrew it with the new values.

I think this would be faster then drawing the whole grid out in the IDE and then moving it around the way you are suggesting. Flash would probably try and draw all the excess even if it isn't visible.

The other option is to use a Bitmap and draw to it's bitmapData object using a matrix to define what part of the grid you want to draw.

I think I like the sprite graphics object plan best though.

[ASWC]

Hey thanks a lot for replying! ;)

Well I do draw the grid by code. In fact, I'm like you if I can make it by code that's what I prefer.

So my grid needs to represent a 100x100 feet plan with each foot being represented by 48 pixels (at zoom 100%). So drawing the whole grid is no problem but is not efficient enough (at 100% the grid is 4800x4800 pixels). So I'm studying right now a system with grid tiles where I will have only 9 grid tiles (10x10 feet) inside my grid object. These tiles will auto position themselves so the visible screen will be covered at all time. Does that sound like a right way to do it?

[TomMalufe]

Sure, that sounds fine to me... what I don't understand, is there some kind of details to this grid which prevent you from easily drawing this out? In just a few minutes I wrote this simple bit of code (which, knowing you, is well within your skill level).

package
{
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;

public class GraphicGrid extends Sprite
{
public const GRID_SIZE:int = 48;
public var zoom:Number = 1;
public var offset:Point = new Point();
public var mdp:Point = new Point();; // mouse down point

public function GraphicGrid()
{
drawGrid();

stage.addEventListener(MouseEvent.MOUSE_DOWN, startGridDrag);
}

public function startGridDrag(event:MouseEvent):void
{
stage.addEventListener(MouseEvent.MOUSE_UP, endDrag);
stage.addEventListener(Event.MOUSE_LEAVE, endDrag);
stage.addEventListener(MouseEvent.MOUSE_MOVE, onMove);

mdp.x = mouseX;
mdp.y = mouseY;
onMove();
}

public function endDrag(event:Event):void
{
stage.removeEventListener(MouseEvent.MOUSE_UP, endDrag);
stage.removeEventListener(Event.MOUSE_LEAVE, endDrag);
stage.removeEventListener(MouseEvent.MOUSE_MOVE, onMove);
onMove();
}

public function onMove(event:Event=null):void
{
offset.x += mouseX - mdp.x;
offset.y += mouseY - mdp.y;

drawGrid();

mdp.x = mouseX;
mdp.y = mouseY;
}

public function drawGrid():void
{
var W:Number = stage.stageWidth;
var H:Number = stage.stageHeight;
var size:Number = (zoom > 0)? GRID_SIZE*zoom : 1;
var xp:Number = offset.x % size;
var yp:Number = offset.y % size;

graphics.clear();
graphics.lineStyle(1,0xFF);
while(xp < W)
{
graphics.moveTo(xp, 0);
graphics.lineTo(xp, H);
xp += size;
}
while(yp < H)
{
graphics.moveTo(0, yp);
graphics.lineTo(W, yp);
yp += size;
}
graphics.endFill();
}
}
}

Doing it this way, I could feasibly resize the grid scale when zoomed in or out too much and even display scale and position somewhere on screen. But I think I'm missing something if you aren't doing it this way already... Why do you bring up the 4800 pixel thing? I'm just confused. We only need to limit the zoom and offset values.

[ASWC]

Thanks a lot you just opened my eyes! ;) Truth is I was going the wrong way with this. When I wrote my development plan I thought about having a whole grid draggable so I could keep track of its x,y coordinate and use that to update a top and side ruler and doing it that way it was very easy indeed to update the rulers accordingly and that's the main reason I did not consider drawing dynamically like you just showed. Obviously I was too lazy on this and the trade off of updating my rulers easily versus using a lot of CPU/resources for that is just not gonna work. So yes I'm gonna switch to dynamic drawing instead and update my rulers with a little math formula just by keeping track of the mouse position and that will be the end of it.

Thanks a lot you probably saved me hours of looking for a wrong solution! ;)

[TomMalufe]

Cool. I was really confused there for a minute. I was sure there was something that I just wasn't getting.

I'm glad I could help.

[ASWC]

So one conclusion for this thread could be: Don't create big objects if you don't have too! ;)

[ASWC]

Thx again TomMalufe! Here is the correct version. It's working like a charm!

[TomMalufe]

Nice! That's looking good... exactly how I was imagining it.