2. 기기 회전(Device Rotation)

오늘날 스마트폰 및 태블릿의 매우 멋진 기능은 물리적으로 기기의 방향을 인식하고 이에 따라 사용자 인터페이스를 업데이트할 수 있다는 것입니다.

Starling의 방향 변경을 감지하려면 먼저 응용 프로그램의 AIR 구성 파일을 업데이트해야 합니다. 다음 설정이 포함되어 있는지 확인하십시오.

1
2
<aspectRatio>any</aspectRatio> // (1)
<autoOrients>true</autoOrients> // (2)

(1) 초기 종횡비 (세로, 가로 또는 기타).
(2) 시작할 때 앱이 자동 방향 지정을 시작할지 여부를 나타냅니다.

회전기기가 하면 Starling 스테이지에서 RESIZE 이벤트를 수신할 수 있습니다. 오리엔테이션이 변경될 때마다 전달됩니다. 결국 오리엔테이션 변경은 스테이지 크기가 항상 변경되도록 합니다 (너비 및 높이 전환).

해당 이벤트 핸들러에서 Starling viewPort 및 stage의 크기를 업데이트하십시오.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
stage.addEventListener(Event.RESIZE, onResize);

private function onResize(event:ResizeEvent):void // (1)
{
    updateViewPort(event.width, event.height);
    updatePositions(event.width, event.height);
}

private function updateViewPort(width:int, height:int):void // (2)
{
    var current:Starling = Starling.current;
    var scale:Number = current.contentScaleFactor;

    stage.stageWidth  = width  / scale;
    stage.stageHeight = height / scale;

    current.viewPort.width  = stage.stageWidth  * scale;
    current.viewPort.height = stage.stageHeight * scale;
}

private function updatePositions(width:int, height:int):void // (3)
{
    // 게임을 구성하는 오브젝트의 위치를 ​​업데이트하세요.
}

(1) 이 이벤트 핸들러는 장치가 회전할 때 호출됩니다.
(2) 현재 화면 크기 (픽셀 단위)에 따라 stage 및 viewPort의 크기를 업데이트합니다.
(3) 사용자 인터페이스를 업데이트하여 새로운 방향에 맞춥니다.

이벤트 리스너에서 viewPort 및 스테이지 크기를 수동으로 업데이트해야 한다는 점에 유의하십시오. 기본적으로 응용 프로그램은 변경되지 않고 그대로 유지되므로 응용 프로그램이 잘리게 나타납니다. 위의 코드는 이를 수정합니다. 그것은 모든 스케일 팩터에 대해 작동합니다.

마지막 부분은 훨씬 더 어려워질 것입니다. 사용자 인터페이스를 업데이트하여 새로운 스테이지 크기에 맞춥니다. 이것은 모든 게임에서 의미가 있는 것은 아닙니다. 그렇다면 추가적인 노력을 고려해야 합니다. 여러분의 사용자가 그것을 고마워할 것입니다!

Starling에 제공되는 Scaffold 프로젝트에는 이 기능을 구현할 수 있는 기능이 포함되어 있습니다.

3. 요약

실수하지 마십시오: 모바일 플랫폼을 위한 개발은 쉽지 않습니다. 하드웨어가 다양하기 때문에 계획을 세우고 코드를 현명하게 구조화해야 합니다. 또한 시장은 매우 경쟁적이어서 디자인은 대중으로부터 눈에 띄어야 합니다.

Starling은 이 과정에서 당신을 도울 수있는 일을 합니다! 이 장에서 배운 도구를 사용하면 이러한 어려움을 극복할 수 있습니다.

Was this article helpful?

Related Articles