U E D R , A S I H C RSS

이민석/Blender For2D

Difference between r1.4 and the current

@@ -3,15 +3,23 @@
* 블렌더를 2D 게임 레벨 에디터로 써보자

== 필요한 단축키 ==
=== 화면 제어 ===
* Ctrl + Alt + Q : 쿼터뷰 켜기
* Numpad 숫자들 : 뷰포드 고정
* Shift + F : Fly Cam
* Shift + C : 뷰포트 초기화
* T : 왼쪽 shelf 여닫기
* N : 오른쪽 shelf 여닫기
* Space : 명령 검색
=== 오브젝트 조작 ===
* RMB: 오브젝트 선택
* Tab : 오브젝트 편집 모드
* Ctrl + LMB : (편집 모드) vertex 생성
* F : (편집 모드) edge / face 생성
* Shift + Tab : Snab Grid
* G, R, S : 이동 / 회전 / 확대
* 그 상태에서 X, Y, Z: 해당 축에 대해서만 변환 수행
* T : 왼쪽 메뉴 여닫기
* N : 오른쪽 메뉴 여닫기
* Ctrl + LMB : (편집 모드) vertex 생성
* F : (편집 모드) edge / face 생성
* Ctrl + E, F : edge / face 관련 메뉴

== 장면 구성 예시 ==
attachment:Figure_1._SceneCompositionExample1.png
@@ -27,14 +35,65 @@
{{{
// COLLADA 파일의 가장 기본적인 형태
<COLLADA xmlns="http://www.collada.org/2005/11/COLLADASchema" version="1.4.1">
<asset>...</asset>
<library_lights>...</library_lights>
<library_images/>
<library_effects>...</library_effects>
<library_materials>...</library_materials>
<library_geometries>...</library_geometries>
<library_controllers/>
<library_visual_scenes>...</library_visual_scenes>
<scene>...</scene>
<asset>...</asset> // 파일 정보
<library_lights>...</library_lights> // 빛
<library_images/> // 이미지
<library_effects>...</library_effects> // 빛 관련된 거 같은데
<library_materials>...</library_materials> // 재질
<library_geometries>...</library_geometries> // 기하
<library_controllers/> // ?
<library_visual_scenes>...</library_visual_scenes> // 장면 구성
<scene>...</scene> // 장면 인스턴스
</COLLADA>
}}}
* 지금은 다 필요 없고 기하 정보만 얻어온다
* <library_geometries>, <library_visual_scenes>만 필요
* 기하 원형을 정의해놓고 scene에는 그 원형의 인스턴스를 생성하는 개념
* 플래시의 라이브러리 심볼 - 인스턴스 개념과 같다
 
=== 2D 직사각형 파싱 ===
* plane 오브젝트를 xy 평면에 배치하면 어떻게 표현되는가? (무회전이라고 가정)
attachment:Figure2_geometry_2d_rect.png
* GPU에서 바로 쓸 수 있게 vertex buffer, index buffer 형식으로 기록된다
* index buffer 내용이 <p>0 0 1 0 3 0 2 1 0 1 3 1</p>인데 vertex buffer와 normal buffer에 대한 버퍼를 합쳐놓은 것
* 홀수 번째 원소만 떼어내면 정점에 대한 index buffer가 된다. [0 1 3 2 0 3]
* 물체의 자체 로컬 좌표계를 기준으로 정의된 기하 구조
attachment:Figure3_node_instance.png
* 실제 배치할 때는 3D 행렬로 변환. 행렬 데이터가 1차원 배열인데 '''행 순서'''로 채워진다
* <matrix sid="transform">a b c d e f g h i j k l m n o p</matrix> 는 다음 행렬을 뜻한다
|| a |||| b |||| c |||| d ||
|| e |||| f |||| g |||| h ||
|| i |||| j |||| k |||| l ||
|| m |||| n |||| o |||| p ||
* 파싱 전략
* float_array에서 처음 세 점은 원점(좌상단 모서리), 원점과 접하는 두 점을 나타낸다.
* 세 점에 변환 행렬을 적용한다.
* 변환 후의 세 점을 P, Q, R이라 하면 직사각형을 정의하는 네 값 (left, top, right, bottom)은
* left = min(P.x, Q.x, R.x)
* right = max(P.x, Q.x, R.x)
* top = min(P.y, Q.y, R.y)
* bottom = max(P.y, Q.y, R.y)
* 물론 와인딩 방향은 항상 일정해서 세 점에 대해 구할 필요는 없지만, 변환할 때 z축 중심 90도 회전, x축 기준 180도 회전 같은 걸 실수로라도 하면 좌표가 꼬이기 때문에.. 확실한 방법을 쓴다
* 직사각형이 회전된 경우 사각형의 원점에서 두 접점으로 향하는 벡터를 가지고 표현할 수 있지만, 지금은 회전 안 씀..
 
=== 메트릭(길이 단위) 지정 ===
* 기본 단위는 그리드 한 칸 = 1BU(Blender Unit)
* Export하면 정점 좌표가 전부 BU 기준.. 실제로 쓰기엔 부적합
* 오른쪽 메뉴에서 Scene > Units > Metric > Scale을 조정
* COLLADA > asset > unit 태그에 기록된다
attachment:Figure4_metric.png
* 주의점: 실제 정점 좌표가 바뀌는 게 아니라 길이 단위를 따로 기록하는 것이기 때문에 파싱할 때 요주의!!
* 좌표에만 계수를 곱하면 변환 행렬의 이동 성분이 망한다
* 해결책1. 변환 행렬의 이동 성분에도 계수를 곱한다.
* 주의: 또 다른 데서 계수를 적용할 일이 생길 경우 계산이 꼬일 수가 있다.
* 정점 좌표랑 변환 행렬 말고 또 고려할 데가 있나..? 아직 모르겠다
* 해결책2. 정점 좌표에 변환 행렬까지 적용한 후에 계수를 곱한다.
 
=== 웨이포인트 맵 파싱 ===
* Grid 격자의 메시는 어떻게 표현되는가?
attachment:Figure5_grid.png
* polylist 대신 lines 태그를 사용
* lines > p 태그의 내용이 0 10 1 0 11 1 ... 인데 v(0)-v(10), v(1)-v(0) 이렇게 연결된다는 뜻
attachment:Figure6_grid_element.png
* 격자 말고 Ctrl + LMB로 정점들을 생성한 후 두 정점을 선택해서 임의로 간선을 그어도 export하면 이런 식으로 표현된다.
* 즉 일반적인 웨이포인트 맵을 만들어도 같은 방식으로 파싱할 수 있다.



  • 블렌더 공식 홈페이지: http://www.blender.org/
  • 블렌더 하나도 몰라요
  • 블렌더를 2D 게임 레벨 에디터로 써보자

필요한 단축키

화면 제어

  • Ctrl + Alt + Q : 쿼터뷰 켜기
  • Numpad 숫자들 : 뷰포드 고정
  • Shift + F : Fly Cam
  • Shift + C : 뷰포트 초기화
  • T : 왼쪽 shelf 여닫기
  • N : 오른쪽 shelf 여닫기
  • Space : 명령 검색

오브젝트 조작

  • RMB: 오브젝트 선택
  • Tab : 오브젝트 편집 모드
  • Shift + Tab : Snab Grid
  • G, R, S : 이동 / 회전 / 확대
    • 그 상태에서 X, Y, Z: 해당 축에 대해서만 변환 수행
  • Ctrl + LMB : (편집 모드) vertex 생성
  • F : (편집 모드) edge / face 생성
  • Ctrl + E, F : edge / face 관련 메뉴

장면 구성 예시

Figure_1._SceneCompositionExample1.png
[PNG image (218.39 KB)]


COLLADA 파일 포맷 분석

  • 저장하면 블렌더 고유 확장자인 .blend 파일로 저장
  • File > Export > Collada (Default) (.dae) COLLADA 포맷으로 export
    • 주의 한 블렌더 파일에 scene을 여러 개 만들 수 있는데 현재 선택된 scene만 export된다.
    • 모든 scene을 export하는 방법이 있는지 모르겠다...
    • 지금은 scene마다 별개의 파일로 export하는 걸로 땜빵
  • 단순히 XML 포맷이므로 액션스크립트 3.0에서 E4X로 조작 가능
  • COLLADA reference card: https://www.khronos.org/files/collada_reference_card_1_4.pdf

// COLLADA 파일의 가장 기본적인 형태
<COLLADA xmlns="http://www.collada.org/2005/11/COLLADASchema" version="1.4.1">
    <asset>...</asset>                                   // 파일 정보
    <library_lights>...</library_lights>                 // 빛
    <library_images/>                                    // 이미지
    <library_effects>...</library_effects>               // 빛 관련된 거 같은데
    <library_materials>...</library_materials>           // 재질
    <library_geometries>...</library_geometries>         // 기하
    <library_controllers/>                               // ?
    <library_visual_scenes>...</library_visual_scenes>   // 장면 구성
    <scene>...</scene>                                   // 장면 인스턴스
</COLLADA>
  • 지금은 다 필요 없고 기하 정보만 얻어온다
    • <library_geometries>, <library_visual_scenes>만 필요
    • 기하 원형을 정의해놓고 scene에는 그 원형의 인스턴스를 생성하는 개념
    • 플래시의 라이브러리 심볼 - 인스턴스 개념과 같다

2D 직사각형 파싱

  • plane 오브젝트를 xy 평면에 배치하면 어떻게 표현되는가? (무회전이라고 가정)
    Figure2_geometry_2d_rect.png
    [PNG image (75.91 KB)]

  • GPU에서 바로 쓸 수 있게 vertex buffer, index buffer 형식으로 기록된다
    • index buffer 내용이 <p>0 0 1 0 3 0 2 1 0 1 3 1</p>인데 vertex buffer와 normal buffer에 대한 버퍼를 합쳐놓은 것
    • 홀수 번째 원소만 떼어내면 정점에 대한 index buffer가 된다. 0 1 3 2 0 3
  • 물체의 자체 로컬 좌표계를 기준으로 정의된 기하 구조
    Figure3_node_instance.png
    [PNG image (13.52 KB)]

  • 실제 배치할 때는 3D 행렬로 변환. 행렬 데이터가 1차원 배열인데 행 순서로 채워진다
    • <matrix sid="transform">a b c d e f g h i j k l m n o p</matrix> 는 다음 행렬을 뜻한다
      a b c d
      e f g h
      i j k l
      m n o p
  • 파싱 전략
    • float_array에서 처음 세 점은 원점(좌상단 모서리), 원점과 접하는 두 점을 나타낸다.
    • 세 점에 변환 행렬을 적용한다.
    • 변환 후의 세 점을 P, Q, R이라 하면 직사각형을 정의하는 네 값 (left, top, right, bottom)은
      • left = min(P.x, Q.x, R.x)
      • right = max(P.x, Q.x, R.x)
      • top = min(P.y, Q.y, R.y)
      • bottom = max(P.y, Q.y, R.y)
    • 물론 와인딩 방향은 항상 일정해서 세 점에 대해 구할 필요는 없지만, 변환할 때 z축 중심 90도 회전, x축 기준 180도 회전 같은 걸 실수로라도 하면 좌표가 꼬이기 때문에.. 확실한 방법을 쓴다
    • 직사각형이 회전된 경우 사각형의 원점에서 두 접점으로 향하는 벡터를 가지고 표현할 수 있지만, 지금은 회전 안 씀..

메트릭(길이 단위) 지정

  • 기본 단위는 그리드 한 칸 = 1BU(Blender Unit)
  • Export하면 정점 좌표가 전부 BU 기준.. 실제로 쓰기엔 부적합
  • 오른쪽 메뉴에서 Scene > Units > Metric > Scale을 조정
  • COLLADA > asset > unit 태그에 기록된다
    Figure4_metric.png
    [PNG image (23.69 KB)]

  • 주의점: 실제 정점 좌표가 바뀌는 게 아니라 길이 단위를 따로 기록하는 것이기 때문에 파싱할 때 요주의!!
    • 좌표에만 계수를 곱하면 변환 행렬의 이동 성분이 망한다
    • 해결책1. 변환 행렬의 이동 성분에도 계수를 곱한다.
      • 주의: 또 다른 데서 계수를 적용할 일이 생길 경우 계산이 꼬일 수가 있다.
      • 정점 좌표랑 변환 행렬 말고 또 고려할 데가 있나..? 아직 모르겠다
    • 해결책2. 정점 좌표에 변환 행렬까지 적용한 후에 계수를 곱한다.

웨이포인트 맵 파싱

  • Grid 격자의 메시는 어떻게 표현되는가?
    Figure5_grid.png
    [PNG image (53.95 KB)]

  • polylist 대신 lines 태그를 사용
  • lines > p 태그의 내용이 0 10 1 0 11 1 ... 인데 v(0)-v(10), v(1)-v(0) 이렇게 연결된다는 뜻
    Figure6_grid_element.png
    [PNG image (62.67 KB)]

  • 격자 말고 Ctrl + LMB로 정점들을 생성한 후 두 정점을 선택해서 임의로 간선을 그어도 export하면 이런 식으로 표현된다.
  • 즉 일반적인 웨이포인트 맵을 만들어도 같은 방식으로 파싱할 수 있다.
Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:30:31
Processing time 0.0418 sec