how to maintain the appearance of the tiled map when I change the resolution in libGDX
i have created a test tiled map for a 2D game that i am programming. And everything is fine with!, but when i change the resolution the camera doesn´t fit the screen correctly.
I have a player sprite and the Tile map, and I use a resolution of 1366x768, as you can see the screen fit correctly:
but when i change the resolution, for example 640x480. The player doesn´t fit according to the new resolution as you can see in this picture:
The player seems bigger, but i want to fit the entire screen according to the new resolution, including all the sprites.
I think there is a problem with the cam rendering, but i don´t know what can i do to solve it. The camera is following the player movement and everything is ok with that, but i want to fit the screen game with the resolutions selected.
I'll put some parts of my code for you can see:
Here is the main code:
public class codeTiled implements ApplicationListener {
... //Variables.....
public void create() {
manager = new AssetManager();
manager.setLoader(TiledMap.class, new TmxMapLoader());
manager.load("C:/Users/HOME/Desktop/tilemap/TiledMap/data/maps/test.tmx", TiledMap.class);
manager.finishLoading();
map = manager.get("C:/Users/HOME/Desktop/tilemap/TiledMap/data/maps/test.tmx", TiledMap.class);
batch=new SpriteBatch();
float w = Gdx.graphics.getWidth();
float h = Gdx.graphics.getHeight();
camera = new OrthographicCamera(50, 50 * (h / w));
float unitScale = 1 / 8f;
renderer = new OrthogonalTiledMapRenderer(map, unitScale);
player=new playerEx(100, 100, camera);
}
public void render() {
handleInput();
Gdx.gl.glClearColor(1, 1, 1, 1);
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
camera.update();
renderer.setView(camera);
renderer.render();
batch.begin();
player.render(batch);
batch.end();
}
private void handleInput() {
if (Gdx.input.isKeyPressed(Input.Keys.ESCAPE)){
System.exit(0);
}
camera.zoom = MathUtils.clamp(camera.zoom, 0.1f, 100/camera.viewportWidth);
float effectiveViewportWidth = camera.viewportWidth * camera.zoom;
float effectiveViewportHeight = camera.viewportHeight * camera.zoom;
camera.position.x = MathUtils.clamp(camera.position.x, effectiveViewportWidth / 2f, 100 - effectiveViewportWidth / 2f);
camera.position.y = MathUtils.clamp(camera.position.y, effectiveViewportHeight / 2f, 100 - effectiveViewportHeight / 2f);
}
And this is some part of my player class:
public class playerEx {
...//Variables....
public playerEx(int x, int y, OrthographicCamera camera){
this.camera=camera;
recP= new Rectangle();
recP.height = 64;
recP.width = 64;
recP.x = x;
recP.y = y;
imagen=new Texture(Gdx.files.internal("C:/Users/HOME/Desktop/tilemap/TiledMap/data/sprites/player/minigunattack.png"));
imagen2=new Texture(Gdx.files.internal("C:/Users/HOME/Desktop/tilemap/TiledMap/data/sprites/player/minigunstand.png"));
TextureRegion tmp=TextureRegion.split(imagen,
imagen.getWidth()/5,imagen.getHeight());
imagen1=new Texture(Gdx.files.internal("C:/Users/HOME/Desktop/tilemap/TiledMap/data/sprites/player/feet.png"));
TextureRegion tmp1=TextureRegion.split(imagen1,
imagen1.getWidth()/5,imagen1.getHeight());
movPlayer=new TextureRegion[5];
movFeet=new TextureRegion[5];
for(int i=0;i<5;i++){
movFeet[i]=tmp1[0][i];
}for(int i=0;i<5;i++){
movPlayer[i]=tmp[0][i];
}animationAttack=new Animation(0.08f,movPlayer);
animationFeet=new Animation(0.10f,movFeet);
tiempo=0f;
}
Again, the camera is programmed to follow the player and it works fine. But when i want to change it to another resolution the sprite player doesn´t fit with the tiled map :(.
Hope somebody can help me with this...
Thank you!.
java camera libgdx tiled tmxtiledmap
add a comment |
i have created a test tiled map for a 2D game that i am programming. And everything is fine with!, but when i change the resolution the camera doesn´t fit the screen correctly.
I have a player sprite and the Tile map, and I use a resolution of 1366x768, as you can see the screen fit correctly:
but when i change the resolution, for example 640x480. The player doesn´t fit according to the new resolution as you can see in this picture:
The player seems bigger, but i want to fit the entire screen according to the new resolution, including all the sprites.
I think there is a problem with the cam rendering, but i don´t know what can i do to solve it. The camera is following the player movement and everything is ok with that, but i want to fit the screen game with the resolutions selected.
I'll put some parts of my code for you can see:
Here is the main code:
public class codeTiled implements ApplicationListener {
... //Variables.....
public void create() {
manager = new AssetManager();
manager.setLoader(TiledMap.class, new TmxMapLoader());
manager.load("C:/Users/HOME/Desktop/tilemap/TiledMap/data/maps/test.tmx", TiledMap.class);
manager.finishLoading();
map = manager.get("C:/Users/HOME/Desktop/tilemap/TiledMap/data/maps/test.tmx", TiledMap.class);
batch=new SpriteBatch();
float w = Gdx.graphics.getWidth();
float h = Gdx.graphics.getHeight();
camera = new OrthographicCamera(50, 50 * (h / w));
float unitScale = 1 / 8f;
renderer = new OrthogonalTiledMapRenderer(map, unitScale);
player=new playerEx(100, 100, camera);
}
public void render() {
handleInput();
Gdx.gl.glClearColor(1, 1, 1, 1);
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
camera.update();
renderer.setView(camera);
renderer.render();
batch.begin();
player.render(batch);
batch.end();
}
private void handleInput() {
if (Gdx.input.isKeyPressed(Input.Keys.ESCAPE)){
System.exit(0);
}
camera.zoom = MathUtils.clamp(camera.zoom, 0.1f, 100/camera.viewportWidth);
float effectiveViewportWidth = camera.viewportWidth * camera.zoom;
float effectiveViewportHeight = camera.viewportHeight * camera.zoom;
camera.position.x = MathUtils.clamp(camera.position.x, effectiveViewportWidth / 2f, 100 - effectiveViewportWidth / 2f);
camera.position.y = MathUtils.clamp(camera.position.y, effectiveViewportHeight / 2f, 100 - effectiveViewportHeight / 2f);
}
And this is some part of my player class:
public class playerEx {
...//Variables....
public playerEx(int x, int y, OrthographicCamera camera){
this.camera=camera;
recP= new Rectangle();
recP.height = 64;
recP.width = 64;
recP.x = x;
recP.y = y;
imagen=new Texture(Gdx.files.internal("C:/Users/HOME/Desktop/tilemap/TiledMap/data/sprites/player/minigunattack.png"));
imagen2=new Texture(Gdx.files.internal("C:/Users/HOME/Desktop/tilemap/TiledMap/data/sprites/player/minigunstand.png"));
TextureRegion tmp=TextureRegion.split(imagen,
imagen.getWidth()/5,imagen.getHeight());
imagen1=new Texture(Gdx.files.internal("C:/Users/HOME/Desktop/tilemap/TiledMap/data/sprites/player/feet.png"));
TextureRegion tmp1=TextureRegion.split(imagen1,
imagen1.getWidth()/5,imagen1.getHeight());
movPlayer=new TextureRegion[5];
movFeet=new TextureRegion[5];
for(int i=0;i<5;i++){
movFeet[i]=tmp1[0][i];
}for(int i=0;i<5;i++){
movPlayer[i]=tmp[0][i];
}animationAttack=new Animation(0.08f,movPlayer);
animationFeet=new Animation(0.10f,movFeet);
tiempo=0f;
}
Again, the camera is programmed to follow the player and it works fine. But when i want to change it to another resolution the sprite player doesn´t fit with the tiled map :(.
Hope somebody can help me with this...
Thank you!.
java camera libgdx tiled tmxtiledmap
you forgetbatch.setProjectionMatrix(camera.combined);
– Morchul
Nov 23 '18 at 7:55
If i put that the player's sprite gets bigger and it fills on the entire screen :/
– Luis Bermúdez
Nov 23 '18 at 19:43
add a comment |
i have created a test tiled map for a 2D game that i am programming. And everything is fine with!, but when i change the resolution the camera doesn´t fit the screen correctly.
I have a player sprite and the Tile map, and I use a resolution of 1366x768, as you can see the screen fit correctly:
but when i change the resolution, for example 640x480. The player doesn´t fit according to the new resolution as you can see in this picture:
The player seems bigger, but i want to fit the entire screen according to the new resolution, including all the sprites.
I think there is a problem with the cam rendering, but i don´t know what can i do to solve it. The camera is following the player movement and everything is ok with that, but i want to fit the screen game with the resolutions selected.
I'll put some parts of my code for you can see:
Here is the main code:
public class codeTiled implements ApplicationListener {
... //Variables.....
public void create() {
manager = new AssetManager();
manager.setLoader(TiledMap.class, new TmxMapLoader());
manager.load("C:/Users/HOME/Desktop/tilemap/TiledMap/data/maps/test.tmx", TiledMap.class);
manager.finishLoading();
map = manager.get("C:/Users/HOME/Desktop/tilemap/TiledMap/data/maps/test.tmx", TiledMap.class);
batch=new SpriteBatch();
float w = Gdx.graphics.getWidth();
float h = Gdx.graphics.getHeight();
camera = new OrthographicCamera(50, 50 * (h / w));
float unitScale = 1 / 8f;
renderer = new OrthogonalTiledMapRenderer(map, unitScale);
player=new playerEx(100, 100, camera);
}
public void render() {
handleInput();
Gdx.gl.glClearColor(1, 1, 1, 1);
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
camera.update();
renderer.setView(camera);
renderer.render();
batch.begin();
player.render(batch);
batch.end();
}
private void handleInput() {
if (Gdx.input.isKeyPressed(Input.Keys.ESCAPE)){
System.exit(0);
}
camera.zoom = MathUtils.clamp(camera.zoom, 0.1f, 100/camera.viewportWidth);
float effectiveViewportWidth = camera.viewportWidth * camera.zoom;
float effectiveViewportHeight = camera.viewportHeight * camera.zoom;
camera.position.x = MathUtils.clamp(camera.position.x, effectiveViewportWidth / 2f, 100 - effectiveViewportWidth / 2f);
camera.position.y = MathUtils.clamp(camera.position.y, effectiveViewportHeight / 2f, 100 - effectiveViewportHeight / 2f);
}
And this is some part of my player class:
public class playerEx {
...//Variables....
public playerEx(int x, int y, OrthographicCamera camera){
this.camera=camera;
recP= new Rectangle();
recP.height = 64;
recP.width = 64;
recP.x = x;
recP.y = y;
imagen=new Texture(Gdx.files.internal("C:/Users/HOME/Desktop/tilemap/TiledMap/data/sprites/player/minigunattack.png"));
imagen2=new Texture(Gdx.files.internal("C:/Users/HOME/Desktop/tilemap/TiledMap/data/sprites/player/minigunstand.png"));
TextureRegion tmp=TextureRegion.split(imagen,
imagen.getWidth()/5,imagen.getHeight());
imagen1=new Texture(Gdx.files.internal("C:/Users/HOME/Desktop/tilemap/TiledMap/data/sprites/player/feet.png"));
TextureRegion tmp1=TextureRegion.split(imagen1,
imagen1.getWidth()/5,imagen1.getHeight());
movPlayer=new TextureRegion[5];
movFeet=new TextureRegion[5];
for(int i=0;i<5;i++){
movFeet[i]=tmp1[0][i];
}for(int i=0;i<5;i++){
movPlayer[i]=tmp[0][i];
}animationAttack=new Animation(0.08f,movPlayer);
animationFeet=new Animation(0.10f,movFeet);
tiempo=0f;
}
Again, the camera is programmed to follow the player and it works fine. But when i want to change it to another resolution the sprite player doesn´t fit with the tiled map :(.
Hope somebody can help me with this...
Thank you!.
java camera libgdx tiled tmxtiledmap
i have created a test tiled map for a 2D game that i am programming. And everything is fine with!, but when i change the resolution the camera doesn´t fit the screen correctly.
I have a player sprite and the Tile map, and I use a resolution of 1366x768, as you can see the screen fit correctly:
but when i change the resolution, for example 640x480. The player doesn´t fit according to the new resolution as you can see in this picture:
The player seems bigger, but i want to fit the entire screen according to the new resolution, including all the sprites.
I think there is a problem with the cam rendering, but i don´t know what can i do to solve it. The camera is following the player movement and everything is ok with that, but i want to fit the screen game with the resolutions selected.
I'll put some parts of my code for you can see:
Here is the main code:
public class codeTiled implements ApplicationListener {
... //Variables.....
public void create() {
manager = new AssetManager();
manager.setLoader(TiledMap.class, new TmxMapLoader());
manager.load("C:/Users/HOME/Desktop/tilemap/TiledMap/data/maps/test.tmx", TiledMap.class);
manager.finishLoading();
map = manager.get("C:/Users/HOME/Desktop/tilemap/TiledMap/data/maps/test.tmx", TiledMap.class);
batch=new SpriteBatch();
float w = Gdx.graphics.getWidth();
float h = Gdx.graphics.getHeight();
camera = new OrthographicCamera(50, 50 * (h / w));
float unitScale = 1 / 8f;
renderer = new OrthogonalTiledMapRenderer(map, unitScale);
player=new playerEx(100, 100, camera);
}
public void render() {
handleInput();
Gdx.gl.glClearColor(1, 1, 1, 1);
Gdx.gl.glClear(GL10.GL_COLOR_BUFFER_BIT);
camera.update();
renderer.setView(camera);
renderer.render();
batch.begin();
player.render(batch);
batch.end();
}
private void handleInput() {
if (Gdx.input.isKeyPressed(Input.Keys.ESCAPE)){
System.exit(0);
}
camera.zoom = MathUtils.clamp(camera.zoom, 0.1f, 100/camera.viewportWidth);
float effectiveViewportWidth = camera.viewportWidth * camera.zoom;
float effectiveViewportHeight = camera.viewportHeight * camera.zoom;
camera.position.x = MathUtils.clamp(camera.position.x, effectiveViewportWidth / 2f, 100 - effectiveViewportWidth / 2f);
camera.position.y = MathUtils.clamp(camera.position.y, effectiveViewportHeight / 2f, 100 - effectiveViewportHeight / 2f);
}
And this is some part of my player class:
public class playerEx {
...//Variables....
public playerEx(int x, int y, OrthographicCamera camera){
this.camera=camera;
recP= new Rectangle();
recP.height = 64;
recP.width = 64;
recP.x = x;
recP.y = y;
imagen=new Texture(Gdx.files.internal("C:/Users/HOME/Desktop/tilemap/TiledMap/data/sprites/player/minigunattack.png"));
imagen2=new Texture(Gdx.files.internal("C:/Users/HOME/Desktop/tilemap/TiledMap/data/sprites/player/minigunstand.png"));
TextureRegion tmp=TextureRegion.split(imagen,
imagen.getWidth()/5,imagen.getHeight());
imagen1=new Texture(Gdx.files.internal("C:/Users/HOME/Desktop/tilemap/TiledMap/data/sprites/player/feet.png"));
TextureRegion tmp1=TextureRegion.split(imagen1,
imagen1.getWidth()/5,imagen1.getHeight());
movPlayer=new TextureRegion[5];
movFeet=new TextureRegion[5];
for(int i=0;i<5;i++){
movFeet[i]=tmp1[0][i];
}for(int i=0;i<5;i++){
movPlayer[i]=tmp[0][i];
}animationAttack=new Animation(0.08f,movPlayer);
animationFeet=new Animation(0.10f,movFeet);
tiempo=0f;
}
Again, the camera is programmed to follow the player and it works fine. But when i want to change it to another resolution the sprite player doesn´t fit with the tiled map :(.
Hope somebody can help me with this...
Thank you!.
java camera libgdx tiled tmxtiledmap
java camera libgdx tiled tmxtiledmap
edited Nov 22 '18 at 0:37
Marcus Campbell
2,01921027
2,01921027
asked Nov 22 '18 at 0:15
Luis BermúdezLuis Bermúdez
135
135
you forgetbatch.setProjectionMatrix(camera.combined);
– Morchul
Nov 23 '18 at 7:55
If i put that the player's sprite gets bigger and it fills on the entire screen :/
– Luis Bermúdez
Nov 23 '18 at 19:43
add a comment |
you forgetbatch.setProjectionMatrix(camera.combined);
– Morchul
Nov 23 '18 at 7:55
If i put that the player's sprite gets bigger and it fills on the entire screen :/
– Luis Bermúdez
Nov 23 '18 at 19:43
you forget
batch.setProjectionMatrix(camera.combined);
– Morchul
Nov 23 '18 at 7:55
you forget
batch.setProjectionMatrix(camera.combined);
– Morchul
Nov 23 '18 at 7:55
If i put that the player's sprite gets bigger and it fills on the entire screen :/
– Luis Bermúdez
Nov 23 '18 at 19:43
If i put that the player's sprite gets bigger and it fills on the entire screen :/
– Luis Bermúdez
Nov 23 '18 at 19:43
add a comment |
1 Answer
1
active
oldest
votes
I recommend you to use a viewport and some Constants values for your world.
Firstly we define a default screen width and height in pixel. Doesn't matter how big the end screen will be.
In my example, I say the default screen size is: 512x256 pixel.
Secondly, I must decide how many pixels are one Meter. So if I say 256 pixels is one meter, my viewport shows 2x1 meter of my world. That's very small. If I want that my viewport shows for example 16 meter I can calculate: 512 / 16 = Pixel_Per_Meter. In this case 32.
Finally, we create a Constants
class:
public class Constants {
public static final float PPM = 32; // PPM = Pixel per Meter
public static final float MPP = 1 / PPM; // MPP = Meter per Pixel
public static final int WORLD_PIXEL_WIDTH = 512;
public static final int WORLD_PIXEL_HEIGHT = 256;
public static final float WORLD_WIDTH = WORLD_PIXEL_WIDTH / PPM; //in meter
public static final float WORLD_HEIGHT = WORLD_PIXEL_HEIGHT / PPM; //in meter
}
Now when you see later in your game, the shown world is too small or too big, you can change the WORLD_PIXEL_WIDTH
and WORLD_PIXEL_HEIGHT
to show more or less
Now we create our OrthographicCamera
, FitViewport
and OrthogonalTiledMapRenderer
Viewport is a very important part of the game. If you will know more about Viewports read the viewport part of
calling render method from another class and Libgdx set ortho camera
So first create our OrthographicCamera
'camera' and our FitViewport
'viewport'
camera = new OrthographicCamera();
viewport = new FitViewport(Constants.WORLD_WIDTH, Constants.WORLD_HEIGHT, camera);
camera.position.set(viewport.getWorldWidth() / 2, viewport.getWorldHeight() / 2, 0); // Differ from your I eat ann Apple
Then our SpriteBatch
'batch' and TiledMap
'map'
batch = new SpriteBatch();
map = app.getAssets().loadSingleAsset("map/" + level + ".tmx", TiledMap.class);
And finally, our OrthogonalTiledMapRenderer
'mapRenderer'
mapRenderer = new OrthogonalTiledMapRenderer(map, Constants.MPP);
To render our world:
@Override
public void render(float delta) {
camera.update();
mapRenderer.setView(camera);
mapRenderer.render();
batch.setProjectionMatrix(camera.combined);
batch.begin();
player.draw(batch);
batch.end();
}
Wow, thanks for the tutorial. With your explanation i have solved my problem. Thank you!.
– Luis Bermúdez
Dec 7 '18 at 3:41
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53422212%2fhow-to-maintain-the-appearance-of-the-tiled-map-when-i-change-the-resolution-in%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
I recommend you to use a viewport and some Constants values for your world.
Firstly we define a default screen width and height in pixel. Doesn't matter how big the end screen will be.
In my example, I say the default screen size is: 512x256 pixel.
Secondly, I must decide how many pixels are one Meter. So if I say 256 pixels is one meter, my viewport shows 2x1 meter of my world. That's very small. If I want that my viewport shows for example 16 meter I can calculate: 512 / 16 = Pixel_Per_Meter. In this case 32.
Finally, we create a Constants
class:
public class Constants {
public static final float PPM = 32; // PPM = Pixel per Meter
public static final float MPP = 1 / PPM; // MPP = Meter per Pixel
public static final int WORLD_PIXEL_WIDTH = 512;
public static final int WORLD_PIXEL_HEIGHT = 256;
public static final float WORLD_WIDTH = WORLD_PIXEL_WIDTH / PPM; //in meter
public static final float WORLD_HEIGHT = WORLD_PIXEL_HEIGHT / PPM; //in meter
}
Now when you see later in your game, the shown world is too small or too big, you can change the WORLD_PIXEL_WIDTH
and WORLD_PIXEL_HEIGHT
to show more or less
Now we create our OrthographicCamera
, FitViewport
and OrthogonalTiledMapRenderer
Viewport is a very important part of the game. If you will know more about Viewports read the viewport part of
calling render method from another class and Libgdx set ortho camera
So first create our OrthographicCamera
'camera' and our FitViewport
'viewport'
camera = new OrthographicCamera();
viewport = new FitViewport(Constants.WORLD_WIDTH, Constants.WORLD_HEIGHT, camera);
camera.position.set(viewport.getWorldWidth() / 2, viewport.getWorldHeight() / 2, 0); // Differ from your I eat ann Apple
Then our SpriteBatch
'batch' and TiledMap
'map'
batch = new SpriteBatch();
map = app.getAssets().loadSingleAsset("map/" + level + ".tmx", TiledMap.class);
And finally, our OrthogonalTiledMapRenderer
'mapRenderer'
mapRenderer = new OrthogonalTiledMapRenderer(map, Constants.MPP);
To render our world:
@Override
public void render(float delta) {
camera.update();
mapRenderer.setView(camera);
mapRenderer.render();
batch.setProjectionMatrix(camera.combined);
batch.begin();
player.draw(batch);
batch.end();
}
Wow, thanks for the tutorial. With your explanation i have solved my problem. Thank you!.
– Luis Bermúdez
Dec 7 '18 at 3:41
add a comment |
I recommend you to use a viewport and some Constants values for your world.
Firstly we define a default screen width and height in pixel. Doesn't matter how big the end screen will be.
In my example, I say the default screen size is: 512x256 pixel.
Secondly, I must decide how many pixels are one Meter. So if I say 256 pixels is one meter, my viewport shows 2x1 meter of my world. That's very small. If I want that my viewport shows for example 16 meter I can calculate: 512 / 16 = Pixel_Per_Meter. In this case 32.
Finally, we create a Constants
class:
public class Constants {
public static final float PPM = 32; // PPM = Pixel per Meter
public static final float MPP = 1 / PPM; // MPP = Meter per Pixel
public static final int WORLD_PIXEL_WIDTH = 512;
public static final int WORLD_PIXEL_HEIGHT = 256;
public static final float WORLD_WIDTH = WORLD_PIXEL_WIDTH / PPM; //in meter
public static final float WORLD_HEIGHT = WORLD_PIXEL_HEIGHT / PPM; //in meter
}
Now when you see later in your game, the shown world is too small or too big, you can change the WORLD_PIXEL_WIDTH
and WORLD_PIXEL_HEIGHT
to show more or less
Now we create our OrthographicCamera
, FitViewport
and OrthogonalTiledMapRenderer
Viewport is a very important part of the game. If you will know more about Viewports read the viewport part of
calling render method from another class and Libgdx set ortho camera
So first create our OrthographicCamera
'camera' and our FitViewport
'viewport'
camera = new OrthographicCamera();
viewport = new FitViewport(Constants.WORLD_WIDTH, Constants.WORLD_HEIGHT, camera);
camera.position.set(viewport.getWorldWidth() / 2, viewport.getWorldHeight() / 2, 0); // Differ from your I eat ann Apple
Then our SpriteBatch
'batch' and TiledMap
'map'
batch = new SpriteBatch();
map = app.getAssets().loadSingleAsset("map/" + level + ".tmx", TiledMap.class);
And finally, our OrthogonalTiledMapRenderer
'mapRenderer'
mapRenderer = new OrthogonalTiledMapRenderer(map, Constants.MPP);
To render our world:
@Override
public void render(float delta) {
camera.update();
mapRenderer.setView(camera);
mapRenderer.render();
batch.setProjectionMatrix(camera.combined);
batch.begin();
player.draw(batch);
batch.end();
}
Wow, thanks for the tutorial. With your explanation i have solved my problem. Thank you!.
– Luis Bermúdez
Dec 7 '18 at 3:41
add a comment |
I recommend you to use a viewport and some Constants values for your world.
Firstly we define a default screen width and height in pixel. Doesn't matter how big the end screen will be.
In my example, I say the default screen size is: 512x256 pixel.
Secondly, I must decide how many pixels are one Meter. So if I say 256 pixels is one meter, my viewport shows 2x1 meter of my world. That's very small. If I want that my viewport shows for example 16 meter I can calculate: 512 / 16 = Pixel_Per_Meter. In this case 32.
Finally, we create a Constants
class:
public class Constants {
public static final float PPM = 32; // PPM = Pixel per Meter
public static final float MPP = 1 / PPM; // MPP = Meter per Pixel
public static final int WORLD_PIXEL_WIDTH = 512;
public static final int WORLD_PIXEL_HEIGHT = 256;
public static final float WORLD_WIDTH = WORLD_PIXEL_WIDTH / PPM; //in meter
public static final float WORLD_HEIGHT = WORLD_PIXEL_HEIGHT / PPM; //in meter
}
Now when you see later in your game, the shown world is too small or too big, you can change the WORLD_PIXEL_WIDTH
and WORLD_PIXEL_HEIGHT
to show more or less
Now we create our OrthographicCamera
, FitViewport
and OrthogonalTiledMapRenderer
Viewport is a very important part of the game. If you will know more about Viewports read the viewport part of
calling render method from another class and Libgdx set ortho camera
So first create our OrthographicCamera
'camera' and our FitViewport
'viewport'
camera = new OrthographicCamera();
viewport = new FitViewport(Constants.WORLD_WIDTH, Constants.WORLD_HEIGHT, camera);
camera.position.set(viewport.getWorldWidth() / 2, viewport.getWorldHeight() / 2, 0); // Differ from your I eat ann Apple
Then our SpriteBatch
'batch' and TiledMap
'map'
batch = new SpriteBatch();
map = app.getAssets().loadSingleAsset("map/" + level + ".tmx", TiledMap.class);
And finally, our OrthogonalTiledMapRenderer
'mapRenderer'
mapRenderer = new OrthogonalTiledMapRenderer(map, Constants.MPP);
To render our world:
@Override
public void render(float delta) {
camera.update();
mapRenderer.setView(camera);
mapRenderer.render();
batch.setProjectionMatrix(camera.combined);
batch.begin();
player.draw(batch);
batch.end();
}
I recommend you to use a viewport and some Constants values for your world.
Firstly we define a default screen width and height in pixel. Doesn't matter how big the end screen will be.
In my example, I say the default screen size is: 512x256 pixel.
Secondly, I must decide how many pixels are one Meter. So if I say 256 pixels is one meter, my viewport shows 2x1 meter of my world. That's very small. If I want that my viewport shows for example 16 meter I can calculate: 512 / 16 = Pixel_Per_Meter. In this case 32.
Finally, we create a Constants
class:
public class Constants {
public static final float PPM = 32; // PPM = Pixel per Meter
public static final float MPP = 1 / PPM; // MPP = Meter per Pixel
public static final int WORLD_PIXEL_WIDTH = 512;
public static final int WORLD_PIXEL_HEIGHT = 256;
public static final float WORLD_WIDTH = WORLD_PIXEL_WIDTH / PPM; //in meter
public static final float WORLD_HEIGHT = WORLD_PIXEL_HEIGHT / PPM; //in meter
}
Now when you see later in your game, the shown world is too small or too big, you can change the WORLD_PIXEL_WIDTH
and WORLD_PIXEL_HEIGHT
to show more or less
Now we create our OrthographicCamera
, FitViewport
and OrthogonalTiledMapRenderer
Viewport is a very important part of the game. If you will know more about Viewports read the viewport part of
calling render method from another class and Libgdx set ortho camera
So first create our OrthographicCamera
'camera' and our FitViewport
'viewport'
camera = new OrthographicCamera();
viewport = new FitViewport(Constants.WORLD_WIDTH, Constants.WORLD_HEIGHT, camera);
camera.position.set(viewport.getWorldWidth() / 2, viewport.getWorldHeight() / 2, 0); // Differ from your I eat ann Apple
Then our SpriteBatch
'batch' and TiledMap
'map'
batch = new SpriteBatch();
map = app.getAssets().loadSingleAsset("map/" + level + ".tmx", TiledMap.class);
And finally, our OrthogonalTiledMapRenderer
'mapRenderer'
mapRenderer = new OrthogonalTiledMapRenderer(map, Constants.MPP);
To render our world:
@Override
public void render(float delta) {
camera.update();
mapRenderer.setView(camera);
mapRenderer.render();
batch.setProjectionMatrix(camera.combined);
batch.begin();
player.draw(batch);
batch.end();
}
answered Nov 26 '18 at 9:25
MorchulMorchul
1,068113
1,068113
Wow, thanks for the tutorial. With your explanation i have solved my problem. Thank you!.
– Luis Bermúdez
Dec 7 '18 at 3:41
add a comment |
Wow, thanks for the tutorial. With your explanation i have solved my problem. Thank you!.
– Luis Bermúdez
Dec 7 '18 at 3:41
Wow, thanks for the tutorial. With your explanation i have solved my problem. Thank you!.
– Luis Bermúdez
Dec 7 '18 at 3:41
Wow, thanks for the tutorial. With your explanation i have solved my problem. Thank you!.
– Luis Bermúdez
Dec 7 '18 at 3:41
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53422212%2fhow-to-maintain-the-appearance-of-the-tiled-map-when-i-change-the-resolution-in%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
you forget
batch.setProjectionMatrix(camera.combined);
– Morchul
Nov 23 '18 at 7:55
If i put that the player's sprite gets bigger and it fills on the entire screen :/
– Luis Bermúdez
Nov 23 '18 at 19:43