Single Loader to multiple Sprite Possible?

Question

I've looked in various resources regarding this topic, and it seems to me that I need a Loader for every Sprite which contains an image file (png).

I'm trying to make a Tile Rendering System, and have created a grid of X by Y sprites, but all of them actually reference the same image file. Is there any other way to do this? (Make the sprite share the same png data file)

Some sample code of what I have done.

// Create an array of X * Y Loaders
var cTileLoaders:Array = new Array( 100 ); // for example 10 by 10 grid
var cTiles:Array = new Array( 100 );
var nIndex:int = 0;
var nImgLoadCount:int = 0;
for ( ; 100 > nIndex; ++nIndex ) {
    cTileLoaders[ nIndex ] = new Loader();
    cTiles[ nIndex ] = new Sprite();
    // perform more sprite initialization
    ....
    cTileLoaders[ nIndex ].contentLoaderInfo.addEventListener( Event.COMPLETE, ImageLoaded
    cTileLoaders[ nIndex ].Load( new URLRequest( "some image path" ) );
}
// handler for image loaded
function ImageLoaded( eEvent:Event ):void {
    ++nImgLoadCount;
    // when all 100 sprite data are loaded
    // assuming there is no i/o error
    if ( 100 == nImgLoadCount ) { 
        cTiles[ nIndex ].addChild( cTileLoaders[ nIndex ].content );
    }
}

Answer 1

I think the answer in your case is to utilise the Bitmap data contained within the image you're loading like this:

var tilesWide:uint = 10;
var tilesHigh:uint = 10;

var tileHolder:Sprite = new Sprite();
this.addChild(tileHolder);

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onImgLoaded);
loader.load(new URLRequest("tile.png"));

function onImgLoaded(e:Event):void
{
    /* Create a template bitmap to hold the image info */
    var templateBitmap:Bitmap = e.target.content;
    var templateBitmapData:BitmapData = templateBitmap.bitmapData;

    /* Loop through your tiles */
    for (var a:uint = 0; a < tilesWide; a++)
    {
     for (var b:uint = 0; b < tilesHigh; b++)
     {
      var tile:Sprite = new Sprite();
            /* Attach the template BitmapData to each tile */
      var tileBitmap:Bitmap = new Bitmap(templateBitmapData);
      tile.addChild(tileBitmap);

      tile.x = a * tile.width;
      tile.y = b * tile.height;

      tileHolder.addChild(tile);
     }
    }
}

Answer 2

You could also use SpriteFactory, a little library I wrote specifically for this:

var tilesWide:uint = 10;
var tilesHigh:uint = 10;
var tileHolder:Sprite = new Sprite();
var tilePath:String = "some/image/path.png";

var factory:SpriteFactory = new SpriteFactory();
factory.loadBitmap("tile", tilePath);

for (var a:uint = 0; a < tilesWide; a++)
{
    for (var b:uint = 0; b < tilesHigh; b++)
    {
        var tile:Sprite = factory.newSprite("tile");                        
        tile.x = a * tile.width;
        tile.y = b * tile.height;

        tileHolder.addChild(tile);
    }
}

The advantage here being that you can use the sprites right away, and they'll automatically be filled with the bitmap once it's loaded.