I'm new to flash and can't find the bug in my code. I want a space ship to be able to accelerate in a vector, to not be able to accelerate over a max velocity, to keep that velocity vector when it stops accelerating but then suffer from friction (space dust ,) ). (It happens in a 2d stage.)
I think my math is correct, but I get a bug with velVector sometimes returns NaN - here's my code:
var friction:Number = .96;
var force:Number = .1;
var maxVel:Number = 3;
var accVector:Object = new Object();
var velVector:Object = new Object();
var velocity:Number;
var acceleration:Number;
If the ship points in the right direction it executes function 'accelerate' and if not it executes function 'drift'. It always executes 'moveship'
function accelerate():void {
curRotation.vx = Math.cos(rotation/180*Math.PI);
curRotation.vy = Math.sin(rotation/180*Math.PI);
var angle:Number = Math.atan2(curRotation.vy, curRotation.vx);
velocity = Math.sqrt(velVector.vx^2 + velVector.vy^2); //get velocity in both directions
acceleration = (maxVel - velocity)/maxVel*force; //this is to make it harder to accelerate when it approaches maxvelocity
accVector.vx = Math.cos(angle) * acceleration; //accelerate in each dimension
accVector.vy = Math.sin(angle) * acceleration;
velVector.vx += accVector.vx; //add acceleration to velocity
velVector.vy += accVector.vy;
}
function drift():void {
velVector.vx *= friction; //decrease velocity when not accelerating
velVector.vy *= friction;
}
function moveShip():void {
trace("velocity", velocity)
x += velVector.vx; //move
y += velVector.vy;
}
Many thanks!
I guess, your problem is in using of unsafe math operations without values validation. So, your velVector depends on accVector which depend on acceleration. You have a division operation counting "acceleration" val. That's it:
acceleration = (maxVel - velocity)/maxVel*force;
In AS3 you CAN divide by zero, and you'll get Infinity in such situation. But, there is also a chance to get NaN in case you are dividing zero by zero:
var acceleration:Number = 0 / 0;
trace(acceleration); //NaN
If you try doing something with NaN writing the result in Number or untyped variable (not int!), you'll always get NaN:
var a:Number = 5 * NaN;
trace(a); //NaN
So, I here is an example, which gives NaN:
acceleration = 0 / 0; //NaN
accVector.vx = Math.cos(angle) * acceleration; //NaN regardless on "angel" value
velVector.vx += accVector.vx; //NaN regardless on "velVector" value.
I hope, this will help.
Related
I am drawing a circular line to varying degrees. I wish the animation to last about 0.5 seconds. For reasons I can not work out its running very slowly.
What is weird is that if I skip the tween and call the function tweenToNext it renders instantly.
var degrees:int;
var posX:int = 102;
var posY:int = 102;
var rad:int = 100;
var mc:MovieClip = new MovieClip();
addChild(mc);
mc.graphics.lineStyle(5, 0xFF0000, 1);
mc.graphics.moveTo(posX, posY - rad)
mc.i = -Math.PI / 2;
tweenToNext();
function tweenToNext(per:Number = 360):void {
degrees += 1;
if (mc.i <= (3 * Math.PI / 2) && degrees < per) {
var x:Number = posX + Math.cos(mc.i) * rad;
var y:Number = posY + Math.sin(mc.i) * rad;
mc.graphics.lineTo(x, y);
mc.i += Math.PI / 180;
TweenLite.to(mc, 0.001, {onComplete:tweenToNext});
}
}
I have tried Timer and setTimeout but these produce the same slow speed.
Flash application runs on frame-to-frame basis: frame render - script execution - frame render - script execution - frame render - script execution - and so on. That also means that whatever smallest delay you're putting there, the next call will not happen before next script execution phase, basically, next frame. Thus - guess what - your circle drawing takes 360 frames. 12 seconds if you have 30 FPS, for example.
If you want to make something synchronize with the real time, you need a different approach. I didn't check if this works, but I hope you'll get the idea and fix the mistakes if any.
var degrees:int;
var posX:int = 102;
var posY:int = 102;
var rad:int = 100;
var mc:MovieClip = new MovieClip;
addChild(mc);
mc.graphics.lineStyle(5, 0xFF0000, 1);
mc.graphics.moveTo(posX, posY + rad);
// Now, magic time.
// Save time since app start (in milliseconds).
var startTime:int = getTimer();
// 1000 milliseconds = 1 second.
var drawingTime:int = 1000;
// Store the maximum degree to draw.
var degreeLimit:int = 360;
// Call it every frame.
mc.addEventListener(Event.ENTER_FRAME, onDraw);
function onDraw(e:Event):void
{
// Now we need to check how much time passes since last frame
// and update the drawing accordingly.
var timeProgress:Number = (getTimer() - startTime) / drawingTime;
var drawingProgress:Number = degrees / degreeLimit;
// When the drawing progress catches the time progress
// the loop will end. It will resume on the next frame.
while (drawingProgress < timeProgress)
{
degrees += 1;
// It's better than a property on target canvas,
// which could be Sprite or Shape, they wouldn't take random fields.
var anAngle:Number = degrees * Math.PI / 180;
var tox:Number = posX + Math.cos(anAngle) * rad;
var toy:Number = posY + Math.sin(anAngle) * rad;
mc.graphics.lineTo(tox, toy);
// We should know when to stop it.
if (dergees >= degreeLimit)
{
mc.removeEventListener(Event.ENTER_FRAME);
return;
}
// Update the drawing progress.
drawingProgress:Number = degrees / degreeLimit;
}
}
So i have an object that i want to chase another object. Everything is working fine, however i tried to implement an easeTo function to make it so that the object doesn't take the most direct route to the x,y locations of the object it is chasing. This also works but the thing that is really pissing that i can't fix is the fact that the objects speed changes depending how far away from the object it is chasing is. For example, if the object being chased is on the far right of the stage and the chaser spawns on the far left, it will go really fast towards the object on the right and slow down as it gets closer. I would love for it to go at a consistent speed. Any suggestions?
Thanks
Here is my code
private function easeTo(cur:Point, target:Point, ease:Number):Point{
var dx:Number = target.x - cur.x;
var dy:Number = target.y - cur.y;
var finalResult:Point = new Point(); //create a var to hold the result
finalResult.x = cur.x + (dx * ease);
finalResult.y = cur.y + (dy * ease);
return finalResult;
}
public function chase(xValue:Number, yValue:Number):void{
//store current x and y in a point var
var curPos:Point = new Point (x,y);
//store the mouse x and y in a var
var targetPos:Point = new Point(xValue, yValue);
var nextPos:Point = easeTo(curPos, targetPos, 0.001);
this.x = nextPos.x;
this.y = nextPos.y;
}
So the (xValue:Number, yValue:Number) is the x and y values of the object it is chasing being passed into the chase function.
I would suggest using Math.min (when dx or dy is negative) and Math.max (when dx or dy is positive) with a value you define to be your max speed
ie:
var maxSpeed:Number = 20;
if (dx >= 0){
dx = Math.max(dx,maxSpeed)
}else{
dx = Math.min(dx,maxSpeed)
}
repeat for dy
I've been stuck on this problem for a very long time now, I've searched around alot and tried stuff, but nothing works. Some explanations are just very hard for me to understand as Im pretty new to programming overall and got alot to learn.
I have two problems
1: The ball wont collide with the bricks sometimes when the speed is too fast.
2: The ball is capable of hitting 2 bricks.
Both problems is related to the fact that 60 fps isnt enough for my type of collision detection to work properly.
I just need someone to explain in a simple way as possible what I need to do to make a collision detection that will prevent this from happen.
Here's my current collision code:
private function checkCollision(): void {
grdx = Math.floor((ball.x) / 28);
grdy = Math.floor((ball.y) / 14);
ngrdx = Math.floor((ball.x + dx) / 28);
ngrdy = Math.floor((ball.y + dy) / 14);
var flipX: Boolean = false;
var flipY: Boolean = false;
if ((grdy <= level.length - 1) &&
(ngrdy <= level.length - 1) &&
(grdy >= 0 && ngrdy >= 0)) {
if (testBlock(grdx, ngrdy)) {
flipY = true;
paddleFlag = 1;
}
if (testBlock(ngrdx, grdy)) {
flipX = true;
paddleFlag = 1;
}
if (testBlock(ngrdx, ngrdy)) {
flipX = true;
flipY = true;
paddleFlag = 1;
}
dx *= flipX ? -1 : 1;
dy *= flipY ? -1 : 1;
}
}
private function testBlock(xPos: int, yPos: int): Boolean {
if (level[yPos][xPos] > 0 && level[yPos][xPos] != 13) {
trace("hit on X,Y");
level[yPos][xPos] = 0;
breakBlock("Block_" + yPos + "_" + xPos);
trace("Block: " + totalBreaks + " / " + totalBlocks);
return true;
}
return false;
}
private function breakBlock(blockName: String): void {
if (this.getChildByName(blockName)) {
this.removeChild(this.getChildByName(blockName));
totalBreaks++;
}
}
Thank you and sorry for my bad english, its not my motherlanguage.
One solution is to move the ball in smaller iterations, multiple times in a given frame.
For example, and I am giving this solution assuming that you are moving the ball based on the time elapsed from the last frame.
Suppose that 30 milliseconds have elapsed since the last frame update. In that case you would update the movement/collision twice in that frame using 15 millisecond as your time elapsed.
The higher resolution of collision you want, the more iterations you would do.
Here's an example :
// class declarations
var lastFrame:Number;
var iterationsPerFrame:int;
function startGame():void
{
// lets specify 3 updates per frame
iterationsPerFrame = 3;
// save initial time
lastFrame = getTimer();
// create your listener
addEventListener(Event.ENTER_FRAME, update);
}
function update(e:Event):void
{
var currentFrame:Number = getTimer();
var deltaTime:Number = (currentFrame - lastFrame)/1000;
var iterationDelta:Number = deltaTime/iterationsPerFrame;
for (var index:int = 0;index < iterationsPerFrame;index++)
{
// I'm assuming dx,dy are the velocity of the ball, in pixels per second
ball.x += dx * iterationDelta;
ball.y += dy * iterationDelta;
// check collision
}
// set lastFrame to the currentFrame time, preparing for next frame
lastFrame = currentFrame;
// after this, your frame is going to render
}
You could work out how far the ball travels each frame (A) based on its speed, how far the ball is from the paddle (B) and if A > B manually trigger a collision that frame.
You're essentially checking every bricks X and Y coordinate to the balls X and Y coordinate, so if the bricks are stored in an array this becomes: Sqrt( Sqrd(p2.x - p1.x) + Sqrd(p2.y - p1.y))
for(var i=0; i<brickArray.length; i++)
{
var distance:Number = Math.sqrt((brickArray[i].x - ball.x) * (brickArray[i].x - ball.x) +
(brickArray[i].y - ball.y) * (brickArray[i].y - ball.y));
}
This is a very good tutorial on high speed collison detection:
http://www.newgrounds.com/bbs/topic/1072673
I have a sprite in a movie symbol that I would like to hover back and forth within a 360 radius. I was hoping to make it smooth and random. Never really venturing from its original xy cordinates.
I've tried to create some stipulations with if statements and a starting momentum. Like this:
var num = 2;
stage.addEventListener(Event.ENTER_FRAME, hover);
function hover(evt:Event):void{
//start it moving
cloudWhite.y += num;
cloudWhite.x += num;
//declare these variables
var cX = cloudWhite.x;
var cY = cloudWhite.y;
// object travels 10 pixels
var cXP = cX + 10;
var cXN = cX - 10;
var cYP = cY + 10;
var cYN = cY - 10;
// if object goes 10 pixels reverse direction of momentum (maybe)
if (cX >= cXP) {
num = -2;
}
if (cX <= cXN){
num = 2;
}
if (cY >= cYP) {
num = 2;
}
if (cY <= cYN){
num = 2;
}
Clearly this is super wrong because when it runs the object just either goes to 0,0 or to some place that only the math gods know of.
I am clearly a noob at this kind of math so i apologize but I am very excited to learn the trig behind this.
Thank you for your help and thank you for reading.
You are setting all your variables inside the ENTER_FRAME loop, so none of your conditions ever evaluates to true. On every single frame you are doing this:
cloudWhite.x += 2;
cX = cloudWhite.x;
cXP = cX + 10; // Must == cloudWhite's previous x + 10 + 2;
cXN = cX - 10; // Must == cloudWite's previous x -10 + 2;
if(cX > cXP)... // Can never be true.
if(cX < cXN)... // Can never be true.
What you need to do is:
1) Store the original position of cloudWhite somewhere outside the loop, and store it before the loop begins.
2) Define your bounds relative to the original position of cloudWhite, again before your loop begins. Also define the amount you are going to change the position with each iteration.
3) Start your loop.
4) Increment the current position of cloudWhite on each iteration. Add a little random in here if you want the shape to move in a random manner.
5) Check if the new position of cW is outside your bounds and adjust the direction if it is.
The sample below is crude and jerky but I don't know exactly what effect you're looking for. If you want smoother, longer movements in each direction, consider using the Tween class or a Tween library such as the popular Greensock one, instead of incrementing / decrementing the position manually. There's a useful discussion of this here: http://www.actionscript.org/forums/archive/index.php3/t-163836.html
import flash.display.MovieClip;
import flash.events.Event;
// Set up your variables
var original_x:Number = 100; // Original x
var original_y:Number = 100; // Original y
var x_inc:Number = 5; // X Movement
var y_inc:Number = 5; // Y Movenent
var bounds:Number = 50; // Distance from origin allowed
// Doesn't take into account width of object so is distance to nearest point.
// Create an MC to show the bounds:
var display:MovieClip = addChild(new MovieClip()) as MovieClip;
display.graphics.lineStyle(1, 0x0000FF);
display.graphics.beginFill(0x0000FF, 0.5);
display.graphics.drawRect(0-bounds, 0-bounds, bounds * 2, bounds *2);
display.x = original_x;
display.y = original_y;
addChild(display);
// Create our moving mc:
var mc:MovieClip = addChild(new MovieClip()) as MovieClip;
mc.graphics.beginFill(0xFF0000, 1);
mc.graphics.drawCircle(-10, -10, 20);
// Position it:
mc.x = original_x;
mc.y = original_y;
addChild(mc);
// Loop:
function iterate($e:Event = null):void
{
// Move the mc by a random amount related to x/y inc
mc.x += (Math.random() * (2 * x_inc))/2;
mc.y += (Math.random() * (2 * y_inc))/2;
// If the distance from the origin is greater than bounds:
if((Math.abs(mc.x - original_x)) > bounds)
{
// Reverse the direction of travel:
x_inc == 5 ? x_inc = -5 : x_inc = 5;
}
// Ditto on the y axis:
if((Math.abs(mc.y - original_y)) > bounds)
{
y_inc == 5 ? y_inc = -5 : y_inc = 5;
}
}
// Start the loop:
addEventListener(Event.ENTER_FRAME, iterate);
This should get you started. I'm sure there are any number of other ways to do this with formal trig, but this has the benefit of being very simple, and just an extension of your existing method.
I would like to "grow" a path with bezier-curves. After the path has been drawn, it should be shaking a bit: Weave-like look and feel.
visual example:
weave example
At the moment I use TweenMax.bezier, which let me move a point along this curve and at the same time (onEnterFrame) I draw lines to the current Position of the Point.
Unfortunately this approach leads to bad quality of the curve if the framerate drops(square-cut) and it is difficult to recalculate all the points in between(for the weave effect);
Recent suggestions lead me to use curves to solve the problem, but I don't know exactly how.
This example would solve my problem: split bezier
But no code-snippets.
Did anyone encounter the same problem ?
Thanks in advance
I often use Tweeners CurveModifiers._bezier_get to create bezier curves and retrieve points easily (I've tried a few and this one is actually fast).
... Quickly :
Set up two arrays (x,y) listing the control points.
Iterate each frame to modify the positions of the control points.
Redraw your curve with some similar code :
for(var i:Number=0; i <1; i += precision)
{
x = CurveModifiers._bezier_get(pathX[0], pathX[pathX.length - 1], t, pathX);
y = CurveModifiers._bezier_get(pathY[0], pathY[pathY.length - 1], t, pathY);
// ...graphics.lineTo(x,y)
}
Edit
Here you go :
import caurina.transitions.*;
import caurina.transitions.properties.CurveModifiers;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(e:Event)
{
modifyCurve();
drawCurve();
}
// Control points
var pathX:Array = new Array(50,200,600,850);
var pathY:Array = new Array(50,200,100,350);
// growth related
var growth:Number=0;
var growthSpeed:Number=0.01;
/**
* Grows and draws the curve
*/
function drawCurve():void {
const precision:Number = 0.001;
var cx:Number,
cy:Number;
// grow (avoid making it more than one)
if (growth<1) growth = Math.min(1, growth+growthSpeed);
graphics.clear();
graphics.lineStyle(1);
for (var t:Number=0; t <growth; t += precision) {
cx=CurveModifiers._bezier_get(pathX[0],pathX[pathX.length-1],t,pathX);
cy=CurveModifiers._bezier_get(pathY[0],pathY[pathY.length-1],t,pathY);
if (t==0) {
graphics.moveTo(cx,cy);
} else {
graphics.lineTo(cx,cy);
}
}
}
var motion_t:Number = 0;
var motionSpeed:Number = Math.PI * 0.1;
var motionRadius:Number = 10*motionSpeed;
/**
* Creates a movement by transforming the control points
*/
function modifyCurve():void
{
var len:int = pathX.length;
motion_t += motionSpeed;
for(var index:int = 1; index < len; index++)
{
// simple circular movement for each control point
pathX[index] += Math.cos(motion_t + Math.PI * 2 / index) * motionRadius;
pathY[index] += Math.sin(motion_t + Math.PI * 2 / index) * motionRadius;
}
}
What you're looking for is more commonly called the deCastlejau algorithm. Blossoming or polar labels are more general methods for the same thing.