유튜브에 올라와있는 'OpenTK' 플랫폼 튜토리얼을 따라하는 포스팅입니다.
'OpenTK'는 'OpenGL', 'OpenCL', 'OpenAL'가 합쳐진 C#랩퍼입니다.
0. 원본
OpenTK Platformer Tutorials: Part 3 - The View Class
뷰클래스를 만들어 보는 화면을 제어 합니다.
뷰클래스의 역할은 카메라와 같습니다.
1. 'View' 클래스 만들기
뷰를 다루기위한 클래스를 만들어 봅시다.
이 클래스에서는 카메라의 위치와 확대 배율, 각도를 제어 합니다.
class View
{
/// <summary>
/// 위치
/// </summary>
public Vector2 position;
/// <summary>
/// 각도, + = 시계방향
/// </summary>
public double rotation;
/// <summary>
/// 확대
/// 1 = 기본
/// 2 = 2x 확대
/// </summary>
public double zoom;
public View(Vector2 startPosition
, double startZoom = 1.0
, double startRotation = 0.0)
{
this.position = startPosition;
this.zoom = startZoom;
this.rotation = startRotation;
}
public void Update()
{
}
public void ApplyTransform()
{
Matrix4 transform = Matrix4.Identity;
//위치를 잡기위해 음수(-)값을 주므로서
//양수값을 주는 경우 카메라가 오른쪽으로 이동하는 효과를 주게 됩니다.
transform = Matrix4.Mult(transform, Matrix4.CreateTranslation(-this.position.X, -this.position.Y, 0));
transform = Matrix4.Mult(transform, Matrix4.CreateRotationZ(-(float)this.rotation));
transform = Matrix4.Mult(transform, Matrix4.CreateScale((float)this.zoom, (float)zoom, 1.0f));
GL.MultMatrix(ref transform);
}
}
'Matrix4.Mult'를 통해 위치, 확대, 앵글을 조절합니다.
'Matrix4.CreateTranslation'을 카메라의 위치를 잡습니다.
움직이는 방향이 카메라 기준이 아니라 오브젝트 기준이라 카메라 입장에서는 카메라가 반대로 이동하는 것처럼 보이게 됩니다.
여기에 지정된 값을 마이너스(-)로 주무로서 카메라가 움직이는 것 처럼 움직이게 됩니다.
만약 X값이 양수이면 오브젝트가 왼쪽으로 이동하면서 카메라가 오른쪽으로 이동하는 것처럼 보이게 되죠.
지금은 2D를 다루고 있으므로 'Z' 값은 지정하지 않습니다.
'Matrix4.CreateRotationZ'를 이용하여 카메라를 회전시킵니다.
위와 같은 이유로 여기도 마이너스(-)로 동작시켜 카메라가 회전하는 것 처럼 보이게 만듭니다.
'Matrix4.CreateScale'을 이용하여 확대/축소를 합니다.
'Z'는 2D이므로 '1.0'로 고정합니다.
2. 기존 코드에 기능 추가
기존 'Game'클래스에 뷰 클래스를 생성하여 동작하도록 합니다.
지역 변수로 'view'를 추가 합니다.
View view;
클래스의 생성자에 다음과 같이 'View' 클래스를 인스턴스를 생성합니다.
this.view = new View(Vector2.Zero, 2.0, MathHelper.PiOver4);
'OnRenderFrame' 함수에 'GL.ClearColor(Color.CornflowerBlue);' 밑에 'View' 클래스의 'ApplyTransform()'함수를 호출하는 코드를 추가 합니다.
view.ApplyTransform();
그리고 그 위에 'GL.LoadIdentity();'를 추가하여 행열을 초기화합니다.
GL.LoadIdentity();
3. 테스트 하기
이제 테스트를 해봅시다.
'View' 클래스를 생성할 때 값을 이리저리 바꿔봅시다.
첫 번째 파라메타인 위치를 옮기면 양수값을 주면 오브젝트가 왼쪽으로 움직이는 것을 볼 수 있습니다.
이것은 카메라가 오른쪽으로 이동하고 있다는 의미가 됩니다.
두 번째 파라메타인 확대 배율 입니다.
세 번째 파라메타는 회전입니다.
변수형이 'double'이라 '45.0'와 같은 값을 사용하는 것도 가능하고 'MathHelper.PiOver4'와 같은 미리 정의된 값을 사용할 수 있습니다.
4. 자동으로 이동 시키기
이제 카메라의 동작을 확인하기 위해 자동으로 카메라가 움직이도록 합니다.
'Game'클래스의 'OnUpdateFrame' 함수의 베이스 밑에 다음 코드를 추가합니다.
view.position.Y += 0.01f;
이제 실행해보면 오브젝트 들이 밑으로 내려가는 것을 볼 수 있습니다.
(3D 좌표계는 Y값이 커지면 위로 올라갑니다.)
4. 자동으로 이동 시키기
사실 2D작업에서 통째로 오브젝트를 옮기는 것은 패널이나 그룹과 같은 기능으로 구현하는 것이 좋습니다.
보통 카메라같이 보는 영역 자체가 수정되면 보이는 영역 자체가 달라지는 효과라서 말이죠 ㅎㅎㅎ
