2D 우주 게임에서 등각 투영 그래픽 가짜


15

먼저, 내 그림 문제가 무엇 인지 정확히 알고 있으며 문제를 해결하는 방법에 대한 다양한 아이디어가 있습니다. 아이소 메트릭 "환상"이 유지되도록 어떤 프레임이 그려 지는지를 조정하는 방법을 알아 냈습니다.

우주에서 일어나는 2D 조감도 게임을 작성 중입니다. Up is North의 세계에서 아이소 메트릭 그래픽을 사용하려고 노력하고 있습니다. 전통적인 아이소 메트릭 게임에서와 같이 게임 세계가 회전하지 않습니다 (게임은 우주에서, 지형에서 일어나지 않습니다). 다음은 사용하려는 스프라이트 예입니다. http://cell.stat-life.com/images/stories/AsteroidOutpost/Spaceship64.png 시야각이 35 도인 자체 세로축을 기준으로 64 배 회전 iso). 이미지가 생성되었으므로 변경할 있습니다.

명확성을 기하기 위해 북쪽 (위)은 0도이고 동쪽 (오른쪽)은 90이라고 지시했습니다.

내 문제는 내 스프라이트가 게임에서 3D 평면의 차이로 인한 것이라고 생각하는 위치를 항상 향하고있는 것처럼 보이지 는 않는다는 것입니다. 용어를 올바르게 사용하고 있는지 확실하지 않지만 우주선이 한 평면에서 회전하고 뷰 평면이 자체 평면에서 회전 할 것으로 예상합니다. 다음은 문제에 대한 묘사입니다.

http://cell.stat-life.com/images/stories/AsteroidOutpost/ProjectionIssue.png 왼쪽에는 측면도가 있고 오른쪽에는 하향식보기가 있습니다. 맨 위에는 월드의 우주선 / 스프라이트 시트 뷰가 있습니다. 하단에는 스프라이트 화면에 그려졌을 때의 모습 이 있습니다.

오른쪽 상단에는 우주선이 어떻게 회전했는지에 대한 단순화 된 버전이 있습니다 (각 프레임 간에도 분리). 오른쪽 하단 에는 화면에 특정 각도를 그릴 때 스프라이트 향한 것처럼 보이는 각도가 있습니다. 이 문제는 약 45도에서 가장 분명합니다. 다음은 선박이 향하고있는 방향을 가리키는 "스크린 평면"선으로 겹쳐진 이미지입니다. http://cell.stat-life.com/images/stories/AsteroidOutpost/Spaceship64RedLine.png 빨간 선은 항상 배와 정확히 같은 방향을 향해야하지만 보시다시피 투영 문제로 인해 문제가 발생했습니다. 문제를 충분히 설명하기를 바랍니다.

편집 : 우주선이 "선박 평면"에서 회전하는 동안 빨간색 선이 화면 평면에서 회전하므로 선 각도와 화면 각도가 그려 질 때 화면 각도가 크게 다릅니다. 편집 종료

이 배가 한 쪽을 향하지 않는 대상에서 레이저 빔을 쏠 때, 똑바로 쏴야 할 때 다소 이상해 보입니다.

그래서 ... 내가 생각해 낸 해결책은 다음과 같습니다.

  1. 등각 투영 뷰를 위조하거나 크게하거나 집에 가지 마십시오. 내 세상을 이미 돌립니다. (PS : 이것은 내 문제를 해결해 줄 것입니다.)
  2. 스프라이트 시트 (어떻게 든)가 모델을 볼 수있는 "스크린 각도"를 나타내는 프레임을 갖도록 변경하십시오. 따라서 45도 이미지를 요청하면 실제로 화면에서 45도를 향하는 것처럼 보입니다.
  3. 스프라이트 렌더링 시스템이 스프라이트 시트와는 다른 프레임 (어쨌든)을 가져 와서 "일반"프레임을 잡는 것이 재미있을 것임을 알면서 변경하십시오. 따라서 45도 프레임을 잡는 대신 사용자에게 올바르게 보이 도록 ... 33도 프레임 (그냥 추측)을 잡습니다 .
  4. 3D 만 사용하십시오! 훨씬 쉬운 사람이야

하나의 경우 : 어떤 솔루션을 추천 하시겠습니까? 나는 그것이 틀렸다는 것을 알고 있지만 2쪽으로 기울고 있습니다. 스프라이트 생성 도구에 대한 모든 액세스 권한이 있음을 기억하십시오. 방법 3은 나의 두 번째 선택이 될 것입니다. 이 두 가지 방법 모두 원하는 결과를 얻기 위해 각도에 수학을 적용해야합니다. Btw, 농담으로 # 4를 추가했습니다. 3D로 옮기고 싶지 않습니다.

두 가지 방법 : 방법 2 또는 3을 사용하여 입력 또는 출력 각도를 어떻게 조정합니까? 나는 3D 프로젝션과 3D 매트릭스 (2D 매트릭스는 물론) 및 다른 수학을 사용하여 원하는 결과를 얻는 데 그다지 좋은 것은 아닙니다.

큰 소리로 생각하기 : 우주선을 화면 방향에서보고자하는 방향으로 향한 단위 벡터를 취한 후,이를 평면에 투영 한 다음 투영 된 선과 평면 사이의 각도를 알아냅니다. 북쪽에는 표시하려는 선박 그래픽의 각도가 있어야합니다. 권리? (# 3에 대한 해결책?) 남자 ... 나는 그것을 해결할 수 없습니다.

편집하다:

문제가 정적 이미지로 시각화하기 어렵다는 것을 알고 있으므로 Sprite Library Visual Tester가 문제를 표시하도록 준수했습니다. http://cell.stat-life.com/downloads/SpriteLibVisualTest.zip XNA 4.0 이 필요합니다. 이 응용 프로그램은 단순히 스프라이트를 회전시키고 게임이 배가 향해야한다고 생각하는 각도에서 중심점에서 바깥쪽으로 선을 그립니다.

9 월 8 일 수정

"큰 소리로 생각하기"단락에서 계속 : 투영을 사용하는 대신 (어려워 보이기 때문에) 북쪽을 향하는 단위 벡터 (0x, 1y, 0z)를 취할 수 있다고 생각합니다. 스프라이트가 실제로 향한 다음 "보기 평면"에서 X 축 주위의 "스프라이트 평면"으로 바깥쪽으로 다시 회전 한 다음 ... 평평합니까? X와 Y (Z 무시) 만 사용하여 벡터를보기 평면에 다시 투영합니다 (실제로 투영). 그런 다음 새로운 평평한 벡터를 사용하여 각도를 결정하고 그것을 사용하여 뭔가를 할 수있었습니다. 나중에 더 생각하겠습니다.

편집 9 월 8 일 (2)

나는 약간의 성공으로 위에서 내 아이디어를 따르려고 노력했다. 그래서 ... 내 우주선에서 곧바로 나오는 것처럼 보이는 빨간 선을 얻으려면 (테스트 목적 만) 다음을 수행했습니다.

Vector3 vect = new Vector3(0, 1, 0);
vect = Vector3.Transform(vect, Matrix.CreateRotationZ(rotation));
vect = Vector3.Transform(vect, Matrix.CreateRotationY((float)((Math.PI / 2) - MathHelper.ToRadians(AngleFromHorizon))));
Vector2 flattenedVect = new Vector2(vect.X, vect.Y);

float adjustedRotation = (float)(getAngle(flattenedVect.X, flattenedVect.Y));

rotation스크린 각도는 어디에 있고 adjustedRotation이제 스크린 각도는 스프라이트 평면에서 보입니다. 왜 X 대신 Y를 회전시켜야하는지 모르겠지만 아마도 3D와 관련이있을 수도 있습니다.

이제 추가 정보가 있지만이를 사용하여보다 적절한 프레임을 선택하는 방법은 무엇입니까? 뷰 평면에서 스프라이트 평면으로 회전 한 다음 다시 투영하는 대신 다른 방법으로 시도해야합니다. 다음은 조정 된 빨간 선이있는 스프라이트입니다.하지만 실제로하고 싶은 것은 선이 아닌 모델을 조정하는 것입니다 .

9 월 9 일 수정

호 레이! 수정되었습니다! 나는 그것을 고치기 위해 무엇을했는지 설명 할 것이다.

나는 eBusiness의 조언을 따르고 세계 좌표계 (또는 확장 된 ...?)에 의해 "무너졌다". 스크린 코디 시스템과 관련하여 월드 좌표계를 회전시켜야한다는 인상을 받았지만 이것은 본질적으로 솔루션 # 1입니다. 사실이 아니다! Up은 여전히 ​​+ y이고 Right는 여전히 + x입니다. WorldToScreen 및 ScreenToWorld 메서드를 수정하여 월드 좌표와 화면 좌표를 올바르게 변환했습니다. 이 방법은 최적이 아니지만 내 코드베이스에서 변경해야 할 유일한 두 가지 방법이 있습니다.

public Vector2 ScreenToWorld(float x, float y)
{
    float deltaX = x - (size.Width / 2f);
    float deltaY = y - (size.Height / 2f);

    deltaX = deltaX * scaleFactor / (float)Math.Sqrt(3);
    deltaY = deltaY * scaleFactor;

    return new Vector2(focusWorldPoint.X + deltaX, focusWorldPoint.Y + deltaY);
}

public Vector2 WorldToScreen(float x, float y)
{
    float deltaX = x - focusWorldPoint.X;
    float deltaY = y - focusWorldPoint.Y;

    deltaX = deltaX / scaleFactor * (float)Math.Sqrt(3);
    deltaY = deltaY / scaleFactor;

    return new Vector2(size.Width / 2f + deltaX, size.Height / 2f + deltaY);
}

그거였다! 이 두 가지 방법을 변경하면 다른 모든 것에 영향을 미쳤습니다. 내가보고있는 것, 그려진 물체, 클릭 한 곳, 모든 것. 내 우주선은 이제 목표물을 직접 바라보고 모든 것이 제자리에 들어갑니다. 나는 직교 투영법을 실험 할 것입니다. 모든 것이 더 '실제'로 보이는지 확인하십시오.


축하합니다. 플레이 할 수있는 것이 있으면 나를 찌르는 것을 잊지 마십시오. 이것이 어디로 가고 있는지 알고 싶습니다.
aaaaaaaaaaaa

@eBusiness로 약속 : cell.stat-life.com/images/stories/AsteroidOutpost/...cell.stat-life.com/images/stories/AsteroidOutpost/AOOhNoes.png 사항은 선박 방법을 보이는 좋아 그 타워에서 찾고? : D 감사합니다!
존 맥도날드

@eBusiness, 비디오 youtube.com/watch?v=Q8pR9KDBsCo 요청하신 후 다운로드 할 수있는 링크도 있습니다.
존 맥도날드

답변:


4

등각 투시를 선택한 경우 X 축과 Y 축 사이의 배율을 수정해야합니다. 화면 Y 축에서 주어진 거리가 1로 투영되면 화면 X 축에서 같은 거리가 sqrt (3)로 투영됩니다. 따라서 화면에 물건을 평평하게 그리면 다음과 같이됩니다.

draw(object.image, object.x*sqrt(3), object.y)

답이없는 메모 :

  • 왜 스프라이트 시트와 물건을 엉망으로 만들 것입니까? 원하는 경우 3D 렌더러가 아이소 메트릭을 수행하도록 할 수 있습니다.
  • 스프라이트 시트를 사용하고 있는데 왜 앤티 앨리어싱이되지 않습니까?
  • 우주에서 등각 투영, 나는 게임 사용을 본 적이 없다고 생각합니다. 시각적 참조를 위해 명확하게 등각 투영 된 근거가 없기 때문에 그것이 얼마나 잘 작동하는지 잘 모르겠습니다.

1
내 생각 엔 ...이게 모든 것을 고칠 수있어. 쉽게 고칠 수 있으며 시트를 그대로 둘 수 있습니다. 최대한 빨리 시도해보고 어떻게 진행되는지 알려 드리겠습니다. 참고 사항 : 1) 2D를 사용하고 있는데 2D를 사용하고 있으며 3D 모델에서 시트를 생성하고 있습니다. 2) 가장자리는 날카로 워야하지만 단단한 가장자리 안에는 알파 채널을 사용하여 앤티 앨리어스를 사용할 수 있습니다. 3) 나는 3 차원을 시뮬레이션 할 계획이 아니며, 주로 하향식이 아닌 2D 그래픽을 원하며 사물의 측면을 볼 수 있습니다.
존 맥도날드

5

회전 된 스프라이트는 어떻게 생성됩니까? 회전하는 3D 모델의 스크린 샷입니까? 3D 모델링 도구의 카메라 투시로 인해 마주 보는 각도가 벗어날 수 있습니다. 등각 투시도는 3D 공간의 정확한 표현이 아닙니다. '카메라'에서 멀리 떨어진 물건은 더 작아지지 않습니다.

당신은 빠른 수정을 원한다면. 해결 방법 2를 제대로 이해하기 어려울 수 있습니다. 해결책 3은 각도에 맞지 않는 프레임을 각도에 더 적합한 프레임으로 바꾸는 것만 큼 쉬운 것 같습니다.

레이저는 여전히 꺼져 있습니다. 부드러운 회전을하지 않고 특정 범위에서 다른 프레임을 표시 할 때.

편집하다:

문제는 생성 된 스크린 샷이 등각 투시가 아니라 일반적인 3D 카메라 뷰라는 것입니다.

여기에 이미지 설명을 입력하십시오

등각 투영 뷰는 3D 공간을 시뮬레이션하지만 정확한 표현은 아닙니다. 카메라와의 거리가 멀어 질수록 사물이 작아집니다. 스프라이트에서 스케일링 아티팩트가 발생하기 때문에 등각 투시에서는 수행되지 않습니다.

우주선 스크린 샷은 3D 카메라 투시도로 만들어집니다. 그것이 레이저 촬영이 꺼져있는 이유입니다. '아이소 메트릭'과 '관점'의 빨간색 선을 비교하십시오.

스프라이트 생성 부 사용해야 Matrix.CreateOrthographic () 대신 Matrix.CreatePerspective ()을 투영 행렬.


스프라이트는 내가 개발하고있는 3D에서 2D 도구를 사용하여 생성되므로 문제가 해당 도구에있을 수 있습니다. 이 도구는 단순히 3D 모델을로드 한 다음 Spaceship64.png (위)를 달성하기 위해 모델을 (360/64) = 5.625 도로 회전시키고 프레임으로 저장 한 다음 모두 동일한 크기만큼 다시 회전시킵니다. 64 프레임. 모델을 렌더링하는 데 사용되는 코드는 다음과 같습니다. code.google.com/p/sprite-maker/source/browse/trunk/XNAWindow/… 회전은 다른 클래스에서 수행됩니다. 나는 또한 솔루션 2와 3이 서로 반대라고 생각했습니다.
존 맥도날드

내 답변을 수정했습니다. 위 참조.
Stephen

스프라이트 생성기가 직교 투영법을 사용하게하고 @eBusiness가 말하는 것과 같은 세계 좌표계를 변경하도록해야합니다. 어젯밤에 Orthographic 투영법을 사용해 보았는데 배가 어떻게 보였는지는 확실히 바뀌었지만 그 자체만으로는 내가 경험하고있는 각도 문제를 해결하지 못했습니다.
존 맥도날드

편집 내용을 보았습니다. 수정 된 스프라이트는 선박의 중심이 빨간색 선의 중심에서 벗어난 것처럼 보입니다. 배를 빨간 선의 시작점보다 1 ~ 2 픽셀 높게 그리는 것으로 충분합니다. 배가 당신의 세계에서 멀어 질 때 보이는 오류가 변합니까? 그런 다음 X 축을 확장하면이 문제가 해결 될 수 있습니다.
Stephen

1

여기에있는 것은 단순히 아이소 메트릭 모양이라고 생각합니다. 시각적으로 말하면 0deg와 10deg 사이의 차이가 90deg와 100deg 사이의 차이보다 더 큰 것으로 보입니다. . . 그러나 이는 아이소 메트릭이 본질적으로 하나의 축을 압축하기 때문입니다. 그 모양을 원하지 않으면 아이소 메트릭을 원하지 않습니다.

즉, 현재 시각적 문제는 시각적 기준점이 없기 때문이라고 생각합니다. 당신의 두뇌는 당신이 그것을 하향식으로보고 있다고 가정하고 있습니다.-공간, 왜 그렇지 않겠는가-그것을 표준 하향식 뷰로 해석하고 있습니다. 테스트를 위해 플로팅 홀로그램 기준점을 추가해보십시오. 예를 들어 45도 각도의 그리드 또는 우주선 주위의 범위 원 세트. 우주선이 렌더링되는 것과 동일한 등각 평면에있는 것처럼 적절하게 왜곡되어 있는지 확인하십시오. 나는 당신의 두뇌가 관점을 알아 내고 갑자기 올바르게 보일 것입니다.

이제이를 사용자에게 전달하는 방법을 알아 냈습니다. . . 그것은 또 다른 문제입니다.


이 방법 (문제의 방법 # 1)을 사용하여 환상을 완성하기 위해 월드 축을 회전해야합니까?
존 맥도날드

내가 알 수 있듯이 배는 이미 올바르게 렌더링되고 있습니다. 측면도는 아이소 메트릭이 "정확한"것처럼 보이도록 각도를 보여줍니다. "세계 축 회전"의 의미가 무엇인지 잘 모르겠습니다.
ZorbaTHut

"세계 축 회전"이란 카메라를 기준으로 세계를 45도 회전시켜 "North"가 위쪽이 아닌 대각선으로 화면의 오른쪽 위 또는 왼쪽 위를 향하도록합니다. 화면 상단으로.
존 맥도날드


그것은 도움이 될 수 있지만, 공간에서 그렇게 큰 차이를 만들어서는 안됩니다. 세상에 격자를 씌우지 않으면 상관 없습니다.
ZorbaTHut
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.