Can I draw the same DisplayObject multiple times? - actionscript-3

I have a loop that runs and adds a TextField from an array to a Sprite, and draws that Sprite to a BitmapData object. When I reference a previously drawn TextField, nothing is drawn to the BitmapData.
public class Pocket extends Sprite
{
public var inventory:Array = [textField1, textField2, textField3]; //array of TextFields, populated by another class
public var order:Array = [0,1,2,1]; //array of ints indicating the order of which items in "inventory" should be displayed (the error lies when an element is repeated - in this case, 1
public function getItem(index:int):Array
{
var bitmaps:Array = new Array();
for(var i:int = 0; i < order.length; i++)
{
var bitmapData:BitmapData = new BitmapData(32, 32);
var background:Sprite = new Sprite();
background.graphics.beginFill();
background.graphics.drawRect(0,0,32,32);
background.graphics.endFill();
bitmapData.draw(background); //this always executes as expected
var sprite:Sprite = new Sprite();
sprite.addChild(inventory[order[i]]);
bitmapData.draw(sprite);
var bitmap:Bitmap = new Bitmap(bitmapData);
bitmaps.push(bitmap);
sprite.removeChild(inventory[order[i]]);
}
return bitmaps;
}
}
When the last element in order is called (1), the resulting Bitmap does not contain a textfield.
When the loop runs the first time, adding the TextField inventory[0] to a Sprite, the Sprite is drawn as expected. The second box is drawn, using inventory[1]. However, when I run the same code trying to draw inventory[1] a second time, nothing happens. The same would happen if I try to draw inventory[0], but if I use a TextField that has yet to be added to a Sprite (ex. inventory[2], should one exist), it draws as expected.
Any ideas?
Thanks in advance.

Related

Flash AS3: Typewriter effect with copyPixels

I'm making a Flash AS3 based game, and I'm building a custom font system. It works like this: a BitmapData class takes a PNG file from the library (FontSource), loops between every character in a given string and then gets its x, y, width and height inside the image from a function (getOffset), and then it uses copyPixels to draw the custom-font text.
Here's the code:
public function draw(str) {
var png = new FontSource(480, 32);
var offsets;
var char;
var rect;
var x;
var y;
this.lock();
for (var i = 0; i < str.length; i++) {
char = str.substr(i, 1);
offsets = getOffsets(char);
rect = new Rectangle(offsets[0], offsets[1], offsets[2], offsets[3]);
this.copyPixels(png, rect, new Point(x, y));
x += offsets[2];
}
this.unlock();
}
Now, the question here is: I'm building a typewriter effect class based on the ENTER_FRAME event; each new frame, a new character is added to a string. So, I wanted to ask which one of these approaches would do better related in a matter of performance:
1) Call draw() to redraw the whole BitmapData each frame.
2) Making an alpha mask and expand its width each frame.
3) Making separate Objects and adding them to stage each frame.
Thank you for your time.
As an alternative, you don't need to redraw the entire string. You can just draw more characters at its end. I'd implement this as follows: You give your bitmapped textfield a string it should draw per frame, once. It clears, then at each enter frame event it just adds 1 to the length of the string drawn, and draws only one single character. Just save more data in your class for this. For example:
public class BTF extends Sprite {
private var str:String;
private var source:FontSource; // set once!
private var bd:BitmapData; // the one that'll get drawn
private var lastIndex:int;
private var lastX:int; // coords to draw next symbol to
// assuming Y is always 0 - adjust per font
public function BTF(source:FontSource,width:int,height:int) {
this.source=source;
bd=new BitmapData(width,height,0x00808080,true); // check if I didn't mix up parameters
addChild(new Bitmap(bd)); // make it be drawn on your BTF
}
... // rest of class skipped
public function onEnterFrame(e:Event):void {
if (lastIndex>=str.length) return; // drawn all text already
var c:char=str.charAt(lastIndex++); // get next char to draw
var r:Rectangle=source.getOffsets(c); // you need to specify source for that - it's font that gives you bounds
bd.copyPixels(source.fontBitmapData,r,new Point(lastX,0)); // draw that char
lastX+=r.width; // move "cursor"
}

Array targeting trouble in AS3

Brand new to programming so I apologize in advance.
I'm trying to set up a game where after each time a button is pressed, a new instance of a MC is added to stage, then I need a collision detection for an existing object with any of the new instances of the MC. I need to add one instance to the stage at a time and once it reaches 8 instances, I need it to stop adding children but still be able to detect collisions with any of the instances. As it stands now it just replaces the MC or MCs into the new random position. Heres what my code looks like so far:
var pinkBox:pinkClass = new pinkClass();
var pinkArray:Array = new Array();
myButton.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownleftBtn);{
function mouseDownleftBtn(e: Event): void {
for(var i=0; i<8; i++)
{
addChild(pinkBox);
pinkArray.push(pinkBox);
pinkBox.x = Math.random()*stage.width;
}
myButton.startDrag();
}
}
addEventListener(Event.ENTER_FRAME, checkCollision);
function checkCollision(event:Event){
if (myButton.hitTestObject(pinkBox)) {
trace("hit")
}}

Loading images does not load them into memory

I am loading a batch of 150 HD images into my app - it is basically a 3D view of an object. Once I load the image files using Loader instances I store the loaders' first child's bitmapdata in a Vector. When all of the loaded, I want to begin to "rotate" the object = meaning I am simply swapping the images. I take the Vector where I have the bitmapdatas and draw them onto a canvas bitmapdata one after the other. No science there, it all works as intended.
The problem is that once all the images are loaded and stored in a vector and BEFORE they are drawn to the canvas, they are not in the memory. That means that the first rotation of my 3D object (-> all 150 images drawn) is really slow. After the first rotation there is no problem and all is fluid. My question is: is there a way to force the images to get loaded into the memory without drawing them onto the stage? I expected that they would simply get loaded to memory once they are loaded to the app (Wrong!).
I tried to use addChild() instead of drawing them to a canvas bitmap, same result. I don't think the code is necessary but just in case:
private var _loaders:Vector.<Loader>;
private static const NAME:String = "img_00";
private static const MIN:uint = 0;
private static const MAX:uint = 150;
private var _loaded:uint = 0;
private var _currentFrameIndex:uint = 0;
private var _canvas:Bitmap;
private var _bitmaps:Vector.<BitmapData>;
private var _destPoint:Point;
public function loadImages():void {
var s:String;
for(var i:int=MIN; i<=MAX; i++) {
if(i < 10) s = "00" + i;
else if(i < 100) s = "0" + i;
else s = i.toString();
var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadHandler);
loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, loadHandler);
loader.contentLoaderInfo.addEventListener(SecurityErrorEvent.SECURITY_ERROR, loadHandler);
loader.load(new URLRequest("images/JPEG/"+ NAME + s + ".jpg"));
_loaders.push(loader);
}
}
private function loadHandler(e:Event):void {
_loaded++;
if(_loaded > (MAX - MIN)) {
_bitmaps = new Vector.<BitmapData>(_loaders.length);
for(var i:int=0; i<_loaders.length; i++) {
var loader:Loader = _loaders[i];
_bitmaps[i] = Bitmap(loader.getChildAt(0)).bitmapData;
loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, loadHandler);
loader.contentLoaderInfo.removeEventListener(IOErrorEvent.IO_ERROR, loadHandler);
loader.contentLoaderInfo.removeEventListener(SecurityErrorEvent.SECURITY_ERROR, loadHandler);
}
setFrame(0);
dispatchEvent(new Event(LOAD_COMPLETE));
}
}
public function setFrame(frame:uint):void {
if(frame >= 0 && frame < _bitmaps.length) {
_currentFrameIndex = frame;
var bmpData:BitmapData = _bitmaps[_currentFrameIndex];
_canvas.bitmapData.copyPixels(bmpData, bmpData.rect, _destPoint);
}
}
"Not in the memory" means that the images are loaded, but not yet decoded, and this decode is done on the fly, and this takes the time you observe as slowness. You can attempt to "virtually" rotate the image by having a bitmap that's not yet added to stage to be the reference to each of the bitmapDatas of your vector. Make a progress bar that shows how much of the vector has already been decoded, and once this happens, display the bitmap and give the user smooth rotation.
addEventListener(Event.ENTER_FRAME,prerender);
var b:Bitmap=new Bitmap();
/* optional
b.x=stage.stageWidth;
b.y=stage.stageHeight;
addChild(b);
*/
var vi:int=0;
var sh:Shape=new Shape();
sh.graphics.lineStyle(4,0,1); // a simple progress bar
sh.graphics.moveTo(0,0);
sh.graphics.lineTo(100,0);
sh.scaleX=0;
sh.x=stage.stageWidth/2-50; // centered by X
sh.y=stage.stageHeight/2;
addChild(sh);
function prerender(e:Event):void {
if (vi==_bitmaps.length) {
// finished prerender
removeEventListener(Event.ENTER_FRAME, prerender);
removeChild(sh);
// removeChild(b); if optional enabled
setFrame(0);
return;
}
b.bitmapData=_bitmaps[vi];
vi++;
}
Also, it's always better to assign the bitmapData property to a Bitmap object if you don't plan to have that bitmapdata changed. So, instead of your _canvas.bitmapData.copyPixels(bmpData, bmpData.rect, _destPoint); you just do _canvas.bitmapData = bmpData; and it'll work.
UPDATE: Your issue might as well nail to the last point, that is assigning instead of copying. If your destPoint is something else than (0,0), you just make another Bitmap object on top of your _canvas with desired offset, and assign bitmapdatas in there. I have remembered that when I first made multiple animated objects based on a single Vector.<BitmapData> like yours, and tried doing copyPixels(), my animations were jittering and not displaying proper frames, but once I did _bitmap.bitmapData=_bitmaps[currentFrame] everything went as smooth as it should be.

trouble resetting a flash game

I'm trying to build a simple flash game in which I need to be able to restart the game if the user dies. However resetting all of the variables doesn't seem to be accomplishing anything. All of my game elements are stored in arrays and I thought that maybe setting each of them to the array constructor wasn't deleting the objects that they were pointing to and that they were left on the screen as a result. Does anyone know of a way to delete those elements (since I can't iterate over the list to delete them for obvious reasons) or does anyone know of a better way to reset a game in flash? For reference, here's the init function and the variable declarations at the top of my program that are supposed to start/reset the game.
public class Main extends MovieClip {
//put field variables here
static var hudLayer:Sprite; //layer used to represent HUD elements
static var gameLayer:Sprite; //layer used to represent objects in the game space
static var uiTextLayer:Sprite; //layer used to represent text that should appear ON TOP of the HUD
static var backgroundLayer:Sprite; //layer used to display the background image
static var players: Array; //array of all the player objects for reference
static var backgrounds:Array; //array of all the background objects
static var lines: Array; //array of all the lines
static var powerUps:Array; //array of all the powerups
static var enemies:Array; //array of all the enemies
static var miscellaneousObjects:Array; //array of miscellaneous objects that I'd like to be able to keep track of
var xCoords:Array, yCoords:Array; //Used to temporarily hold x and y coordinates when making new drawings
static var grav:Number; //coefficient representing the force of gravity
static var isPaused:Boolean; //manages pausing mechanic
static var timer:Timer; //used for time delayed updating of game elements
var pt:Point; //variable used by collision detection
var asteroidTiming:Number; //used to properly delay creating of asteroids on the screen
static var asteroidDelay:Number; //current delay between when asteroids are deployed, changes over course of execution
static var score:Number; //this should be self-explanatory
var scoreField:TextField; //used to display the score
static var myTextFormat:TextFormat; //used to format the text in the scoreField
static var inGameOver:Boolean; //used to determine if we're at the game over screen
[Frame(factoryClass="Preloader")]
public function Main():void
{
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
public function init(e:Event = null):void {
removeEventListener(Event.ADDED_TO_STAGE, init);
//set up the Sprite Layers
backgroundLayer = new Sprite();
gameLayer = new Sprite();
hudLayer = new Sprite();
uiTextLayer = new Sprite();
addChild(backgroundLayer);
addChild(gameLayer);
addChild(hudLayer);
addChild(uiTextLayer);
//instantiate important variables
xCoords = new Array();
yCoords = new Array();
players = new Array();
backgrounds = new Array();
enemies = new Array();
powerUps = new Array();
miscellaneousObjects = new Array();
grav = .04;
addBackGround();
addPlayer(400, 50);
isPaused = false;
lines = new Array();
score = 0;
inGameOver = false;
//instantiate text fields
scoreField = new TextField();
scoreField.text = "Score: " + score;
hudLayer.addChild(scoreField);
scoreField.x = 20;
scoreField.y = 20;
scoreField.textColor = 0xFFFFFF;
myTextFormat = new TextFormat();
myTextFormat.size = 15;
scoreField.setTextFormat(myTextFormat);
//set up timer
timer = new Timer(5);
timer.addEventListener(TimerEvent.TIMER, function():void { update()});
timer.start()
asteroidTiming = 0;
asteroidDelay = 150;
//set up mouse listener
stage.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownEvent);
//set up key listener
stage.addEventListener(KeyboardEvent.KEY_DOWN, keyEvent);
//tests
}
Since I can't see all your code, I will guess that you are not using removechild() to get rid of display objects off the stage.
To create a object:
var object:DisplayObject = new DisplayObject();
To make it visible on the display list:
parent.addChild(object);
To remove it from the display list:
parent.removeChild(object);
To erase its memory:
object=null;
(These four things must be done in this order, for this to work properly. IF you make something null without removing it from the display list, you leave it there, still visible, with no way of referencing it. It like lost in your application.
You have to make sure you always use removeChild() before making a variable null, or overwriting the variable.

AS3 - Dynamically re-populate a series of textFields held within a group of MovieClips

I’ve come across a problematic issue with some functionality I’m attempting to develop in ActionScript3 on the Flash Professional CS5 platform and was wondering if anybody could point me in the right direction with it?
Background
Within my ActionScript Class, I have written a MouseEvent function which dynamically adds multiple instances of the same MovieClip (user_shape) on to the stage in the formation of a shape that the user has designed in an earlier stage of the program.
This shape effect is achieved through a For Loop that loops through the entire length of a Multi-Dimensional Boolean based array looking for an instance of true (determined by the user’s actions earlier) and then adding a MovieClip to the stage if this is the case.
Each group of MovieClips added with a single click, while always having the same instance name (user_shape), is always assigned a unique ID, which I've set up by including a numerical variable that increments up by 1 each time I add the batch of 'user_shape' MovieClips through left click to the stage.
The user can pick from up to eight different colours to assign to their shape (via selection boxes) before adding it to the stage. For each of these eight colours I have added a numerical variable (shapeCounterBlue, shapeCounterRed etc.) which basically counts ++ every time I add a shape of a certain colour to the stage and likewise it counts -- if I chose to remove a shape.
As a shape is added through my main function I attach a dynamic textField to each MovieClip and populate it with the variable counter number for the particular colour I have selected (see image below).
Problem
OK, so here is my issue. I need my unique number (displayed in white) for each coloured shape to dynamically re-populate and update when I remove a shape from the stage. As you can see in the image I’ve attached, if I were to remove the second blue shape, my third blue shape’s numbers would need to revert from 3 to 2.
Likewise if I had six red shapes on the stage and I decided to remove the third one, then shapes 4,5,6 (before 3 is deleted), would need to have their numbers changed to 3,4,5 respectively.
Or I could have four green shapes and remove the first shape; this would mean that shapes 2,3,4 would actually need to change to be 1,2,3.
You get the idea. But does anybody know how I could achieve this?
My problem has further been hampered by the fact that the textFields for each MovieClip are added dynamically through my For Loop to the user_shape Child. This means that within my AS class, I haven’t been able to publicly declare these textFields and access the values within them, as they only exist in the For Loop used in my add shape function and no where else.
Many thanks in advance.
as to the targeting dynamically created text fields. In your loop assign a name that you can later access.
for(i:int=0;i<myArray.length;i++){
var txt:TextField = new TextField();
txt.name = "txt_" + i;
this.addChild(txt);
}
Then to access your textfields outside the loop target them like this:
var targetTxt:TextField = this.getChildByName("txt_10");
UPDATE
Ok so I had some time and went ahead and solved your entire problem
(Download Source FLA/AS files)
Ok so there are some MCs in the library that I call in my code. I created a Box MC that has a label textfield, a border, and a background MC that I can target to color.
I created a countColors() that loops over all the boxes once you have click on one (triggered from a mouseEvent within each box). It counts the different colors totals in an array and then sends a custom event to let all the boxes know they can fetch the color totals to update their labels.
I hope this helps.
main.as
package {
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.events.Event;
public class main extends MovieClip {
public static var ROOT:MovieClip;
public var totalBoxes:int = 100;
public var boxContainer:Sprite;
public static var colorArray:Array = [0xFF0000, 0x0000FF, 0x00FF00];
public static var colorCount:Array = [0,0,0];
public static var currentColor = 0;
public function main() {
// set ref to this
ROOT = this; // so I can get back to it from the boxes
// color selection
redBtn.addEventListener(MouseEvent.CLICK, chooseColor);
blueBtn.addEventListener(MouseEvent.CLICK, chooseColor);
greenBtn.addEventListener(MouseEvent.CLICK, chooseColor);
// add box container to stage
boxContainer = new Sprite();
boxContainer.x = boxContainer.y = 10;
this.addChild(boxContainer);
var row:int=0;
var col:int=0;
for(var i:int=0; i < totalBoxes; i++){
var box:Box = new Box();
box.x = col * box.width;
box.y = row * box.height;
box.name = "box_" + i;
box.ID = i;
box.updateDisplay();
boxContainer.addChild(box);
if(col < 9){
col++;
}else{
col = 0;
row++;
}
}
}
private function chooseColor(e:MouseEvent):void
{
var btn:MovieClip = e.currentTarget as MovieClip;
switch(btn.name)
{
case "redBtn":
currentColor=0;
break;
case "blueBtn":
currentColor=1;
break;
case "greenBtn":
currentColor=2;
break;
}
// move currentColorArrow
currentColorArrow.x = btn.x;
}
public function countColors():void
{
colorCount = [0,0,0]; // reset array
for(var i:int=0; i < totalBoxes; i++){
var box:Box = boxContainer.getChildByName("box_" + i) as Box;
if(box.colorID > -1)
{
colorCount[ box.colorID ]++;
}
}
// send custom event that boxes are listening for
this.dispatchEvent(new Event("ColorCountUpdated"));
}
}
}
Box.as
package {
import flash.display.MovieClip;
import flash.geom.ColorTransform;
import flash.events.MouseEvent;
import flash.events.Event;
public class Box extends MovieClip {
public var ID:int;
public var colorID:int = -1;
private var active:Boolean = false;
private var bgColor:Number = 0xEFEFEF;
public function Box() {
this.addEventListener(MouseEvent.CLICK, selectBox);
main.ROOT.addEventListener("ColorCountUpdated", updateCount); // listen to root for custom event to update display
}
public function updateDisplay() {
if(active == false){
boxLabel.htmlText = "<font color='#000000'>"+ ID +"</font>";
}else{
boxLabel.htmlText = "<font color='#FFFFFF'>"+ main.colorCount[colorID] +"</font>";
}
var myColorTransform = new ColorTransform();
myColorTransform.color = bgColor;
boxBG.transform.colorTransform = myColorTransform;
}
private function selectBox(e:MouseEvent):void
{
// set bgColor
if(active == false){
bgColor = main.colorArray[main.currentColor];
colorID = main.currentColor;
}else{
bgColor = 0xEFEFEF;
colorID = -1;
}
// set active state
active = !active // toggle true/false
main.ROOT.countColors();
}
private function updateCount(e:Event):void
{
updateDisplay();
}
}
}