I'm trying to display in a vertical and centered way an Image, and a button for my Screen Menu.
I've almost accomplished that only using actors but I decided that maybe a layout would be the best practice here.
So I've done:
public MenuScreen(final MyGame myGame) {
this.myGame = myGame;
font = new BitmapFont();
camera = new OrthographicCamera();
camera.setToOrtho(false, 480, 800);
stage = new Stage();
batch = new SpriteBatch();
stage.getViewport() .setCamera(camera);
skin = new Skin(Gdx.files.internal("menu/glassy-ui.json"));
button = new TextButton("NEW GAME", skin);
button.setTransform(true);
button.setScale(0.5f);
button.addListener(new ClickListener(){
#Override
public void clicked(InputEvent event, float x, float y) {
myGame.setScreen(new GameScreen( myGame));
}
});
Image imageLogo = new Image( new Texture(Gdx.files.internal("titleLogo.png")));
// imageLogo.setScaling(Scaling.fit);
Table myTable = new Table();
myTable.setFillParent(true);
myTable .add(imageLogo);// .width(imageLogo.getWidth()).height(imageLogo.getHeight()).row() ;
myTable.row() ;
myTable.add(button);
stage.addActor(myTable);
Gdx.input.setInputProcessor(stage);
batch.setProjectionMatrix(camera.combined);
}
#Override
public void render(float delta) {
Gdx.gl.glClearColor(1, 1, 0, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
camera.update();
batch.begin();
stage.act(delta);
stage.draw();
batch.end();
}
But it seems that the viewport of the stage isn't affecting the table area which goes offscreen and I'm not even sure that the image is displayed...
This is what I see :
Tried to read wiki and approaches of other developers.
For what I've read everyone has different system to accomplish that goal, nobody used a camera, and I suspect that's my real problem.
Thanks!
stage.setDebugAll(true); //enable debug mode and check what's going on
camera.setToOrtho(false, 480, 800);
By this you're setting viewport of camera by a fix value. You are not resizing/scaling any Actor so make sure all your actor should have size in the context of 480, 800.
camera.position.set(Gdx.graphics.getWidth()/2,Gdx.graphics.getHeight()/2,1);
This will move your camera in center.
Related
I'm developing a libgdx game. What I want to do is to create a screen where some squares "falls" from the top to the bottom. So:
1. I have to set a background image.
2. I have to generate some squares randomly.
3. I have to move the screen from the bottom to the top.
In order to get that I'm using a Sprite for the background, a lot of sprites for the squares. Then a camera to move the screen.
In the render method I have:
#Override
public void render(float delta) {
Gdx.gl.glClearColor(0, 0, 0, 0);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
Gdx.input.setInputProcessor(stage);
batch.begin();
backgroundSprite.draw(batch);
for(Square square : squareList) {
//Gdx.app.log("[Match]", square.toString());
square.updatePosition();
square.setSize(20, 20);
square.draw(batch);
}
batch.end();
batch.setProjectionMatrix(fixedCamera.view);
fixedCamera.position.y +=1;
System.out.println("Camera position: x:" +fixedCamera.position.x+" y:"+fixedCamera.position.y);
fixedCamera.update();
stage.act(Gdx.graphics.getDeltaTime());
stage.draw();
}
This is the code on the constructor. It's all I have in the class
final static int WIDTH = Gdx.app.getGraphics().getWidth();
final static int HEIGHT = Gdx.app.getGraphics().getHeight();
skin = new Skin(Gdx.files.internal("skin/flat-earth-ui.json"));
fixedCamera = new OrthographicCamera(WIDTH, HEIGHT );
stage = new Stage(new ScreenViewport());
batch = new SpriteBatch();
dynBatch = new SpriteBatch();
backgroundSprite = new Sprite(new Texture(Gdx.files.internal(scenario.getTexturePath())));
backgroundSprite.setPosition(0,0);
backgroundSprite.setSize(WIDTH, HEIGHT);
fixedCamera.position.set(0,0, 0);
fixedCamera.update();
The items are displayed correctly, but when the camera moves, all the sprites disappears...
How can I fix that? Is there any way to handle that more efficiently?
Your requirement can be achieved by these steps :
Create Sprite having screen Size and keep it on bottom.
Generate Square at Top of screen with random horizontal position and change y position of all Square(Sprite)
No need to move your camera. keep it in the middle of the screen.
I am still getting to this problem, and i am feeling like my head is going to blow. Lets say, that i have this code for drawing a texture i created.
public MainMenuScreen(TheSpring game) {
this.game = game;
//camera for interface
guiCam = new OrthographicCamera(1020, 640);
guiCam.position.set(1020 / 2, 640/2, 0);
//buttons
play = new Button(10, 120, 400, 300, AssetLoader.play);
highscores = new Button(460, 10, 82, 102, AssetLoader.highscores);
sound = new Button(10, 10, 72, 72, AssetLoader.soundEnabled);
sound.AddTexture(AssetLoader.soundDisabled);
if (!Settings.soundEnabled)
sound.SwitchTexture();
help = new Button(120, 160, 80, 15, "Help", Color.WHITE);
//enable buttons
play.Enable(true);
highscores.Enable(true);
sound.Enable(true);
help.Enable(true);
//touchpoint for unproject
touchpoint = new Vector3();
}`
The texture i created for play button is also 400x300.
The problem is, that when i try to run this "app" my textures are blurred.
The Button is my class, and I am using its drawing method.
public void Draw(SpriteBatch batcher) {
if (enabled){
if (text != null) {
AssetLoader.ComicFont.setColor(clr);
AssetLoader.ComicFont.setScale(ScaleWidth, ScaleHeight);
AssetLoader.ComicFont.draw(batcher, text, x, y + height);
}
if (texture != null) {
batcher.draw(texture, x, y, width, height);
}
}
}
And the result is this (please don't judge me for my drawing skills, its only testing version)
For example, on the right side of button, there should be also black line, and lines should be straight. Can you please help me? :)
one possible solution can be setting your texture filters to Linear
By default they are not linear.
try this out
texture.setFilter(TextureFilter.Linear,TextureFilter.Linear);
I'm trying to make an isometric map on Android using libgdx. I'm basicaly drawing shapes with a ShapeRenderer and handling gestures by moving/zooming the camera. Here is my code.
public class MyGdxGame extends ApplicationAdapter{
private OrthographicCamera cam;
private ShapeRenderer mShapeRenderer;
private InputHandler mInputHandler;
#Override
public void create() {
mShapeRenderer = new ShapeRenderer();
mInputHandler = new AndroidInputHandler();
Gdx.input.setInputProcessor(mInputHandler);
Gdx.graphics.setContinuousRendering(false);
}
#Override
public void render() {
System.out.println("render()");
mInputHandler.handleInput(cam);
cam.update();
// clearing scene
Gdx.graphics.getGL20().glClearColor(1, 1, 1, 1);
Gdx.graphics.getGL20().glClear( GL20.GL_COLOR_BUFFER_BIT | GL20.GL_DEPTH_BUFFER_BIT );
//drawing updated scene
mShapeRenderer.setProjectionMatrix(cam.combined);
mShapeRenderer.begin(ShapeRenderer.ShapeType.Filled);
mShapeRenderer.setColor( 0.95f, 0.95f, 0.95f,1);
mShapeRenderer.rect(0, 0, 5.1f, 4.8f);
mShapeRenderer.rect( 6.890f,24.014f,2.201f, 6f);
mShapeRenderer.end();
}
#Override
public void resize(int width, int height) {
cam = new OrthographicCamera( 10f,10f * height / width);
cam.position.set(5, 5, 7);
cam.lookAt(0, 0, 0);
Vector3 up =cam.position.cpy();
up.nor();
up.crs((new Vector3(-1, 1, 0)).nor());
cam.up.set(up);
cam.zoom=1f;
cam.far=100000;
cam.near=0;
}
...
}
InputHandler is a custom class that handle gestures like pinch to zoom and camera translation. It only calls camera.translate(Vector3) and camera.zoom = new zoom.
My problem is that whenever i pinch to zoom, some of my shape are cut.
expected drawing
cutted shapes
I don't realy know where this comes from. I think there is something happening with my viewport. I tried modifying the base zoom and camera viewport sizes but I dont realy understand the concept of viewport width and height.
Any help would be apreciated.
Thanks
I am having 3 different screens which contains splash screen, after menu screen and game screen. Splash > Menu > Gamestarts.
How can i add an image button ??
I want to implement 3 buttons inside Menu screen, Not getting any idea where to start.
public class MenuScreen implements Screen {
private Spacegame game;
private SpriteBatch batch;
private Sprite sprite;
private Texture texture;
TextureRegion bg,play,spacegamelogo,button;
OrthographicCamera camera;
Vector3 touchPoint;
private Skin buttonskin;
public MenuScreen(Spacegame game)
{
touchPoint = new Vector3();
this.game=game;
batch=new SpriteBatch();
bg=AssetLoader.bg;
spacedebrislogo=AssetLoader.spacedebrislogo;
button=AssetLoader.button;
}
#Override
public void show() {
float w = Gdx.graphics.getWidth();
float h = Gdx.graphics.getHeight();
camera = new OrthographicCamera(1, h / w);
sprite = new Sprite(bg);
sprite.flip(false, true);
sprite.setSize(1.0f,
1.0f * sprite.getHeight() / sprite.getWidth() );
sprite.setOrigin(sprite.getWidth() / 2,
sprite.getHeight() / 2);
sprite.setPosition(-sprite.getWidth() / 2,
-sprite.getHeight() / 2);
}
#Override
public void render(float delta) {
batch.setProjectionMatrix(camera.combined);
batch.begin();
sprite.draw(batch);
batch.draw(spacedebrislogo, 33, 54, 50, 40);
batch.end();
if (Gdx.input.isTouched()) {
game.setScreen(new GameScreen());
dispose();
}
}
THere are a lot of methods to do it..
I will tell you the way I do.
First I create my button image, add it to the assets folder and load the texture region.
Now I make a sprite out of it.
Sprite button1=new Sprite(myTextureRegion);
To check if the button is touched I can use the rectangle from the sprite to check if you touched the image.
In your touchUp method you will do something like
if(button1.getBoundingRectangle.contains(screenX,screenY))
// do your thing
To make my game more interesting i like to add some rotation or scaling of my sprite when is clicked, so it looks better, you can play with it, or you can make 2 textures, one for touched down and one for touched up.
I want to display Text Buttons on main screen of my game to navigate further.But I'm unable to do so.I referred libgdx documentation but nothing seems working.I have an Image as a Game background and want to display button over it.
Here is what I want :
Below is my code.Kindly help.Thanks.
public void create(){
stage = new Stage();
Gdx.input.setInputProcessor(stage);
Skin skin = new Skin();
skin.add("logo", new Texture("ic_launcher.png"));
Pixmap pixmap = new Pixmap(1, 1, Format.RGBA8888);
pixmap.setColor(Color.WHITE);
pixmap.fill();
skin.add("white", new Texture(pixmap));
// Store the default libgdx font under the name "default".
skin.add("default", new BitmapFont());
// Configure a TextButtonStyle and name it "default". Skin resources are stored by type, so this doesn't overwrite the font.
TextButtonStyle textButtonStyle = new TextButtonStyle();
textButtonStyle.up = skin.newDrawable("white", Color.DARK_GRAY);
textButtonStyle.down = skin.newDrawable("white", Color.DARK_GRAY);
textButtonStyle.checked = skin.newDrawable("white", Color.BLUE);
textButtonStyle.over = skin.newDrawable("white", Color.LIGHT_GRAY);
textButtonStyle.font = skin.getFont("default");
skin.add("default", textButtonStyle);
// Create a table that fills the screen. Everything else will go inside this table.
Table table = new Table();
table.setFillParent(true);
stage.addActor(table);
// Create a button with the "default" TextButtonStyle. A 3rd parameter can be used to specify a name other than "default".
final TextButton button = new TextButton("Click me!", skin);
table.add(button);
table.add(new Image(skin.newDrawable("white", Color.RED))).size(64);
}
public void render(float delta) {
/*Gdx.gl.glClearColor(0,0,1.0f,1);
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);*/
camera.update();
game.batch.setProjectionMatrix(camera.combined);
game.batch.begin();
game.batch.draw(splsh, 0, 0,800,500);
stage.act(Gdx.graphics.getDeltaTime());
stage.draw();
Table.drawDebug(stage);
game.batch.end();
if (Gdx.input.isTouched()) {
game.setScreen(new GameScreen(game));
dispose();
}
}
As of now I just want either button,text button or Image button.
Your code in render() looks very strange.
The first of all separate calls of your own game.batch and stage methods.
Then your render() method should look so:
public void render(float delta) {
Gdx.gl.glClearColor(0,0,1.0f,1); // You should call this method only once outside of draw()
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
camera.update();
game.batch.setProjectionMatrix(camera.combined);
game.batch.begin();
game.batch.draw(splsh, 0, 0,800,500);
/*
* Render here everything that uses your camera and batch,
* and is not a part of your stage.
*/
game.batch.end();
// And here is stage acts...
stage.act(Gdx.graphics.getDeltaTime());
stage.draw();
Table.drawDebug(stage);
if (Gdx.input.isTouched()) {
game.setScreen(new GameScreen(game));
dispose();
}
}
Now you should see all of your stage actors.
By the way, by default stage manage it's own camera and batch, so you don't have to do such things.
Hope this will helpful, good luck.