BitmapData für TileBasedGame

[K-Grabowski]

Hallöchen,

muss hier gerade ein Tile-Based-Game aufziehen und überlege ob ich die ganze Geschichte in ein BitmapData-Object zeichne und es dann anzeige. Also im Prinzip würde ich alle Animationen, Tiles etc. als Bitmaps nehmen und sie entsprechend zu einem großen Bitmap (der Bühne) zusammenfügen und dann anzeigen.

Gibt es da irgendwelche Nachteile im Vergleich zur Variante als AttachAndRemove-Engine?

Gibts da sehr gute Links (besonders bzg. Double Buffering)?
Ich hab da nämlich kleinere Grafikaussetzer (also Verzögerungen) bei schnelleren Geschwindigkeiten.

Hab mal nen Beispiel drangehängt. War nur ein kleiner Test. Das ganze wird aus zei Tiles zusammengesetzt.

der code:

import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Point;
 
var tile1:BitmapData = BitmapData.loadBitmap("tile1");
var tile2:BitmapData = BitmapData.loadBitmap("tile2");
var tiles:Array = [tile1, tile2];
 
var map = [[1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2]
        ];
 
var screen:MovieClip = createEmptyMovieClip("screeny", 2);
 
var tileWidth:Number = 100;
var tileHeight:Number = 50;
 
var speed = 8;
var worldx:Number = 0;
var worldy:Number = 0;
 
var screenRect:Rectangle = new Rectangle(0,0,500,350);
 
 
var world:BitmapData = new BitmapData(500,350);
 
//
var rect:Rectangle = new Rectangle(0,0,100,50);
screen.attachBitmap(world,1);
 
screen.cacheAsBitmap = true;
screen.scrollRect = screenRect;
screenBuffer.cacheAsBitmap = true;
screenBuffer.scrollRect = screenRect;
screen.attachBitmap(world,1);
onEnterFrame = function () {
    //world.dispose();
    
    var buffer:BitmapData = new BitmapData(500,350);
    worldx -= speed;
    var c:Number = 0;
    var t:Number = getTimer();
    for (var i=0;i< map.length;i++) {
        for (var j=0; j< map[i].length;j++) {
            var tx:Number = worldx + (j*tileWidth/2) + (i*tileHeight);
            var ty:Number = 200 + (i*tileHeight/2) - (j*tileWidth/4);
            //trace("tile("+i + "," + j + ") = " + tx + ", " + ty );
            var p:Point = new Point(tx, ty);
            if (p.x + rect.width > 0 && p.x < 500 &&
                p.y + rect.height > 0 && p.y < 350) {
                
                buffer.copyPixels(tiles[map[i][j]-1],  rect,  p, null, null, true);
            }
            
        }
    }
    
    //world.copyPixels(buffer, screenRect, new Point(0,0));
    world.dispose();
    world = buffer.clone();
    screen.attachBitmap(world,1);
    buffer.dispose();
    
} 

ansehen: http://www.bungartbessler.com/test/bitmaptest.html

[K-Grabowski]

so, läuft jetzt besser, aber gehts noch flüssiger, ohne kleine Ruckler bzw. Aussetzer? Bzw. gibts ne bessere Möglichkeit das ganze Flüssiger zu machen, aber mit der Bedingung das die Map Frame für Frame onTheFly gezeichnet wird. Sind SuperTiles ne Lösung?

import flash.display.BitmapData;
import flash.geom.Rectangle;
import flash.geom.Point;
 
var screenWidth:Number = 550;
var screenHeight:Number = 400;
 
var tile1:BitmapData = BitmapData.loadBitmap("tile1");
var tile2:BitmapData = BitmapData.loadBitmap("tile2");
var tiles:Array = [tile1, tile2];
 
var map = [[1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2],
        [1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2,1,2]
        ];
 
var screenClip:MovieClip = createEmptyMovieClip("screenClip", 2);
var bufferClip:MovieClip = createEmptyMovieClip("bufferClip", 1);
var tileWidth:Number = 100;
var tileHeight:Number = 50;
 
var speed = 8;
var worldx:Number = 0;
var worldy:Number = 0;
 
var screenRect:Rectangle = new Rectangle(0,0,screenWidth,screenHeight);
 
 
var worldBitmap:BitmapData = new BitmapData(screenWidth,screenHeight);
var worldBitmapBuffer:BitmapData = new BitmapData(screenWidth,screenHeight);
 
var tileRect:Rectangle = new Rectangle(0,0,100,50);
 
buffer.attachBitmap(worldBitmapBuffer,1);
buffer.scrollRect = screenRect;
 
screenClip.attachBitmap(worldBitmap,1);
screenClip.scrollRect = screenRect;
 
var emptyBitmap:BitmapData = new BitmapData(screenWidth, screenHeight);
 
 
onEnterFrame = function () {
    //world.dispose();
    worldBitmapBuffer.copyPixels(worldBitmap, screenRect, new Point(0,0));
    bufferClip.swapDepths(screenClip);
    worldBitmap.fillRect(screenRect, 0xFFFFFFFF)
    worldx -= speed;
    var c:Number = 0;
    var p:Point;
    for (var i=0;i< map.length;i++) {
        for (var j=0; j< map[i].length;j++) {
            var tx:Number = worldx + (j*tileWidth/2) + (i*tileHeight);
            var ty:Number = 200 + (i*tileHeight/2) - (j*tileWidth/4);
            //trace("tile("+i + "," + j + ") = " + tx + ", " + ty );
            p = new Point(tx, ty);
            if (p.x + tileRect.width > 0 && p.x < screenWidth &&
                p.y + tileRect.height > 0 && p.y < screenHeight) {
                
                worldBitmap.copyPixels(tiles[map[i][j]-1],  tileRect,  p, null, null, true);
            }
            
        }
    }
    
    //world.copyPixels(buffer, screenRect, new Point(0,0));
    
    
    bufferClip.swapDepths(screenClip);
    
    
} 

ansehen: http://www.bungartbessler.com/test/bitmaptest2.html

download: http://www.bungartbessler.com/test/tilebasedTest.zip