I am struggling with this for 3 days now, would appreciate your help!
I am trying to make simple continuous animation on y axis.
The problem is that the animation is not smooth!!!
It has jumps and hiccups.
It is hard to see in the beginning, but once you see it, you can't get rid of it.
Here is an example:
http://dl.dropbox.com/u/19570262/movementTest.swf
Here is the source file:
http://dl.dropbox.com/u/19570262/movementTest.fla
This particular code is pretty simple:
import flash.events.Event;
addEventListener(Event.ENTER_FRAME, moveRoad);
var deltaY:Number = 0;
function moveRoad(event:Event):void
{
deltaY = (deltaY < stage.stageHeight) ? deltaY + 5 : 0;
road1.y = deltaY;
road2.y = deltaY - road1.height
}
But trust me until now I tried like 20 different solutions which also didn't work.
The solutions I tried until now:
animate by setInterval()
animate by getTime()
animate bitmaps
animate by copyPixels
The only one that worked was using stage3D and Starling! But I can't use it for my project.
Anyone?
You could try using TweenLite and BlitMask
http://www.greensock.com/blitmask/
Related
I've been programming a side scroller based on a tutorial found in a book. My friend did the same, and his is working perfectly.
I've only really changed a few variable names around (I've also done animations differently) but for some reason, when my character is moving, there is a large amount of lag.
HOwever the lag is only present when there are 'walls' on the stage. When I scroll past them, the lag goes away, then returns.
Walls and Floors both use the same code (they are both assigned as 'floorObjects' variables) and use the same collision code, however I cannot figure out why there is lag involved.
From where the character starts (about 60x) if the character goes left, there is a HUGE amount of lag. If I go right, there isn't too much lag, until the screen starts to scroll.
The lag from going left I believe may have something to do with the program being preventing from scrolling off the map etc. But I can't figure out why there is lag when trying to move right.
I've listed the Scroll code, and the main loop, if need be I can upload the collisions code, and any help would be greatly appreciated.
Scroll code;
public function scrollGame()
{
var stagePosition:Number = gameLevel.x + player.mc.x;
var rightEdge:Number = stage.stageWidth - edgeDistance;
var leftEdge:Number = edgeDistance;
//Scroll the GameLevel to the Left if player moves right
if(stagePosition > rightEdge)
{
gameLevel.x -= (stagePosition - rightEdge);
//Prevent the game scrolling off the stage
if (gameLevel.x < -(gameLevel.width-stage.stageWidth))
gameLevel.x = -(gameLevel.width-stage.stageWidth);
}
//Scroll the GameLevel to the right if player moves left
if(stagePosition < leftEdge)
{
gameLevel.x += (leftEdge - stagePosition);
//Prevent the game scrolling off the stage
if(gameLevel.x > 0)
gameLevel.x = 0;
}
}
Main Loop:
public function gameLoop(e:Event)
{
//Get Time Difference
if(lastTime == 0) lastTime = getTimer();
var timeDiff:int = getTimer() - lastTime;
lastTime += timeDiff;
//Game Cycle tasks
//Only perform if in play mode
if(gameMode == "play")
{
moveCharacter(player, timeDiff);
moveEnemies(timeDiff);
checkCollisions();
scrollGame();
}
}
UPDATE:
So I "profiled" it, most of the time is being spent either in the MoveCharacter() function, using the gotoAndStop() command. So I removed that, and it made no difference, still lagging. I then removed the enemies also, still lagging. But turning quality down to low has somehow fixed it (though at a poor quality now ) Any ideas as to what is causing the lag and how to fix it?
this is from the flash university book isn't it?
The code is fine.
I know what will lag your flash game.
This is a guess though, and I do get this error some times.
Make sure your images are optimized!
If they're imported from photo shop or illustratro then flash will have to deal with those complicate vector points.
Use .png for transparent images, bitmaps don't hurt either.
I am trying to use these easing functions from this page;
https://gist.github.com/gre/1650294
In my canvas project, I am wondering if anyone could shed some light on how to use these with say a rectangle on my canvas which has an x and y property.
I understand t is time, (I have successfully managed to get the delta time of my frame intervals, not sure if this is needed).
How can I use these functions to make the easing effects be applied to my rectangle which has an x and y property which are the co-ordinates of where it should be placed onto the canvas?
I know this question is kinda vague, but I really do not understand these functions and how they should be integrated with a rectangle on the canvas.
Thanks
You can use it like this -
(Click here to see working example at jsfiddle)
var x = 100; //final position
var t = 0; //0-1, this is what you change in animation loop
In your loop:
function myLoop() {
var tx = EasingFunctions.easeInQuad(t) * x;
// set element by tx
if (t < 1) {
t += 0.1; //determines speed
requestAnimationFrame(myLoop);
//setTimeout(myLoop, 16); //option to above
}
}
See also:
http://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/
I know it's nice to write you own code; but should you want to use a library then this one is pretty good:
Tween JS
It uses the easing methods you referenced as supports chaining.
For a project I need to make a flashgame with the Kinect for Xbox.
Using the AS3NUI library to get acces to most of the Kinect functions worked well for me.
It's a pong game where you have to move your paddle vertically through hand movement.
I've tried a few ways of moving the paddle, but none of them is really accurate. And if they are more accurate, they aren't smooth at all anymore.
My first methode was setting the paddle.y to the value of the hand.y.
_paddleLeft.y = (userLeft.leftHand.position.y);
Of course the result was terrible.
This was my next try:
_paddleLeft.y = (userLeft.leftHand.position.rgbRelative.y * stage.stageHeight*2);
This was pretty accurate, but not smooth at all, and sometimes it was very hard to reach the top of the stage, or the bottom.
At last, I tried something else. I saved the hands last Y position, and checked if the new position was higher or lower, and on that I moved the paddle up or down.
currYLeft = userLeft.leftHand.position.rgb.y;
currYRight = userRight.rightHand.position.rgb.y;
if (currYLeft > prevYLeft + 10){
isDown1 = true;
isUp1 = false;
}else if( currYLeft < prevYLeft - 10){
isDown1 = false;
isUp1 = true;
}
prevYLeft = userLeft.leftHand.position.rgb.y;
prevYRight = userRight.rightHand.position.rgb.y;
In another enterframehandler, I make them move up or down.
This is the most smooth way I achieved, but it isn't very accurate anymore. There is some kind of delay wich you don't have with the first two ways.
I would like to know if it is possible to make the movement smooth AND accurate at the same time? And how this is possible.
If you already have an accurate solution, May be you can try putting some easing in it for the smoothness. You might wanna try using this instead in the enterFrame loop
_paddleLeft.y +=
((userLeft.leftHand.position.rgbRelative.y * stage.stageHeight*2)
-_paddleLeft.y)*0.3;
0.3 can be altered to other numbers between 0 and 1, depending on the easing speed you want...That's my best guess, hope this helps ^^
I'm writing a paint program that uses shape brushes to draw by using the matrix function.
Everything works well aside from the fact that it's not smooth at all. There will be gaps in the painting if the mouse is moved at a high speed.
I've looked everywhere but haven't been able to find any solution.
The code basically looks like this:
//Press mouse within container. Uses Matrix to draw instances of the brush.
private function handleMouseDown_drawContainer(e:MouseEvent):void
{
_matrix.identity();
_matrix.translate(mouseX - 10, mouseY - 30);
_layout.bitmapData.draw(_layout.brush, _matrix);
_layout.drawContainer.addEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove_drawContainer);
_layout.drawContainer.addEventListener(MouseEvent.MOUSE_UP, handleMouseUp_drawContainer)
}
//Move mouse within container. Uses Matrix to draw instances of the brush.
private function handleMouseMove_drawContainer(e:MouseEvent):void
{
_matrix.identity();
_matrix.translate(mouseX - 10, mouseY - 30);
_layout.bitmapData.draw(_layout.brush, _matrix);
}
If anyone could help me figure out how to smooth out the drawing, I'd be forever grateful! =p
Thanks in advance.
You probably need some kind of interpolation between the mouse positions... there are of course many ways, I'll describe one very easy to implement but a bit hard to fine tune. Basically instead of drawing in each mouse position, you use an easing equation that follows the mouse with some delay... this way the described line will be a bit smoother, and will draw a few times between each mouse position.
So instead of doing (pseudocode):
onMouseMove {
draw(mouseX, mouseY);
}
You do something like:
x = 0;
y = 0;
onEnterFrame {
x += (mouseX - x) * 0.2;
y += (mouseY - y) * 0.2;
draw(x, y);
}
Although maybe what you really need is a way to limit the maximum distance between points, so if the mouse moves more in one frame, you interpolate points between the two positions and draw as many times as it's needed.
Or if you're looking for smoother lines (avoid sharp corners) maybe you also need to use beziers to control the resulting line.
Anyway, it all depends on the kind of drawing you're looking for.
I am new to AS3 scripting. I have a wide image (movie clip "preform_mc") that I am masking and would like for right button ("right_mc") to dynamically move the image.
The code below moves the image to the right, but its not a dynamic movement (would like an animation effect) and I cant control when the image should stop moving, basically a max amount for the x coordinate.
any help is greatly appreciated!
right_mc.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_2);
function fl_MouseClickHandler_2(event:MouseEvent):void
{
preform_mc.x += -100;
}
Take a look at Greensock Tweening Library. Using that library you'll be able to easily make a smooth animation of a moving image. For the control of max X you should write an if statement to check whether preform_mc.x is more than the max amount you want.
Code will look something like this:
var min_x:int = -500;
function fl_MouseClickHandler_2(event:MouseEvent):void
{
if(min_x < preform_mc.x)
TweenLite.to(preform_mc, 0.5, {x:preform_mc.x - 100}); // using the library I provided a link to
}