[libGDX] PostProcessing - 멋있는 효과 낼 수 있는 라이브러리

Libgdx에서 사용할 수 있는 유용한 라이브러리가 몇 가지 있습니다. 그중에서 이번에는 Libgdx PostProcessing 라이브러리에 대해 설명하고자 합니다. 

Homepage: http://manuelbua.github.com/libgdx-contribs/

Github: https://github.com/manuelbua/libgdx-contribs

홈페이지에 가시면 데모 동영상을 보실 수 있습니다. 홈페이지에서 사용된 데모 프로그램은 첨부 파일로 올려두도록 하겠습니다.

PostProcessingDemo.jar

동영상을 보시면 어떤 것을 하는 라이브러리인지 아실 수 있을 것입니다. 렌더링 된 화면에 효과를 추가하는 것입니다. 처음 보면 입이 다물어지지 않을 정도로 멋있습니다. 간단한 작업만으로 아래와 같은 멋있는 효과를 추가할 수 있습니다.

##rarrow##

사용방법은 Github에 가시면 자세히 나와 있습니다.

그래도 초보자 분들을 위해 처음부터 끝까지 자세하게 설명해 보도록 하겠습니다. 먼저 위의 링크를 따라 홈페이지로 들어갑니다.

Download.zip을 눌러야 할 것 같으니 눌러서 다운받습니다. 다운받은 후에는 압축을 풀어놓습니다. 그 이후에 이클립스를 실행합니다. 이클립스에서 프로젝트 탐색기에서 오른쪽 버튼을 눌러 Import를 하도록 하겠습니다.

Import 하는 대상은 당연히 아까 다운받은 프로젝트 파일입니다. 프로젝트 파일을 Import해야 하니까 Exsiting Projects into Workspace를 선택해 줍니다.

Next를 누르고 아까 다운받은 경로를 찾아가 줍니다.

폴더를 선택하고 확인을 누르면 2개의 프로젝트가 나타나게 됩니다.

2개의 프로젝트 모두 선택해 줍니다. postprocessing은 실제로 postprocessing하는 프로젝트이고 utils은 postprocessing에서 사용되는 유틸 라이브러리입니다.

그리고 postprocessing을 적용할 LibGDX 프로젝트 파일이 필요합니다. 이미 작업하고 있던 LibGDX 프로젝트가 있다면 그 프로젝트를 사용해도 좋고 테스트로 해보시고 싶은 분은 새 프로젝트를 만들어 줍니다. 

LibGDX 프로젝트를 만드실줄 모르시는 분은 아래 링크를 찾아가서 gdx-setup-ui를 이용해서 새 프로젝트를 만들어 주세요.

http://code.google.com/p/libgdx/wiki/ProjectSetupNew

gdx-setup-ui로 만들어진 프로젝트를 실행해 보면 LibGDX로고 이미지 보여줍니다. 저는 일단 여기서 LibGDX로고 이미지를 구글에서 찾은 아래의 이미지를 바꾸어 주었습니다.

여기서 이미지를 바꾸는 것 까지 하는것은 너무 세세한것까지 하는것 같네요. 대신에 도움이 될만한 링크를 걸어 두도록할께요.

http://code.google.com/p/libgdx/wiki/SpriteBatch

아무튼 저는 멋진 도시 이미지 하나가 보여지는 앱을 만들었습니다.

이제 LibGDX 프로젝트에 postprocessing을 추가해 보도록 하겠습니다.

먼저 LibGDX 프로젝트에 oostprocessing 프로젝트를 포함시켜야 합니다. 그러기 위해선 먼저 프로젝트 속성으로 들어갑니다.

프로젝트 항목에서 오른쪽 버튼을 누르면 Properties가 있습니다. 이것을 누르면 프로젝트 속성으로 들어가게 됩니다.

프로젝트 속성으로 들어가서 (Java Build Path -> Projects -> Add)를 클릭해 줍니다.

그러면 아까 추가시켜두었던 프로젝트들이 보일 겁니다. postprocessing과 utils 프로젝트를 추가해 줍니다.

이제 우리는 프로젝트에서 postprocessing을 사용할 수 있게 되었습니다.

코딩으로 실제 postprocessing을 적용해 보도록 하겠습니다.

프로젝트 파일에서 렌더랑 하는 클래스(기본적으로는 MyGdxGame)에서 create() 부분 마지막에 다음과 같은 코드를 추가합니다.

	private PostProcessor postProcessor;
	
	@Override
	public void create() {		
		...
		
		ShaderLoader.BasePath = "data/shaders/";
		postProcessor = new PostProcessor(false, false, false);
		Bloom bloom = new Bloom(50, 50);
        postProcessor.addEffect(bloom);
	}

여기는 postprocessing 효과를 설정하는 부분 입니다.

그리고  render 부분에서 batch.begin() 이전에 postProcessor.capture(); 를 넣어주시고 batch.end(); 이후에 postProcessor.render(); 를 추가해 줍니다.

그리고 다운받아 압축 푼 프로젝트 중에서 postprocessing 프로젝트 안을 보시면 shaders라는 폴더를 보실 겁니다. 이 폴더를 LibGDX 프로젝트의 data폴더 안으로 넣어줍니다.

이제 준비가 다 되었습니다. 그런데 실행을 하면 에러가 날것입니다.(안날수도 있어요.) 왜냐하면 postprocessing 라이브러리는 Shader를 사용하는데, 이 Shader가 OpenGL 2.0부터 추가되었기 때문입니다. 그래서 OpenGL 2.0을 사용할 수 있도록 해 주어야 합니다. gdx-setup-ui에서 프로젝트를 생성하면 기본적으로 OpenGL 2.0을 사용하지 않도록 설정되어 있습니다. 몇몇폰이 OpenGL 2.0을 지원하지 않기 때문이라고 생각됩니다. 그런데 OpenGL 2.0이 지원되는 폰이 대부분이므로 OpenGL 2.0을 사용한다고 크게 걱정하지 않으셔도 됩니다.

my-gdx-game-desktop(데스크탑 프로젝트)에 보시면 앱 설정하는 부분이 나옵니다. 여기서 useGL20을 true로 바꿉니다.

프로젝트를 실행하면 다음과 같은 화면을 볼 수 있습니다.

Bloom 효과가 적용되어 있는 것을 확인할 수 있습니다. 

Vignette 효과를 적용해 보았습니다.

Zoomer 효과를 적용해 보았습니다.

더 많은 효과들을 데모 동영상이나 데모 파일에서 확인하실 수 있습니다.

postprocessing에는 다양한 효과가 있어서 다방면으로 많이 쓰일 수 있습니다. 잘 활용하면 정말 멋진 게임이 탄생할 수 있겠죠?