Develop Reference

Java LibGDX relative value addition based on angle and position

I create a 2d game similar to a classic diepio. I created a system for positioning the player's barrel in a specific direction. The updated angle is sent to the server. When the player clicks, the server creates a missile. This only works correctly when the barrel is attached to the center of the player's body. When I want to move the barrel away from the center of the body, there is a problem. I don't know how to update the server-side position where the projectile spawns.
In the image below, the barrel rotates around the center of the player's body. I marked the missile's flight path with the red line.
On this image, the barrels also have a rotation axis in the player's center, but have been shifted to the side. The green line marked the route the missile should take. Unfortunately, I don't know how to do it correctly.
How to update the projectile's spawn point by a given distance (e.g. 10) from the basic distance (if the barrel was not moved) based on the player's angle of rotation and his position?
Projectile spawn method:
float angle = (float) ((player.getRotation() + 90) * Math.PI / 180f);
float forceX = (float) Math.cos(angle);
float forceY = (float) Math.sin(angle);
spawnProjectile(player.getPosition().x + (forceX * 3f), player.getPosition().y + (forceY * 3f));

If I understood your question correctly, you want to find the two points marked in orange in the following image:
Since you know the direction in which the missiles should fly (the red line), the distance from the center position (e.g. 10) and you know that there is a 90° angle between the movement vector of the missile (red line) and the connection line between the two starting positions of the missiles (marked as black line in the image) you can calculate the resulting positions like this:
float angle = (float) ((player.getRotation() + 90) * Math.PI / 180f);
float forceX = (float) Math.cos(angle);
float forceY = (float) Math.sin(angle);
// the center point (start of the red line in the image)
float centerX = player.getPosition().x + (forceX * 3f);
float centerY = player.getPosition().y + (forceY * 3f);
float offsetFromCenterDistanceFactor = 1f; // increase this value to increase the distance between the center of the player and the starting position of the missile
// the vector towards one of the starting positions
float offsetX1 = forceY * offsetFromCenterDistanceFactor;
float offsetY1 = -forceX * offsetFromCenterDistanceFactor;
// the vector towards the other starting position
float offsetX2 = -offsetX1;
float offsetY2 = -offsetY1;
//spawn the upper missile
spawnProjectile(centerX + offsetX1, centerY + offsetY1);
//spawn the lower missile
spawnProjectile(centerX + offsetX2, centerY + offsetY2);
For more detail on the calculation of the orthogonal vectors see this answer.

Android contains method on arcs not working properly

I have custom view control, which looks like this:
Inside my activity I want to be able to move this view around the screen by dragging it on green Arcs (left or right does not matter).
Also want to be able to detect if yellow arc at top is tapped, middle circle or bottom arc.
I'm having trouble to detect where the tap is in which area. This is the code that I'm using inside of my activity:
float dX, dY;
final MyCustomView myCustomView = (MyCustomView)findViewById(R.id.test);
final Boolean[] movable = {false};
myCustomView.setOnTouchListener(new View.OnTouchListener() {
#Override
public boolean onTouch(View view, MotionEvent event) {
switch (event.getActionMasked()) {
case MotionEvent.ACTION_DOWN:
movable[0] = false;
dX = view.getX() - event.getRawX();
dY = view.getY() - event.getRawY();
int x = (int) event.getX();
int y = (int) event.getY();
if (myCustomView.leftArcRegion.contains(x,y) || myCustomView.rightArcRegion.contains(x,y)){
movable[0] = true;
} else if (myCustomView.topArcRegion.contains(x,y)){
//todo: do something if top arc area is selected
} else if (myCustomView.midRoundedBitmapRegion.contains(x,y)){
//todo: do something if mid bitmap area is selected
} else if (myCustomView.bottomArcRegion.contains(x,y)){
//todo: do something if bottom arc area is selected
}
break;
case MotionEvent.ACTION_MOVE:
if (movable[0]) {
view.animate()
.x(event.getRawX() + dX)
.y(event.getRawY() + dY)
.setDuration(0)
.start();
}
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
break;
default:
return false;
}
return true;
}
});
And these are public fields from my custom view control:
public Region topArcRegion;
private Path topArc;
//topArc is my top arc path
RectF rectFTop = new RectF();
topArc.computeBounds(rectFTop, true);
topArcRegion = new Region();
topArcRegion.setPath(topArc, new Region((int) rectFTop.left, (int) rectFTop.top,
(int) rectFTop.right, (int) rectFTop.bottom));
But it looks like it uses rectangular shapes for these regions, not arcs when checking with this "contains" method. And because of that I'm not getting expected results.
So, how can I detect where is initial tap (top arc, bottom arc, side arcs or middle bitmap) in order to apply my app logic?

Since you're only looking to detect touches inside an arc segment, it should't be too complicated.
Each of your arc segments is defined as the space between two concentric circles and between start and end angles. So all you really want to do is do a little trig to determine the distance from the center of the circles to your touch point and the angle from the center to your touch point.
float x = touchevent.getX();
float y = touchevent.getY();
// Transform relative to arc centers
x -= circle1.x;
y -= circle1.y;
double dist = Math.sqrt(x*x + y*y);
double angle = Math.atan2(y,x) * 180 / Math.PI;
// Given an arc segment defined by circle1, circle2, angle1, angle2:
boolean touch = dist > circle1.radius && dist < circle2.radius &&
angle > angle1 && angle < angle2;
You'll probably have to play around a bit depending on whether angle1 > angle2 or vice versa. If there's any chance that any of the angles cross the zero-degree angle, it gets a little trickier.
Meta: For clarity, I used sqrt() to compute distance, but you can optimize this code by skipping the sqrt() and compare distance² instead:
double dist2 = x*x + y*y;
if (dist2 > circle1.radius * circle1.radius &&
dist2 < circle2.radius * circle2.radius &&
...
One more edit: computing trig functions can be expensive; certainly a lot more expensive than computing distance².
In the interest of optimization, you should check the distance against the circle radii before bothering with the trig:
boolean touch = dist > circle1.radius && dist < circle2.radius;
if (touch) {
// This is only a *possible* touch, check the angles now
double angle = Math.atan2(y,x) * 180 / Math.PI;
touch = angle > angle1 && angle < angle2;
}

Dragging rotated text inside android canvas does not work as expected

There is something I am missing inhere so I hope you can share some light on me.
I am drawing some text inside canvas. For this I have a class Word
public class Word {
private int x;
private int y;
private String text;
}
The app allows the user to rotate the text, and I handle the rotation withing onDraw
protected void onDraw(Canvas canvas) {
canvas.save(Canvas.MATRIX_SAVE_FLAG);
canvas.rotate(angle, centerX, centerY)
...
canvas.drawText(word.getText(), word.getX(), word.getY())
....
canvas.restore();
}
The problem I get is when the user drags the canvas and there is a rotation set. When angle=0 the movement is going as expected.
#Override
public boolean onTouchEvent(MotionEvent event) {
case MotionEvent.ACTION_DOWN:
initialX = (int) event.getX();
initialY = (int) event.getY();
break;
case MotionEvent.ACTION_MOVE:
int currentX = (int) event.getX();
int currentY = (int) event.getY();
int xMovement = currentX - initialX;
int yMovement = currentY - initialY;
dragWords(xMovement, yMovement);
.....
and on dragWords for each word I do:
private void dragText(int xMovement, int yMovement){
for (Word word : words) {
word.setX(word.getX() + xMovement);
word.setY(word.getY() + yMovement);
}
invalidate();
}
When rotation angle is 0, moving up/down/left/right makes the words move by the same distance. As angle gets bigger, the words start to move in different dirrections, for instance at 60, it is starting to go diagonally up, when 180 it only moves up/down and not left/right.
I think I need to calculate some sort of a difference based on angle and add it to xMovement/yMovement... but how should I do this ?
LE: Here is an image on how it behaves:
The blue lines is how the text is moving on drag while the orange is the finger dragging on the screen. When angle is 0 it works quite well, when angle increases, it starts to move diagonally on left/right, while when angle is even bigger, it only moves up and down and does not respond to left/right

If I understand correctly, the issue is that Canvas.rotate() does not only rotate the text direction, but rather the whole canvas. Therefore, the x-y coordinates of the words are also rotated from the specified pivot point.
In order to match the dragging movement, you can use a Matrix for this, more specifically the inverse matrix of the one you're using to rotate the canvas. It will be used to convert the x-y coordinates of the words to their original, pre-rotate locations.
For example, calculate this once, and update it whenever angle, centerX, or centerY changes.
// rotMatrix is the same operation applied on the canvas.
Matrix rotMatrix = new Matrix();
rotMatrix.postRotate(mAngle, centerX, centerY);
// Invert it to convert x, y to their transformed positions.
Matrix matrix = new Matrix();
rotMatrix.invert(matrix);
Then, when drawing each word:
int wordX = ...
int wordY = ...
String text = ...
float[] coords = new float[] { wordX, wordY };
matrix.mapPoints(coords);
canvas.drawText(text, coords[0], coords[1], paint);

In the ellipses part in the following code:
dragWords(xMovement, yMovement);
..... <<<--------------------- I hope you are updating initialX and initialY
initialX = currentX;
initialY = currentY;
Otherwise, your x and y values will not correspond correctly with the amount of distance moved during the touch gesture.
As user matiash indicated, you should use Matrix#mapPoints(float[]) to transform your x and y values. Declare and initialize a Matrix:
Matrix correctionMatrix;
// Your view's constructor
public MyView() {
....
correctionMatrix = new Matrix();
}
Here's how your onDraw(Canvas) should look like:
#Override
protected void onDraw(Canvas canvas) {
canvas.save(Canvas.MATRIX_SAVE_FLAG);
canvas.rotate(angle, centerX, centerY);
...
// Neutralize the rotation
correctionMatrix.setRotate(-angle, centerX, centerY);
// Initialize a float array that holds the original coordinates
float[] src = {word.getX(), word.getY()};
// Load transformed values into `src` array
correctionMatrix.mapPoints(src);
// `src[0]` and `src[1]` hold the transformed `X` and `Y` coordinates
canvas.drawText(word.text, src[0], src[1], somePaint);
....
canvas.restore();
}
This should give you the desired results - movement in the X and Y axis irrespective of canvas rotation.
You can obviously move the call to setRotate(float, float, float) to a better place. You only need to call it once after changing the angle value.

Java 2D "tank" game: Shooting 'missile' from rotated sprite doesn't work

EDIT: Problem solved. I forgot putting Math.toRadians() anywhere I do Math.cos or Math.sin. :)
I'm working on a simple Java 2D game involving two tanks that shoot missiles and move around the screen.
For this question, let's assume there's only one tank.
Controls:
Adjust angle of movement counter-clockwise: LEFT arrow key
Adjust angle of movement clockwise: RIGHT arrow key
Move forward: UP arrow key
Shoot missile: ENTER
Pressing LEFT or RIGHT also rotates the sprite.
I tried to code the game so that missiles will shoot from the "tank barrerl" (point marked in green). However, the code I wrote doesn't achieve this.
Instead, when pressing ENTER the missile appears in a point on the sprite or around it, that seems to be random.
(Orange point is the tank's origin: tank.getX(),tank.getY() ).
It wouldn't be a problem to code this, if it weren't for the fact the the tank rotates. The location of the green point changes everytime the user rotates the tank.
What is wrong with my code? This code should make the missile 'shoot' from wherever the "barrel" currently is. As I said, doesn't work.
This is what runs when the user presses ENTER.
enterAction = new AbstractAction(){
public void actionPerformed(ActionEvent e){
double missileXposition, missileYposition;
double tankMiddleX,tankMiddleY;
double angle, radius;
tankMiddleX = tank1.getX() + (tank1.getWidth()/2);
tankMiddleY = tank1.getY() + (tank1.getHeight()/2);
angle = tank1.getAngle();
radius = tank1.getWidth()/2;
missileXposition = tankMiddleX + ( Math.cos(angle) * radius );
missileYposition = tankMiddleY + ( Math.sin(angle) * radius );
missiles1.add( new Missile( missileXposition, missileYposition , "red" , tank1.getAngle() , tank1) );
}
};
The Missile class:
public class Missile extends Entity {
public Missile(double x, double y, String type, double angle, Tank tank){
this.x = x;
this.y = y;
this.dx = dx;
this.dy = dy;
this.type = type;
this.angle = angle;
if(type.equals("red")) image = new ImageIcon(this.getClass().getResource("sprites/redrocket1.png")).getImage();
if(type.equals("blue")) image = new ImageIcon(this.getClass().getResource("sprites/bluerocket1.png")).getImage();
width = image.getWidth(null);
height = image.getHeight(null);
if(type.equals("blue")) dx = (-1) * ( 6 * Math.cos(Math.toRadians(tank.getAngle())) );
if(type.equals("red")) dx = 6 * Math.cos(Math.toRadians(tank.getAngle()));
if(type.equals("blue")) dy = (-1) * ( 6 * Math.sin(Math.toRadians(tank.getAngle()) ) );
if(type.equals("red")) dy = 6 * Math.sin(Math.toRadians(tank.getAngle()));
}
}
Thanks a lot

Determine the distance between the sprite's origin (orange) and the missile start point (green) (d)and the angle between the upper rim of the sprite and the line orange-green a.
Now you set the start point of the missiles to
tank1.getX()+Math.cos(d*Math.toRadians(a+tank1.getAngle()));
tank1.getY()+Math.sin(d*Math.toRadians(a+tank1.getAngle()));
I don't know whether it's 100% correct, but I think it's the right direction.

Controlling XY Movement by finger dragging in Android

I'm currently making a 2D scrolling shooter game on Android using AndEngine but I'm having an issue with relative touch control which allow player to control the sprite by dragging the finger up/down/left/right to move the ship and the ship should move to the same direction as the finger just like controlling pointer by touchpad (It is pretty common in touchscreen Space Invader-like games nowadays)
So I came up with this code,
float oldX, oldY;
float X, Y;
public boolean onSceneTouchEvent(Scene pScene,
TouchEvent pSceneTouchEvent) {
if(pSceneTouchEvent.isActionMove()){
float currentX = pSceneTouchEvent.getX();
float currentY = pSceneTouchEvent.getY();
float deltaX = currentX-oldX;
float deltaY = currentY-oldY;
System.out.println("X: " + X + " Y: " + Y);
X= X + deltaX;
Y= Y + deltaY;
oldX = currentX;
oldY = currentY;
}
return true;
}
The problem that I'm having is that variable X, Y which I'll be using to set the sprite position on the screen isn't increasing/decreasing according to my finger movement, if I continuously dragging my finger right side, the X value should be increasing continuously and when I drag my finger left side, the X value should be decreasing continuously also. But what I'm having is that the X value is increasing/decreasing according to the position of my finger on the screen. Am I doing anything wrong ?

I guess the tablet is not able to combine several sweeps. A horizontal sweep is generally a gesture, not a movement.
I think you should set the position of the pointer when you stop sweeping, so you can start fresh with a new sweep.
Please also take a look at Gestures in Android:
http://mobile.tutsplus.com/tutorials/android/android-gesture/
http://www.anddev.org/gesturedetector_and_gesturedetectorongesturelistener-t3204.html
there is a method onScroll(args) in OnGestureListener, that might help you and save time.