텍스트 객체 렌더링

Flash Text Engine을 사용하면 상당한 최적화를 달성할 수 있습니다. 하지만 텍스트 한 줄을 표시하기 위해 많은 클래스가 필요합니다. 이로 인해 TextLine 클래스를 사용하여 편집 가능한 텍스트 필드를 만들면 대량의 메모리와 많은 줄의 ActionScript 코드가 요구됩니다. TextLine 클래스는 더 빨리 렌더링되고 더 적은 메모리를 요구하는 정적 텍스트와 편집 가능하지 않은 텍스트에 가장 적절합니다.

비트맵 캐싱 기능을 사용하면 벡터 내용을 비트맵으로 캐시하여 렌더링 성능을 높일 수 있습니다. 이 기능은 복잡한 벡터 내용에 유용하며 렌더링을 위해 처리가 필요한 텍스트 내용과 함께 사용하는 경우에도 도움이 됩니다.

다음 예제는 비트맵 캐싱 기능과 opaqueBackground 속성을 사용하여 렌더링 성능을 향상시키는 방법을 보여 줍니다. 다음 그림에서는 사용자가 무언가를 로드하는 동안 표시될 수 있는 일반적인 시작 화면을 보여 줍니다.

다음 그림에서는 TextField 객체에 프로그래밍 방식으로 적용되는 부드럽게 효과를 보여 줍니다. 텍스트가 장면 위쪽에서 가운데까지 부드럽게 천천히 내려옵니다.

다음 코드는 부드럽게 효과를 만듭니다. preloader 변수는 현재 대상 객체를 저장하여 속성 조회를 최소화하므로 성능이 저하될 수 있습니다.

wait_mc.addEventListener( Event.ENTER_FRAME, movePosition ); 
  
var destX:Number=stage.stageWidth/2; 
var destY:Number=stage.stageHeight/2; 
var preloader:DisplayObject; 
  
function movePosition( e:Event ):void 
{ 
    preloader = e.currentTarget as DisplayObject; 
     
    preloader.x -= ( preloader.x - destX ) * .1; 
    preloader.y -= ( preloader.y - destY ) * .1; 
     
    if (Math.abs(preloader.y-destY)<1) 
        preloader.removeEventListener( Event.ENTER_FRAME, movePosition ); 
}

여기에서 Math.abs() 함수를 인라인으로 이동하여 함수 호출 수를 줄이고 성능을 더욱 향상시킬 수 있습니다. 가장 좋은 방법은 destX 및 destY 속성에 int 유형을 사용하여 고정 소수점 값을 사용하는 것입니다. int 유형을 사용하면 Math.ceil() 또는 Math.round() 와 같이 느린 메서드를 통해 값을 수동으로 반올림할 필요 없이 완벽한 픽셀 물리기를 구현할 수 있습니다. 값을 지속적으로 반올림하면 객체가 매끄럽게 이동하지 않으므로 이 코드에서는 좌표를 int로 반올림하지 않습니다. 모든 프레임에서 좌표가 가장 가까운 반올림된 정수로 물려지므로 객체가 매끄럽지 않게 이동할 수 있습니다. 그러나 이 기법은 표시 객체의 최종 위치를 설정할 때 유용할 수 있습니다. 다음 코드를 사용하지 마십시오.

// Do not use this code 
var destX:Number = Math.round ( stage.stageWidth / 2 );  
var destY:Number = Math.round ( stage.stageHeight / 2); 

다음 코드는 훨씬 빠릅니다.

var destX:int = stage.stageWidth / 2;  
var destY:int = stage.stageHeight / 2; 

비트 시프트 연산자를 사용하여 값을 분할하면 이전 코드를 훨씬 더 최적화할 수 있습니다.

var destX:int = stage.stageWidth >> 1;  
var destY:int = stage.stageHeight >> 1;

비트맵 캐싱 기능은 런타임에서 동적 비트맵을 사용하여 객체를 손쉽게 렌더링하도록 합니다. 현재 예제에서는 TextField 객체가 포함된 동영상 클립이 캐시됩니다.

wait_mc.cacheAsBitmap = true;

성능을 향상시키는 다른 한 방법은 알파 투명도를 제거하는 것입니다. 알파 투명도는 이전 코드에서처럼 투명 비트맵 이미지를 그릴 때 런타임의 로드를 증가시킵니다. opaqueBackground 속성을 통해 특정 색상을 배경색으로 지정하여 이 문제를 피할 수 있습니다.

opaqueBackground 속성을 사용하는 경우 메모리에 만들어진 비트맵 표면에 여전히 32비트가 사용됩니다. 그러나 알파 오프셋이 255로 설정되고 투명도가 사용되지 않습니다. 따라서 opaqueBackground 속성은 메모리 사용을 줄이지 않지만 비트맵 캐싱 기능을 사용하는 경우 렌더링을 향상시킵니다. 다음 코드에는 모든 최적화가 포함되어 있습니다.

wait_mc.addEventListener( Event.ENTER_FRAME, movePosition ); 
wait_mc.cacheAsBitmap = true; 
  
// Set the background to the color of the scene background 
wait_mc.opaqueBackground = 0x8AD6FD; 
var destX:int = stage.stageWidth >> 1; 
var destY:int = stage.stageHeight >> 1; 
var preloader:DisplayObject; 
  
function movePosition ( e:Event ):void 
{ 
    preloader = e.currentTarget as DisplayObject; 
     
    preloader.x -= ( preloader.x - destX ) * .1; 
    preloader.y -= ( preloader.y - destY ) * .1; 
     
    if ( Math.abs ( preloader.y - destY ) < 1 ) 
        e.currentTarget.removeEventListener ( Event.ENTER_FRAME, movePosition ); 
}

이제 애니메이션이 최적화되었으며 투명도를 제거하여 비트맵 캐싱이 최적화되었습니다. 휴대 장치에서 비트맵 캐싱 기능을 사용하는 동안 애니메이션의 다양한 상태에서 스테이지 품질을 LOW 및 HIGH 로 전환하는 것을 고려하십시오.

wait_mc.addEventListener( Event.ENTER_FRAME, movePosition ); 
wait_mc.cacheAsBitmap = true; 
wait_mc.opaqueBackground = 0x8AD6FD; 
  
// Switch to low quality 
stage.quality = StageQuality.LOW; 
var destX:int = stage.stageWidth>>1; 
var destY:int = stage.stageHeight>>1; 
var preloader:DisplayObject; 
  
function movePosition( e:Event ):void 
{ 
    preloader = e.currentTarget as DisplayObject; 
     
    preloader.x -= ( preloader.x - destX ) * .1; 
    preloader.y -= ( preloader.y - destY ) * .1; 
     
    if (Math.abs(e.currentTarget.y-destY)<1) 
    { 
        // Switch back to high quality 
        stage.quality = StageQuality.HIGH; 
        preloader.removeEventListener( Event.ENTER_FRAME, movePosition ); 
    } 
}

하지만 이 경우에 스테이지 품질을 변경하면 런타임에서 현재 스테이지 품질에 맞춰 TextField 객체의 비트맵 표면을 강제로 다시 생성하게 됩니다. 이러한 이유로 비트맵 캐싱 기능을 사용할 때는 스테이지 품질을 변경하지 않는 것이 가장 좋습니다.

여기서 수동 비트맵 캐싱 방법을 사용할 수도 있습니다. 동영상 클립을 투명하지 않은 BitmapData 객체로 그리면 런타임에서 비트맵 표면을 강제로 다시 생성하는 일 없이 opaqueBackground 속성을 시뮬레이션할 수 있습니다.

이 방법은 시간이 지나도 변경되지 않는 내용에 매우 효과적입니다. 하지만 텍스트 필드의 내용이 변경될 수 있는 경우에는 다른 전략을 사용해야 합니다. 예를 들어 응용 프로그램이 로드된 정도를 나타내는 비율에 따라 계속해서 업데이트되는 텍스트 필드를 생각해 봅니다. 텍스트 필드 또는 이 필드에 포함된 표시 객체가 비트맵으로 캐시된 경우 내용이 변경될 때마다 해당 표면이 생성되어야 합니다. 표시 객체 내용이 지속적으로 변경되므로 여기에서 수동 비트맵 캐싱을 사용할 수 없습니다. 이러한 상수 변경으로 인해 BitmapData.draw() 메서드를 수동으로 호출하여 캐시된 비트맵을 업데이트해야 할 수 있습니다.

Flash Player 8(및 AIR 1.0)부터는 스테이지 품질 값에 관계없이 렌더링이 가독성을 위한 앤티앨리어싱으로 설정된 텍스트 필드가 완벽하게 앤티앨리어싱이 적용된 상태로 유지됩니다. 이 방법은 메모리를 더 적게 소모하지만 CPU 처리를 더 많이 요구하며 비트맵 캐싱 기능보다 약간 더 느리게 렌더링됩니다.

다음 코드에서는 이 방법을 사용합니다.

wait_mc.addEventListener( Event.ENTER_FRAME, movePosition ); 
  
// Switch to low quality 
stage.quality = StageQuality.LOW; 
var destX:int = stage.stageWidth >> 1; 
var destY:int = stage.stageHeight >> 1; 
var preloader:DisplayObject; 
function movePosition ( e:Event ):void 
{ 
    preloader = e.currentTarget as DisplayObject; 
     
    preloader.x -= ( preloader.x - destX ) * .1; 
    preloader.y -= ( preloader.y - destY ) * .1; 
     
    if ( Math.abs ( preloader.y - destY ) < 1 ) 
    { 
        // Switch back to high quality 
        stage.quality = StageQuality.HIGH; 
        preloader.removeEventListener ( Event.ENTER_FRAME, movePosition ); 
    } 
}

모션 상태의 텍스트에는 이 옵션(가독성을 위한 앤티앨리어싱)을 사용하지 않는 것이 좋습니다. 텍스트의 크기를 조절할 때 이 옵션으로 인해 텍스트가 정렬된 상태로 유지되도록 시도하므로 이동 효과가 생성됩니다. 하지만 표시 객체의 내용이 지속적으로 변경되고 크기가 조절된 텍스트가 필요한 경우 품질을 LOW 로 설정하여 모바일 응용 프로그램의 성능을 향상시킬 수 있습니다. 모션이 끝나면 품질을 HIGH 로 다시 전환합니다.

Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.