I'll try to explain my problem in a clear and short way.
I'm writing a grid-game. In this game when the player clicks somewhere, the player moves, along the grid with a path calculated by the computer (because there's obstacles that the player avoid : walls...) to the final point.
It's an isometric grid but it's like it was a basic 2D grid.
So I have my path, which is a Point Array (key points screen coordinates) :
path : [x=10,y=100],[x=40,y=172], .. etc.
To display the movement of the player, I tried to use tweens (TweenLite/TweenMax).
There's no option on TweenLite to wait for a tween to finish before starting the next. In any case the solutions seem complicated (shitty delays/onFinish:function).
The solution I found is acceptable : TweenLite provides a LinePath2D function which works exactly like I wished. The only problem is that it works with only one function (path is the complete array):
var pathanimate:LinePath2D = new LinePath2D(path);
pathanimate.addFollower(Player);
TweenMax.to(pathanimate, 1, { progress:1, ease:Linear.easeNone });
So I can't "touch" anything during the movement. INCLUDING the aspect of the sprite of the player that must changes with the direction during each step of the path (it would be more simple if it LinePath worked with a loop).
I don't know if this is clear (i'm french huh) but I see only but two options :
Keep the LinePath and have, on each frame, some kind of counter/timer that "measures" the direction of the player. Could be heavy in ressources, but keeps the LinePath2D that works very well alone
Find another solution
I'd be glad to hear your ideas and code !
Thanks in advance
Actually I can provide several solutions, but they will include many lines of code. Briefly speaking:
System of waypoints. You have algorithm to set collection of waypoints to your character, and render him (updating from the main gaming loop), and character reaches one waypoint after another by shifting them from the collection.
Working with tweens, append them (so there will be queue).
In both options, you can set new path for the character, all you need is simple logic to approximate current position of the character to the closest grid point, and calculate new path from there, It's very easy with basic grid systems, like:
closestGridCellX = Math.round(this.x / gridCellSize);
closestGridCellY = Math.round(this.y / gridCellSize);
Related
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.
This question may get downvoted or go unanswered because it's not the greatest and incredible silly but anyway,
I'm taking an intro level Webanimation course this semester at UNI and had I know what their expectations are for our hand-in projects i would have never taken it up.
Basically the teacher taught us stuff to the extent of masking/tweening and very few mouse-event and basic function codes.
Now she is expecting us to make a god damn ENTIRE PIPE GAME. The one where there are a bunch of rotating pipes and you gotta rotate them in place before a timer runs out and then the water flows through them.
For this project I have to somehow figure out the following (even though she didn't teach any of this):
-creature a grid of rotate-able pipes (one mouse click I assume would do a 90 degree classic tween rotation of the object)
-creature some sort of logic hit-box value chain to make pipes decide when to fill with water (they fill with water (a.k.a turn blue inside as an animation) once they are connected to another water filled pipe, for example)
-creature multiple levels and a menu screen
-add a music track.
Now i know this site is for specific help only and you basically can't ask for help on an entire project, so for now if somebody could just help me out with the following:
How do I create a rotating pipe on mouseclick?
So I have my pipe movieclip created and I have my Mouse Event code ready but I don't have the faintest on how to make a tween within the pipe and connect it to the code so that it rotates on mouseclick.
So this far, let's say for one of the pipes, instance pipe_1, I want to do this:
pipe_1.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler);
function fl_MouseClickHandler(event:MouseEvent):void
{
trace("Mouse clicked");
}
I also have the simple tween of rotation already created within the instance of the pipe, but dunno how to connect it to code.
I'm supposed to figure out what to put inside the function but I honestly have no clue. Hours of googling have come up with nothing either except a 12 dollar purchasable source code for an even more complicated pipe game.
I hope somebody can at least help a bit, and thanks.
The way to rotate a clip is via it's rotation property. It defaults to 0.
If you were set the rotation property of your tile to 90, you'd rotate your pipe tile 90 degrees.
for example :
pipe_1.rotation += 90;
A tween is a means of changing a property of a given DisplayObject over time. So what you want to do is tween your rotation property 90 degrees over time.
Here is a tutorial on Tweening - http://www.republicofcode.com/tutorials/flash/as3tweenclass/
I think it'd be more beneficial for you to take the time to learn about it, than to have me just write a few lines of code to solve your problem.
StackOverflow is a place where you can ask a question, AFTER you have tried something and have hit an issue.
I have provided you with the basic concept of what you need to do, and if you take the time to learn about tweening, you'll be able to achieve your goal rather simply.
There are also tweening libraries such as TweenLite and TweenMax that simplify tweening. Not sure if your class will allow you to use them, but worthwhile to check out for your own benefit.
You can find TweenLite here :
http://www.greensock.com/tweenlite/
Are you talking about a frame by frame tween? or tweening with code?
for frame by frame tweening, you can try to do this:
pipe_1.addEventListener(MouseEvent.CLICK, f1_MouseClickHandler);
function f1_MouseClickHandler(e:MouseEvent) {
pipe_1.gotoAndPlay(2); //if the tween starts at frame 2
}
For code tweening, just call the tween function inside that handler function
I simply added a sprite in AS3:
Sprite myspr = new Sprite();
myspr.addChild(mybitmap);
addChild(myspr);
Then I added an event. I did hitTestPoint for checking mouse is over my sprite or not.
stage.addEventListener(MouseEvent.MOUSE_MOVE, mouseCheck);
private function mouseCheck(evt:MouseEvent):void {
var xx:int = stage.mouseX;
var yy:int = stage.mouseY;
if(myspr.hitTestPoint(xx, yy, true)) {
...
// I'm checking mouse over here.
}
evt.updateAfterEvent();
}
Problem is: hitTestPoint gives true when mouse comes to full boundary box. But it should give true only if mouse comes on transparent isometric sprite.
Is there a solution for this, thanks in advance.
this should help. You need pixel perfect detection.
Actionscript 3 pixel perfect collision. How to? (learning purposes)
http://www.freeactionscript.com/2011/08/as3-pixel-perfect-collision-detection/
http://www.anotherearlymorning.com/2009/07/pixel-perfect-collision-detection-in-actionscript-3/
http://old.troygilbert.com/2009/08/pixel-perfect-collision-detection-revisited/
There's a few ways I usually do hit testing.
1) The easiest way is to use a an already made class that you can find online. Some people much smarter than me have created complex classes that allow for much better pixel to pixel interaction. The ones listed by Paras are all good. The problem with these is, for newer users, it can be hard to understand all the code and how to implement them. Usually it is simple once you understand what is going on though. You just replace your hit test with the class file and then enter in the correct arguments.
2) Another method is to actually go into the symbol, create a new layer, and then draw a rectangle(just turn the alpha down to 0%) where you want the hit test to work. This may seem like a stupid method, after all we are just confined to a square once again. BUT, it will actually work MUCH better than you'd expect. Just draw the square maybe slightly smaller than the height and width of your character you're detecting the hit test on, and you should be good to go. Give it an instance name (the hit square that is) and then just perform the hitTest with that square instead of the actual sprite. It works wonderfully and is a very simple solution. For what you're explaining though, this sounds like it might not work. This method is more from a gamer standpoint. It looks good when attacking and getting hit by enemies, but isn't necessarily exact. Also, if you want to do this with two characters (maybe a large attack hitting an enemy) simply draw a hit box for both sprites. This is probably a little more basic than using a pre-made pixel perfect hit detection test, but it works extremely well and takes only a few minutes.
I'm working on a side scroller, and for the enemy I'm making a turret. I'm trying to make the turret aim at the player but I cant seem to get it right. Below is a rough sketch of what I want to achieve:
I want the barrel (dark blue), to aim/rotate to its pointing at the player.
I have uploaded a YouTube video of my scene:
http://www.youtube.com/watch?v=eeP47VoX9uA&feature=youtu.be
This is what I have so far (loop):
function enterFrameHandler(e : Event) : void{
_turretBarrel.rotation = Math.atan2(enTarget.x, enTarget.y) * 180/Math.PI;
}
What this does is only rotate the barrel when I jump, and the barrel isn't even aiming at the player, also the barrel doesn't change rotation when I walk on the other side of the turret.
My enTarget.x is always central to the stage and the scene (including the turret) moves around the player left and right (x)... Only the enTarget.y moves (jump/high platform).
I'm slightly new to Flash and ActionScript. If anyone could help me out, or point me in the right direction then that would be great.
Thanks
1) Make sure you got the right numbers and the position of the avatar and the turret are in the same coordinate space. A simple trace of each would do. In this case you probably want the world (relative to stage) position of both clips. Make sure they make sense compared to top left corner of the screen (0, 0).
2) Remember that _turretBarrel.rotation is a rotation that ranges from -180 to 180 so this would need to be taken into consideration when calculating angles.
3) Make sure you use the corresponding degrees/radians where appropriate.
4) force focus on avatar, run the game and see if the bounds looks ok. Then do the same thing with the turret.
Another good thing in general for debugging purposes is to setup some kind of debug graphics. i.e. draw a line of what you think is the direction vector to verify your numbers and calculations.
On a side note:
This is what the majority of programming is; Debugging. Assume nothing but hard facts, get your numbers from the debugger (probably quicker), or trace output. If you're still using the horrible flash professional IDE. I would really recommend getting one with a proper debugger like FlashDevelop (free) or Flash Builder (commercial)
Oliver, it looks like you are calculating the tangens of wrong angle (between player and X-axis). You need something like the following:
function enterFrameHandler(e : Event) : void{
_turretBarrel.rotation = Math.atan2(enTarget.x - barrel.x, enTarget.y - barrel.y) * 180/Math.PI;
}
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.