Add sprites, remove, tween and repeat help.

[Artofacks1]

I am making a game that adds rocks to the stage. I cal the rocks(); function once so it gets one rock going, that i call the rockTimer(); which calls the rocks() function using the timer. However, when the rockTimer calls the rocks() to add another rock. It doesnt let the tween finish.

 

What I want is the ability to add rocks at about 3 to 5 seconds apart. While keeping the same tween speed. So its like rocks flying across the screen that have multiple start times.

Once the rock gets to the end it will remove itself.

 

I tried multiple methods but cant seem to get it to work. Please help

 

import com.greensock.*;
import com.greensock.easing.*;


import com.DetectCollision;

var _hero:hero = new hero  ;
var _rock:rock=new rock ;
var rockArr:Array = new Array();


function rocks(...rest):void
{
addChild(_hero);
addChild(_rock);

_rock.x = stage.stageWidth;
//_rock.y = stage.stageHeight/2;
//addChild(_rock);

TweenLite.to(_rock, 7, {x:-10, ease:Linear.easeNone, onComplete:rocks,onUpdate:detectCollision, autoRemoveChildren:true});

}

//var DetectCollision_C:DetectCollision = new DetectCollision(this, heroClip, rockClip);

function detectCollision():void
{
//rocks();
var DetectCollision_C:DetectCollision = new DetectCollision(stage,_hero,_rock);
}

function rockTimer():void
{
trace("rockTimer");

var myTimer:Timer = new Timer(2000,1000);
myTimer.addEventListener("timer", rocks);
myTimer.start();
}

rocks();
rockTimer();

[Carl]

this is not a complete or tested solution but hopefully enough to get you going in the right direction.

 

the problem is that at the top of your file you have:

 

var _rock:rock=new rock ;

 

probably should be

 

var _rock:rock=new rock() ; //add parenthesis

// this is a reference to only ONE rock though.

 

You need to create multiple rocks. in your rocks() function when you do addChild(_rock) it is the same _rock you started with.

 

I think you need something like this in your rocks() function:

 

 

function rocks(...rest):void
{

//you need a new rock so create one
var _rock:rock = new rock() //note class names should be capitalized
// you can put the rock in your array to reference it or loop through all rocks later
rockArray.push(_rock);

  addChild(_hero);
  addChild(_rock);

  _rock.x = stage.stageWidth;


  TweenLite.to(_rock, 7, {x:-10, ease:Linear.easeNone, onComplete:rocks,onUpdate:detectCollision, autoRemoveChildren:true});

}

[Artofacks1]

I got what i needed. I can add rocks to my game and check for hit detection. It runs fine for a bit than starts lagging. Plus I feel like a lot of duplicate code is used. Can the tweenlite gururs look at my code and suggest how i can use less duplicate code?

 

import com.greensock.*;
import com.greensock.easing.*;
import flash.display.Sprite;
import com.DetectCollision;

var _rock:rock;
var _rock2:rock2;
var _rock3:rock3;

var rockArray:Array = new Array();

var _hero:hero = new hero();
addChild(_hero);

addRocks(1);
addRocks(2);
addRocks(3);

function addRocks(num:*):void
{
trace("               : " + num);
if (num == 1)
{
	if (_rock)
	{
		removeChild(_rock);
		_rock = null;
	}

	_rock = new rock();
	addChild(_rock);
	var randomYPosiion:Number = Math.round(Math.random() * stage.stageHeight - 50);
	_rock.x = stage.stageWidth;
	_rock.y = randomYPosiion;

	tweenRocks(_rock);
}

trace("               : " + num);
if (num == 2)
{
	if (_rock2)
	{
		removeChild(_rock2);
		_rock2 = null;
	}

	_rock2 = new rock2();
	addChild(_rock2);

	_rock2.x = stage.stageWidth;
	var randomYPosiion2:Number = Math.round(Math.random() * stage.stageHeight - 50);
	_rock2.y = randomYPosiion2;

	tweenRocks(_rock2);
}

if (num == 3)
{
	if (_rock3)
	{
		removeChild(_rock3);
		_rock3 = null;
	}

	_rock3 = new rock3();
	addChild(_rock3);

	_rock3.x = stage.stageWidth;
	var randomYPosiion3:Number = Math.round(Math.random() * stage.stageHeight - 50);
	_rock3.y = randomYPosiion3;

	tweenRocks(_rock3);
}


}


function tweenRocks(ob1:Sprite):void
{

var timeline:TimelineLite = new TimelineLite();

if (ob1 == _rock)
{
	timeline.insert(new TweenLite (ob1, 5, {x:"-500", onUpdate:hitTest1, onComplete:addRocks, onCompleteParams:[1], autoRemoveChildren:true}));
}
if (ob1 == _rock2)
{
	timeline.insert(new TweenLite (ob1, 5, {delay:3, x:"-500", onUpdate:hitTest2, onComplete:addRocks, onCompleteParams:[2], autoRemoveChildren:true}));
}
if (ob1 == _rock3)
{
	timeline.insert(new TweenLite (ob1, 5, {delay:2, x:"-500", onUpdate:hitTest3, onComplete:addRocks, onCompleteParams:[3], autoRemoveChildren:true}));
}
}

function hitTest1():void
{
_rock.rotation++;

if (DetectCollision_C)
{
	trace("_rock Detect");
	DetectCollision_C = null;
}
var DetectCollision_C:DetectCollision = new DetectCollision(stage,_hero,_rock);
}

function hitTest2():void
{
_rock2.rotation++;

if (DetectCollision_C)
{
	DetectCollision_C = null;
}
var DetectCollision_C:DetectCollision = new DetectCollision(stage,_hero,_rock2);
}

function hitTest3():void
{
_rock3.rotation++;

if (DetectCollision_C)
{
	DetectCollision_C = null;
}
var DetectCollision_C:DetectCollision = new DetectCollision(stage,_hero,_rock3);
}

[GreenSock]

Yeah, please don't take offense at this, but the code needs to be completely rewritten. The good news is that it could probably be 1/3rd as much code as it is now. But before anyone spends time offering advice on a rewrite, please answer the following questions:

 

1) Do you always want there to be only 3 rocks on the screen at any given time? It looks like that's the case and that once one of the tweens completes, it should reposition the object at a random y position and tween itself again. Is that correct?

 

2) What is DetectCollision? What exactly does it do?

 

3) Why are you doing rotation++ on each update instead of just tweening the rotation directly in the tween?

 

4) What are you trying to accomplish by adding autoRemoveChildren:true to your tweens? That actually accomplishes nothing (that's not a recognized special property of a tween, but it is for a TimelineLite/Max).

 

5) Can you please post a sample FLA file that demonstrates the issue? Include any support files too please. This will make troubleshooting MUCH faster, easier, and more accurate. Zip your file(s) first before you post here.

[Artofacks1]

Yeah, please don't take offense at this, but the code needs to be completely rewritten. The good news is that it could probably be 1/3rd as much code as it is now. But before anyone spends time offering advice on a rewrite, please answer the following questions:

None taken, I am happy to learn the correct way.

 

1) Do you always want there to be only 3 rocks on the screen at any given time? It looks like that's the case and that once one of the tweens completes, it should reposition the object at a random y position and tween itself again. Is that correct?

Yes 3 is correct for this level, as the game gets harder I would like to ad more.

 

2) What is DetectCollision? What exactly does it do?

It detects it the rock collided with the hero.

 

3) Why are you doing rotation++ on each update instead of just tweening the rotation directly in the tween?

Just a dumby, I will add it to the tween.

 

4) What are you trying to accomplish by adding autoRemoveChildren:true to your tweens? That actually accomplishes nothing (that's not a recognized special property of a tween, but it is for a TimelineLite/Max).

I thought that would remove the Sprite/MovieCLip once the tween was complete.

 

5) Can you please post a sample FLA file that demonstrates the issue? Include any support files too please. This will make troubleshooting MUCH faster, easier, and more accurate. Zip your file(s) first before you post here.

 

Yes it is attached! Thanks so much for your assistance.

[GreenSock]

Here is the simplified code that also gives you a lot more flexibility:

 

import com.greensock.*;
import com.greensock.easing.*;
import flash.display.Sprite;
import com.DetectCollision;
import flash.utils.Dictionary;
import flash.display.DisplayObject;

var _hero:hero = new hero();
addChild(_hero);

var _rockClasses:Array = [rock, rock2, rock3]; //rocks to choose from
var _rockCollisionLookup = new Dictionary();
var _rocks:Array = createRocks(3); //choose any number here - this is how many rocks will be shown/created/animated.

function createRocks(numRocks:int):Array {
var rocks:Array = [];
for (var i:int = 0; i 		var rock:Sprite = new _rockClasses[int(Math.random() * _rockClasses.length)]();
	addChild(rock);
	_rockCollisionLookup[rock] = new DetectCollision(stage, _hero, rock);
	rocks.push( rock );
	tweenRock(rock);
}
return rocks;
}

function tweenRock(rock:DisplayObject):void {
rock.y = Math.random() * stage.stageHeight - 50;
rock.x = stage.stageWidth + 50;
TweenLite.to(rock, 5, {x:-100, delay:Math.random() * 3, ease:Linear.easeNone, onUpdate:_rockCollisionLookup[rock].detectCollision_funct, onComplete:tweenRock, onCompleteParams:[rock]});
}

 

Hope that helps.

[Artofacks1]

Hi,

 

Thanks for the help!!! The code is very clean and much more flexible.

 

I have another question. I am seeing some lag with the tweens. They do not look smooth and look very jumpy. Is their anything I can do to smooth out the tweens so they are clean and fluid?

 

I attached another sample with the new code.

 

Thanks Again!

[GreenSock]

Your DetectCollision class is probably costing you a lot in terms of performance. It's not very optimized and doing all those draw() calls eats up memory and CPU cycles fast. Unfortunately I don't have time to go through and optimize all the code for you, but I'd encourage you to jump over to Google and research optimization techniques for AS3 and BitmapData stuff. I've got some speed tips at http://www.greensock.com/tweening-tips/ but I highly doubt that the tweening code is slowing you down much at all. Graphics rendering and the collision detection are almost surely many, many times more CPU-intensive than tweening code execution. The ratio is literally probably 100:1 or more.

 

Try removing your trace() call(s) and increasing your frame rate a bit to see if that helps at all too. Oh, and keep in mind that if you apply any filters to objects, it forces their cacheAsBitmap to true which will only allow them to be rendered on whole pixel values which can lead to things looking slightly choppy. None of this has anything to do with the tweening platform, though, just to be clear.

[Artofacks1]

I tested this..

 

As you can see it is not calling the collision class and the tweens are still choppy. I added a zip so you can run and see that the tweens are still choppy. Thanks so much for your help.

 

P.S. I am searching and reading as much as possible to see if I can fix the problem myself, but your expertise with the tween library is appreciated.

 

import com.greensock.*;

import com.greensock.easing.*;

import flash.display.Sprite;

import flash.display.DisplayObject;

 

 

var _hero:hero = new hero();

addChild(_hero);

 

var _rockClasses:Array = [rock,rock2,rock3];//rocks to choose from

var _rocks:Array = createRocks(3);//choose any number here - this is how many rocks will be shown/created/animated.

 

 

 

function createRocks(numRocks:int):Array

{

var rocks:Array = [];

 

 

for (var i:int = 0; i < numRocks; i++)

{

var rock:Sprite = new _rockClasses[int(Math.random() * _rockClasses.length)]();

 

addChild(rock);

 

rocks.push( rock );

tweenRock(rock);

}

return rocks;

}

 

function tweenRock(rock:DisplayObject):void

{

rock.y = Math.random() * stage.stageHeight - 50;

rock.x = stage.stageWidth + 50;

TweenLite.to(rock, 5, {x:-100, delay:Math.random() * 3, ease:Linear.easeNone, onComplete:tweenRock, onCompleteParams:[rock]});

}

[Artofacks1]

check this out, i added rotation to the tween and when it goes the first time it rotates, but when it puts the next set of three it doesn't. Thats another issue, but I'm wondering how many instances of the tween are being used and maybe that is why its slowing it down a bit?

 

import com.greensock.*;

import com.greensock.easing.*;

import flash.display.Sprite;

import com.DetectCollision;

import flash.utils.Dictionary;

import flash.display.DisplayObject;

import flash.geom.Matrix;

 

 

var _hero:hero = new hero();

addChild(_hero);

 

var _rockClasses:Array = [rock,rock2,rock3];//rocks to choose from

var _rockCollisionLookup = new Dictionary();

var _rocks:Array = createRocks(3);//choose any number here - this is how many rocks will be shown/created/animated.

 

 

 

function createRocks(numRocks:int):Array

{

var rocks:Array = [];

/*rocks.cacheAsBitmap = true;

rocks.cacheAsBitmapMatrix = new Matrix();

rocks.smoothing = true;*/

 

for (var i:int = 0; i < numRocks; i++)

{

var rock:Sprite = new _rockClasses[int(Math.random() * _rockClasses.length)]();

 

addChild(rock);

 

_rockCollisionLookup[rock] = new DetectCollision(stage,_hero,rock);

rocks.push( rock );

tweenRock(rock);

}

return rocks;

}

function tweenRock(rock:DisplayObject):void

{

rock.y = Math.random() * stage.stageHeight - 50;

rock.x = stage.stageWidth + 50;

TweenLite.to(rock, 5, {x:-100, rotation:180, delay:Math.random() * 3, ease:Linear.easeNone, onUpdate:_rockCollisionLookup[rock].detectCollision_funct, onComplete:tweenRock, onCompleteParams:[rock]});

}

[GreenSock]

As you can see it is not calling the collision class and the tweens are still choppy. I added a zip so you can run and see that the tweens are still choppy. Thanks so much for your help.

It didn't look choppy to me. When I upped the frame rate to 60fps, it looked silky smooth (although I am on a super fast computer). I'm not quite sure what to tell you here.

 

i added rotation to the tween and when it goes the first time it rotates, but when it puts the next set of three it doesn't. Thats another issue, but I'm wondering how many instances of the tween are being used and maybe that is why its slowing it down a bit?

That's because you're using an absolute value. So everything starts at a rotation of 0. Then the first tween rotates it to 180. Your next tween rotates it to 180 again - since it's already at 180, it doesn't rotate anymore. If you want it to treat it as a relative value, always adding 180 to whatever the current value is, just put the value in quotes or cast it as a String. Like rotation:"180" instead of rotation:180.

[Artofacks1]

Thanks for your help once again, i also tried it with 60 frames per second and its silky smooth. Im developing this for an AIR android app so I need to test it on my evo4 now. Hopefully the phone can hold up with a higher frame rate.

 

Thanks again!