libgdx-loading page implementation 3 (skin, font)

libgdx - loading 페이지 구현 3(skin, font)

================ Continue from previous post ============

Basically, I configured the screen to move.
Now let's configure the loading page. First, I put skin in the previous post. I'll find and use the progress bar.

First modify the loading page as follows:

================ 이전 포스트에서 이어집니다 ============

 

기본적으로 screen의 이동이 가능하게 구성했었습니다.

이제 로딩페이지를 구성해보도록 하겠습니다. 우선 이전 포스트에서 skin을 집어넣었습니다. 거기서 progress 바를 찾아 쓰도록 하겠습니다.

 

일단 loading 페이지를 다음처럼 수정합니다.

1. stage-To use the scene2d UI, create a stage. It's the most basic background.
2. verticalGroup-There are usually three types of UI used to hold the skeleton. vertialGroup is a UI that is inserted one by one vertically. horizontalGroup is horizontal, table is a grid type. Think about the table layout that you used a lot on the web in the past. See the scene2d document for details.

1. stage - scene2d UI를 사용하기 위해서는 stage를 만들면됩니다. 가장 기본되는 바탕이라고 할수 있습니다.

2. verticalGroup - 보통 UI의 골격을 잡는데는 세가지 유형을 사용합니다. vertialGroup은 수직으로 하나씩 삽입되는 UI입니다. horizontalGroup 은 수평이고, table은 격자식 유형입니다. 과거에 웹에서 많이 사용했던 테이블 layout을 생각하면 되겠습니다. 자세한 사항은 scene2d 도큐먼트를 참조해주세요.

https://github.com/libgdx/libgdx/wiki

libgdx/libgdx

This is an api document.

이것은 api 문서입니다.

https://libgdx.badlogicgames.com/ci/nightlies/docs/api/

libgdx API

I used VertialGroup. By default it is center aligned and is added in order from the top each time it is added.

3. Image is a scene2d component that can show images. scene2d does not use the default textures, but instead uses components that extend from the base class called Actor.

4. The skin mentioned at the beginning of this chapter. This skin contains a pre-made scene2d UI element. I used a skiny glass.

5. Progressbar settings. At the very end you will see that you are getting skin. You can also see that the progress bar is wrapped in a container. You can think of containers as wrappers with position and size information. It looks similar to span, div on the web. In fact, after many tests, the progress bar cannot be resized unless it is wrapped in a container. The horizontal progress bar is also horizontal only. Only the space occupied by the vertical grows. Let's do some tests and use each scene2d UI.

6. Render the stage.

It is output form.

저는 VertialGroup을 사용했습니다. 기본적으로 가운데 정렬이고 추가할때마다 상단에서 차례대로 추가됩니다.

 

3. Image는 이미지를 보일수 있는 scene2d 구성요소입니다. scene2d는 기본 texture를 그대로 사용하지 않고 Actor라는 기본 class에서 확장된 구성요소를 사용합니다.

 

4. 이 장의 처음에 언급한 skin입니다. 이 스킨은 미리 만들어진 scene2d UI element를 포함하고 있습니다. 저는 glassy라는 스킨을 이용했습니다.

 

5. progressbar 설정입니다. 제일 마지막에 skin을 받는걸 볼수있습니다. 또 프로그래스바는 container라는것으로 감싼것을 볼수 있습니다. container는 위치와 크기정보를 가지는 덮개(wrapper)정도로 생각하면 될것 같네요. 웹으로 따지면 span,div 와 비슷한것 같습니다. 실제로 여러 테스트를 해본결과, 프로그래스바는 이렇게 container로 감싸지 않으면 크기변환이 안되네요. 그리고 크기변환도 가로형 프로그래스바는 가로만 됩니다. 세로는 차지하는 칸만 커질뿐입니다. 각 scene2d UI별로 테스트를 몇번 해보고 사용하도록 합시다.

 

6. stage를 랜더링합니다.

 

출력모습입니다.

=========================================================================

 

About Font
The difference with the web is that java is a pure general language and has no character set. I have to make it one by one. (It may be quite annoying.) And you have to reclaim memory resources. (The font section takes a slightly more complicated path than I thought. I recommend creating your own simple steps.)

First obtain the .ttf file. I got a basic arial font in windows. This type is also present in the window operating system. Please look for the ttf file yourself.

And to import fonts like this, you need to add the TrueType mode of libgdx. You can add this part on first start, or add it to build.gradle.

Font에 대해서

웹과의 차이라면 java는 순수한 범용언어라 가지고 있는 글자 세트가 없습니다. 일일히 만들어야하죠. (상당히 귀찮게 느껴지기도 합니다) 그리고 일일히 메모리 자원을 회수해야됩니다. (폰트를 다루는 부분은 생각보다 약간 복잡한 경로를 거칩니다. 본인만의 간단한 수순을 만들기를 추천합니다)

 

먼저 .ttf 파일을 구합니다. 저는 윈도우에서 기본적인 arial 폰트를 구했습니다. 이 타입은 window 운영체제에서도 가지고 있습니다. ttf파일에 관해서는 스스로 찾아보시길 바랍니다.

 

그리고 이렇게 폰트를 가져오기위해서는 libgdx의 트루타입모드를 추가해야됩니다. 첫시작에서 이부분을 추가해도 되고 build.gradle에 추가해도 됩니다.

If you check it, you can use the font function automatically. If not, let's add it to build.gradle.

이렇게 체크를 해두면 자동으로 font 기능을 쓸수 있습니다. 그게 아니면 build.gradle에 추가합시다.

add to build.gradle

You will have to rebuild or load a new one while it is being added. Now let's really add the font.

build.gradle에 추가합니다.

 

추가되는 동안 rebuild를 하거나, 새로 로딩을 해야할것입니다. 자 이제 font를 정말 추가해봅니다.

1. FreeTypeFontGenerator imports ttf files. You can see that we get an arial.
2. Create a font to use by setting the imported font file. The most basic parameters are color, size, and text used. The color can be changed later, but the size and text must already be finalized before use. This is where the programmer needs to think. For example, English alphabet letters are about 50 small letters / capital letters, so there is no big problem. This increases the font file size and affects loading time, execution time, and memory. So you need to pay attention to the number of characters.

3. It's actually the process of creating a font. myFont is BitmapFont.

4. Generators take up a lot of memory. In this case, since the creation is complete, you can dispose, or release the memory. We'll discuss dispose at the end of this chapter.

Number 5 is a scene2d element that represents text. Write the text "Loading ..." here.

1. FreeTypeFontGenerator는 ttf파일을 가져옵니다. arial을 가져오는것을 볼수 있습니다.

2. 가져온 font 파일에서 설정을 줘서 쓸 폰트를 만듭니다. 가장 기본적인 parameter는 색상, 사이즈, 그리고 사용한 글자입니다. 색상은 나중에 만들어진 후에 바꿀수 있으나 사이즈와 글자는 이미 사용전에 완결되어있어야 합니다. 이 부분이 프로그래머가 좀 생각을 해야합니다. 예를 들어 영어 알파벳형 글자는 소문자/대문자 정도로 해서 50여 글자이기 때문에 큰 문제는 없습니다만, 조합으로 이뤄지는 글자- 예를 들어 한글 - 은 조합글자수만 5000여개에 육박합니다. 이는 font 파일의 크기를 크게 만들고 로딩시간, 실행시간, 메모리에 영향을 줍니다. 그래서 글자수에 신경을 써야합니다.

 

3. 실제로 폰트를 만드는 과정입니다. myFont는 BitmapFont입니다.

 

4. generator는 메모리를 많이 차지합니다. 여기서는 생성이 끝났기 때문에 dispose, 즉 메모리 해제를 해도 됩니다. dispose에 관해서는 이장의 마지막에 논의해봅니다.

 

5번은 라벨은 글자를 나타내는 scene2d 요소입니다. 여기서 "Loading..." 글자를 씁니다.

 

The font appears as follows:

다음처럼 글씨가 나타납니다.

 

=========================================================================

 

Following the next post.

다음 포스트에 이어집니다.