안드로이드 스튜디오 Libgdx 게임 화면 설정하기

안녕하세요. 

오늘은 추석연휴 마지막 날입니다.

내일부터 출근 벌써부터 힘듭니다.

 

오늘은 저번 포스팅에 이어 게임 화면 설정하는 방법에 대해 포스팅합니다.

우선 저번에 작성했던 초기 프로그램에서 시작합니다.

 

전체코드 입니다.

 

<전체코드>

package com.mygdx.game;

import com.badlogic.gdx.ApplicationAdapter;
import com.badlogic.gdx.Gdx;
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.OrthographicCamera;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.Sprite;
import com.badlogic.gdx.graphics.g2d.SpriteBatch;
import com.badlogic.gdx.utils.viewport.ExtendViewport;

import static com.badlogic.gdx.Gdx.*;

public class TowerDefense extends ApplicationAdapter

{

    private SpriteBatch batch;
    private Sprite sprite;
    Texture img;
    OrthographicCamera camera;
    ExtendViewport viewport;
    float viewportWidth, viewportHeight;
    int Size_Width = 256;
    int Size_Height=256;

    @Override
    public void create ()
    {

       // 디바이스 크기 가져오기
        viewportWidth = Gdx.app.getGraphics().getWidth(); 
        viewportHeight = Gdx.app.getGraphics().getHeight(); 

        //스프라이트 그리기 초기화
        batch = new SpriteBatch();

        //스프라이트 초기화
        sprite = new Sprite();

        //이미지 텍스쳐 초기화
        img = new Texture("badlogic.jpg");
        sprite = new Sprite(img, (int)0,(int)0,(int)Size_Width,(int)Size_Height);

        //이미지 위치 값 중심에 맞추기
        sprite.setPosition(viewportWidth/2-Size_Width/2, viewportHeight/2-Size_Height/2);

        //카메라 초기화     

        camera = new OrthographicCamera();
        //Viewport 크기 설정

    viewport = new ExtendViewport(1000,1000,camera);
        viewport.apply();
        camera.zoom = 1.0F;

    }

    @Override
    public void render ()
    {

        // camera 업데이트
        camera.update();

        // 배경 그리기
        Gdx.gl.glClearColor(1, 0, 0, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        batch.setProjectionMatrix(camera.combined);

        // 이미지 그리기
        batch.begin();
        sprite.draw(batch);
        batch.end();
   }
    @Override
    public void resize(int width, int height)
    {
        // viewport 업데이트
        viewport.update(width,height);
        // camera 업데이트
        camera.position.set(viewportWidth/2-100,viewportHeight/2-100,0);
    }
    @Override
    public void dispose ()
    {
        batch.dispose();
        img.dispose();
    }

}

 

 - public void create () 함수 설명

 

디바이스 크기를 불러와서 변수에 저장합니다.

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//

 viewportWidth = Gdx.app.getGraphics().getWidth(); 
 viewportHeight = Gdx.app.getGraphics().getHeight(); 

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//

 

이미지를 그릴 각종 객체 초기화

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//

//스프라이트 그리기 초기화

batch = new SpriteBatch();

//스프라이트 초기화

sprite = new Sprite();

//이미지 불러오기

img = new Texture("badlogic.jpg");

//스프라이트 크기 설정
sprite = new Sprite(img, (int)0,(int)0,(int)Size_Width,(int)Size_Height);

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//

 

이미지의 중심을 맞추기 위해 위치값을 조정합니다.

 

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//

//이미지 위치 중심에 맞추기
sprite.setPosition(viewportWidth/2-Size_Width/2, viewportHeight/2-Size_Height/2);

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//

 

원래는 이미지의 위치가 왼쪽아래 였으나 이것을 중심으로 이동시키기위함 입니다.

이를 위해 이미지의 높이와 넓이의 절반만큼을 빼 줍니다.

 

 게임 화면 내부의 카메라 설정 입니다. 

다양한 설정이 있으나 OrthographicCamera로 설정합니다.

주로 2D에서는 OrthographicCamera로 설정합니다.

카메라를 통해 viewport를 본다라고 생각하시면 됩니다.

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//

camera = new OrthographicCamera();

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//

 

 Viewport를 설정합니다.

다양한 설정이 있으나 ExtendViewport로 설정합니다.

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//

 viewport = new ExtendViewport(1000,1000,camera);

 viewport.apply();

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//

 

viewport를 설명하기전에 전체 화면의 크기는 아래와 같습니다.

아래 크기는 디바이스 기종마다 다르게 얻어집니다.

뷰포트와 실제 디바이스와의 크기 그리고 그 상관 관계는 아래와 같습니다.

뷰포트는 게임에서 나타낼 화면의 크기 입니다.

현재는 1000,1000으로 설정했습니다.

 

아래 이미지가 약간 비율에 맞지 않게 그려지긴 했지만 .... 

스타크래프트를 떠올리시면 이해가 빠를것 같습니다.

 

전체맵에서 일부를 마우스 스크롤로 움직이며 보는 것과 같습니다.

카메라로 보여지는 창이 뷰포트 입니다.

 

 

물론 이 뷰포트도 카메라의 위치를 바꿈으로써 위치를 설정 할 수 있습니다.

 

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//

camera.zoom = 1.0F;

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//

 

camera.zoom은 말그대로 zoom을 하는 것입니다. 1.0으로 설정했으므로 1배 입니다.

 

여기까지가 create() 함수의 설명 입니다.

 

 - public void render () 메서드 설명

 

 이미지를 화면에 그리는 메서드 입니다.

 render 함수는 프로그램이 종료될때가지 반복 실행 됩니다. 

 

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//

  // camera 업데이트
  camera.update();

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//

 

카메라의 설정을 게임이 끝날때까지 업데이트 합니다.

 

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//

   // 배경 그리기
        Gdx.gl.glClearColor(1, 0, 0, 1);
        Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
        batch.setProjectionMatrix(camera.combined);

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//

 

배경색을 설정하고 스프라이트 그리기 ProjectionMatrix를 설정합니다.

 

스프라이트를 그립니다.

 

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//

   // 이미지 그리기
    batch.begin();
    sprite.draw(batch);
    batch.end();

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//

 

-  public void resize(int width, int height) 메서드 설명

 

resize 메서드는 create() 메서드가 끝난 후 viewport의 크기가 확정된 후 1회 실행 됩니다.

 

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//
   // viewport 업데이트
   viewport.update(width,height);
   // camera 업데이트
   camera.position.set(viewportWidth/2-100,viewportHeight/2-100,0);

//HHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHHH//

 

 viewport.update(width,height); 

 viewport를 업데이트 합니다.

camera.position.set(viewportWidth/2-100,viewportHeight/2-100,0);

카메라의 위치를 전체 view 포트의 중심에서 X축으로 100만큼 왼쪽으로 이동합니다.

Y축으로 100만큼 아래로 이동합니다.

 

 - public void dispose () 메서드 설명

public void dispose ()
{
       batch.dispose();
       img.dispose();
 }

 프로그램이 종료될때 메모리를 해제 합니다.

 

아래는 결과 화면 입니다.

 

- 결과 해석: 아래 그림처럼 이미지는 중심에 있습니다.

아래 코드에 나온것처럼 이미지의 위치는 전체 영역의 중심에 있습니다. 
    sprite.setPosition(viewportWidth/2-Size_Width/2, viewportHeight/2-Size_Height/2);    

 

하지만 화면상의 이미지가 약간 치우쳐 보입니다.

이유는 카메라의 위치(viewport 영역)가 약간 아래에 있기 때문입니다.

아래코드에서 확인 합니다.

 camera.position.set(viewportWidth/2-100,viewportHeight/2-100,0);

 

결론은 이미지의 좌표는 전체 맵의 중심에 있고 카메라가 약간 왼쪽아래쪽에 위치합니다.