I would like to get the touch screen drawing position (x and y) and direction (moving up or down or left or ....), then I will compare it with some stored positions and directions for characters (as we are trying to teach character writing). Isn't there any known library or helping things for this?
Thanks in advance
Every DisplayObject has the properties mouseX and mouseY, that indicate the mouse position with respect to its origin.
To get the direction, save the values of both properties and compare them to the next ones. Say for example within the handler of a MouseEvent.MOUSE_MOVE Event.
Related
I'm trying to write a simple flash game like Space Invaders. When the ship shoots I check if bullet hits the enemy with simple if like below:
if (bullet.hitTestObject(enemy)) {
var explosion = new Explosion(enemy.x, enemy.y);
stage.addChild(explosion);
explosions.push(explosion);
//Rest of logic like removing bullet and enemy from stage
}
What I expected to see was an Explosion instance appearing somewhere around the coords where bullet hit the enemy and that it would stay in place. Instead explosion seems to be appearing completely elsewhere and is moving in the same direction the enemy was (opposite direction to bullet). It seems that my assumption about successfully getting coordinates in a way presented above isn't right. Is there any other way to get it at least approximately? It doesn't have to be pixel-perfect, but I don't want explosion to appear on the other side of the stage.
Thanks for any suggestions.
It's not about getting the coordinates but having in mind where your children are added.
If the container is moved around, and you add the explosion to other container, the coordinates will mess up - each object has an internal coordinate system starting from 0,0.
Best advise would be to manually understand where's the difference and where are your children added. Common way to fix this is to add all your children at 0,0. This will give you full control and nevertheless an idea of how Flash works.
If you are unable to do so, you can always use globalToLocal and localToGlobal methods that will help you convert those coordinates to a global (Stage) ones, and vise versa.
I am trying to achieve a simple throw effect in as3:
I put my finger on the screen and then swipe it as if I throw an object.
The goal is to simulate a ball movement according to the swipe (direction, speed)
What gesture should I use?
I tried TransformGestureEvent.GESTURE_SWIPE
But this just give me the direction (left right, top, bottom) and no velocity or force or speed.
regards
There are many libraries and frameworks that handles touch input and can process complex gestures, you can google for them and find many easily.
You can also write your own, simple input processor that will give you the desired info.
On touch begin set values to 3 variables:
start x
start y
timestamp
Get the starting position be either the screen global position (you can access it from the TouchEvent object on your handler) or on the InteractiveObject (e.g. Sprite) mouseX and mouseY - that will give you relative position.
Timestamp can be easily taken with getTimer(), also the fastest way to get timestamp in Flash.
On touch end get other 3 variables
end x
end y
end timestamp
Knowing the difference of x and y positions and the time spent to make a gesture you'll be able to find the desired data - angle (using trigonometry or Math.atan2()), velocity, speed, force (by distance between x,y or time delta or both)
Hope that answers your question!
I've tried unsuccessfully (because of my poor 3D geometry understanding and unfortunate lack of time to dig in) to build a GoogleEarth-like controls for three.js. Maybe someone can help me, or might already have it. Anyways, i think it would be an excellent addition to three.js library.
Here's the specific functionality I am trying to build:
Zoom in with mouse wheel TO MOUSE CURSOR
Rotate around the scene by holding down Shift
Pan by pressing left mouse button.
As a bonus: show a little target icon during 1 and 2 operations above.
I have most trouble with 1, and haven't attempted 2. Panning is easy (there are lots of examples).
Right now I am unable to zoom into the scene so that it stays fixed under the cursor (so I can point at the top right corner of the screen, zoom-in and still see what I had under the cursor).
My thanks in advance,
Alex
I've implemented something similar in a past life. I assume here that you are interacting with a flat plane; conversion of these techniques to a plane tangent to a sphere is left as an exercise for the reader. ;)
Zoom in with mouse wheel TO MOUSE CURSOR
To do this, you'll want to cast a ray into the scene, and note where it hits. You'll then want to translate the eye point of the camera towards that intersection. To feel "correct", you'll want some kind of proportional zoom in instead of fixed steps--for example, each zoom step reduces the distance from the current eye point to the target by 20%, instead of just moving 20 units. This will automatically slow down the camera as it approaches.
Rotate around the scene by holding down Shift
One you hold shift, you'll want left and right mouse movements to orbit about your view point. To do this, you'll need to yaw about an axis perpendicular to your point of intersection. You'll cast a ray into the scene (once shift is held down), note the intersection point, and then rotate your camera's eye point about that axis. Note that you'll need also to reorient the camera to continually point towards that intersection as you rotate, or perhaps to have the eye direction rotate to keep a constant angle with the vector from the eye point to the intersection axis.
Pan by pressing left mouse button.
You simply need to get the eye right vector and eye up vector, and move in the appropriate direction (multiply the mouse dx/dy with the normalized eye right/eye up, and multiply by the timestep for framerate independent movement).
As a bonus: show a little target icon during 1 and 2 operations above.
At the intersection in the scene, add a little object. Once you exit a mode, remove the object.
for your first question you can use this program under mouse wheel
mousewheel = function (event) {
event.preventDefault();
var factor = 15;
var mX = (event.clientX / jQuery(THREE_STUFF.container).width()) * 2 - 1;
var mY = -(event.clientY / jQuery(THREE_STUFF.container).height()) * 2 + 1;
var vector = new THREE.Vector3(mX, mY, 0.1);
vector.unproject(camera);
vector.sub(camera.position);
if (event.deltaY < 0) {
camera.position.addVectors(camera.position, vector.setLength(factor)); trackBallControls.target.addVectors(trackBallControls.target, vector.setLength(factor));
} else {
camera.position.subVectors(camera.position, vector.setLength(factor)); trackBallControls.target.subVectors(trackBallControls.target, vector.setLength(factor));
}
}
I hope this will help you sure.
I'm currently working on a game with html5/js, using box2dweb for the collision but I'm running into the issue where I am required to scroll the level with the player. Box2d renders directly to the 2d context so I think in it's current state there is no way to shift the render portion of the canvas?
In as3 you could just put everything in a movieclip and change it's position accordingly.
So, is it possible in anyway to have control of a camera of some sorts or the render portion of the canvas object to shift it's 'position' to keep the player centered at all times?
Thanks in advance,
M0rph3v5
Box2D, by itself, doesn't draw anything, it just calculates positions/collisions.
It offers the so-called "Debug Drawing", but it's purpose is... debug.
Anyway you could start from there to add all the needed features.
http://code.google.com/p/box2d/wiki/FAQ
Yeah I figured, turns out I had to use a context.translate right before the debugdraw as well to 'shift' everything. Got it working nicely now.
EDIT:
The code I'm currently using
context.save();
context.translate(-1*xpos+(canvas.width/2),-1*ypos+(canvas.height/2));
context.rotate(cars[carid].angle);
context.drawImage(carSprite, -carspritewidth/2, -carspriteheight/2);
context.restore();
where xpos and ypos are the x and y positions of the car, after that i just draw the actual car sprite at 0,0 (with the carsize divided as the center).
Same as the question:
I need to drag a component along a programmatically drawn path composed by different kinds of graphic, like lines, curves, etc.
I've already googled it, but with no success.
Any ideas? thanks!
The following is say for a linearly curved path drawn by you. You can use similar method for any direction.
Add an Event listener for click.
(That starts drag)
Track the user's mouse along x
direction for example.
Keep plotting the component's x & y as
Mouse x changes with respect to the
drawn path's x.
Stop relocating as user leaves the
mouse
Start with this if possible & be back with code if you get doubts.
If your drawing part is complete then You can use two dimensional ByteArray. The size of the ByteArray will be the size of your stage, this two-dimensional array will be set to zero, means all your stage locations are set to zero. When any curve or line is drawn , set those locations to one. Now you know at-least where your object can move, the valid locations are those which are set to one.
Now the second the part is how to move an object on the valid path or location using mouse or keyboard.
You will be using Event.EnterFrame for smooth and fast movement of the object,
1--using keyboard.
use up key to move object to upper location if that position or location is set to one else the object will not move Up, same for others.
2-- using mouse move event, detect MouseY position for moving UP or DOWN w.r.t current position of MouseY , and move it respectively if location is set to one.
Hope, this will guide you in right direction...
Will this work? http://www.pixeldigest.com/followthepath.html