2D 게임 해상도를 독립적으로 만들려면 어떻게해야합니까?

간단한 2D 게임을하고 있습니다. 휴대 전화 버전을 완성했습니다.

그러나 상사는 게임이 RT에서 작동하기를 원합니다. "전환"을 수행하고 있지만 화면 크기를 다음과 같이 하드 코딩했기 때문에 버튼이 잘못된 위치에 있습니다.

 texture = game.Content.Load<Texture2D>("StartScreen");
 mainFrame = new Rectangle(0, 0, game.GraphicsDevice.Viewport.Width, game.GraphicsDevice.Viewport.Height);

 // button definitions
 startbrect = new Rectangle(300, 258, 88, 88);
 startbtext = game.Content.Load<Texture2D>("bplay");

이 예에서는 Windows 전화의 화면과 일치하도록 크기를 정의했기 때문에 mainframe괜찮 startbrect습니다. 모든 Windows 8 휴대폰 화면이 다른 경우 반응 형 디자인을 어떻게 처리 할 수 ​​있습니까? 매번 좋은 크기를 계산하는 수식이나 매크로가 있습니까?

참조 화면 크기를 사용하고 모든 비율을 동일하게 유지하면서 모든 것에 맞게 크기를 조정합니다.

private static float CalcRatio(Vector2 Sizes)
{
    return Sizes.y/Sizes.x;
}

public static Vector2 CalculateNewPos(Vector2 RefPos, Vector2 RefScreenSize, 
                                      Vector2 CurrentScreenSize)
{       
    return new Vector2((RefPos.x/RefScreenSize.x) * CurrentScreenSize.x, 
                       (RefPos.y/RefScreenSize.y) * CurrentScreenSize.y);
}

public static Vector2 CalculateNewSize(Vector2 RefSize, Vector2 RefScreenSize,
                                       Vector2 CurrentScreenSize)
{       
    float origRatio = CalcRatio(RefSize);
    float perW = RefSize.x * 100f / RefScreenSize.x;    
    float newW = perW / 100f * CurrentScreenSize.x;
    float newH = newW * origRatio;
    return new Vector2(newW, newH);
}

게임이 참조 해상도와 실질적으로 다른 비율의 해상도에서 잘 보이도록하려면 모든 종류의 화면에 맞는 "재생 가능 영역"을 정의하고 모든 게임 플레이의 핵심적인 시각적 요소를 배치하십시오. 그 밖의 모든 것을 배경으로 채우십시오. 일반적으로 내 기준 재생 가능 영역은 기준 화면 크기만큼 큽니다.

세로 방향에서는 (새로운) 재생 가능 영역을 계산하여 화면이 세로로 채워지고 가로로 차지하는 공간이 비율을 유지하는 데 필요한만큼 커집니다. 가로 방향에서는 화면을 가로로 채우고 세로 크기를 설정할 때 비율을 유지합니다.

자세한 내용은 http://en.wikipedia.org/wiki/Safe_area_(television) 를 참조하십시오 . 동일하지는 않지만 비슷한 개념입니다.

해상도 독립적 레이아웃에 대한 가장 쉽고 자연스러운 접근 방식은 상대적 (백분율) 방식이라고 생각합니다. 따라서 시작부터 실제 해상도로는 작동하지 않고 가능한 한 균일 한 [0,1] x [0,1] 사각형에서만 작동합니다.

즉 screen_size, 주어진 object_size및 주어진 상대 위치 (px, py)(예 : 화면 중앙의 경우 0.5, 0.5)에 대해 객체의 왼쪽 위 모서리는 다음과 같이 계산됩니다.

x = px * screen_size.width - 0.5 * object_size.width
y = py * screen_size.height - 0.5 * object_size.height

아이디어는 분명해야합니다. 준비된 추상화는

x = cx1 * screen_size.width + cx2 * object_size.width + cx3
y = cy1 * screen_size.height + cy2 * object_size.height + cy3

모든 위치는로 정의됩니다 (cxi, cyi). 이것에 의해 테두리 등이 있거나없는 모서리에 객체를 배치 할 수 있습니다.

단일 요소 크기 (단추, 레이블 등)도 조정해야합니다.

MonoGame의 전문 IRR (Independent Resolution Renderer)이라는이 문제에 대한 플랫폼 독립적 인 솔루션이 있습니다. 매우 간단한 사용법이 있습니다.

1. Initialize () 메소드 에서 IRR 작성

   _irr = 새로운 ResolutionRenderer (this, VirtualResolutionWidth, VirtualResolutionHeight, _gfx.PreferredBackBufferWidth, _gfx.PreferredBackBufferHeight);

2. 전화 _irr.Draw () 의 각주기 그리기 () 호출
3. 공급 _irr.GetTransformationMatrix () 임의의 SpriteBatch.Begin () 는 IRR를 사용하려면 호출합니다.

설명은 여기에 있습니다 : http://panthernet.ru/forum/index.php?/topic/17-monogamexna-examples-v14/?p=44

코드는 다음과 같습니다. https://github.com/panthernet/Monogame-Examples