greensock tween find end rotation of bezier curve - actionscript-3

Let me tell you a scenario which am facing right now , I have a movieclip which will move along the bezier curve and a button which will start the play(movie clip will move along the curve) and bezier points , am using greensock which have an autorotate option where you will rotate the movie clip along the path.
so i need to know what rotation will the movieclip will be at the end of play , because when auto rotate is enabled my rotation at start time will be 0 but by the end time of the play what will it be ???? I need to know that value before the tween happens , please help!

There is, of course, math that you could do to figure it all out, but it's probably easier to just let the tween handle it and simply jump to the end, read the value, and rewind again. No need to create a separate tween that lasts 0.0001 seconds and wait for an onComplete or anything like that - just use the original tween:
var tween:TweenMax = TweenMax.to(...); //your bezier tween
tween.progress(1); //jump to the end
var endRotation:Number = mc.rotation; //read the final rotation
tween.progress(0); //rewind back to the beginning

There is sure some mathematical way to calculate this but then you would basically need to rewrite the whole bezier movement logic.
A quick and dirty way would be to set your movieclip alpha to 0 at first (or create a new empty sprite) and let the same bezier movement run within lets say 0.0001 second. In onComplete check the final movieclip rotation and start the actual tweening. I'ts kind of hacky but it will work :)

Related

AS3 collision detection in an object itself

I´m programing a space ship side scroll in as3. The bottom of the stage are mountains and here comes the problem, when I try to detect the ship collision against the mountains..
Because the poor collision detection and the need of avoid large loops my idea is create an object that works as a collider itself detecting a collision and avoiding parse all the stage or more selective metod.
I place "by hand" in the flash stage several instances of circles with a class for manage them where I place the If(this.collider.hits(ship)....
I spent looong time but I can find the way to make it work some of the mistakes i get are like this
Error 1061: Call to a possibly undefined method hitTestObject through a reference with static type Class.
some Idea? Thanks in advance
when you hit test with points it is important that the point being tested is relative to the object being tested against, eg
if(mountain.hitTestPoint(this.x + circle1.x, this.y + circle1.y))
will return true if the circles are inside the object calling the function because their position relative to the mountain is now relative to it rather then relative to the ships xy position within the clip... hope that makes sense.
btw I have done this myself in the past but I would have to remind you that you can only hit test with the points so there is no need to have circles, use blank sprites instead and set the visible flag in the properties panel to false, no drawing will make it slightly faster... not that you will notice, also sprites/graphics use less memory then movie clips.
also I would recommend hard coding some points in the clips rather then actually adding the clips in the sprite/clip itself, this will make it easier to work with them and scale later on (believe me this will annoy the hair from your head to do something later and slow the game to scale on the fly)
try something like this... you can determine the points values by adding a clip to the movie clip and getting its position from the properties if you must.
private var hitPoints:Vector.<Point> = new Vector.<Point>
hitPoints.push(new Point(10, 40));
hitPoints.push(new Point(30, 40));
//...do this for all your points
//loop through all your points and check if the hit relative to the ships position.
for(var i:int = 0; i < hitPoints.length; i++)
{
if (scene.hitTestPoint(ship.x + hitPoints[i].x, ship.y + hitPoints[i].y))
{
//do your hit stuff here
break;//don't forget to break
}
}
in this code you will need to make sure the scene object is a reference to your scenery at the bottom of the screen.
I hope this helps but if this is not enough help then you should post some of your code here so we can have a look and see where it can be improved.

ActionScript 3 How to make an animation that always goes toward the same point

I have a main object that moves around wherever the mouse is.
How would I make an animation that shoots out other objects from the main object toward receivers that don't move?
Is there an easier way than finding the angle between the main object and the receivers and then sending the animation out that way?
So the shooting animation should rotate depending on where the main object is so that the shooting animations will always reach the target.
You can use TweenLite and just specify the x, y location :
TweenLite.to(bullet, duration, {x:targetX, y:targetY});
You can download it here :
http://www.greensock.com/v12/
You'll probably want to calculate the duration of the tween based on the distance between the objects and how fast you'd like it to move in pixels per second. For example :
var duration:Number = distance / pixelsPerSecond;
That would give you the correct amount of time for the tween.

Flash AS3: Keeping the mouse within certain boundaries

So this one is a tricky one (for me) vital to the development of my project due to the fact that we can't directly modify the position of mouseX and mouseY - they are read-only variables.
Basically, what I want to do is have a player able to move their mouse only within a certain triangular area when a specific instance is active. The latter bit I can manage just fine, however I am having trouble restricting mouse movement -- or apparent mouse movement.
Here's what I have done so far:
1. Assign a library moveclip to the mouseX and mouseY position in the Event.ENTER_FRAME event - although I acknowledge that this should be moved to Mouse.MOUSE_MOVE. (this does not matter yet)
2. Using Corey O'Neils Collision detection kit, do a hit test on the border instances of the area with the crosshair/cursor.
3. Offset the cursor appropriately, and then set a standard Boolean value to false so that the cursor will not keep bouncing back into the cursor over and over.
My problem is, I am not sure what the best way is to go about allowing mouse movement again. Can anyone give me some tips on the best way to do this, or if necessary, point me in another direction where restricting mouse movement is a little easier?
For what it's worth, this is to stop users from aiming in an unrealistic direction with a character in a top-down (ish) shooter.
For those unfamiliar with Corey O'Neil's Collision Detection Kit, I believe it is just a pre-built setup of bitmap (or maybe vector) collision testing - I could be wrong. I'm not sure on the details of how it works, just its basic implementation.
Here is my code regarding mouse movement thus far:
import flash.ui.Mouse;
import flash.events.event
import com.coreyoneil.collision.CollisionList;
Mouse.hide();
var c:crosshair = new crosshair();
addchild(c);
var myCollisionList:CollisionList;
myCollisionList = new CollisionList(c); //sets up detection for the object c
myCollisionList.addItem(mcB); // adds mcB to the list of objects to check c's hittest with
function aim(e:Event) {
var collisions:Array = myCollisionList.checkCollisions();
if (collisions.length>0)
{
hashit = true; // tells the program that the mouse has collided with a boundary
c.x += 1;
c.y += 1;
}
else
{
if (hashit == false)
{
c.x = mouseX;
c.y = mouseY;
}
}
}
Apologies for the code block, but I figure it is best to show all relevant code -- I'm not sure about the complexity of this issue due to the read-only nature of the mouse's X and Y position.
Also, I'm looking for a possible solution which will not be clunky - that is, as soon as the mouse is back in the area, mouse movement will be smooth as it is originally, and where the cursor will still be matching the mouse position (meaning, the cursor is ALWAYS relevant to the mouse and will not change position should the mouse leave the boundaries).
Could anyone please give me some pointers? Sorry for the long question. I gather there might be a bit to get my head around here, being relatively new to AS3 - but I still feel this is a problem I can get past, if one of you can show me the right direction and help me with both the logic and programming side of things slightly.
Here is a diagram of my stage to clarify the boundary areas etc.
Thanks very much for any help in advance, I really do appreciate it!
Cheers, Harry.
How about trying getObjectsUnderPoint which returns an array of objects under a certain point.
If your triangle object is within the array the cursor must be above it.
var pt:Point = new Point(c.x, c.y);
var objects:Array = stage.getObjectsUnderPoint(pt);
if (objects.indexOf(triangleObject) > -1) {
trace("still within bounds");
}
The workaround here could be to hide the system mouse cursor and add a bespoke cursor movieclip to the stage.
Using a MOUSE_MOVE event listener attached to the stage, set the bespoke cursor movieclip to match the stage.mouseX and stage.mouseY values and also test whether the movieclip is outside your bounds. If so, set it back within your bounds.

Moving the "camera" of an HTML Canvas element

I'm trying to find a clean way to "move the camera" of a canvas element.
This for my prototype game (side scroller). I'd love to think there's a better solution than moving the whole set of nodes to simulate a "camera" moving around.
Am almost certain to have read a simple how-to (using offsets?) but the fact I don't find anything like that starts to raise doubts... have I imagined reading that!?
Thanks to help me clarify...
J
Presumably you redraw your whole game scene 30 times a second (more or less)
You need to redraw your whole game scene but first translate the Canvas context by some offset.
context.translate(x,y) is precisely what you want. You'll want to read up on the use of that as well as the save() and restore() methods.
When you translate the context, everything drawn afterwards is shifted by that amount.
So you constantly draw something (maybe an enemy) at 50,50 using drawImage(badguy,50,50). Then the player moves, which changes the x of translate to -1 (because the player is moving to the right) instead of 0. You still draw the enemy sprite with the command drawImage(badguy,50,50), but when you draw it the enemy shows up as if it were at 49,50 because of the context.translate(-1,0) command shifting everything before its drawn.
Of course when you get into performance you'll want to be making sure that you are only ever drawing things that can actually be seen on the screen! If your are far down the level with context.translate(-2000,0), you dont want to be drawing objects at 50,50 anymore, only ones that intersect the viewable area.

How can you get different objects working at different framerates working in html5 canvas?

Say I want a ball bouncing at 5 frames per second and only want to have a square bouncing at 2 frames per second, how is this possible?
return setInterval(draw,10) is used in the current simulation to move 1000 particles around, but I also want to draw a radial gradient on a second canvas which gets data from the particle simulation. I cant figure out how to draw the gradient a frame per second and the particles at another framerate
What i do is create a Timer constructor, and everytime I make something animate, i make a var animateThing = new Timer().
It may not be necessary to do this, but it can be a useful peice of code as you get deeper into canvas with more moving parts.
Update
So something sorta like this.
function Timer(fps, callback) {
return setTimout(callback, 1000 / fps);
}
var timer1 = new Timer(33, callback1);
var timer2 = new Timer(55, callback2);
Now that's probably not gonna work, but it's the idea.