AS3 - How to copy sprites / graphics of sprites?

Question

Let's say I have a 2D level that is build out of 2D blocks. Some of them are boxes.

The boxes look just the same. No difference! How can I "copy" or clone the graphics of one box to another ? The only difference the boxes will have is that sprite.x and sprite.y have different values. I would probably go that way:

public static function drawBox(graphics:Graphics):void
{
    graphics.clear();
    // draw box
}

drawBox(box1.graphics);
drawBox(box2.graphics);
drawBox(box3.graphics);

No textures will be used, only vector drawing!

Is this a good practice ? Is there another way to achieve the same ?

---

Update: Sometimes I draw sprites randomly (very hard to redraw them if I need many instances of one sprite and all its attributes).

Answer 1

You can use the function copyFrom.

Something like this:

var s:Sprite = new Sprite();
s.graphics.beginFill(0);
s.graphics.drawRect(0, 0, 100, 100);
s.graphics.endFill();
addChild(s);

var s2:Sprite = new Sprite();
// Copyfrom accepts a `Graphics` object.
s2.graphics.copyFrom(s.graphics);
s2.x = 100;
s2.y = 100;
addChild(s2);

Have a look at the documentation about copyFrom().

Answer 2

If you treat it like an object in your game you should probably rather consider the OOP-approach @Pier suggested.

This comes in a lot of flavors:

You could extend a class from Sprite and draw the box as soon as the box is ADDED_TO_STAGE by its parent.

public class box extends Sprite
    {
        protected var _color:uint;
        protected var _size:int;
        public function box(size:int=100, color:uint=0x000000)
        {
            super();
            _size = size;
            _color = color;
            this.addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
        }

        protected function onAddedToStage(event:Event):void
        {
            this.removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
            draw();
        }

        protected function draw():void
        {
            this.graphics.beginFill(_color);
            this.graphics.drawRect(0,0,_size,_size);
            this.graphics.endFill();
        }
}

This box can be constructed/created by calling:

var b:box = new box();
this.addChild(b); 

Or you could let the box contain itself - which could be more feasible if you deal with a lot of Objects. The box would just need a reference to its parent then - and of course it should provide a dispose()-function

    public class box
    {
        private var _parent:Sprite;
        protected var s:Sprite;
        public function box(parent:Sprite)
        {
            _parent = parent;
            s = new Sprite();
            s.graphics.beginFill(0x00000);
            s.graphics.drawRect(0,0,100,100);
            s.graphics.endFill();

            _parent.addChild(s);
        }
        public function dispose():void
        {
            _parent.removeChild(s);
        }

    }
}

In this case you would construct the box as follows - it requires a reference to a Sprite (or any extension of) that has already been added to the stage:

var b:box = new box(this);

In both cases you could dynamically change attributes and make the object more versatile:

public function set size(val:int):void
        {
            _size = val;
            draw();
        }
        public function set color(val:uint):void
        {
            _color = val;
            draw();
        }