I have two textures drawn in my 2d scene. And I want to drag them each separately. When they are touched and dragged I want both textures to be dragged to each points. How it drag them individually, or is there any other method to implement. as I am a beginner to libgdx.
My code:
public class MyGdxGame implements ApplicationListener{
OrthographicCamera camera;
ShapeRenderer shapeRenderer;
float screenOffset=10,circleRadius=30;
Texture firstTexture;
Texture secondTexture;
float firstTextureX;
float firstTextureY;
float secondTextureX;
float secondTextureY;
float touchX;
float touchY;
SpriteBatch batch;
#Override
public void create()
{
firstTexture= new Texture("b1.jpg");
firstTextureX = 50;
firstTextureY = 50;
secondTexture = new Texture("b2.jpg");
secondTextureX = 250;
secondTextureY = 250;
batch = new SpriteBatch();
camera=new OrthographicCamera();
shapeRenderer=new ShapeRenderer();
shapeRenderer.setAutoShapeType(true);
}
#Override
public void render()
{
Gdx.gl.glClearColor(1,1,1,1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
shapeRenderer.setProjectionMatrix(camera.combined);
shapeRenderer.begin();
shapeRenderer.setColor(Color.RED);
shapeRenderer.circle(camera.viewportWidth/2,camera.viewportHeight/2,circleRadius);
shapeRenderer.rect(screenOffset,screenOffset,camera.viewportWidth-2*screenOffset,camera.viewportHeight-2*screenOffset);
shapeRenderer.line(screenOffset,screenOffset,camera.viewportWidth-screenOffset,camera.viewportHeight-screenOffset);
shapeRenderer.line(screenOffset,camera.viewportHeight-screenOffset,camera.viewportWidth-screenOffset,screenOffset);
shapeRenderer.line(screenOffset,camera.viewportHeight/2,camera.viewportWidth-screenOffset,camera.viewportHeight/2);
shapeRenderer.line(camera.viewportWidth/2,screenOffset,camera.viewportWidth/2,camera.viewportHeight-screenOffset);
shapeRenderer.end();
batch.begin();
batch.draw(firstTexture, firstTextureX, firstTextureY);
batch.draw(secondTexture, secondTextureX, secondTextureY);
batch.end();
}
Well, you should save the current position of the texture, and on the update, move the texture checking the movement of the mouse if the mouse right click is active. This is the general idea, valid for any framework or code.
I recommend you to move the texture to their own class, with a getter and a setter of the position and the texture, so it's easy to manage.
Using libdgx you can check if the mouse is clicked at any time with
Gdx.input.justTouched();
On every update you can check what was the last position of the mouse and calculate the difference with the new position on every update using
Gdx.input.getX()
Gdx.input.getY()
To syncronize the position inside your screen with the position on your camera you should use unproject on your camera, for example:
Vector3 mousePos = new Vector3();
mousePos.x = Gdx.input.getX();
mousePos.y = Gdx.input.getY();
mousePos.z = 0;
camera.unproject(mousePos); //this will convert the screen position to your camera position
TL;DR you need to check what was the last position of the mouse when it was clicked, and on the next update calculate the difference, and then you update the position of the texture.
BTW, although this is for when you get more experience, you can create a class that implements InputProcessor, alow the class to be processed by libgdx with, for example:
public class CameraControllerDesktop implements InputProcessor, ControllerListener {
public CameraControllerDesktop() {
Gdx.input.setInputProcessor(this);
}
and the you could use the function
#Override
public boolean touchDragged(int screenX, int screenY, int pointer) {
return false;
}
to let libgx calculate the position of what you are dragging.
Sorry about not writing the entire solution, but if whit this info you can solve your problem, I'm pretty sure that you sooner or later will be able to make the game you want.
Related
Let's say I have an actor foo and an actor bar which is the bigger version of the foo actor. How can I show bar next to foo while foo is tapped and then have have it disappear when foo is no longer being tapped (kind of like a tooltip)? Foo is in a stage2d table.
How can I show a bigger, more complete version of the actor while it is tapped?
Rough idea of what I want:
Actor foo = new Actor();
foo.addListener(new ActorGestureListener() {
public void touchDown (InputEvent event, float x, float y, int pointer, int button) {
// show bar next to foo (like a tooltip)
}
public void touchUp (InputEvent event, float x, float y, int pointer, int button) {
// make bar dissapear
}
});
Code that kind of does what I want:
In this case toolTipCard is the actor I want to display when I touch one of the Strings from selectedDeck.
Stage collectionStage;
List<String> selectedDeck;
TestCard tooltipCard;
Vector3 touch = new Vector3();
selectedDeck.addListener(new ActorGestureListener() {
public void touchDown(InputEvent event, float x, float y, int count, int button) {
if (selectedDeck.getItems().size > 0) {
tooltipCard = new TestCard(game.cardFont, cardNameToCard.get(selectedDeck.getSelected()));
tooltipCard.setWidth(Gdx.graphics.getWidth() / (7 * scale));
tooltipCard.setHeight(Gdx.graphics.getHeight() / (3.3f * scale));
touch = viewport.unproject(touch.set(Gdx.input.getX(), Gdx.input.getY(), 0));
tooltipCard.setPosition(touch.x - tooltipCard.getWidth(), touch.y - tooltipCard.getHeight());
collectionStage.addActor(tooltipCard);
}
}
public void touchUp(InputEvent event, float x, float y, int pointer, int button) {
tooltipCard.remove();
}
});
As described in the comments there are 2 options:
edit the draw method of an actor (if you need to show a very simple tooltip use this).
If you want to show a more advanced actor which can have it's own actions. You can get the foo's global coordinates and add an actor directly to the stage which you set visible/invisible (or fade in/out for a nicer look/feel).
To get the coordinates you can use: localToStageCoordinates
Vector2 v = foo.localToStageCoordinates(new Vector2());
or relative to its center:
Vector2 v = foo.localToStageCoordinates(new Vector2(foo.getWidth()/2,foo.getHeight()/2));
then use for instance: bar.addAction(Actions.fadeIn(0.5f)); and bar.addAction(Actions.fadeOut(0.5f)); to show/hide the tooltip
For optimization purposes you can reuse the bar actor for all foo instances on the screen and just repurpose it on every click. It is probably cheaper than creating a full actor for every one of them. However, if you can probably even create and destroy it on touch down/up without any problems.
Objective: to rotate an image in the center of the screen with movement equal to left or right touchDragged event.
Right now I have a basic Stage that is created and adds an actor (centerMass.png) to the stage. it is created and rendered like this:
public class Application extends ApplicationAdapter {
Stage stageGamePlay;
#Override
public void create () {
//setup game stage variables
stageGamePlay = new Stage(new ScreenViewport());
stageGamePlay.addActor(new CenterMass(new Texture(Gdx.files.internal("centerMass.png"))));
Gdx.input.setInputProcessor(stageGamePlay);
}
#Override
public void render () {
Gdx.gl.glClearColor(255f/255, 249f/255, 236f/255, 1f);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
//before drawing, updating actions that have changed
stageGamePlay.act(Gdx.graphics.getDeltaTime());
stageGamePlay.draw();
}
}
I then have a separate class file that contains the CenterMass class, extending Image. I am familiar enough to know I could extend Actor, but I am not sure the benefit I would gain using Actor vs Image.
In the CenterMass class I create the texture, set bounds, set touchable and center it on the screen.
Inside CenterMass class I also have an InputListener listening for events. I have an override set for touchDragged where I am trying to get the X and Y of the drag, and use that to set the rotate actions accordingly. That class looks like this:
//extend Image vs Actor classes
public class CenterMass extends Image {
public CenterMass(Texture centerMassSprite) {
//let parent be aware
super(centerMassSprite);
setBounds(getX(), getY(), getWidth(), getHeight());
setTouchable(Touchable.enabled);
setPosition(Gdx.graphics.getWidth()/2, Gdx.graphics.getHeight()/2);
setRotation(90f);
addListener(new InputListener(){
private int dragX, dragY;
private float duration;
private float rotateBy = 30f;
#Override
public void touchDragged(InputEvent event, float x, float y, int pointer) {
//get
float dX = (float)(x-dragX)/(float)Gdx.graphics.getWidth();
float dY = (float)(dragY-y)/(float)Gdx.graphics.getHeight();
duration = 1.0f; // 1 second
Actions.sequence(
Actions.parallel(
Actions.rotateBy(rotateBy, duration),
Actions.moveBy( dX, dY, duration)
)
);
}
});
}
#Override
protected void positionChanged() {
//super.positionChanged();
}
#Override
public void draw(Batch batch, float parentAlpha) {
//draw needs to be available for changing color and rotation, I think
batch.setColor(this.getColor());
//cast back to texture because we use Image vs Actor and want to rotate and change color safely
((TextureRegionDrawable)getDrawable()).draw(batch, getX(), getY(),
getOriginX(), getOriginY(),
getWidth(), getHeight(),
getScaleX(), getScaleY(),
getRotation());
}
#Override
public void act(float delta) {
super.act(delta);
}
}
The Problem:
I have not been able to get it to rotate the way I would like. I have been able to get it to shift around in unpredictable ways. Any guidance would be much appreciated.
As from you code it seems everything is good. except you don't set any origin of the image. without setting the origin it is by default set to 0,0.(bottom left of your image)
So if yow want to rotate the image with origin to centre you have to set the origin to imageWidth/2. imageHeight/2.
setOrigin(imageWidth/2,imageHeight/2)// something like this
I want the game screen on the Android device to change to a screen that displays "LEVEL COMPLETE". I made a .png file with this message in the middle and want to basically load it on top of the current screen (like a Fragment i guess?) when Player collides with Flag (both are modelled as rectangles for the sake of collision detection). This is my Flag class
public class Flag extends GameObject {
private Sprite spr;
private Rectangle playerRect;
private boolean isOverlapping;
Player player;
private Rectangle flagRect;
public Flag(Sprite spr, float xPos, float yPos) {
super(spr, xPos, yPos);
player = Player.getInstance(null);
setxPos(xPos);
setyPos(yPos);
flagRect = new Rectangle(getxPos(), getyPos(), getSprite().getWidth(),
getSprite().getHeight());
}
public void update() {
playerRect = new Rectangle(player.getxPos(), player.getyPos(), player
.getSprite().getWidth(), player.getSprite().getHeight());
isOverlapping = playerRect.overlaps(flagRect);
if(isOverlapping) {
...
}
}
}
I put levelComplete.png in my assets folder and am a little unsure where to go from here. Any suggestions? Would be highly appreciated
All you need to do is make a Texture from your image and draw it on your screen using SpriteBatch. This can be achieved with something like this:
public Texture levelComplete = new Texture(Gdx.files.internal("assets/imageName.png"));
public SpriteBatch batch = new SpriteBatch();
public render(){
batch.begin();
if(isOverlapping){
batch.draw(levelComplete, x, y);
}else{
// render game
}
batch.end();
}
Note that you might want to put some timer and stop drawing the Texture after like 5 seconds or put some sort of "ok" button. Otherwise you will be stuck with the same Texture.
Instead of creating an image that contain your text "Level Complete " you can use BitmapFont to write it down on your screen with any font you like
first choose your font (you can generate any font you want using tools like Hiero)
put them on assets file and load them using this line of code
textFont = new BitmapFont(Gdx.files.internal("nameFont.fnt"), gdx.files.internal("nameFont.png"), false);
then you have just to write your text in the position you want
textFont.draw(spritebatch, "Level Complete", x, y)
hope it will help !
I have a class which extends SurfaceView and implements SurfaceHolder.Callback. Using onDraw() method i'm drawing some bitmaps on my canvas. The, after pressing a button I'm adding new image to the canvas calling invalidate(). Is any possibility to save all the changes which I made on every invalidate() which were earlier, so as to after new invalidate() add new image, but not delete the earlier?
From what I have understood you will want to save the image that was drawn and also it's position? By using the code I provided you will have a list that is filled with the image and position. The list is unordered; if you would like an ordered list you can use a LinkedList instead.
Create a new class, you may name it anything.
public class ImageHolder {
private int mX;
private int mY;
private int mDrawableResource;
private String mBitmapFilePath;
public ImageHolder(int x, int y, int drawableResource, String bitmapFilePath) {
mX = x;
mY = y;
mDrawableResource = drawableResource;
mBitmapFilePath = bitmapFilePath;
}
public int getX() {
return mX;
}
public int getY() {
return mY;
}
public int getDrawableResource() {
return mDrawableResource;
}
public String getBitmapFilePath() {
return mBitmapFilePath;
}
}
Then in your SurfaceView you add it a holder each time you draw to a list. Notice that this is bare minimum code so no synchronization has been added.
private void customDrawMethod() {
mImageHolders.add(new ImageHolder(x, y, drawableResource, bitmapFilePath));
Canvas canvas = getHolder().lockCanvas();
canvas.drawBitmap(bitmap, matrix, paint);
getHolder().unlockCanvasAndPost(canvas);
}
I added both a Bitmap and a Drawable because I am unsure what you use. I could not post more code because I have no idea what you want to do with the saved images. More info could help you further.
This is pretty straightforward case of using Bitmaps to store your previous canvas. Simply attach a bitmap to your canvas. Before drawing, save the old bitmap to something like "prevBitmap" and then draw over it. You can redraw the previous Bitmap by calling canvas.drawBitmap(prevBitmap);
You can save your old drawings on canvas and dont draw them again when adding new picture. Just call invalidate(x, y, x+sizeX, y+sizeY) when you need to add new image with left-top point's coordinates (x, y) and size (sizeX, sizeY) to the View's canvas. About to save all images in array you already got answer.
P.S. sorry for my english, hope it was helpfull
My application is made with openGL ES 2.0 on android and i'm having a rather serious problem with object position updates. My game loop is like this, Draw all objects --> update game object positions --> iterate. However, i have 2 different kind of position updates: one kind that is calculation based, that when a value is low or high enough, it will change direction. The other kind is touch based, when the user touch at any position and/or swipes the screen, the object will follow.
Now to the problem. When the user touches the screen and/or swipes, the objects that is supposed to only respond to touch also gets the changing x value of the calculation based objects, and i'm clueless as to why this is since they use entirely different position variables.
The code that follows here is an excerpt from the GLsurfaceView showing how the touch position values are passed into the GL renderer
public boolean onTouchEvent(MotionEvent e){
if(e != null){
if(e.getAction() == MotionEvent.ACTION_DOWN){
x = e.getX();
y = e.getY();
if(_renderer != null){
queueEvent(new Runnable(){
#Override
public void run() {
_renderer.touchInput(x, y);
}
});
return true;
}
}
if(e.getAction() == MotionEvent.ACTION_MOVE){
x = e.getX();
y = e.getY();
if(_renderer != null){
queueEvent(new Runnable(){
#Override
public void run() {
_renderer.touchInput(x, y);
}
});
}
}
The code that follows here is an excerpt from the GL renderer that shows how the touch values enters the renderer and is converted to world coordinates.
public void touchInput(float x, float y){
y = (float)_view[3] - y;
GLU.gluUnProject(x, y, -1.5f, _ModelMatrix, 0, _ProjectionMatrix, 0, _view, 0, touch_to_world_coords, 0);
_world_x = touch_to_world_coords[0] * touch_to_world_coords[3];
_world_y = touch_to_world_coords[1] * touch_to_world_coords[3];
}
Next up is the code that calculates the new position of the non-touch object
public void updateObjectCoords(){
_test_x += 0.05f;
_test_y += 0.05f;
}
and finally the onDrawFrame from the renderer which im using as a game loop.
public void onDrawFrame(GL10 glContext) {
//Tell OpenGL to use this program when rendering.
GLES20.glUseProgram(_current_shaderProgramHandle);
GLES20.glClear(GLES20.GL_DEPTH_BUFFER_BIT | GLES20.GL_COLOR_BUFFER_BIT);
//Sets the active texture unit to texture unit 0
GLES20.glActiveTexture(GLES20.GL_TEXTURE0);
//Bind the texture to current unit
GLES20.glBindTexture(GLES20.GL_TEXTURE_2D, _TextureDataHandle);
//Tells texture uniform sampler to use this texture in the shader by binding it to unit 0
GLES20.glUniform1i(_TextureUniformHandle, 0);
//Draw square, gets coordinates from gluUnproject method
Matrix.setIdentityM(_ModelMatrix, 0);
Matrix.translateM(_ModelMatrix, 0, _world_x, _world_y, -1.0f);
drawSquare();
//Draw square, gets coordinates from updateObjectCoords method
Matrix.setIdentityM(_ModelMatrix, 0);
Matrix.translateM(_ModelMatrix, 0, _test_x, _test_y, -1.0f);
drawSquare();
//GLES20.glUseProgram(_point_shaderProgramHandle);
//drawLight();
updateObjectCoords();
}
edit: noticed my bad explenations so im adding this instead to be more clear what happens when :)
(When cube 1 gets touch input and cube 2 gets coordinates from updateObjectCoords):
Application starts:
everything work as expected, cube 2(updateObjectCoords one) moves as expected.
User touches screen:
cube2 continue to move as its supposed to, cube1(touch controlled) coordinate data seem to get mixed with cube2 as its movements become seemingly twice as large and towards the same direction as cube2, you can still manipulate it a bit but its not very responding.
(Cube2 is made to be static, however updateObjectCoords are still active and is called on every frame to update the value of _test_x and _test_y):
Application starts:
everything is just as expected
User touches screen:
everything works perfectly
So it seems that it is specificly the continually relocating of cube2 thats interfering with the positioning of cube1.
hope this have made matters more clear! :)
Why does the coordinates of one object to be drawn effect all other translateM's? How come all other objects doesnt get effected by the touch coordinates?
I fixed this by just switching the drawing of cube1 with cube2. This seems to have solved everything. Assuming that drawing the touch controlled objects last will end the interference :D