LibGdx Comprendre les viewports et les associer avec un Scene2D

Question

Chaque fois que j'essaie de placer ma vue sur une scène, les acteurs que je mets dans la scène sont flous et très grands. Je veux définir ma taille de monde du jeu comme un rectangle de 50x100 unités, puis redimensionner tout (Sprites, acteurs, étiquettes, polices) en fonction de ces unités. Chaque Etat inharitate forment un État de classe qui fournit rendre la fonction etc.

public abstract class State { 
    public static final float GAME_SIZE_WIDTH = 50 ; 
    public static final float GAME_SIZE_HEIGHT = 100 ; 
    protected OrthographicCamera camera; 

    protected GameStateManager gsm; 
    protected Viewport viewport; 

    public State(GameStateManager gsm) { 
     this.gsm = gsm; 
     camera = new OrthographicCamera(); 
     viewport = new ExtendViewport(GAME_SIZE_WIDTH, GAME_SIZE_HEIGHT, camera); 
     viewport.apply(); 
     camera.position.set(GAME_SIZE_WIDTH/2, GAME_SIZE_HEIGHT/2, 0); 
    } 

    public abstract void handleInput(); 
    public abstract void update(float dt); 
    public abstract void render (SpriteBatch sb); 
    public abstract void dispose(); 
    public abstract void resize(int width, int height) ; 
    } 

Dans tous les State Je veux ajouter le Stage et passer le viewPort pour mon selon la classe de l'Etat pour maintenir la dimension GAME_SIZE_WIDTH /GAME_SIZE_HEIGHT, mais Ive a obtenu milieux non ajustés (même si sa pleine image HD la bordure blanche sur la gauche) et les boutons sont effacés avec du texte non ajusté dessus.

public class MenuState extends State implements InputProcessor { 

private Skin skin; 
private Stage stage; 

private Sprite background; 
private Table table; 
private TextButton startButton,quitButton; 
private Sprite flappyButton; 
private Sprite chodzenieButton; 
private Sprite memoryButton; 
private Sprite rememberSquare; 
private static final String TAG = "kamil"; 
private Vector3 touchPoint; 

public MenuState(GameStateManager gsm) { 
    super(gsm); 

    skin = new Skin(Gdx.files.internal("button/uiskin.json")); 
    stage = new Stage(viewport); 
    table = new Table(); 
    table.setWidth(stage.getWidth()); 
    table.align(Align.center | Align.top); 

    table.setPosition(0,GAME_SIZE_HEIGHT); 
    startButton = new TextButton("New Game",skin); 
    quitButton = new TextButton("Quit Game",skin); 
    startButton.addListener(new ClickListener() { 
     @Override 
     public void clicked(InputEvent event, float x, float y) { 
      Gdx.app.log("Clicked button","Yep, you did"); 
      event.stop(); 
     } 
    }); 

    table.padTop(5); 
    table.add(startButton).padBottom(5).size(20,10); 
    table.row(); 
    table.add(quitButton).size(20,10); 

    stage.addActor(table); 

    background =new Sprite(new Texture(Gdx.files.internal("backgrounds/bg.jpg"))); 
    background.setSize(GAME_SIZE_WIDTH,GAME_SIZE_HEIGHT); 
    background.setPosition(0,0); 
    touchPoint= new Vector3(); 

    InputMultiplexer im = new InputMultiplexer(stage,this); 
    Gdx.input.setInputProcessor(im); 
    flappyButton=new Sprite(new Texture("menuButton/floopyBirdButtonTexture.png")); 
    chodzenieButton =new Sprite(new Texture("menuButton/swipeMovementsButtonTexture.png")); 
    memoryButton =new Sprite(new Texture("menuButton/memory.png")); 
    rememberSquare = new Sprite(new Texture("menuButton/rememberSquare.png")); 
    rememberSquare.setSize(20,10); 
    flappyButton.setSize(20,10); 
    chodzenieButton.setSize(20,10); 
    memoryButton.setSize(20,10); 
    flappyButton.setPosition(GAME_SIZE_WIDTH/2-flappyButton.getWidth()/2,GAME_SIZE_HEIGHT/2-flappyButton.getHeight()/2); 
    chodzenieButton.setPosition(GAME_SIZE_WIDTH/2-flappyButton.getWidth()/2,flappyButton.getY()- chodzenieButton.getHeight() -2); 
    memoryButton.setPosition(chodzenieButton.getX(),chodzenieButton.getY()- flappyButton.getHeight() -2); 
    rememberSquare.setPosition(flappyButton.getX(),flappyButton.getY()+flappyButton.getHeight()+2); 
} 



@Override 
public void render(SpriteBatch sb) { 
    sb.setProjectionMatrix(camera.combined); 
    sb.begin(); 
    background.draw(sb); 
    flappyButton.draw(sb); 
    chodzenieButton.draw(sb); 
    memoryButton.draw(sb); 
    rememberSquare.draw(sb); 
    sb.end(); 
    stage.act(Gdx.graphics.getDeltaTime()); 
    stage.draw(); 
} 

@Override 
public void dispose() { 
    flappyButton.getTexture().dispose(); 
    chodzenieButton.getTexture().dispose(); 
    background.getTexture().dispose(); 
} 

@Override 
public void resize(int width, int height) { 
    Gdx.app.log("kamil","Resize"); 

    viewport.update(width,height); 
} 
@Override 
public void handleInput() { 
    if(Gdx.input.justTouched()) 
    { 
     // 

    viewport.unproject(touchPoint.set(Gdx.input.getX(),Gdx.input.getY(),0)); 
    if(flappyButton.getBoundingRectangle().contains(touchPoint.x,touchPoint.y)) { 
     gsm.set(new FlopyBirdState(gsm)); 
    } 
     else if (chodzenieButton.getBoundingRectangle().contains(touchPoint.x,touchPoint.y)){ 
     gsm.set(new ChodzenieState(gsm)); 
    } 
    else if (memoryButton.getBoundingRectangle().contains(touchPoint.x,touchPoint.y)){ 
     gsm.set(new MemoryState(gsm)); 
    } 
    else if (rememberSquare.getBoundingRectangle().contains(touchPoint.x,touchPoint.y)){ 
     gsm.set(new FoodEaterState(gsm)); 
    }} 
} 

Answer 1

blured et très grande: Cela est dû à la taille de la police que vous utilisez.

Estompée lorsque certaines polices sont mises à l'échelle de manière appropriée, peu importe que ce soit par vous ou par fenêtre. Vous utilisez 50 et 100 comme largeur du monde et hauteur de la fenêtre, et vous utilisez BitmapFont de la peau qui a une taille plus grande que comparer à 50 et 100. Ainsi, lorsque vous mettez à jour viewport par screenwidth et height, BitmapFont aussi Élargissez-le donc regardez très grand et flou aussi.

Solution:

1. Utilisez une plus grande largeur du monde et la hauteur de fenêtre en comparant votre BitmapFont que vous utilisez. Utilisez la petite taille de votre BitmapFont ou vous pouvez réduire l'échelle de sorte que pas trop à l'échelle et l'air moche.

   skin.get("font-name",BitmapFont.class).getData().setScale(.25f); 
   

vous utilisez Table vous pouvez donc besoin de vérifier où votre acteur est dans la cellule/Tableau. Vous pouvez activer le débogage par ce drapeau stage.setDebugAll(true);

EDIT

Vous utilisez ExtendViewport, de wiki

Le ExtendViewport conserve le rapport d'aspect mondial sans barres noires en étendant le monde dans une direction . Le monde est d'abord mis à l'échelle pour s'adapter à la fenêtre, puis la dimension la plus courte est allongée pour remplir la fenêtre. Supposons que vous ayez la largeur et la hauteur du périphérique: 400 et 640, que se passe-t-il lorsque vous mettez à jour 400 et 640. D'abord, votre Sprite d'arrière-plan est mis à l'échelle et sa hauteur est de 640 hauteur de fond) fait, maintenant il est temps pour la largeur de l'arrière-plan Sprite parce que vous définissez la largeur est la moitié de la hauteur ainsi mis à l'échelle et définir 640/2 = 320. fait

Votre problème arriver, ma largeur de l'appareil est de 400, mais mon fond sprite la taille est seulement 320 reste (40 * 2 unité est blanche des deux côtés).

Utiliser 48 * 80 (la plupart des appareils est dans ce rapport) au lieu de 50 * 100