Develop Reference

When converting a position from my HUD viewport to my game-area viewport, why are the Y-values incorrect on my android app?

I'm building a mobile Box2D body/joint editor in libGDX, but I'm getting inconsistent results between my desktop and android builds, the android build producing incorrect position Y-values. In summary, the editor consists of a HUD with its own FitViewport for consistent screen presence, and the actual build area grid with its own FitViewport that can be navigated and zoomed, much like any run-of-the-mill image editor. The user touches the screen, and a target appears above that position that can be dragged around to select points on the grid, connecting points that serve as the vertices of the shapes that will become Box2D bodies. This target-selector exists on the HUD viewport so that it can remain a static size if the user were to zoom in on the grid area. So, in order to select a point on this grid, I have to convert the target's position in the HUD viewport to screen coordinates, then convert it to that point on the build area grid. Next to the target, I have a BitmapFont that renders text of the targets current position.
So here's an example of my problem. Let's say the target is at the arbitrary point (0,0) on the grid. The text would say "0,0". In my desktop build it does this accurately. In my Android build, the Y-value is offset by varying values, based on camera zoom, even though that point is without a doubt (0, 0) in that space(The bottom-left of the grid is coded at 0,0). I don't understand how this could happen, since both builds share the core module where this code resides. I knew this would be hard to explain, so I took some screen shots.
These images show the desktop build, no issues, correct values:
desktop app image, default zoom, y-value is correct
desktop app image, camera zoomed in, y-value is still correct
These images show the android build, y-value is incorrect but becomes more correct as the camera zooms in:
android app image, default zoom, y-value is way off
android app image, zoomed in, y-value is closer to correct but still off
I really want to show some code, but I have no idea which parts are relevant to this issue. Essentially what is happening is that the user touches the screen, the target pops up 200px (HUD stage local) above that point, the targets position is converted to screen coordinates, then unprojected to build area grid coordinates. What gets me is that the Y-values are correct in the desktop build, so why would they be different in the android build. Here is my TargetSelector class where everything goes down:
public class TargetSelector extends Group {
private ShapeRenderer shapeRenderer;
private BitmapFont font;
private Vector2 position;
private float yOffset;
private boolean targetActive;
private Vector2 unprojectedPosition;
private OrthographicCamera linkedCamera;
private boolean hasLink = false;
public TargetSelector(){
initShapeRenderer();
initTargetFields();
initFont();
initInputListener();
}
private void initShapeRenderer(){
shapeRenderer = new ShapeRenderer();
shapeRenderer.setAutoShapeType(true);
shapeRenderer.setColor(Color.RED);
}
private void initTargetFields(){
unprojectedPosition = new Vector2();
position = new Vector2();
yOffset = 200;
targetActive = false;
}
private void initFont(){
font = new BitmapFont();
font.getData().scale(1.0f);
font.setColor(Color.WHITE);
}
private void initInputListener(){
setBounds(0, 0, Info.SCREEN_WIDTH, Info.SCREEN_HEIGHT);
addListener(new InputListener(){
#Override
public boolean touchDown(InputEvent event, float x, float y, int pointer, int button) {
targetActive = true;
position.set(x, y).add(0, yOffset);
return true;
}
#Override
public void touchDragged(InputEvent event, float x, float y, int pointer) {
position.set(x, y).add(0, yOffset);
}
#Override
public void touchUp(InputEvent event, float x, float y, int pointer, int button) {
targetActive = false;
}
#Override
public void exit(InputEvent event, float x, float y, int pointer, Actor toActor) {
targetActive = false;
}
});
}
#Override
public void act(float delta) {
super.act(delta);
if(targetActive && hasLink){
updateUnprojectedPosition();
}
}
#Override
public void draw(Batch batch, float parentAlpha) {
if(targetActive){
batch.end();
Gdx.gl.glEnable(GL20.GL_BLEND);
Gdx.gl.glBlendFunc(GL20.GL_SRC_ALPHA, GL20.GL_ONE_MINUS_SRC_ALPHA);
shapeRenderer.setProjectionMatrix(getStage().getCamera().combined);
shapeRenderer.begin();
// Render target
Gdx.gl20.glLineWidth(3);
shapeRenderer.set(ShapeRenderer.ShapeType.Line);
shapeRenderer.setColor(Color.RED);
shapeRenderer.circle(position.x, position.y, 32);
shapeRenderer.circle(position.x, position.y, 1);
// Render position text background
Vector2 fontPosition = position.cpy().add(64, 64);
shapeRenderer.set(ShapeRenderer.ShapeType.Filled);
shapeRenderer.setColor(0, 0, 0, 0.5f);
shapeRenderer.rect(fontPosition.x - 8, fontPosition.y - 32, 172, 40);
shapeRenderer.end();
Gdx.gl.glDisable(GL20.GL_BLEND);
Gdx.gl20.glLineWidth(1);
batch.setProjectionMatrix(getStage().getCamera().combined);
batch.begin();
// Render position text
String text;
if(hasLink)
text = "(" + (int) unprojectedPosition.x + " , " + (int) unprojectedPosition.y + ")";
else
text = "No Link";
font.draw(batch, text, fontPosition.x, fontPosition.y, 100, 10, false);
}
super.draw(batch, parentAlpha);
}
public void updateUnprojectedPosition(){
Vector2 screenPosV2 = localToScreenCoordinates(position.cpy());
Vector3 posV3 = new Vector3(screenPosV2.x, screenPosV2.y, 0);
linkedCamera.unproject(posV3);
unprojectedPosition.set(MathUtils.round(posV3.x), MathUtils.round(posV3.y));
}
public void linkToCamera(OrthographicCamera camera){
if(camera != null){
linkedCamera = camera;
hasLink = true;
}
}
}
The linkedCamera is assigned in a manager class that handles the relationship between all HUD actions and the build area grid.
This is my first time ever asking a question here, I'm sorry if I'm being too verbose but the issue is complicated to explain, at least it was for me.

JavaFX 8 3D animation

I am making a little JavaFX 8 project. I need some advices how to do the animation correctly. Something about the project. It's a program which animates the flow of a charged particle through magnetic field. All the needed values are taken from GUI where user puts them into textFields. After button click we are transfered to 3D scene where my point is shown as Sphere, all values are set up. And the field line is printed in it's directory.
The question is how to do the propper animation. I was trying to work with my Sphere X Y Z coordinates, but couldn't find any way to set those. The motion in Z plane should be linear with the same speed. And motion in XY planees should be circular. Can I do it with Path Transition?
My vision is to create the tick animation which draws the Spheres through the path. Whith a further tick the next sphere will be drew with new coordinates calculated by translation vector.

Is this possible using a PathTransition? No, paths are 2 dimensional in javafx, but you need a 3D movement.
Note that sphere coordinates not a good coordinate system to discribe such a movement either, since the calculation of the angles is a bit complex.
A coordinate system better suited would be cylinder coordinates.
You could use several transforms and animate those using a Timeline animation to achieve this kind of movement though:
private static void animateSphere(Sphere sphere) {
Rotate rot = new Rotate();
Translate radiusTranslate = new Translate(50, 0, 0);
Translate zMovement = new Translate();
sphere.getTransforms().setAll(zMovement, rot, radiusTranslate);
Timeline tl = new Timeline(
new KeyFrame(Duration.ZERO,
new KeyValue(zMovement.zProperty(), 0d),
new KeyValue(rot.angleProperty(), 0d)),
new KeyFrame(Duration.seconds(4),
new KeyValue(zMovement.zProperty(), 900d, Interpolator.LINEAR),
new KeyValue(rot.angleProperty(), 720, Interpolator.LINEAR))
);
tl.setCycleCount(Timeline.INDEFINITE);
tl.play();
}
#Override
public void start(Stage primaryStage) {
Sphere sphere = new Sphere(30);
Pane root = new Pane(sphere);
Scene scene = new Scene(root, 400, 400, true);
PerspectiveCamera camera = new PerspectiveCamera();
camera.setTranslateZ(-10);
camera.setTranslateX(-500);
camera.setTranslateY(-200);
camera.setRotationAxis(new Point3D(0, 1, 0));
camera.setRotate(45);
scene.setCamera(camera);
animateSphere(sphere);
primaryStage.setScene(scene);
primaryStage.show();
}
Your movement is a spiral movement and therefore the following combination of transformations will move the Sphere appropritately:
translate by radius (z component 0)
rotate to appropriate angle
translate in z direction
Note: Transforms are applied in reverse order in which they occur in the transforms list.
Alternatively you could write a helper that can be used with cylinder coordinate parameters and write the appropriate x, y and z values:
public class CylinderCoordinateAdapter {
private final DoubleProperty theta = new SimpleDoubleProperty();
private final DoubleProperty radius = new SimpleDoubleProperty();
private final DoubleProperty h = new SimpleDoubleProperty();
private static final Point3D DEFAULT_AXIS = new Point3D(0, 0, 1);
private Point3D axis2;
private Point3D axis3;
private final ObjectProperty<Point3D> axis = new SimpleObjectProperty<Point3D>() {
#Override
public void set(Point3D newValue) {
newValue = (newValue == null || newValue.equals(Point3D.ZERO)) ? DEFAULT_AXIS : newValue.normalize();
// find first value ortogonal to axis with z = 0
axis2 = newValue.getX() == 0 && newValue.getY() == 0 ? new Point3D(1, 0, 0) : new Point3D(-newValue.getY(), newValue.getX(), 0).normalize();
// find axis ortogonal to the other 2
axis3 = newValue.crossProduct(axis2);
super.set(newValue);
}
};
public CylinderCoordinateAdapter(WritableValue<Number> x, WritableValue<Number> y, WritableValue<Number> z) {
Objects.requireNonNull(x);
Objects.requireNonNull(y);
Objects.requireNonNull(z);
axis.set(DEFAULT_AXIS);
InvalidationListener listener = o -> {
Point3D ax = axis.get();
double h = getH();
double theta = getTheta();
double r = getRadius();
Point3D endPoint = ax.multiply(h).add(axis2.multiply(Math.cos(theta) * r)).add(axis3.multiply(Math.sin(theta) * r));
x.setValue(endPoint.getX());
y.setValue(endPoint.getY());
z.setValue(endPoint.getZ());
};
theta.addListener(listener);
radius.addListener(listener);
h.addListener(listener);
axis.addListener(listener);
listener.invalidated(null);
}
public final Point3D getAxis() {
return this.axis.get();
}
public final void setAxis(Point3D value) {
this.axis.set(value);
}
public final ObjectProperty<Point3D> axisProperty() {
return this.axis;
}
public final double getH() {
return this.h.get();
}
public final void setH(double value) {
this.h.set(value);
}
public final DoubleProperty hProperty() {
return this.h;
}
public final double getRadius() {
return this.radius.get();
}
public final void setRadius(double value) {
this.radius.set(value);
}
public final DoubleProperty radiusProperty() {
return this.radius;
}
public final double getTheta() {
return this.theta.get();
}
public final void setTheta(double value) {
this.theta.set(value);
}
public final DoubleProperty thetaProperty() {
return this.theta;
}
}
private static void animateSphere(Sphere sphere) {
CylinderCoordinateAdapter adapter = new CylinderCoordinateAdapter(
sphere.translateXProperty(),
sphere.translateYProperty(),
sphere.translateZProperty());
adapter.setRadius(50);
Timeline tl = new Timeline(
new KeyFrame(Duration.ZERO,
new KeyValue(adapter.hProperty(), 0d),
new KeyValue(adapter.thetaProperty(), 0d)),
new KeyFrame(Duration.seconds(4),
new KeyValue(adapter.hProperty(), 900d, Interpolator.LINEAR),
new KeyValue(adapter.thetaProperty(), Math.PI * 4, Interpolator.LINEAR))
);
tl.setCycleCount(Timeline.INDEFINITE);
tl.play();
}

LibGDX ColorAction.restart() doesnt work

I'm trying to loop the ColorAction animation.
Here is my code:
ColorAction action = new ColorAction();
ShapeRenderer shapeRenderer;
#Override
public void create () {
shapeRenderer = new ShapeRenderer();
action.setColor(Color.BLUE);
action.setEndColor(Color.GOLD);
action.setDuration(5);
}
#Override
public void render () {
Gdx.gl.glClearColor(1, 1, 1, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
int fps = Gdx.graphics.getFramesPerSecond();
curFrame++;
if (curFrame == fps*5) {
action.restart();
curFrame = 0;
}
action.act(Gdx.graphics.getDeltaTime());
shapeRenderer.begin(ShapeRenderer.ShapeType.Filled);
shapeRenderer.setColor(action.getColor());
shapeRenderer.rect(100, 100, 40, 40);
shapeRenderer.end();
}
But this is not working properly. It's just plays the animation once and stops.
Can somebody explain me what am I doing wrong? Thanks.
After a couple of changes:
ColorAction actionBtG = new ColorAction();
ColorAction actionGtB = new ColorAction();
SequenceAction sequenceAction;
RepeatAction repeatAction = new RepeatAction();
ShapeRenderer shapeRenderer;
Color blue = new Color(Color.BLUE);
#Override
public void create () {
shapeRenderer = new ShapeRenderer();
actionBtG.setColor(blue);
actionBtG.setEndColor(Color.GOLD);
actionBtG.setDuration(5);
actionGtB.setColor(blue);
actionGtB.setEndColor(Color.BLUE);
actionGtB.setDuration(5);
sequenceAction = new sequenceAction(actionBtG,actionGtB);
repeatAction.setAction(sequenceAction);
repeatAction.setCount(RepeatAction.FOREVER);
}
#Override
public void render () {
repeatAction.act(Gdx.graphics.getDeltaTime());
Gdx.gl.glClearColor(1,1,1,1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
shapeRenderer.begin(ShapeRenderer.ShapeType.Filled);
shapeRenderer.setColor(blue);
shapeRenderer.rect(100, 100, 40, 40);
shapeRenderer.end();
}

problem solved? ... I had the same problem a few minutes ago... The problem is, that the startcolor, in your case blue, has the same color like the endcolor, if the action is over. So you can't see any action! I solved this problem by creating a new instance, but I think, reset the start color should also work. I will try it later.
This means for you: Try to set the color again, wenn you will restart your action!
EDIT:
I replaced the ColorAction with my own class now:
public class ColorTransitionAnimation extends TemporalAction {
private final Color start = new Color();
private final Color end = new Color();
private final Color animatedColor = new Color();
private RepeatType repeatType = RepeatType.REVERSE;
public enum RepeatType { REVERSE, RESTART }
public void setRepeatType(RepeatType repeatType) {
this.repeatType = repeatType;
}
protected void update (float percent) {
float r = start.r + (end.r - start.r) * percent;
float g = start.g + (end.g - start.g) * percent;
float b = start.b + (end.b - start.b) * percent;
float a = start.a + (end.a - start.a) * percent;
animatedColor.set(r, g, b, a);
}
#Override
protected void end() {
super.end();
if(repeatType == RepeatType.REVERSE)
setReverse(!isReverse());
restart();
}
public Color getAnimationColor () {
return animatedColor;
}
public void setStartColor (Color color) {
start.set(color);
}
public void setEndColor (Color color) {
end.set(color);
}
}

First of all, the call to setColor tells it what instance of Color to modify, so you don't want to pass it a pseudo constant like Color.BLUE or you will be modifying the "constant" itself. The LibGDX color class is mutable, so even though BLUE is static final, it can still be modified. You need to create your own Color instance for use with the action and pass that in.
myColor = new Color(Color.BLUE);
To do a color cycle, you need two ColorActions (one for each of the two colors you switching between), and they need to be in a SequenceAction together. Both of them should be set to your same Color instance. And then if you want it to cycle multiple times, wrap the SequenceAction in a RepeatAction.

Interaction between 2 classes maybe

I'm trying to make a mini game with 2 classes: the menu and the play. I am trying to randomly change the image of an object in the play class by clicking a button in the menu class.
So, in the menu class I add a button and add input listener so that when I click
playbutton.addListener(new InputListener() {
public boolean touchDown(InputEvent event, float x, float y, int pointer, int button) {
game.setScreen(new lessonclass (game));
lessonclass.currentlevel = MathUtils.random(2);
return true;
}
});
in the play class, I add static int level, an object
public grid ( Vector2 position, Vector2 size) {
texture0 = new Texture (Gdx.files.internal("zero.jpg"));
texture1 = new Texture (Gdx.files.internal("one.jpg"));
texture2 = new Texture (Gdx.files.internal("two.jpg"));
texture3 = new Texture (Gdx.files.internal("three.jpg"));
this.position = position;
this.size = size;
}
public void update(){
}
public void draw0(SpriteBatch batch) {
batch.draw(texture0, position.x, position.y, size.x, size.y);
}
public void draw1(SpriteBatch batch) {
batch.draw(texture1, position.x, position.y, size.x, size.y);
}
public void draw2(SpriteBatch batch) {
batch.draw(texture2, position.x, position.y, size.x, size.y);
}
if (TouchDown) {System.out.println ("" + level);}
When I run the program, the level value VARIES between 0 and 1 but the object always draw image batch.
If I change the code in the menu class so that it only brings me to play class and the in play class I change the level to
public static int level = MathUtils.random(1);
then my level value varies and the object randomly draws either batch image or batch1 image.
However, I want to do this from the menu class. Since the program runs and I cant think of the logic error, I am stuck now. Why can't I change my object image by clicking the button in the menu class?

touch scrolling with libgdx

I'm trying to implement touch scrolling in a libgdx game. I have a wide image that is a panorama of a room. I want to be able to scroll the image so the user can see around the room. I have it so that I can scroll a certain distance but when a new touchDragged event is registered the image is moved back to the original position.
This is how I'm implementing it
public class AttackGame implements ApplicationListener {
AttackInputProcessor inputProcessor;
Texture backgroundTexture;
TextureRegion region;
OrthographicCamera cam;
SpriteBatch batch;
float width;
float height;
float posX;
float posY;
#Override
public void create() {
posX = 0;
posY = 0;
width = Gdx.graphics.getWidth();
height = Gdx.graphics.getHeight();
backgroundTexture = new Texture("data/pancellar.jpg");
region = new TextureRegion(backgroundTexture, 0, 0, width, height);
batch = new SpriteBatch();
}
#Override
public void resize(int width, int height) {
cam = new OrthographicCamera();
cam.setToOrtho(false, width, height);
cam.translate(width / 2, height / 2, 0);
inputProcessor = new AttackInputProcessor(width, height, cam);
Gdx.input.setInputProcessor(inputProcessor);
}
#Override
public void render() {
Gdx.gl.glClearColor(0,0,0,1);
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT | GL10.GL_DEPTH_BUFFER_BIT);
batch.setProjectionMatrix(cam.combined);
batch.begin();
batch.draw(backgroundTexture, 0, 0, 2400, 460);
batch.end();
}
#Override
public void pause() {
// TODO Auto-generated method stub
}
#Override
public void resume() {
// TODO Auto-generated method stub
}
#Override
public void dispose() {
backgroundTexture.dispose();
}
}
And in the InputProcessor
#Override
public boolean touchDragged(int screenX, int screenY, int pointer) {
cam.position.set(screenX, posY / 2, 0);
cam.update();
return false;
}
I got this far with help from this question LibGdx How to Scroll using OrthographicCamera?. However it doesn't really solve my problem.
I think the problem is with the touchDragged corodinates not being world coordinates but I have tried unprojecting the camera with no effect.
I have been struggling with this for a few weeks and I would really appreciate some help on this.
Thanks in advance.

I recently did something as what you want. This is my Input class that I use for move the map, you only need to change my 'stage.getCamera()' for your 'cam':
public class MapInputProcessor implements InputProcessor {
Vector3 last_touch_down = new Vector3();
...
public boolean touchDragged(int x, int y, int pointer) {
moveCamera( x, y );
return false;
}
private void moveCamera( int touch_x, int touch_y ) {
Vector3 new_position = getNewCameraPosition( touch_x, touch_y );
if( !cameraOutOfLimit( new_position ) )
stage.getCamera().translate( new_position.sub( stage.getCamera().position ) );
last_touch_down.set( touch_x, touch_y, 0);
}
private Vector3 getNewCameraPosition( int x, int y ) {
Vector3 new_position = last_touch_down;
new_position.sub(x, y, 0);
new_position.y = -new_position.y;
new_position.add( stage.getCamera().position );
return new_position;
}
private boolean cameraOutOfLimit( Vector3 position ) {
int x_left_limit = WINDOW_WIDHT / 2;
int x_right_limit = terrain.getWidth() - WINDOW_WIDTH / 2;
int y_bottom_limit = WINDOW_HEIGHT / 2;
int y_top_limit = terrain.getHeight() - WINDOW_HEIGHT / 2;
if( position.x < x_left_limit || position.x > x_right_limit )
return true;
else if( position.y < y_bottom_limit || position.y > y_top_limit )
return true;
else
return false;
}
...
}
This is the result: http://www.youtube.com/watch?feature=player_embedded&v=g1od3YLZpww

You need to do a lot more computation in the touchDragged callback, you can't just pass whatever screen coordinates were touched on to the camera. You need to figure out how far the user has dragged their finger, and in what direction. The absolute coordinates are not immediately useful.
Consider dragging down from the top-right or dragging down from the top-left. In both cases you want (I presume) to move the camera the same distance, but the absolute values of the screen coordinates will be very different in the two cases.
I think the simplest thing is to just track previousX and previousY (initialize them in the touchDown method. Then invoke cam.translate() with the delta (deltaX = screenX - previousX, for example), during touchDragged. And also update the previous* in touchDragged.
Alternatively, you can look at some of the fancier InputProcessor wrappers libgdx provides (see https://code.google.com/p/libgdx/wiki/InputGestureDetection).

Simple answer:
Declare 2 fields to hold the new and old drag location:
Vector2 dragOld, dragNew;
When just touched you set both of these equal to the touched location or your cam will jump.
if (Gdx.input.justTouched())
{
dragNew = new Vector2(Gdx.input.getX(), Gdx.input.getY());
dragOld = dragNew;
}
Update dragNew each frame and simply subtract the vectors from each other to get the x and y for translating the camera.
if (Gdx.input.isTouched())
{
dragNew = new Vector2(Gdx.input.getX(), Gdx.input.getY());
if (!dragNew.equals(dragOld))
{
cam.translate(dragOld.x - dragNew.x, dragNew.y - dragOld.y); //Translate by subtracting the vectors
cam.update();
dragOld = dragNew; //Drag old becomes drag new.
}
}
This is all I use to drag my ortho cam around, simple and effective.

Used drinor's answer but added the line on "touchDown) function so it doesn't reset the camera every time you start dragging again:
#Override
public boolean touchDown(int screenX, int screenY, int pointer, int button) {
last_touch_down.set( screenX, screenY, 0);
return false;
}

I have not used it myself, but I would start by looking at the code of:
Have you looked at the code of http://libgdx.l33tlabs.org/docs/api/com/badlogic/gdx/scenes/scene2d/ui/FlickScrollPane.html
See: touchDragged