SDFFont 사용하기 (3)

지금까지 꽤 많은 우여곡절을 통해 결국 폰트를 SDF Texture로 만들어 내는 데 성공하였고 또한 글자를 똑바로 출력하기 위한 기본 정보들까지 얻어내는 데 성공했다!

(블로그에서는 2편 만에 얻어냈지만 실제로는 꽤 많은 시간 동안 노력했다 ㅠㅠ)

이제 간단한 DirectX 프로젝트를 하나 생성해서 간단하게 폰트를 출력해 보려고 한다.

 

일단 SDF.png 와 SDF.png와 함께 생성된 SDF.txt의 내용들을 한번 살펴보자

---

• SDF.png

 

우선 PNG를 보면 투명색 배경에 이렇게 글자들이 줄 맞춰서 쭉 나열되어 있다.

여기에서 한 글자를 확대해서 보면 

이런 모습이다. 이것이 SDF (Signed Distance Field)로 외곽선을 중심으로 안쪽은 + 로 점점 진한 흰색으로 보이고 바깥쪽은 - 로 점점 투명해지는 모습이 된다. 이 텍스쳐를 대충 알파값이 얼마냐에 따라 다양한 가공을 해서 출력을 해주는 것이 바로 SDF Font이다.

 

다음으로 이어서  SDF.txt의 내용을 살펴보자

---

• SDF.txt

텍스트 파일을 열어보면 이렇게 뭔가 알 수 없는 숫자들이 촤라락 나열되어 있지만 정말 다행히도 그리고 친절하게도 해당 값이 어떤 값인지 제목이 위쪽에 적혀 있다.

Code Point, Width, Height, Horizontal Bearing X, Horizontal Bearing Y, Horizontal Advance, Vertical Bearing X, Vertical Bearing Y, Vertical Advance,  Texture Coord X,  Texture Coord Y,  Texture Width,  Texture Height

이렇게 총 13가지의 데이터들이 순서대로 저장되어 있고 각각의 쓰임이 존재한다.

 

일단 맨 뒤에 있는  Texture Coord X,  Texture Coord Y,  Texture Width,  Texture Height 이 4개의 값들은 해당 글자의 UV 시작 위치와 UV좌표 안에서의 해당 글자의 너비와 높이를 뜻하는 것이고 문제가 되는 것이 다른 데이터들이다.

앞에서부터 하나하나 알아보자.

 

1. Code Point

Code Point는 해당하는 글자의 유니코드값이 들어간다. 

나는 완성형 한글을 '가'(0 xAC00)에서부터 '힣'(0 xD7 FF)까지 모두 다 뽑았기 때문에 상당히 많은 데이터들이 들어가 있다.

 

2. Width, Height

Width, Height는 문자 그대로 하나의 문자(Glyph)의 너비와 높이를 말한다.

 

3. Horizontal Bearing X, Horizontal Bearing Y, Horizontal Advance

이제 여기부터는 모르는 용어가 나오기 시작한다. 이 베어링이라는 값과 어드벤스라는 값의 쓰임을 알기 위해서는 우리의 컴퓨터가 어떻게 글자를 그리는지에 대해서 알아야 한다. 우리의 한글은 그나마 높이와 너비가 일정한 편이지만 특히 영어는 글자들에 따라 너비와 높이도 다르고 심지어는 글자가 그려지는 위치까지도 달라진다.

이 영어 단어를 보면 

어떤 글자는 기준이 되는 기준선(BaseLine)의 위에 존재하고 어떤 것은 기준선 아래에 존재한다.

 

또한 글자의 너비와 높이도 전부 제각각이다. 그냥 for문으로 돌려서 20픽셀씩 옆으로 띄워서 출력한다고 글자가 그려지는 것이 아니란 이야기이다.

 

즉 이렇게 해당 문자(Glyph)가 기준이 되는 기준선(BaseLine)에서 얼마나 떨어져 있어야 하는지 그 위치에서 어느 정도의 크기로 그려져야 하는지 또 다음 글자는 어디에서 얼마만큼 떨어뜨려서 출력해야 하는지를 알려주는 값들이 바로바로 저 값들인 것이다.

http://www.soen.kr/lecture/library/freetype/ft3.htm

이 이미지 하나로 저 txt 파일의 모든 값들의 쓰임을 한방에 이해할 수가 있다

현재 나의 펜 위치에서 Bearing X, Y만큼 떨어진 곳이 글자가 그려지기 시작하는 곳이고 해당 위치에서 너비와 높이만큼 글자를 그려준 다음에 내가 글자를 그려주었던 펜 위치에서 advance값만큼 떨어진 곳에서 다음 글자를 똑같이 그려주면 된다는 이야기이다.

 

이제 내가 가지고 있는 준비물들을 어떻게 사용하는지 모두 파악했으니깐 진짜로 진짜로 실제로 글자를 출력해 볼 시간이다.

출력하는건 다음시간에....