I'm trying to make a "pan" effect (I'm not sure if this is pan) in flash (as3) where you have an image bigger than the mask where it is displayed (just horizontally). It´s a very simple effect, but I'm having trouble with the tweens.
First, I tried with the tween class. But it ended up a mess with the speed of the tween (the parameter where you set the frames or seconds of the tween). The "begin" parameter is easy, is the x value of the object, no matters where is it. The "end" parameter is easy too, is 0 or the end of the image, depending if you are on the left or right button (the tween begins when you are over those buttons and end with a stopTween when you are out of them or when the tween is over). The problem I'm facing it's the "duration" parameter: I want the same speed in all the tweens, no matters where it begins. Obviously, if I put a static value, if I'm in the middle of the image, the speed reduces to half.
So I'm trying to figure out how to create an algorithm to do this. I first tried something like calculating which percent of the image is the current "x" value:
If I am at 50%, make the tween in 50 frames.
If I am at 90%, make the tween in 10 frames.
If I am at 20%, make the tween in 80 frames.
But I think there should be a way to make it easier. Maybe I'm getting it wrong, and the tween class is not what I need... I'm just trying to make an displacement effect, always at the same speed (although an ease in and out until the speed is reached would be greater).
Any idea or useful link about this? I saw a lot of tutorials but with different behaviour, mostly related with mouse position.
thanks in advance!
You want:
duration = (end - begin) / pixels_per_ms
Why not use the ease property of a tween class? Take a look at http://www.greensock.com
There is a useful example widget you can experiment with on the TweenMax page.
The betterway to Achieve this effect is to measure speed/over/distance this formula will be easier and a lot less code.Doing it this way you wouldnt need any tween library's.
var MaskCenter=100;
var speed=1/10;
var distance=boxdummy.mouseX-MaskCenter;
if(mouseX<250){
box.x-=(distance*speed);
}
if (mouseX>250)
{
box.x -= speed + accel;
}
Something like that!
If you cant work it, let me know i will make up a (fla) file for you
Related
I have a car object, and I want it to gradually rotate to the direction where the user clicked.
Every frame I did math to calculate the new direction it needs, and it's stored at car.direction. The actual direction is of course in car.rotation.
Now I want to update the rotation every frame until it's equal to the direction. However I tried everything and can't figure out how to do that.
By the way, I'm using FireFly, that is a gameengine built on top of Starling Framework, But I don't think it's relevant.
I would go with Marty's suggestion, use the smallestAngle function to determine which direction you should be rotating. Basically you can move some percentage of the smallestAngle during every frame update until the percentage of that smallestAngle is below some threshold (and have it "snap" the rest of the way).
Something like
//each time this is called it will get 1/4 closer, but never get to 0, hence the need for a threshold avoid paradoxes
//http://en.wikipedia.org/wiki/Zeno's_paradoxes#Dichotomy_paradox
var angleToMove:Number = smallestAngle()/4; //the divide by 4 here means get 1/4 of the angle gap closer each time this function is called, I assume this is on a timer or frame handler, making the 4 greater will make it follow more slowly, making it lower will make it follow more quickly, never reduce to or below 0 unless you want wonkiness
if(angleToMove<someRadianThreshold)
angleToMove = smallestAngle();
//use angleToMove to adjust the current heading/rotation
I'm not very good with radial calculations, I can't imagine thus I can't be sure. I need some explanation of Math.atan2() thing, please.
Usual task - to make an object rotate after the mouse. I get the differences, get the angle, I see angles in the text areas and DIRECTLY the object does follow the mouse. What I need now is everything to be smooth. I need angles to be 0-360 but after 180 object rotation becomes -180 and counts backwards, and mouse rotation becomes -90 after 270 and also counts back to 0.
More deeply, I want a smooth rotation, it means a set speed of say 2 per frame, to meet the mouse angle the shortest way. It takes to set conditions and I can't do that cause I don't even understand the logic of these values. They are almost random! I don't need it to be done or copied, I need to understand to move on so if you could please explain how does it work and what I do wrong...
Code is simple:
angle = Math.atan2(deltaY,deltaX)/(Math.PI/180) + 90; //+90 cause it lacks it to look at the mouse//
Object01.rotation = angle;
So the problem is I don't even get how it works... if 2 values are different the object can't point at the mouse but it does. Numbers lie and if I need something based on these numbers it will be wrong. Very wrong... Need organization. Meaning I want everything to be ready for further coding that will be based on the rotations to not jump up and down cause of misfit ends.
Add: Explanation of how does it happen, what I described above. Why such a chaos of the values? And an advice on how could I arrange it for further coding, just as I said. Animation alone wont work if I want to make rotation an element of important events such as shooting direction and aiming speed. Or changes of speed rotation of a lockpicked lock. Or anything much more complicated that wont work if I don't make straight and clear values: from A to Z, from 1 to 10, no 8s between 2 and 3, no R before B, no mouse angle 270 when object facing it -90 when they both started from 0 and reached 180 together.
Oh, and as I said, mouse facing works but when I try to make a certain speed of chasing mouse the shortest way it turns the object wrong directions in all 4 quarters. I assume it's also about this arctangens thing that has issues with delta values becoming negative in different quarters. And when I change it, some other value goes wrong... So I need to know exactly what I'm doing to know what's wrong and how to fix it. So yep. Need explanation. Please.
Add2: angleZ = Math.atan2(oppSide,adjSide)/(Math.PI/180);
So I divided rotation to 4 quarters, for each I count atan as opp. side to adj. side, then add 90, 180 and 270 respectively. My mouse rotation does 360, but the object that follow through simple object.rotation = angleZ; still goes to 180, then from -180 to 0 on the left side. Why does it ignore the simple command? The rotation fits but I need it to be equal, no surprises! Why is it happening? How can a number I directly set to be equal to another number as a base of the action change itself to the one of same rotation but completely different number? It doesn't even know it's degrees! It's as simple as "object.rotation, please be equal to the number I choose!"
It's just different coordinate systems. Like how x starts at 0 at the left of the stage, goes +x to the right, and -x to the left, object rotation starts at 0˚ pointing up, and goes +180˚ clockwise and -180˚ anti-clockwise.
Math.atan2 happens to start at 0 pointing left (-x), and go +270˚ clockwise and -90˚ anti-clockwise, which is annoying, but it just means you have to convert between coordinate systems by adding 90˚.
You can spin something around over and over of course, so the numbers jump so that they always stay within the same range, because 361˚ is the same as 1˚, and -270˚ is the same as 90˚. You can tell an object to rotate outside of the -180˚ to 180˚ range, and it will normalise the rotation to within those values.
As mitim described, to smoothly animate rotation you'll either need to use Event.ENTER_FRAME, a Timer, or a tweening library like TweenLite. Most tweening libraries can work out the shortest rotation direction for you, but otherwise you can simply calculate both and see which is smaller.
As an idea, since it seems like you know the angle you need to rotate towards and it's direction, would it be easier to just animate towards that angle to get your smooth rotation? Basically treat it like any other animatable property and just add on your rotation speed (2 degrees it looks like) per frame tick, until it reaches the desired rotation.
Find angle amount needed to rotate by
Figure out if clockwise or counter clockwise direction and set the rotation amount. This can be figured out by checking if the angle is great then 180 / positive or negative
Add the rotation amount * direction every frame tick, until the desired rotation is less then or equal to the rotation amount per frame
Set rotation to desired rotation
I need to do an endless horizontal scroll of elements within a parent MovieClip.
No matter what ever method I try, an element of 'drift' occurs and eventually the elements start to overlap.
I've tried using relative recursive tweening for each element according
but this method seems prone to quite a bit of error after repeated starts and stops.
//CODE START
function doScroll():void {
TweenLite.to(this, .25, {x:"20", ease:Linear.easeNone,onUpdate:checkPos,onComplete:doScroll});
}
//CODE END
I've reverted to doing absolute tweens to a predefined position using a contant speed. This seems to be more accurate but still some 'drift' occurs.
//CODE START
//_dest is predefined
var speed:Number = 500;
var dist:Number = this.x - _dest;
var distAbs:Number = dist < 0 ? -dist : dist;
//kludge to get constant velocity by recalculating time every frame
_time = distAbs / speed;
TweenLite.to(this, _time, {x:_dest, ease:Linear.easeNone,onComplete:reset});
//CODE END
Thought this should be very simple.
Can anyone point me to any possible tutorials or make any suggestions?
Any help appreciated.
Solution/Discussion at http://forums.greensock.com/viewtopic.php?f=1&t=6800
(warning: this is gonna require a rather lengthy explanation...)
It's a logic problem in your code. In your onUpdate, you were running conditional logic such that if the x position is beyond 980, it kills the tween and moves x back to -980 and starts things over. You're doing that for each individual item, each of which begins at a different position. That initial position affects when it crosses that threshold, thus when they reposition, the offsets are different.
For example, let's say item1 starts at an x position of 0 and item2 starts at 490 and both start moving at 400 pixels per second and your frame rate is 60, thus they'll move 6.66666 pixels per frame. Item1 will take 147 frames to hit 980. However, item2 will take 74 frames (actually 73.5, but there's no such thing as a half-frame) to cross the 980 threshold, but when it does so it will be at an x position of 983.333333. At that point it jumps back to -980 due to your conditional logic, but notice that it traveled an EXTRA 3.333333 pixels. You intended Item1 and item2 to travel at the exact same velocities and they do during the tween, but your onUpdate logic is misaligning them on the reposition such that in the end, some are traveling more than others which affects their overall velocity.
Another issue has to do with the fact that Flash rounds x/y coordinates of DisplayObjects to the nearest 0.05. So when you do your manual reposition (wrap), small rounding errors creep in. For example, let's say TweenLite sets the exact x value to 980.799. Flash will actually round that to 980.75. Then when you reposition it like this.x -= 980 and then tween it, the value would have just lost almost 0.05 pixels on that round. Do that many times and it can add up to a half-pixel or whole pixel (or more). All your items are crossing the threshold at slightly different spots, thus the rounding errors aren't the same, thus you start seeing slight variances in the spacing. Again, this is NOT an issue with the tweening engine. You'll see that the engine itself sets the values correctly, but Flash rounds them internally when applied to DisplayObjects.
A solution was posted at http://forums.greensock.com/viewtopic.php?f=1&t=6800 that includes an FLA and support files.
As others have suggested, I'd recommend having a single chunk of code that manages ALL the items that you're aligning/scrolling. It would lay things out from a single reference point so that everything lines up perfectly every time. You could tween a getter/setter that applies the logic. I use that technique all the time and it works great. You can see a smaller-scale example in the code I attached in the above URL (the scrollX getter/setter in ItemBase.as)
If you will be tweening all background elements at the same rate indefinitely on a single dimension - why not use a Timer and bypass tweening libraries entirely?
Basically i have x circles represented as MovieClips.
They are all assigned the same base color (for example red).
They should all have a brightness property ranging from 0 to 1 (0 would be completely white and 1 completely red).
I would like the following properties for representing these circles on stage:
When the circles dont overlap they are represented as stated above.
When the circles overlap the overlapping region should have the same base color as the original circles but the brightness of that area should be the sum of the brightnesses of all the circles that define the overlap.
The brightness saturates at 1. So the overlap of 2 circles with brightness 0.8 is 1 (the maximum value) instead of 1.6.
I am wondering if there is some kind of BitmapFilter i could use on the circles to achieve these properties? Or am I looking in the wrong place?
I am relatively new to Actionscript so any pointers are welcome!
Hi and welcome to SO and AS3!
I'll take each point separately:
1) Quite simple, you've probably already figured out that "addChild()" will add MovieClip objects to the Display List, meaning Flash will render them every frame.
2) The easiest way to do this is through "Blend Modes", which is Adobe's way of handling overlapping display objects.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#blendMode
Try setting the .blendMode property of each circle to BlendMode.ADD:
var circle:MovieClip = new MovieClip();
circle.blendMode = BlendMode.ADD;
3) If BlendMode.ADD doesn't give you the results you want, try creating a custom shader to do the job.
http://help.adobe.com/en_US/as3/dev/WSB19E965E-CCD2-4174-8077-8E5D0141A4A8.html
IMHO Blendmode is the easiest way of achieving the desired effect, and blendShader if you want precise customization. Please comment if you have further questions!
Some tutorials and examples:
http://www.learningactionscript3.com/2007/11/03/more-properties-blendmodes-filters/
http://active.tutsplus.com/tutorials/games/introducing-blend-modes-in-flash/
Cheers,
J
I'm wonderring if anyone can help me with making sure my... uhhh ... Z-index (bad pun, you'll see why in a moment) is in the wrong order. I've been doing this for a few hours straight now and my eyes are going buggy - but - maybe leaving a question on Stack overnight will help push this in the right direction.
I've been working on the code for https://github.com/AlexChesser/jsSprite and I'm as far as the 6th test. Use the W key to run, A and D to turn left and right: http://chesser.ca/jsSprite/06-brainnsss....php (Gettit? Z-Index?! Hilarious).
Anyways, You'll notice that if you run around the screen for a bit. the individual Zombies' white squares / dirty rectangles overlap the other zombies' squares. When working with multiple overlapping sprites, how does one go about making sure they all get drawn without upsetting any of the other sprites?
(You see z is for zombies, but z index like when you're dealing with overlapping in CSS - probably way funnier when you've been coding for a number of hours straight).
Thanks for your
Brainsss......
It's not a z-index issue, your zombies themselves are okay.
Your problem is really with the second line of drawFrame
drawFrame: function(){
Sprite.ctx.clearRect(0,0,Sprite.width,Sprite.height); //clear previous frame
// I am trouble:
MainContext.clearRect(Sprite.Xpos, Sprite.Ypos, Sprite.width, Sprite.height);
It is clearing a rectangle of the main canvas where the zombie once was every time you draw a zombie, which can affect nearby objects!
So instead you should be clearing the entire canvas each time.
Try commenting out the MainContext.clearRect in drawFrame, and instead add one in runloop like below. It should fix your problems.
runloop = function(m) {
// New clear put here!
MainContext.clearRect(0,0,canvas.width,canvas.height);
m.drawFrame();
for (Z in Zarr) { // For ZOMBIE in "Zombie Array" Aaaaarrrgghhh...
Zarr[Z].pointTo(m);
Zarr[Z].drawFrame();
MainContext.drawImage(Zarr[Z].canvas, Zarr[Z].Xpos, Zarr[Z].Ypos);
};
MainContext.drawImage(m.canvas, m.Xpos, m.Ypos);
};
How about sorting your array (Zarr) by the y coordinate Ypos of each zombie before rendering? Or are you getting at the problem with (a lack of) transparency?