views:

228

answers:

2

I am using the blitting technique that jeff from 8bitrocket.com uses for creating tiles. I am trying to paint 2 layers of bitmapdata onto a bitmap. One the first layer is the background ( 1 image). and the second layer is the tiles. In that class below. the updateMap is the method that gets called in the loop to repaint the image.

package com.eapi 
{
    /**
     * ...
     * @author Anthony Gordon
     */
    import com.objects.XmlManager;
    import flash.display.MovieClip;
    import flash.display.Sprite;
    import flash.events.*;
    import flash.display.BitmapData;
    import flash.display.Bitmap
    import flash.geom.Rectangle;
    import flash.geom.Point;
    import flash.display.DisplayObject;

    public class EngineApi extends MovieClip
    {
        public var images:Array;
        public var world:Array;
        //w stands for world, how big it is in columns and rows
        private var wCols:Number = 50;
        private var wRows:Number = 16;

        public var wWidth:Number;
        public var wHeight:Number;
        //v stands for view, which means your field of view
        public var vRows:Number;
        public var vCols:Number;

        public var vWidth:Number = 540;
        public var vHeight:Number = 360;
        //how big your indivual tile is
        public var tileW:Number = 80;
        public var tileH:Number = 80;

        public var offsX:Number = 0;
        public var offsY:Number = 0;
        public var xEnd:Number = 0;
        public var yEnd:Number = 0;
        public var tilex:int;
        public var tiley:int;

        public var scrollx:Number = 0;
        public var scrolly:Number = 0;

        private var screen:Bitmap;
        private var canvas:BitmapData;
        private var buffer:BitmapData;
        public var mapHolder:Array;
        private var scrollLoop:Boolean;

        private var minLoop:Number;
        private var maxLoop:Number;

        public var currentMap:Number = 0;
        private var queue:Array;

        public var currentCol:Number = 0;
        public var currentRow:Number = 0;
        public var enviroment:Array;
        public var currentTileSheet:Number = 0;

        private var layer1:Sprite;
        private var layer2:Sprite;
        private var layer3:Sprite;
        private var layer4:Sprite;
        private var layer5:Sprite;

        public var background:BitmapData

        protected var stageObject:Array;
        protected var gameObjects:Array;

        public function EngineApi(w:Number = 540,h:Number = 360, tw:Number = 50, th:Number = 50) 
        {

            stageObject = new Array();
            gameObjects = new Array();

            //Add Layers
            layer1 = new Sprite();
            layer2 = new Sprite();
            layer3 = new Sprite();
            layer4 = new Sprite();
            layer5 = new Sprite();
            //end

            images = new Array();
            vWidth = w;
            vHeight = h;
            tileW = tw;
            tileH = th;
            queue = new Array();

            mapHolder = new Array();

            vCols = Math.floor(vWidth/tileW);
            vRows = Math.floor(vHeight/tileH);

            wWidth = wCols * tileW;
            wHeight = wRows * tileH;

            canvas = new BitmapData(vWidth,vHeight,true,0x000000);
            buffer = new BitmapData(vWidth + 2 * tileW, vHeight + 2 * tileH ,false,0x000000);           
            screen = new Bitmap(canvas);

            addChild(screen);

            addChild(layer1);
            addChild(layer2);
            addChild(layer3);
            addChild(layer4);
            addChild(layer5);
        }

        public function addGameChild(object:IGameObject, layer:Number):void
        {
            switch(layer)
            {
                case 1:
                    layer1.addChild(DisplayObject(object));
                break;
                case 2:
                    layer2.addChild(DisplayObject(object));
                break;
                case 3:
                    layer3.addChild(DisplayObject(object));
                break;
                case 4:
                    layer4.addChild(DisplayObject(object));
                break;
                case 5:
                    layer5.addChild(DisplayObject(object));
                break;
                default:
            }

            if (object.IsDisplay == true)
                gameObjects.push(object);

            stageObject.push(object);
        }

        public function UpDateMap():void
        {
            offsX += scrollx;
            offsY += scrolly;

            tilex = int(offsX/tileW);
            tiley = int(offsY/tileH);

            xEnd = tilex + vWidth;
            yEnd = tiley + vHeight;

            var tileNum:int;

            var tilePoint:Point = new Point(0,0);
            var tileRect:Rectangle = new Rectangle(0, 0, tileW, tileH);

            var rowCtr:int=0;
            var colCtr:int=0;

            for (rowCtr=0; rowCtr <= vRows; rowCtr++) {
                for (colCtr = 0; colCtr <= vCols; colCtr++) {

                    currentCol = colCtr+tilex;
                    currentRow = rowCtr+tiley;
                    tileNum = mapHolder[currentMap][rowCtr+tiley][colCtr+tilex];
                    tilePoint.x = colCtr * tileW;
                    tilePoint.y = rowCtr * tileH;
                    tileRect.x = int((tileNum % 100))* tileW;
                    tileRect.y = int((tileNum / 100))* tileH;
                    buffer.copyPixels(images[currentTileSheet],tileRect,tilePoint);
                }               
            }//End Loop
            var bgRect:Rectangle = new Rectangle(0, 0, 544, 510);
            var bgPoint:Point = new Point(0, 0);

            var bufferRect:Rectangle = new Rectangle(0,0,vWidth,vHeight);
            var bufferPoint:Point = new Point();            

            bufferRect.x = offsX % tileW;
            bufferRect.y = offsY % tileH;

            canvas.copyPixels(background,bgRect,bgPoint);
            canvas.copyPixels(buffer,bufferRect,bufferPoint);

        }//End UpdateMap

        public function StartRender():void
        {
            addEventListener(Event.ENTER_FRAME, loop);
        }

        protected function loop(e:Event):void
        {           
            UpDateMap();
            UpdateObjects();
        }

        protected function UpdateObjects():void
        {
            for (var i:Number = 0; i < stageObject.length; i++)
            {
                stageObject[i].UpdateObject();
            }

            for (var g:Number = 0; g < stageObject.length; g++)
            {
                if (stageObject[g].Garbage && stageObject[g].IsDisplay)
                {
                    removeChild(DisplayObject(stageObject[g]));
                    stageObject[g] = null;
                }
                else if (stageObject[g].Garbage == true && stageObject[g].IsDisplay == false)
                {
                    stageObject[g] = null;                  
                }
            }

        }

        public function StopRender():void
        {
            removeEventListener(Event.ENTER_FRAME, loop);
        }

    }

}

Its not all the complete code. But I can tell you this... If I remove canvas.copyPixels(background,bgRect,bgPoint); or canvas.copyPixels(buffer,bufferRect,bufferPoint); I can see either or.If I paint them both then I can only see the one that painted last. my tile image is 128 x 32. 0 - 3. array 3 is transparent image. I used that hopeing that I could see through the image and see the background. I was wrong.

At first it was a all black background. but then I changed the transparent constructor to true on the buffer varible. now it shows a white background (like the stage). but still no background image.

A: 

I'm not sure I completely understand the example, but it looks like the issue is that you're using copyPixels--this should replace the old pixels in the canvas bmp with new values.

Try using draw for the foreground instead:

canvas.copyPixels(background, bgRect, bgPoint);
canvas.draw(buffer, transform, null, null, clipRect);

Also, I'm not sure why you're drawing the background image to a different rect than the foreground? There may be something there.

Michael Brewer-Davis
I am using a different rectangle class for the background then for the buffer yes. Also I would like to add that if I add the bg behind it from the stage. just by doing the addChild(bitMapBackground). I see it. but if I do what I was doing previously, it doesnt work. But I will try your method. Reason I did it the other way is because I saw it in a book once. but the book is a bit out of date. it is as professional 8. they need new more advance programming books. But any how, I will give it a try
numerical25
I tried it out and it worked. this is what I did canvas.draw(buffer,null,null,null,bufferRect,true);. But it was Choppy. the tiles seem to increment every 32 pixels (the width of the tile) instead of smoothly. I didnt add a transform cause I am not sure what to put into the value. the background is 544x510. adding the background directly to the stage seem to work. if I cant this to work then I guess i can do it that way.
numerical25
A: 

I took a seperate movieclip and used it as a parallax behind the blitting tiles.

numerical25