AS3: Problems with ScaleX/ScaleY and Width/Height - actionscript-3

I'm using FlashDevelop to test a menu-type system that I want to use for a game, and I'm having serious issues figuring out either the Width and Height or the ScaleX and ScaleY (I'm not really sure which set is causing the problems) of the Sprite subclasses. I've read many things that seem to be the solution to my problem, including resizing the sprite subclass after I add any children, but none seem to work. Right now, I have 3 separate Classes.
Main:
public class Main extends Sprite
{
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void
{
removeEventListener(Event.ADDED_TO_STAGE, init);
// entry point
var BF:BFi = new BFi;
this.addChild(BF);
this.width = 640;
this.height = 480;
trace(this + "Dimensions: " + width + ", " + height);
trace(this + "Coordinates: " + x + ", " + y);
}
}
BFi:
public class BFi extends Sprite
{
public function BFi()
{
var BFMenu:BFiMenu = new BFiMenu;
addChild(BFMenu);
trace(getChildAt(0));
this.x = this.y = 0;
this.width = 640;
this.height = 480;
BFMenu.x = this.y = 0;
BFMenu.width = 640;
BFMenu.height = 480;
trace(this + "Dimensions: " + width + ", " + height);
trace(this + "Coordinates: " + x + ", " + y);
}
}
and BFiMenu:
public class BFiMenu extends Sprite
{
[Embed(source = "../Assets/Button1.png")]private var Button1:Class;
public function BFiMenu()
{
var Bounds:Sprite = new Sprite;
Bounds.graphics.lineStyle(2, 0, 1);
Bounds.graphics.drawRect(0, 0, 640, 480);
addChild(Bounds);
var NewButton:ComplexButton = new ComplexButton(220, 405, 200, 50, Button1, "PLAY", "Block", 50, 0x000000, function Button1(e:MouseEvent):void { /*parent.removeChildAt(0);*/ } );
//var NewButton:ComplexButton = new ComplexButton(0, 0, 200, 50, Button1, "PLAY", "Block", 50, 0x000000, function Button1(e:MouseEvent):void { parent.removeChildAt(0); } );
addChild(NewButton);
this.width = 640;
this.height = 480;
trace(this + "Dimensions: " + width + ", " + height);
trace(this + "Coordinates: " + x + ", " + y);
trace(NewButton + "Dimensions: " + NewButton.width + ", " +NewButton.height);
trace(NewButton + "Coordinates: " + NewButton.x + ", " + NewButton.y);
}
}
the rectangle named "Bounds" has the height and width of what I want (640x480), but the button that I placed in, supposed to have a y-coord of about 450, instead has a y-value of nearly 800, and is clearly distorted, but still on screen, even though the height is only 480.
The "ComplexButton" Class that is called is my own button class, and I've tested that enough to know that it works fine. when I run this program, it Distorts everything and nothing is where I wanted it to be. Any help would be very appreciated.

Few notes:
Any time a display object is created, the initial x and y coordinates are defaulted to zero, so you don't need to initialize them to 0 yourself.
Changing the width and height of an empty display object will do nothing. If the display object has graphical content, then it will scale that content so that it matches the desired width and height, which would also change the scale factors.
If you are going to draw a shape in a Disp.Object to give it a width and height, you do not then need to set those values explicitly.
Try removing each of the 3 places where you explicitly set those values.

Related

Coordinates of a child sprite in AS3

I have a larger project, but I can narrow my problem down to this example:
public function Main()
{
var myContainer:Sprite = new Sprite;
myContainer.graphics.beginFill(0xFFFFFF);
myContainer.graphics.lineStyle(1);
myContainer.graphics.drawRect(10, 10, 300, 300);
myContainer.graphics.endFill();
addChild(myContainer);
trace('Container coords: ' + myContainer.x + ' ' + myContainer.y);
trace('Instance coords: ' + getChildAt(numChildren - 1).x + ' ' + getChildAt(numChildren - 1).y);
var spr:Sprite = new Sprite;
spr.graphics.beginFill(0xFF0000);
spr.graphics.lineStyle(1);
spr.graphics.drawCircle(30, 30, 10);
spr.graphics.endFill();
myContainer.addChild(spr);
trace('Child coords: ' + spr.x + ' ' + spr.y);
trace('Child instance coords: ' + myContainer.getChildAt(myContainer.numChildren - 1).x + ' ' + myContainer.getChildAt(myContainer.numChildren - 1).y);
}
The output is this:
Container coords: 0 0
Instance coords: 0 0
Child coords: 0 0
Child instance coords: 0 0
Can someone explain how to get the actual coordinates of a child sprite within a sprite (either local or global, I know you can convert between the two)?
your myContainer not set x,y. only has been set graphics draw coordinates (10,10). spr versa.
see a following code. this code some different, but visual output same. Is set to 10 the parent's coordinates. draw coordinates set (0,0). so myContainer x,y is 10 and i think, you are slightly mistaken. getChildAt(numChildren-1) is myContainer. so this coordinats also same. myContainer not have any children. graphics is not a child concept. Additionally, child coordinates is relative from parent.
var myContainer:Sprite = new Sprite;
myContainer.x = 10;
myContainer.y = 10;
myContainer.graphics.beginFill(0xFFFFFF);
myContainer.graphics.lineStyle(1);
myContainer.graphics.drawRect(0, 0, 300, 300);
myContainer.graphics.endFill();
addChild(myContainer);
//myContainer.x = 10, myContainer.y=10
//getChildAt(numChildren - 1).x = 10, getChildAt(numChildren - 1).y = 10
your code as follows:
my code as follows:
try this!
var point:Point = new Point(spr.x, spr.y);
point = localToGlobal(point);
trace('Child coords: ' + point);

My dynamically created movie clips are not going away

I am working on a breakout type game with dynamically-created squares. When a brick gets hit, I fire off a removeMC function that is supposed to turn it white and make it shrink down in size. However, sometimes the squares just turn white instead of tweening down. I have included the script for the removeMV function as well as the function that creates the squares. Arg1 is the square to be removed. I apologize for the bad naming conventions, but the fire got corrupted and had to be recovered with a decompiler.
This is the removeMC function
public function removeMC(arg1:flash.display.Sprite):*
{
this.score --;
this.uiBar.txtScore.text=this.score;
var loc1:*=new flash.geom.ColorTransform();
loc1.color = 0xffffFF;
arg1.transform.colorTransform = loc1;
TweenMax.to(arg1, 0.4, {colorTransform:{tint:0x0000ff, tintAmount:1}});
var loc2:*=this.ballMC.x - this.ballMC.x % 30;
var loc3:*=this.ballMC.y - this.ballMC.y % 30;
arg1.scaleY = arg1.scaleY * -1;
// trace("Ball x:" + this.ballMC.x + " ballY:" + this.ballMC.y + " block x:" + loc2 + " block y:" + loc3);
var loc4:*=new fl.transitions.Tween(arg1, "width", null, 30, 0, 0.5, true);
var loc5:*=new fl.transitions.Tween(arg1, "height", null, 30, 0, 0.5, true);
var loc6:*=new fl.transitions.Tween(arg1, "x", null, 0, loc2, 0.5, true);
var loc7:*=new fl.transitions.Tween(arg1, "y", null, 0, loc3, 0.5, true);
this.brickArray.splice(this.indexSearch(this.brickArray, arg1), 1);
arg1.x+=3000;//failsafe to remove the squares. doesn't work
arg1.y+=3000;
return;
}
This is the function that creates the squares. Arg 1 and arg2 are the width and height in squares
public function createImgNodeGrid(arg1:int=1, arg2:int=1, arg3:Number=0):void
{
var loc6:*=0;
var loc7:*=null;
var loc8:*=null;
var loc9:*=null;
var loc10:*=null;
var loc1:*=this._img.width / arg1;
var loc2:*=this._img.height / arg2;
var loc3:*=arg1 * arg2;
this._imgNodes = [];
var loc4:*=0;
var loc5:*=0;
while (loc5 < arg1)
{
loc6 = 0;
while (loc6 < arg2)
{
loc7 = new flash.geom.Rectangle(loc5 * loc1, loc6 * loc2, loc1, loc2);
loc8 = new flash.display.BitmapData(loc1, loc2, true);
loc8.copyPixels(this._img.bitmapData, loc7, this.zero);
loc9 = new flash.display.Bitmap(loc8);
loc9.x = loc5 * (loc1 + arg3);
loc9.y = loc6 * (loc2 + arg3);
var loc11:*;
this._imgNodes[loc11 = loc4++] = loc9;
loc10 = new flash.display.Sprite();
loc10.mouseChildren = false;
this.brickArray.push(loc10);
loc10.addChild(loc9);
this._tiledImg.addChild(loc10);
++loc6;
}
++loc5;
}
return;
}
I may miss the mark here as its quite hard to read that lot, however, this is my suggestion for your removeMc function. I noticed you have TweenMax, so I would utilise that as opposed to the flash tweener class.
public function removeMC(arg1:flash.display.Sprite):*
{
this.score --;
this.uiBar.txtScore.text=this.score;
var loc1:*=new flash.geom.ColorTransform();
loc1.color = 0xffffFF;
arg1.transform.colorTransform = loc1;
var loc2:*=this.ballMC.x - this.ballMC.x % 30;
var loc3:*=this.ballMC.y - this.ballMC.y % 30;
TweenMax.to(arg1, 0.4, {scaleY:0, scaleX:0, x:loc2, y:loc3, colorTransform:{tint:0x0000ff, tintAmount:1}, onComplete:tweenComplete(arg1)});
// trace("Ball x:" + this.ballMC.x + " ballY:" + this.ballMC.y + " block x:" + loc2 + " block y:" + loc3);
this.brickArray.splice(this.indexSearch(this.brickArray, arg1), 1);
return;
}
private function tweenComplete(square:Sprite):void
{
this.removeChild(square);
}
That should result in the square shrinking to 0 size and becoming white at the same time. Then once it completes it will remove the child completely.

Dealing with twip precision limit placed on DisplayObject positioning

I'm working on a project to render xps content in flash, and am running into the twip (1/20 of a unit) precision limit in flash. The twip limit is mentioned in the swf file format, but in the flash as3 documentation it's only mentioned in PrintJob.addPage method. However, when setting the DisplayObject x and y properties, any precision less than 0.05 is rounded. Regardless of any scaling. The code below demonstrates this issue.
package
{
import flash.display.DisplayObject;
import flash.display.Graphics;
import flash.display.GraphicsPathCommand;
import flash.display.Shape;
import flash.display.Sprite;
import flash.display.StageScaleMode;
public class TWIPTest extends Sprite
{
// can change behaviour by switching between createPoint and drawPoint
public function TWIPTest()
{
this.stage.scaleMode = StageScaleMode.NO_SCALE;
// scale our unit square so we can see what is happening
scaleX = 400; scaleY = 400;
// draw grid
var grid : Sprite = new Sprite();
addChild(grid);
grid.graphics.lineStyle(TWIP, 0x888888);
drawGrid(1 / TWIP, 1 / TWIP, TWIP, TWIP, grid);
// center of unit square
var cx : Number = 0.5;
var cy : Number = 0.5;
var shape : Shape;
// GREEN in middle of unit square
this.addChild(createPoint(cx, cy, 0x00FF00));
//drawPoint(cx, cy, 0x00FF00, this.graphics);
// BLUE one TWIP away from GREEN
this.addChild(createPoint(cx + TWIP, cy + TWIP, 0x0000FF));
//drawPoint(cx + TWIP, cy + TWIP, 0x0000FF, this.graphics);
// RED half a TWIP away from GREEN (this does not work....)
this.addChild(createPoint(cx + (TWIP / 2), cy + (TWIP / 2), 0xFF0000, 0.5));
//drawPoint(cx + (TWIP / 2), cy + (TWIP / 2), 0xFF0000, this.graphics, 0.5);
// now insert new container to work around limit encontered with RED point
var container : Sprite = new Sprite();
this.addChild(container);
container.scaleX = 0.5; container.scaleY = 0.5;
container.addChild(createPoint(2 * cx + TWIP, 2 * cy + TWIP, 0xFF00FF, 1.0, 2 * TWIP));
//drawPoint(cx + (TWIP / 2), cy + (TWIP / 2), 0xFF00FF, container.graphics);
}
static private function createPoint(x:Number, y:Number,color:uint,alpha:Number=1.0,radius:Number=0.05):Shape
{
var shape : Shape = new Shape();
shape.x = x; shape.y = y;
shape.graphics.beginFill(color,alpha);
shape.graphics.drawCircle(0, 0, radius);
shape.graphics.endFill();
return shape;
}
static private function drawPoint(x:Number, y:Number,color:uint,target:Graphics,alpha:Number=1.0,radius:Number=0.05):void
{
target.beginFill(color,alpha);
target.drawCircle(x, y, radius);
target.endFill();
}
// drawGrid from #Feltope
private function drawGrid(numColumns:Number, numRows:Number, cellHeight:Number, cellWidth:Number, grid:Sprite):void
{
for (var col:Number = 0; col &lt numColumns + 1; col++)
{
for (var row:Number = 0; row &lt numRows + 1; row++)
{
grid.graphics.moveTo(col * cellWidth, 0);
grid.graphics.lineTo(col * cellWidth, cellHeight * numRows);
grid.graphics.moveTo(0, row * cellHeight);
grid.graphics.lineTo(cellWidth * numColumns, row * cellHeight);
}
}
}
static private const TWIP : Number = 0.05;
}
}
This posting also mentions this issue.
The problem is that in parsing xps files this can happen anytime, and many times, for example
&ltCanvas RenderTransform="96.201126,0,0,-95.787476,713.62598,207.05859"&gt
&ltPath Data="..." RenderTransform="0.010394889,0,0,-0.010439778,-7.4180626,2.1616458"&gt
Notice the dx in the Path element, which seems trivial, but the parent Canvas (and other parents above this) scale it up so the rounding of dx to 0 or 0.05 is very noticeable.
I could add Sprite containers whenever this happens, as in the code above, but that's going to bloat memory and slow down rendering.
My question (finally), has anyone dealt with this issue? Any ideas on a better way of handling this limit? Workarounds? Any help appreciated. cheers
what is the biggest problem here? How it looks on screen or that after parsing the precision is lost? You can't do with rendering but you could do modified DisplayObject that will store for example position then reading it will contain the precision kept. or am I missing the point?:)
Edit:
Following is an example of custom display objects (Shape and Sprite)
import flash.display.Shape;
import flash.display.Sprite;
internal class MySprite extends Sprite
{
protected var m_nX:Number;
protected var m_nY:Number;
override public function get x():Number
{
return m_nX;
}
override public function set x(value:Number):void
{
m_nX = value;
super.x = m_nX;
}
override public function get y():Number
{
return m_nY;
}
override public function set y(value:Number):void
{
m_nY = value;
super.y = m_nY;
}
}
internal class MyShape extends Shape
{
protected var m_nX:Number;
protected var m_nY:Number;
override public function get x():Number
{
return m_nX;
}
override public function set x(value:Number):void
{
m_nX = value;
super.x = m_nX;
}
override public function get y():Number
{
return m_nY;
}
override public function set y(value:Number):void
{
m_nY = value;
super.y = m_nY;
}
}
Add this to your example and replace any instantiation of Shape and use MyShape, same for Sprite, replace it by MySprite. There will be no visual difference but the x and y of them will return precise values.
This is a sample test for precision keeping:
addChild(createPoint(0.51000005, 0.510000049, 0x800000, 1, TWIP));
var disp :DisplayObject = getChildAt(numChildren - 1);
trace(disp.x, disp.y);
will trace 0.51000005, 0.510000049 but above test added to your example without MySprite and MyShape custom DisplayObjects will return 0.5 0.5.

Perfecting canvas mouse coordinates

I'm working on a function that I can use to get canvas coordinates.
Works kind of well, until part of the canvas is invisible on the screen.
When i make the window small, and scroll to bottom right corner it seems to start from the visible part of the canvas. How can I fix this to get the right coordinates?
Here's my code:
function getMousePosition(event) {
var MX = new Number();
var MY = new Number();
if (event.x != undefined && event.y != undefined) {
MX = event.x;
MY = event.y;
}
else { // Firefox method to get the position
MX = event.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
MY = event.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
MX -= canvas.offsetLeft;
MY -= canvas.offsetTop;
alert("x: " + MX + " y: " + MY);
}
Here is the function i get used to obtain the canvas coordinates:
function getCanvasPos(el) {
var canvas = document.getElementById(el);
var _x = canvas.offsetLeft;
var _y = canvas.offsetTop;
while(canvas = canvas.offsetParent) {
_x += canvas.offsetLeft - canvas.scrollLeft;
_y += canvas.offsetTop - canvas.scrollTop;
}
return {
left : _x,
top : _y
}
};
...and here is the function for mouse coordinates
function mousePos(e) {
var mouseX = e.clientX - getCanvasPos(e.target).left + window.pageXOffset;
var mouseY = e.clientY - getCanvasPos(e.target).top + window.pageYOffset;
return {
x : mouseX,
y : mouseY
};
};
The mouse event listener is looking something like this:
canvas.addEventListener('mousemove', function(e){
console.log(canvas.mousePos(e).x);
});

Optimizing my dynamic background engine for a 2d flash game in actionscript-3

Edit 2: judging on the lack of replies I start wondering if my issue is clear enough. Please tell me if I need to elaborate more.
Notice: see bottom for a code update!
Short introduction: I'm writing a 2 dimensional flash space game in actionscript. The universe is infinitely big, because of this feature, the background has to be rendered dynamically and background objects (gas clouds, stars, etc.) have to be positioned randomly.
I created a class called BackgroundEngine and it's working very well, the problem is however the rendering performance. This is how it works:
At startup, 4 background containers (each the size of the stage) are created around the player. Top left, top right, bottom left and bottom right. All background squares are added to a master container, for easy movement of the background. Now, there are 2 polling functions:
1) "garbage poller": looks for background containers that are 2 times the stage width or height away from the player's X or Y coord, respectively. If so, it will remove that background square and allow it for garbage collection.
2) "rendering poller": looks whether there is currently a background at all sides of the player (x - stageWidth, x + stageWidth, y - stageHeight, y + stageHeight). If not, it will draw a new background square at the corresponding location.
All background squares are created with the following function (the ones that are created dynamically and the four on startup):
<<< removed old code, see bottom for updated full source >>>
All the randoms you see there are making sure that the environment looks very unique on every square. This actually works great, the universe looks quite awesome.
The following assets are being used as background objects:
1) Simple stars : http://www.feedpostal.com/client/assets/background/1.png (you probably won't be able to see that one in a browser with a white background).
2) Bright stars : http://www.feedpostal.com/client/assets/background/2.png
3) White gas clouds : http://www.feedpostal.com/client/assets/background/3.png
4) Red gas clouds: http://www.feedpostal.com/client/assets/background/4.png
Important notes:
1) All assets are cached, so they don't have to be re-downloaded all the time. They are only downloaded once.
2) The images are not rotating or being scaled after they are created, so I enabled cacheAsBitmap for all objects, containers and the masterContainer.
3) I had to use PNG formats in Photoshop because GIFs did not seem to be rendered very well in flash when used with transparency.
So, the problem is that when I fly around the rendering of the background takes too much performance: the client starts "lagging" (FPS wise). Because of this, I need to optimize the background engine so that it will render much quicker. Can you folks help me out here?
Update 1:
This is what I have so far after the one response I got.
BackgroundEngine.as
package com.tommedema.background
{
import br.com.stimuli.loading.BulkLoader;
import com.tommedema.utils.Settings;
import com.tommedema.utils.UtilLib;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.events.Event;
public final class BackgroundEngine extends Sprite
{
private static var isLoaded:Boolean = false;
private static var bulkLoader:BulkLoader = BulkLoader.getLoader("main");
private static var masterContainer:Sprite;
private static var containers:Array = [];
private static var stageWidth:uint;
private static var stageHeight:uint;
private static var assets:Array;
//moves the background's X coord
public static function moveX(amount:Number):void
{
if (masterContainer)
{
masterContainer.x += amount;
collectGarbage();
drawNextContainer();
}
}
//moves the background's Y coord
public static function moveY(amount:Number):void
{
if (masterContainer)
{
masterContainer.y += amount;
collectGarbage();
drawNextContainer();
}
}
//returns whether the background engine has been loaded already
public static function loaded():Boolean
{
return isLoaded;
}
//loads the background engine
public final function load():void
{
//set stage width and height
stageWidth = stage.stageWidth;
stageHeight = stage.stageHeight;
//retreive all background assets
bulkLoader.add(Settings.ASSETS_PRE_URL + "background/1.png", {id: "background/1.png"});
bulkLoader.add(Settings.ASSETS_PRE_URL + "background/2.png", {id: "background/2.png"});
bulkLoader.add(Settings.ASSETS_PRE_URL + "background/3.png", {id: "background/3.png"});
bulkLoader.add(Settings.ASSETS_PRE_URL + "background/4.png", {id: "background/4.png"});
bulkLoader.addEventListener(BulkLoader.COMPLETE, assetsComplete);
bulkLoader.start();
//set isLoaded to true
isLoaded = true;
}
//poller function for drawing next background squares
private static function drawNextContainer():void
{
var stageCenterX:Number = stageWidth / 2;
var stageCenterY:Number = stageHeight / 2;
var curContainer:Bitmap = hasBackground(stageCenterX, stageCenterY);
if (curContainer)
{
//top left
if (!hasBackground(stageCenterX - stageWidth, stageCenterY - stageHeight)) drawNewSquare(curContainer.x - stageWidth, curContainer.y - stageHeight);
//top
if (!hasBackground(stageCenterX, stageCenterY - stageHeight)) drawNewSquare(curContainer.x, curContainer.y - stageHeight);
//top right
if (!hasBackground(stageCenterX + stageWidth, stageCenterY - stageHeight)) drawNewSquare(curContainer.x + stageWidth, curContainer.y - stageHeight);
//center left
if (!hasBackground(stageCenterX - stageWidth, stageCenterY)) drawNewSquare(curContainer.x - stageWidth, curContainer.y);
//center right
if (!hasBackground(stageCenterX + stageWidth, stageCenterY)) drawNewSquare(curContainer.x + stageWidth, curContainer.y);
//bottom left
if (!hasBackground(stageCenterX - stageWidth, stageCenterY + stageHeight)) drawNewSquare(curContainer.x - stageWidth, curContainer.y + stageHeight);
//bottom
if (!hasBackground(stageCenterX, stageCenterY + stageHeight)) drawNewSquare(curContainer.x, curContainer.y + stageHeight);
//bottom right
if (!hasBackground(stageCenterX + stageWidth, stageCenterY + stageHeight)) drawNewSquare(curContainer.x + stageWidth, curContainer.y + stageHeight);
}
}
//draws the next square and adds it to the master container
private static function drawNewSquare(x:Number, y:Number):void
{
containers.push(genSquareBg());
var cIndex:uint = containers.length - 1;
containers[cIndex].x = x;
containers[cIndex].y = y;
masterContainer.addChild(containers[cIndex]);
}
//returns whether the given location has a background and if so returns the corresponding square
private static function hasBackground(x:Number, y:Number):Bitmap
{
var stageX:Number;
var stageY:Number;
for(var i:uint = 0; i < containers.length; i++)
{
stageX = masterContainer.x + containers[i].x;
stageY = masterContainer.y + containers[i].y;
if ((containers[i]) && (stageX < x) && (stageX + stageWidth > x) && (stageY < y) && (stageY + stageHeight > y)) return containers[i];
}
return null;
}
//polling function for old background squares garbage collection
private static function collectGarbage():void
{
var stageX:Number;
var stageY:Number;
for(var i:uint = 0; i < containers.length; i++)
{
if (containers[i])
{
stageX = masterContainer.x + containers[i].x;
stageY = masterContainer.y + containers[i].y;
if ((stageX < -stageWidth * 1.5) || (stageX > stageWidth * 2.5) || (stageY < -stageHeight * 1.5) || (stageY > stageHeight * 2.5))
{
containers[i].parent.removeChild(containers[i]);
containers.splice(i, 1);
}
}
}
}
//dispatched when all assets have finished downloading
private final function assetsComplete(event:Event):void
{
assets = [];
assets.push(bulkLoader.getBitmap("background/1.png")); //star simple
assets.push(bulkLoader.getBitmap("background/2.png")); //star bright
assets.push(bulkLoader.getBitmap("background/3.png")); //cloud white
assets.push(bulkLoader.getBitmap("background/4.png")); //cloud red
init();
}
//initializes startup background containers
private final function init():void
{
masterContainer = new Sprite(); //create master container
//generate default background containers
containers.push(genSquareBg()); //top left
containers[0].x = 0;
containers[0].y = 0;
containers.push(genSquareBg()); //top
containers[1].x = stageWidth;
containers[1].y = 0;
containers.push(genSquareBg()); //top right
containers[2].x = stageWidth * 2;
containers[2].y = 0;
containers.push(genSquareBg()); //center left
containers[3].x = 0;
containers[3].y = stageHeight;
containers.push(genSquareBg()); //center
containers[4].x = stageWidth;
containers[4].y = stageHeight;
containers.push(genSquareBg()); //center right
containers[5].x = stageWidth * 2;
containers[5].y = stageHeight;
containers.push(genSquareBg()); //bottom left
containers[6].x = 0;
containers[6].y = stageHeight * 2;
containers.push(genSquareBg()); //bottom
containers[7].x = stageWidth;
containers[7].y = stageHeight * 2;
containers.push(genSquareBg()); //bottom right
containers[8].x = stageWidth * 2;
containers[8].y = stageHeight * 2;
//add the new containers to the master container
for (var i:uint = 0; i <= containers.length - 1; i++)
{
masterContainer.addChild(containers[i]);
}
//display the master container
masterContainer.x = 0 - stageWidth;
masterContainer.y = 0 - stageHeight;
masterContainer.cacheAsBitmap = true;
addChild(masterContainer);
}
//duplicates a bitmap display object
private static function dupeBitmap(source:Bitmap):Bitmap {
var data:BitmapData = source.bitmapData;
var bitmap:Bitmap = new Bitmap(data);
return bitmap;
}
//draws a simple star
private static function drawStar(x:Number, y:Number, width:uint, height:uint):Sprite
{
var creation:Sprite = new Sprite();
creation.graphics.lineStyle(1, 0xFFFFFF);
creation.graphics.beginFill(0xFFFFFF);
creation.graphics.drawRect(x, y, width, height);
return creation;
}
//generates a background square
private static function genSquareBg():Bitmap
{
//set 1% margin
var width:Number = stageWidth * 0.99;
var height:Number = stageHeight * 0.99;
var startX:Number = 0 + stageWidth / 100;
var startY:Number = 0 + stageHeight / 100;
var scale:Number;
var drawAmount:uint;
var tmpBitmap:Bitmap;
var tmpSprite:Sprite;
var i:uint;
//create container
var container:Sprite = new Sprite();
//draw simple stars
drawAmount = UtilLib.getRandomInt(100, 250);
for(i = 1; i <= drawAmount; i++)
{
tmpSprite = drawStar(0, 0, 1, 1);
tmpSprite.x = UtilLib.getRandomInt(0, stageWidth);
tmpSprite.y = UtilLib.getRandomInt(0, stageHeight);
tmpSprite.alpha = UtilLib.getRandomInt(3, 10) / 10;
scale = UtilLib.getRandomInt(2, 10) / 10;
tmpSprite.scaleX = tmpSprite.scaleY = scale;
container.addChild(tmpSprite);
}
//draw bright stars
if (Math.random() >= 0.8) drawAmount = UtilLib.getRandomInt(1, 2);
else drawAmount = 0;
for(i = 1; i <= drawAmount; i++)
{
tmpBitmap = dupeBitmap(assets[1]);
tmpBitmap.alpha = UtilLib.getRandomInt(3, 7) / 10;
tmpBitmap.rotation = UtilLib.getRandomInt(0, 360);
scale = UtilLib.getRandomInt(3, 10) / 10;
tmpBitmap.scaleX = scale; tmpBitmap.scaleY = scale;
tmpBitmap.x = UtilLib.getRandomInt(startX + tmpBitmap.width, width - tmpBitmap.width);
tmpBitmap.y = UtilLib.getRandomInt(startY + tmpBitmap.height, height - tmpBitmap.height);
container.addChild(tmpBitmap);
}
//draw white clouds
drawAmount = UtilLib.getRandomInt(1, 4);
for(i = 1; i <= drawAmount; i++)
{
tmpBitmap = dupeBitmap(assets[2]);
tmpBitmap.alpha = UtilLib.getRandomInt(1, 10) / 10;
scale = UtilLib.getRandomInt(15, 30);
tmpBitmap.scaleX = scale / 10;
tmpBitmap.scaleY = UtilLib.getRandomInt(scale / 2, scale) / 10;
tmpBitmap.x = UtilLib.getRandomInt(startX, width - tmpBitmap.width);
tmpBitmap.y = UtilLib.getRandomInt(startY, height - tmpBitmap.height);
container.addChild(tmpBitmap);
}
//draw red clouds
drawAmount = UtilLib.getRandomInt(0, 1);
for(i = 1; i <= drawAmount; i++)
{
tmpBitmap = dupeBitmap(assets[3]);
tmpBitmap.alpha = UtilLib.getRandomInt(2, 6) / 10;
scale = UtilLib.getRandomInt(5, 30) / 10;
tmpBitmap.scaleX = scale; tmpBitmap.scaleY = scale;
tmpBitmap.x = UtilLib.getRandomInt(startX, width - tmpBitmap.width);
tmpBitmap.y = UtilLib.getRandomInt(startY, height - tmpBitmap.height);
container.addChild(tmpBitmap);
}
//convert all layers to a single bitmap layer and return
var bitmapData:BitmapData = new BitmapData(stageWidth, stageHeight, true, 0x000000);
bitmapData.draw(container);
container = null;
var bitmapContainer:Bitmap = new Bitmap(bitmapData);
bitmapContainer.cacheAsBitmap = true;
return bitmapContainer;
}
}
}
When the player is moving, the background moveX and moveY methods are called with the inverse direction of the player. This will also cause the collectGarbage and drawNextContainer methods to be called.
The problem with this setup is that there are a minimum of 9 containers active at all times. Top left, top, top right, center left, center, center right, bottom left, bottom and bottom right. This takes a lot of performance.
Edit: I also wonder, should I use cacheAsBitmap? If so, on which images? On the containers and the master container or on only one of them? When I enable it for all images (even the temporary sprite objects) it's actually lagging more.
Update 2:
This version is using squares that are twice as big as the stage. Only one or two squares should be loaded at a time. It is better, but I still notice a performance hit while moving. It makes the client freeze for a very brief moment. Any idea how to optimize it?
BackgroundEngine2.as
package com.tommedema.background
{
import br.com.stimuli.loading.BulkLoader;
import com.tommedema.utils.Settings;
import com.tommedema.utils.UtilLib;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Sprite;
import flash.events.Event;
public final class BackgroundEngine2 extends Sprite
{
//general
private static var isLoaded:Boolean = false;
private static var bulkLoader:BulkLoader = BulkLoader.getLoader("main");
private static var assets:Array;
//objects
private static var masterContainer:Sprite;
private static var containers:Array = [];
//stage
private static var stageWidth:uint;
private static var stageHeight:uint;
private static var stageCenterX:Number;
private static var stageCenterY:Number;
//moves the background's X coord
public static function moveX(amount:Number):void
{
if (!masterContainer) return;
masterContainer.x += amount;
collectGarbage();
drawNextContainer();
}
//moves the background's Y coord
public static function moveY(amount:Number):void
{
if (!masterContainer) return;
masterContainer.y += amount;
collectGarbage();
drawNextContainer();
}
//returns whether the background engine has been loaded already
public static function loaded():Boolean
{
return isLoaded;
}
//loads the background engine
public final function load():void
{
//set stage width, height and center
stageWidth = stage.stageWidth;
stageHeight = stage.stageHeight;
stageCenterX = stageWidth / 2;
stageCenterY = stageHeight / 2;
//retreive background assets
bulkLoader.add(Settings.ASSETS_PRE_URL + "background/1.png", {id: "background/1.png"});
bulkLoader.add(Settings.ASSETS_PRE_URL + "background/2.png", {id: "background/2.png"});
bulkLoader.add(Settings.ASSETS_PRE_URL + "background/3.png", {id: "background/3.png"});
bulkLoader.add(Settings.ASSETS_PRE_URL + "background/4.png", {id: "background/4.png"});
bulkLoader.addEventListener(BulkLoader.COMPLETE, assetsComplete);
bulkLoader.start();
//set isLoaded to true
isLoaded = true;
}
//poller function for drawing next background squares
private static function drawNextContainer():void
{
var curContainer:Bitmap = hasBackground(stageCenterX, stageCenterY);
if (curContainer)
{
if (!hasBackground(stageCenterX - stageWidth * 0.75, stageCenterY - stageHeight * 0.75)) //top left
drawNewSquare(curContainer.x - curContainer.width, curContainer.y - curContainer.height);
if (!hasBackground(stageCenterX, stageCenterY - stageHeight * 0.75)) //top
drawNewSquare(curContainer.x, curContainer.y - curContainer.height);
if (!hasBackground(stageCenterX + stageWidth * 0.75, stageCenterY - stageHeight * 0.75)) //top right
drawNewSquare(curContainer.x + curContainer.width, curContainer.y - curContainer.height);
if (!hasBackground(stageCenterX - stageWidth * 0.75, stageCenterY)) //center left
drawNewSquare(curContainer.x - curContainer.width, curContainer.y);
if (!hasBackground(stageCenterX + stageWidth * 0.75, stageCenterY)) //center right
drawNewSquare(curContainer.x + curContainer.width, curContainer.y);
if (!hasBackground(stageCenterX - stageWidth * 0.75, stageCenterY + stageHeight * 0.75)) //bottom left
drawNewSquare(curContainer.x - curContainer.width, curContainer.y + curContainer.height);
if (!hasBackground(stageCenterX, stageCenterY + stageHeight * 0.75)) //bottom center
drawNewSquare(curContainer.x, curContainer.y + curContainer.height);
if (!hasBackground(stageCenterX + stageWidth * 0.75, stageCenterY + stageHeight * 0.75)) //bottom right
drawNewSquare(curContainer.x + curContainer.width, curContainer.y + curContainer.height);
}
}
//draws the next square and adds it to the master container
private static function drawNewSquare(x:Number, y:Number):void
{
containers.push(genSquareBg());
var cIndex:uint = containers.length - 1;
containers[cIndex].x = x;
containers[cIndex].y = y;
masterContainer.addChild(containers[cIndex]);
}
//returns whether the given location has a background and if so returns the corresponding square
private static function hasBackground(x:Number, y:Number):Bitmap
{
var stageX:Number;
var stageY:Number;
for(var i:uint = 0; i < containers.length; i++)
{
stageX = masterContainer.x + containers[i].x;
stageY = masterContainer.y + containers[i].y;
if ((containers[i]) && (stageX < x) && (stageX + containers[i].width > x) && (stageY < y) && (stageY + containers[i].height > y)) return containers[i];
}
return null;
}
//polling function for old background squares garbage collection
private static function collectGarbage():void
{
var stageX:Number;
var stageY:Number;
for(var i:uint = 0; i < containers.length; i++)
{
if ((containers[i]) && (!isRequiredContainer(containers[i])))
{
masterContainer.removeChild(containers[i]);
containers.splice(i, 1);
}
}
}
//returns whether the given container is required for display
private static function isRequiredContainer(container:Bitmap):Boolean
{
if (hasBackground(stageCenterX, stageCenterY) == container) //center
return true;
if (hasBackground(stageCenterX - stageWidth * 0.75, stageCenterY - stageHeight * 0.75) == container) //top left
return true;
if (hasBackground(stageCenterX, stageCenterY - stageHeight * 0.75) == container) //top
return true;
if (hasBackground(stageCenterX + stageWidth * 0.75, stageCenterY - stageHeight * 0.75) == container) //top right
return true;
if (hasBackground(stageCenterX - stageWidth * 0.75, stageCenterY) == container) //center left
return true;
if (hasBackground(stageCenterX + stageWidth * 0.75, stageCenterY) == container) //center right
return true;
if (hasBackground(stageCenterX - stageWidth * 0.75, stageCenterY + stageHeight * 0.75) == container) //bottom left
return true;
if (hasBackground(stageCenterX, stageCenterY + stageHeight * 0.75) == container) //bottom center
return true;
if (hasBackground(stageCenterX + stageWidth * 0.75, stageCenterY + stageHeight * 0.75) == container) //bottom right
return true;
return false;
}
//dispatched when all assets have finished downloading
private final function assetsComplete(event:Event):void
{
assets = [];
assets.push(bulkLoader.getBitmap("background/1.png")); //star simple
assets.push(bulkLoader.getBitmap("background/2.png")); //star bright
assets.push(bulkLoader.getBitmap("background/3.png")); //cloud white
assets.push(bulkLoader.getBitmap("background/4.png")); //cloud red
init();
}
//initializes startup background containers
private final function init():void
{
masterContainer = new Sprite(); //create master container
//generate default background container
containers.push(genSquareBg()); //top left
containers[0].x = 0;
containers[0].y = 0;
masterContainer.addChild(containers[0]);
//display the master container
masterContainer.x = -(stageWidth / 2);
masterContainer.y = -(stageHeight / 2);
masterContainer.cacheAsBitmap = true;
addChild(masterContainer);
}
//duplicates a bitmap display object
private static function dupeBitmap(source:Bitmap):Bitmap {
var data:BitmapData = source.bitmapData;
var bitmap:Bitmap = new Bitmap(data);
return bitmap;
}
//draws a simple star
private static function drawStar(x:Number, y:Number, width:uint, height:uint):Sprite
{
var creation:Sprite = new Sprite();
creation.graphics.lineStyle(1, 0xFFFFFF);
creation.graphics.beginFill(0xFFFFFF);
creation.graphics.drawRect(x, y, width, height);
return creation;
}
//generates a background square
private static function genSquareBg():Bitmap
{
var width:Number = stageWidth * 2;
var height:Number = stageHeight * 2;
var startX:Number = 0;
var startY:Number = 0;
var scale:Number;
var drawAmount:uint;
var tmpBitmap:Bitmap;
var tmpSprite:Sprite;
var i:uint;
//create container
var container:Sprite = new Sprite();
//draw simple stars
drawAmount = UtilLib.getRandomInt(100, 250);
for(i = 1; i <= drawAmount; i++)
{
tmpSprite = drawStar(0, 0, 1, 1);
tmpSprite.x = UtilLib.getRandomInt(startX, width);
tmpSprite.y = UtilLib.getRandomInt(startY, height);
tmpSprite.alpha = UtilLib.getRandomInt(3, 10) / 10;
scale = UtilLib.getRandomInt(5, 15) / 10;
tmpSprite.scaleX = tmpSprite.scaleY = scale;
container.addChild(tmpSprite);
}
//draw bright stars
drawAmount = UtilLib.getRandomInt(1, 2);
for(i = 1; i <= drawAmount; i++)
{
tmpBitmap = dupeBitmap(assets[1]);
tmpBitmap.alpha = UtilLib.getRandomInt(3, 7) / 10;
tmpBitmap.rotation = UtilLib.getRandomInt(0, 360);
scale = UtilLib.getRandomInt(3, 10) / 10;
tmpBitmap.scaleX = scale; tmpBitmap.scaleY = scale;
tmpBitmap.x = UtilLib.getRandomInt(startX + tmpBitmap.width, width - tmpBitmap.width);
tmpBitmap.y = UtilLib.getRandomInt(startY + tmpBitmap.height, height - tmpBitmap.height);
container.addChild(tmpBitmap);
}
//draw white clouds
drawAmount = UtilLib.getRandomInt(2, 4);
for(i = 1; i <= drawAmount; i++)
{
tmpBitmap = dupeBitmap(assets[2]);
tmpBitmap.alpha = UtilLib.getRandomInt(1, 10) / 10;
scale = UtilLib.getRandomInt(15, 40);
tmpBitmap.scaleX = scale / 10;
tmpBitmap.scaleY = UtilLib.getRandomInt(scale / 2, scale * 2) / 10;
tmpBitmap.x = UtilLib.getRandomInt(startX, width - tmpBitmap.width);
tmpBitmap.y = UtilLib.getRandomInt(startY, height - tmpBitmap.height);
container.addChild(tmpBitmap);
}
//draw red clouds
drawAmount = UtilLib.getRandomInt(0, 2);
for(i = 1; i <= drawAmount; i++)
{
tmpBitmap = dupeBitmap(assets[3]);
tmpBitmap.alpha = UtilLib.getRandomInt(2, 6) / 10;
scale = UtilLib.getRandomInt(5, 40) / 10;
tmpBitmap.scaleX = scale; tmpBitmap.scaleY = scale;
tmpBitmap.x = UtilLib.getRandomInt(startX, width - tmpBitmap.width);
tmpBitmap.y = UtilLib.getRandomInt(startY, height - tmpBitmap.height);
container.addChild(tmpBitmap);
}
//convert all layers to a single bitmap layer and return
var bitmapData:BitmapData = new BitmapData(width, height, true, 0x000000);
bitmapData.draw(container);
container = null;
var bitmapContainer:Bitmap = new Bitmap(bitmapData);
//bitmapContainer.cacheAsBitmap = true;
return bitmapContainer;
}
}
}
ok, this should show you can really get another category of numbers with other aproaches ...
the limit here is not the number of stars, the limit is density, i.e. the number of stars visible at the same time ... with text disabled, i can get up to 700 # 30fps, on a Core2Duo, with quite a recent version of the debug player ...
i realized, flash player is not very good at clipping ... and that actually, using the most simple way, you spend a whole lot of time moving around objects, that are far from being visible ...
to really be able to optimize things, i chose to use MVC here ... not in the classic bloated way ... the idea is to handle the model, and if any elements are visible, create views for them ...
now the best aproach is to build up a spatial tree ...
you have leaves, containing objects, and nodes containing leaves or nodes
if you add an object to a leaf and it surpases a certain size, you turn it into a node with nxn leaves, redestributing its children between
any object added to the background will be added to a grid, determined by the object's coordinates ... grids are created just-in-time, an start off as leaves
the big advantage of this is, that you can quickly isolate the visible nodes/leaves.
in each iteration, only the nodes/leaves which either turn visible, or are already visible (and may become invisible), are interesting. you need not do any updates in the rest of the tree. after finding all the visible objects, you create views for objects that turn visible, update the position of those that simply stay visible, and destroy views for objects that become invisible ...
this saves an awful lot of everything ... memory and computation power ...
if you try with a huge world size (100000), you will see, that you run out of RAM quickly, long before CPU does anything ... instantiating 500000 stars uses 700MB ram, with about 50 stars visible, running at 70 fps without any tremendous CPU usage ...
the engine is just a proof of concept ... and code looks awful ... the only feature i am currently proud about is, that it supports object to occupate a certain area, which is why an object can be part of several leafs ... i think, this is something i will remove though, because it should give me a great speed up ... you also see, it stalls a little, while adding stars, which happens, when leafs flip to nodes ...
i am quite sure, this is not the best way for a spatial subdivision tree, it's just that everything i found seemed kind of useless to me ... probably someone who studied (and understood) CS, can refine my approach ... :)
other than that, i used an object pool for the views, and Haxe, since it performs better ... a thing that probably is not so clever, is to move all the views individually, instead of putting them on one layer and moving that around ...
some people also render things into BitmapDatas manually, to gain performance, which seems to work quite well (just can't find the question right now) ... you should however consider using copyPixels instead of draw ...
hope this helps ... ;)
edit: i decided to turn my detailed answer into a blog post ... have fun reading ... ;)
You may want to see if you can blit all of the pieces together into a flattend Bitmaps as you go. Draw all of the layers and then use BitmapData's draw method to combine them into a single Bitmap.
Even with cacheAsBitmap on for all of the pieces Flash is still having to combine all of those pieces every frame.
Try stretching the window of the player, both bigger and smaller. If that has a significant effect on frame rate, your fastest and easiest way to improve performance is to shrink the size of the stage. This tends to be an unpopular answer when presented to people - especially artists - but if your bottleneck is in the size of your stage, there is not much you can do in code to fix that.
What if instead of destroying background squares you just put them in a pile of "ready to go" squares that you can draw on, capping it at like 4? then you don't have to create one when you need one you just move it into the right spot and maybe shuffle the stars or something.
[would add example but i don't write AS3 code :(]
You should be able to simplify some of your math by using stored variables instead of stageCenterX + stageWidth * 0.75, and similar since they don't change.
Have you considered using
HitTestPoint instead of doing the math to check positions of containers? It's a native function, so it might be faster.
You should use a Shape instead of a Sprite if you don't need to add children to the object. e.g., your star. This might help quite a bit.
What if you created a set of star backgrounds at the start of the program. Then converted them to bitmaps, and saved them for later reuse. e.g., create a star background, convert it to bitmap data, and save this in an array. Do this, say, 10 times, and then when you need a background to just randomly select one, and apply your other shapes to it. The benefit of doing this is that you don't have to render 100-250 Sprites or Shapes each time you create a new background--that takes time.
EDIT: New idea:
Maybe you can play with the idea of only drawing the stars on the backgrounds rather than adding individual objects. The number of objects added to the screen are a big part of the problem. So I'm suggesting you draw the stars on the container directly, but with different sizes and alphas. Then scale the container down so that you get the effect you're looking for. You could reduce the display footprint from 500-1000 stars down to 0. That would be a huge improvement if you can get the effect you need from it.
Try using a single large BitmapData with it's own Bitmap, larger than the stage (although you might hit the limits of BitmapDatas if you have a really big stage and/or are using flash 9), and drawing new background images to it using the copyPixels method (a really fast way of copying pixels, faster than draw(), at least as far as I've seen).
Pan the large Bitmap around when you want and when you reach an edge, pan the bitmap to the other side, copyPixels the whole thing back to where it was previously (so the image should stay in the same place relative to the stage, but the Bitmap should move) and copyPixels new images where they are missing.
Since you are using alpha for the images as well, so you might want to check all the parameters of copyPixels if it doesn't copy alpha as you wanted it to (probably mergeAlpha?).
So, to recap, use a single large Bitmap that extends well over the boundaries of the stage, have the images ready as BitmapDatas, do the wrap trick and fill in the blanks with copyPixels from images.
I don't know if this way would perform better (the copyPixels over the whole bitmap worries me a little), but it's definitely something to try. Good luck :)