지돌스타 - 쿠키랩 블로그

어도비는 2011년 2월 말에 Flash Player Incubator를 배포했다. 이것은 Flash Player 11이 정식 배포되기 전 개발자들이 테스트할 수 있도록 Adobe에서 실험용 버전으로 배포한 것이다. 다음 링크는 Flash Player Incubator 공식 페이지이다.

Adobe AIR and Adobe Flash Player Incubator : http://goo.gl/aFqZH

이 글은 Flash Player Incubator에 대한 간략한 소개와 함께 Flash Builder 개발환경을 만들어 테스트하는 방법을 다룬다.(처음 해보는 사람을 위해서 자세하게 쓰려고 노력했다.)

1. Flash Player Incubator 에 대해

이번에 개발용으로 배포된 Flash Player Incubator는 다음 두 가지 feature가 추가되었다.

1.1 "Molehill" 3D API
GPU가속을 위한 low-level 3D API를 지원한다.  기존 Flash Player 10.2에서 지원하지 못했던 z-buffering, stencil color buffer, fragment와 vertex shader, 큐브 텍스처 등을 기본으로 지원한다. 이 API를 사용하면 윈도우에서는 DirectX 9, 리눅스와 MacOS에서는 OpenGL 1.3, 그리고 모바일에서는 OpenGL ES 2.0 기반에서 렌더링이 될 수 있도록 한다. 만약 여기에 상관되어 있지 않다면 기존처럼 CPU 렌더링한다. 기존 Flash Player 10.1 에서는 3D API가 있긴 하지만 z-buffering을 지원하지 않으면서도 수백 개의 폴리곤을 CPU 렌더링하는데 30fps가 나왔던 반면, Molehill에서는 z-buffering이 적용된 수십만 개의 폴리곤을 HD급으로 렌더링하는데 60fps가 나온다. 단, 웹브라우져에서 이를 실행하는 경우, GPU가속을 하기 위해서는 wmode가 direct로 설정되어야 한다. 다음 페이지는 Flash Incubator의 Molehill 3D API에 대한 Adobe 공식 페이지이다.

3D APIs for Adobe Flash Player and Adobe AIR : http://goo.gl/yLdvx

3D APIs는 매우 low-level API이기 때문에 직접 다루면 개발 생산성과 효율성에 문제가 있을 수 있으므로 Alternative3D, Away3d, CopperCube, Flare3D, Minko, Sophie3D, Yogurt3D와 같은 ActionScript 3D 프레임워크들로 좀더 쉽게 개발할 수 있는 환경이 조성될 것이다. 이들 중에 조사한바 다음 프레임워크는 Molehill 3D APIs를 지원하고 있다.

• Away3D 4.0 Alpha : http://goo.gl/nLPZ5 
• Alternativa 3D : http://goo.gl/jqfE
• Flare3D 2.0 Pre-release : http://goo.gl/1vgCA 
• CopperCube 2.5 : http://goo.gl/3LHii
  
  

1.2 Cubic Bezier Curves
flash.display.Graphic에 cubicCurveTo 메서드가 추가되었다. 이 메서드는 커스텀 ActionScript 코드를 사용하지 않고 쉽게 Cubic Bezier Curve를 그릴 수 있게 해준다. 어떤 것인지 궁금하면 다음 동영상으로 보자.

http://www.vimeo.com/10187896
http://goo.gl/yooER

이 글은 위 두 가지 feature중 Flash Player Incubator 환경에서 "Molehill" 3D APIs를 테스트할 수 있는 개발환경을 구성하는 방법을 소개한다. 특별히 Flash Builder Burrito를 기반으로 설명할 것이다. 아쉽지만 Flash CS5 IDE 사용방법을 몰라서 이에 대한 설명은 하지 않겠다. 대신 Flash CS5에서 테스트 환경 구성은 다음 글을 통해 공부할 수 있다.

http://blog.naver.com/q3korea/120125249427


2. Flash Player Incubator 버전 설치하기 

Flash Player Incubator는 현재 MS Windows, MacOSX, Linux용으로 배포하고 있다. 
http://labs.adobe.com/downloads/flashplatformruntimes_incubator.html

설치를 할 때 문서 아래에 Uninstaller를 먼저 실행하고 설치하기 바란다. 이 버전은 다 개발용이기 때문에 Debugging 기능이 내장되어 있다. 설치를 하지 않으면 아래 예제들을 실행할 수 없다.

참고로 Google Chrome을 사용하면 구동되는 Flash Player를 선택할 수 있다. 기존 Flash Player를 지우지 않고 전환해서 테스트 해볼 수 있기 때문에 유용하다. 다음 글을 참고한다.

Google Chrome 에서 Flash Player 10과 11(Molehill)을 전환하여 사용하는 방법 : http://ufx.kr/blog/142 


3. Molehill 3D 경험하기

Molehill 3D API의 결과물을 한번에 볼 수 있는 동영상을 경험해보길 바란다. 
http://blog.theflashblog.com/?p=2638

다음 링크를 통해 Molehill 3D APIs 를 이용한 다양한 Flash 어플들을 실행해 볼 수 있다. 단, Flash Player Incubator 버전이 여러분의 브라우저에 설치 되어야만 제대로 볼 수 있다.
 

http://molehill.zombietycoon.com/

http://alternativaplatform.com/en/demos/maxracer/

http://alternativaplatform.com/ru/demos/metro2033online/

http://www.lidev.com.ar/demos/fractals/tree/broomstick/

http://www.mcfunkypants.com/2011/molehill-terrain-demo/

http://infiniteturtles.co.uk/projects/away3d/broomstick/ShallowWaterDemo.html

http://www.swfgeek.net/2011/02/28/cubewall-using-away3d-4-0broomstick-jiglibflash-on-molehill/

http://not-so-stupid.com/clients/not-so-stupid/away4/duck/

http://aerys.in/minko-quake-3

http://infiniteturtles.co.uk/projects/away3d/broomstick/LoaderOBJTest.html

http://infiniteturtles.co.uk/projects/away3d/broomstick/EnvMapTest.html

http://infiniteturtles.co.uk/projects/away3d/broomstick/AnimBlendTest.html

http://infiniteturtles.co.uk/projects/away3d/broomstick/EnvMapDiffuseTest.html

http://acemobe.com/dungeon/demo.php

http://www.ambiera.com/coppercube/demo.php?demo=backyard

http://iflash3d.com/performance/how-fast-is-molehill/

http://ryanspeets.com/uncategorized/adobe-releases-molehill/

http://www.nulldesign.de/wp-content/uploads/2011/nd2d_spritesheets/Main.html

http://www.ringo.nl/projects/jiglibflash/Away3DGridSystem.html
http://www.ringo.nl/projects/jiglibflash/Away3DTriangleMesh.html
http://www.ringo.nl/projects/jiglibflash/Away3DStackingTest.html
http://www.ringo.nl/projects/jiglibflash/Away3DTerrainTest.html
http://www.ringo.nl/projects/jiglibflash/Away3DCarDrive.html

더 많은 데모 : http://blog.theflashblog.com/?p=2607


4. Flash Player Incubator용 API 문서 보기

Flash Player Incubator에 적용된 API를 학습하기 위한 문서이다. 다운로드 받아 보면 좋겠다.
Download the documentation for Flash Player 11,0,0,58 

API 문서를 보기 전에 아래 글을 선행적으로 본다면 이해하는데 도움이 될 것이다.
Digging more into the Molehill APIs
MoleHill Getting Started


5. Flash Builder Burrito에 Flash Player Incubator 개발환경 만들기

Flash Builder Burrito는 beta 버전으로 Flex Hero 및 모바일 개발을 할 수 있는 환경을 제공한다. Flash Builder Burrito에 함께 포함되어 있는 Flex SDK는 Flash Player 10.1 기반으로만 개발할 수 있기 때문에 Flash Player Incubator 환경에서 개발할 수 있는 환경을 따로 구축할 필요가 있다. 다음 과정을 통해 개발 환경을 구축 할 수 있다.

5.1. 다운로드
개발 환경을 구성하기 전에 다음 링크를 통해 해당 자료를 다운로드 받는다.

- Flash Player 11,0,0,58 Incubator : http://goo.gl/yXySu
- Flash Builder Burrito(로그인 필요) : http://goo.gl/iM7g
- playerglobal.swc : http://goo.gl/NnEyx
- Flex SDK 4.5.0.19786 : http://goo.gl/2lAIb

5.2. 설치

설치하는 과정은 아래 순서대로 따라 하면 되겠다. 복잡하지 않으니 천천히 하도록 하자.

첫 번째로 Flash Player 11,0,0,58 Incubator를 설치한다. 이 글대로 진행했다면 이미 설치가 되었을 것이다. 설치가 정상적으로 이루어졌다면 해당 브라우저에서 Flash Player가 구동이 될 때 화면 아래 Flash Player 11,0,0,58 문구가 고정되어 새겨져 있을 것이다.

두 번째로 Flash Builder Burrito를 설치한다. Flash Builder Burrito는 일종의 Flash관련 어플을 개발하는 Adobe공식 통합개발도구(IDE)이다. Flash Develop, FDT등 다양한 툴이 있긴 하지만 여기서는 Flash Builder Burrito만 다룬다. 개인적으로는 Eclipse plug-in 버전을 다운받아 설치할 것을 권장 하지만 Flash Builder 에 제작 환경에 경험이 없다면 그냥 All-in-one 버전으로 설치한다.

세 번째로 Flex SDK 4.5.0.19786를 압축을 풀어 {Flash Builder Burrito 설치 경로}/sdks/에 복사해 넣는다. 윈도우라면 /Program Files/Adobe/Adobe Flash Builder Burrito/sdks/flex_sdk_4.5.0.19786 이 될 것이다. 이 SDK는 Flash Player 10.2에 대응하도록 되어 있다. 

네 번째로 다운받은 flashplayer_inc_playerglobal_022711.swc를 {Flash Builder Burrito 설치 경로}/sdks/frameworks/libs/player에 11.0 폴더를 만들고 복사한다. 이름을 playerglobal.swc로 수정한다. playerglobal.swc 는 Flash Player 11.0 이상의 API를 이용해 개발하고 컴파일할 수 있도록 하기 위해 필요하다. 

다섯 번째로 Flash Builder Burrito를 실행한다. 중간에 워크스페이스 경로를 설정하는 부분이 있는데 원하는 경로로 설정하면 되겠다. 이 경로상에 여러분의 Flash, AIR 프로젝트 들이 생성될 것이다.


5.3. 설정

Flash Builder를 이용해 몇 가지 설정을 통해 개발환경을 만들어보자.

첫 번째로 메뉴에서 Window > Preference로 들어간다. 창이 뜨면 왼쪽에 Flash Builder를 펼치고 그 안에 Installed Flex SDKs를 선택한다. 아래 화면과 같이 나올 것이다. 
 

여기에서 아까 설치했던 Flex SDKs를 추가한다. 좌측에 Add 버튼을 누르고 {Adobe Flash Builder Burrito 설치경로}/sdks/flex_sdk_4.5.0.19786 를 선택한다. 이때 Name은 Flex 4.5(FP11)로 정하자. 그리고 추가된 SDK를 위 그림처럼 Default SDK로 체크한 뒤 OK를 누른다.

두 번째로 ActionScript 3.0 프로젝트를 생성하고 몇 가지 설정을 하겠다. 메뉴에서 File > New > ActionScript Project 를 선택한다. 그럼 아래와 같은 창이 뜬다. Project name에 아무 이름이나 넣는다. 우리는 FP11Test로 했다. 참고로 Flex SDK version이 이전에 선택한 SDK가 나옴을 확인할 수 있다. 필요하다면 여기서 설치된 SDK를 선택할 수 있음을 의미한다. 우리는 기본 SDK를 사용할 것이므로 그대로 두고 Finish 버튼을 누른다. 

세 번째로 Flash builder의 Package Explorer 창에 FP11Test 프로젝트가 만들어졌을 것이다. 

프로젝트는 src와 html-template, bin-debug 폴더가 있다. src는 여러분이 만들 actionscript 3.0 기반 코드이며 여기서 기본적으로 만들어진 FP11Test.as는 FP11Test 클래스이며 flash.display.Sprite 기반으로 만들어졌다. 일종의 Main 클래스이다. html-template는 배포를 위해 사용하는 것으로 컴파일된 swf를 웹브라우져상에 배포하는데 있어서 필요한 html, javascript 코드가 담겨 있다. 개발자는 필요하다면 이 코드를 수정하면 컴파일 시 반영된다. bin-debug는 html-template를 기반으로 컴파일 된 swf와 함께 컴파일 된 결과물이다. 이는 실제배포 소스는 아니며 디버깅용도로 사용된다. flash builder상에서 이 어플을 실행하면 FP11Test.html이 웹브라우저상에 실행되며 그 안에 FP11Test.swf가 포함되어 실행된다. 

Flex 4.5(FP11) SDK를 사용하고 있음을 보여주고 있다. 이전에 Flex 4.5(FP11) SDK에 playerglobal.swc를 복사해뒀던 것을 기억할 것이다. 하지만 여기서 보여지고 있는 playerglobal.swc는 Flash Player 10.2 버전의 API를 담은 SWC이다. 우리는 아까 복사해둔 11.0 버전을 지원하는 playerglobal.swc가 선택이 되도록 해야 한다. 


위 그림상에서 보는 데로 프로젝트(FP11Test)를 선택한 상태에서 메뉴의 Project > Properties를 선택하자. 아래 그림과 같은 창이 나올 것이다. 오른쪽 메뉴에서 ActionScript Compiler를 선택한 뒤 Adobe Flash Player options에 Use a specific version을 11.0.0으로 바꾼다. 또한 Compiler Options에 -swf-version=13를 넣는다. HTML wrapper는 그대로 둬도 되지만 Check target player version과 Enable integration with browser navigation은 의미가 없으므로 체크를 하지 않도록 한다. 그리고 OK 버튼을 누르면 되겠다. 

마지막으로 Flash Player 11환경에서 GPU 가속을 시키려면 wmode가 direct로 설정되어 있어야만 한다. 프로젝트상에 html-template내 index.template.html을 연다. 참고로 이때 더블 클릭하면 웹브라우저가 실행되어 버린다. 더블 클릭하지 말고 마우스 오른쪽 버튼을 눌러 Open With > Text Editor로 열면 html 소스코드를 볼 수 있다. (더블클릭때마다 웹브라우저를 열지 않는 방법이 있다. 메뉴 > Window > Preference > General > Editors > File Associations를 참고하자.) index.template.html 내에 스크립트 상에 var params = {}; 부분이 있다. 그 아래 params.wmode = "direct";를 추가하자. 
 

5.3. 실행 
이제 실행해볼 수 있게 되었다. Ctrl+F11(Run) 또는 F11(Debug)를 눌러 실행해보자. 아래 화면처럼 브라우저 창에 Adobe Flash Player 11 (11,0,0,58d) (Incubator build)가 뜨면서 실행되었으면 성공이다. 만약 실행이 안되거나 컴파일 에러가 난다면 위 과정을 다시 살펴보길 바란다.

5.4. 간단한 코드 짜보기 

이제 Molehill 3D API를 직접 적용해보자. 여기서는 소스 코드를 분석해서 설명하기 보다 그저 실행해보는데 목적이 있음을 알아두자.

아래 링크로 가면 Molehill 3D API에 대한 소개와 간단한 테스트 코드가 있다. 

MoleHill Getting Started : http://labs.jam3.ca/2011/03/molehill-getting-started/ 

이 소스는 AGAL 어셈블러인 AGALMiniAssembler 소스가 필요하다. 
AGALMiniAssembler.as : http://goo.gl/ITcrn

아래 링크로부터 이 두 개 소스를 받자.

이것을 압축을 풀어 프로젝트 src에 복사하자. 그리고 Ctrl+F11이나 F11로 실행하면 다음과 같은 화면을 볼 수 있다. 

다른 소스도 테스트 해보자.
먼저 프로젝트 내에 src/(Defaul package)를 선택한 다음 오른쪽 마우스 버튼을 눌러 New > ActionScript Class를 선택한다.

두 번째로 창이 뜨면 Name에 Cube를 넣고 Finish를 한다.

세 번째로 아래 링크에서 샘플 소스를 복사한 뒤 아까 만든 Cube.as를 선택해 이전 코드를 삭제하고 붙여넣자.
http://goo.gl/ITcrn

네 번째로 아래 그림처럼 Cube.as를 선택하고 마우스 오른쪽 버튼을 눌러 Set as Default Application을 선택한다. 이렇게 하면 이 프로젝트의 기본 Main 실행 클래스가 Cube.as가 된다. 이 상태에서 Ctrl+F11이나 F11를 눌러 실행해보자. 

실행 시 Bad input size라는 Error가 발생한다면 IE내에서 실행하는 Flash Player의 버그이다(참고 : http://blog.jidolstar.com/656). 이 때는 아래 코드로 대체해보자.

성공적으로 실행하면 다음과 같은 화면을 볼 수 있을 것이다. 

이 소스에 대한 설명은 http://ltslashgt.com/2011/02/28/molehill-spinning-cube/ 를 참고한다.


6. 정리하며
지금까지 Flash Player Incubator 환경에서 Molehill 3D를 테스트 해볼 수 있는 개발환경을 구축하고 테스트하는 방법을 알아보았다. 하지만 이 글은 Molehill 3D API에 대한 자세한 설명을 배제했다. 이 글 다음에는 Molehill 3D API에 대한 내용을 정리할 계획을 가지고 있다. 

Molehill 3D API를 이용한 마지막 2개의 테스트 소스를 보면 알겠지만 굉장히 접근하기 형태의 Native API이기 때문에 코딩으로 직접 3D를 표현하는 것은 질 좋은 3D Flash 어플을 만드는데 한계가 있다. 그렇기 때문에 Away3D나 Alternativa3D와 같은 프레임워크를 도입해야 하는 이유가 여기에 있는 것이다. 이 부분에 대해서도 이후에 글을 적어보려고 한다. 

앞선 테스트 어플들에 3D가 아닌 2D화면도 봤을 것이다. Molehill이 무조건 3D에서만 GPU를 이용하는 것은 아니다는 것을 보여준다. 기존에 많은 2D Flash 컨텐츠도 Molehill을 적극 활용하면 생각지도 못했던 양질의 퍼포먼스를 기대할 수 있다는 것을 보여주는 셈이다. 일종에 아이폰의 OpenGL ES기반으로 2D를 표현하기 위한 Cocos2d가 있듯이 Flash에서도 이러한 형태로 표현할 수 있음을 알 수 있다. 아래 링크의 동영상을 보면 그 이유를 알 수 있을 것이다.
http://clockmaker.jp/blog/2011/03/molehill_video/ 

Flash Player에 3D 기능을 추가됨에 따라 Unity3D에 Flash Player에서도 동작할 수 있도록 해주는 기능도 포함되었다. 이것은 Unity3D 개발자나 Flash 개발자 양쪽에 꽤 흥미로운 사실이다. 

 
아직 Flash Player 11이 정식오픈 되려면 시간이 필요할 것이다. 버그 수정을 거치면서 안정화를 시켜야 하기 때문이다. 

Flash 3D가 표현된다는 것은 무조건 좋은 일만은 아니다. Flash는 웹브라우저 및 크로스 플랫폼에서 운용되기 때문에 접속할 때마다 새로 자원을 로드 해야 한다. 이는 자원을 로컬에 저장해두는데 제약이 있기 때문인데 결과적으로 접속할때마다 필요한 자원을 로드함에 있어서 2D자원보다 3D자원이 훨씬 크고 관리하기 어렵다. 이는 위에 이미 소개한 Flash 3D 예제를 보면서 느꼈을 것이다. 멋진 3D 화면을 보기 위해 자원을 로드하는데 꽤 오랫동안 기다려야 한다. 물론 AIR로 개발한다면 상관없겠지만 웹기반에서 소셜게임을 만든다면 이야기가 다르다. 이 말은 자원관리가 그만큼 어려워지고 전문적으로 해야함을 의미한다.

그럼에도 불구하고 Flash가 3D를 표현하는데 GPU를 지원한다는 사실만으로도 많은 장점이 있기에 3D를 준비해야 차기 Flash 시장의 미래를 선도할 수 있을 것이다. 미리 준비할 필요가 있다.
 

7. 관련사이트 
Adobe AIR and Adobe Flash Player Incubator : http://goo.gl/pvwzd
Flash Player 11,0,0,58 Incubator Release Notes : http://goo.gl/FlH7C
Flash Player 11,0,0,58 Incubator 다운로드 : http://goo.gl/yXySu
Digging more into the Molehill APIs : http://goo.gl/d2WYu
Away3d 4.0 Alpha : http://goo.gl/bZBav
Alternativa 3D  : http://goo.gl/jqfE
Flare3D 2.0 Pre-release : http://goo.gl/1vgCA 
Flash CS5 환경에서 테스트 : http://blog.naver.com/q3korea/120125249427
Molehill Getting Start : http://blog.naver.com/q3korea/120126463667 
Molehill spinning cube : http://ltslashgt.com/2011/02/28/molehill-spinning-cube/
Unity, Flash & 3D on the web : http://goo.gl/OAY1q
 
글쓴이 : 지돌스타(http://blog.jidolstar.com/759) 

지난 Adobe MAX 2010에서 가장 이슈가 되었던 것중에 하나가 GPU 가속을 상시 지원해줄 수 있는 Molehill이라는 Flash Player 3D API 가 아닌가 싶다. Molehill은 Flash Player 3D APIs의 코드네임이다.

지금까지 Flash Player가 일부 GPU 가속을 지원해줬기 때문에 테스트 정도로만 가능했지만, 미래에 GPU를 상시 지원하게 되는 Molehill 3D API가 차세대 Flash Player에 장착하게 되면 파급효과가 클 것으로 생각된다. 

CPU에 의존해 왔던 3D 기존 프레임워크인 Away3D나 Alternativa3D등은 Molehill로 변환되어 배포될 것이고 많은 Flash 컨텐츠 제작사, 소셜게임제작사들이 새로운 Flash Player 3D API를 이용한 다양한 어플들을 내놓을 것이다. 더불어 이들 어플들은 고스란히 모바일에도 접목되게 될 것으로 예상이되어 파급효과가 클 것으로 전망이 된다.

지속적으로 Molehill에 대해서 관심을 가지고 지켜볼 필요가 있겠다.



위에 두 영상화면을 보고 Flash Player 에서 동작하는 모습이다라면 누가 믿겠는가? ㅎㅎ

읽을만한 글
Adobe Labs - 3D APIs for Adobe Flash Player and Adobe AIR
Adobe MAX 2010에서 소개된 차세대 GPU 가속 Flash API - Molehill
Molehill Flash Player 3D APIs 소개
Flash Player 3D APIs 간단한 소개글 - 잼있음
[동영상][at MAX 2010] GPU Acceleration on Adobe AIR "Molehill" - 우야꼬 군이 직접 미국에 MAX 행사에가서 찍은 영상입니다.
[동영상][at MAX 2010] Alternativa 3D in Adobe MAX 2010 - 우야꼬 군이 직접 미국에서 Molehill을 체험했군요.
[동영상] Adobe MAX 2010 - Alternativa 3D 시연 - 땡굴이 님께서 Alternativa의 시연모습을 동영상으로 담았습니다.
Molehill Programming Tutorial
ActionScript의 언어 순위는 몇 위일까?

글쓴이 : 지돌스타(http://blog.jidolstar.com/733)

Flash, Flex, AIR, ActionScript 프로젝트를 진행하면서 모든 코드를 손수 만들어 사용하는 것은 그다지 추천할 만한 일은 아니다. 왜냐하면 아무리 실력있는 개발자라도 프로젝트에 필요한 코드모음을 전부 만드는 것은 너무 큰 노력이 들뿐만 아니라 코드의 유지보수에도 매우 많은 시간을 허비할 수 있기 때문이다.

Flash 기반 코드 라이브러리는 이미 수년간에 걸쳐 공개되어 있다. 조금만 노력을 기울이면 3D, 트윈, 물리엔진, 수학, 보안, 데이터관리, MVC,   as3corelib, Papervision3d, Away3d, Flex 컴포넌트, 각종 유틸등 ActionScript/Flex/AIR/Flash에 관련된 수십,수백가지 우량(?) 라이브러리들을 쉽게 사용할 수 있다.

• AS3 Code Libraries 
• 유용한 ActionScript 3.0 라이브러리 #1 
• 유용한 ActionScript 3.0 라이브러리 #2

위에 링크되어 있는 라이브러리만 해도 정말 현업에 바로 사용할 수 있는 것들이 정말 많다. 또한 단순히 공개차원을 넘어 지속적으로 업데이트가 되며 완성도가 높아지고 있다.

그럼 다시 생각해보자. 내가 3D 게임을 만들기 위해 3D 엔진을 만들어야할 것인가? 내가 트윈(tween)을 구현하기 위해 트윈엔진을 만들어야 할것인가? 각종유틸이 필요해서 그걸 다 내가 만들것인가? 만약 검증되지 않고 아직 별도로 공개되어 있지 않은 것이라면 당연히 만들어야할 것이다. 하지만 기본적으로 큰 노력없이 쉽게 사용할 수 있고 자동으로 업데이트 및 검증까지 해주는 사람들이 만든 훌륭한 라이브러리가 있는데... 왜!!! 그걸 다 만들 필요가 있는가이다.

재미있게도 위에서 소개한 라이브러리들은 대부분 Google 코드(http://code.google.com)에 공개되어 있다. 이는 무엇을 의미하는가? 업데이트할때마다 압축파일을 받아 라이브러리에 복사하는 수고가 필요없이 SVN으로 간단하게 업데이트 할 수 있다는 것을 말한다. 이것을 적극 활용하는 방법을 소개하는 것이 이 글을 쓰는 목적이다.

필자는 Flash 개발자라면 누구라도(?) 잘 알고 있는 Flash 3D 엔진인 Papervision3D과 Away3D를 SVN을 이용해 가져와 프로젝트에서 활용하는 방법을 언급하고자 한다. 개발환경은 Flash Builder 4를 기준으로 하겠다. (거의 모든 기능을 Flex Builder 3에서도 할 수 있다.)


1. Flex/Flash Builder에 SVN 플러그인 설치
이제부터 설명할 공개 라이브러리를 사용하기 위해 Flash builder에 SVN 플러그인을 설치해야한다. 방법은 어렵지 않다. 다음 링크를 참고한다.

Flex Builder 에서 Subversion(SVN) 사용하기


2. Google Code에서 Papervision3D SVN 주소 확인하기
Google 코드 사이트(http://code.google.com)로 들어가 papervision3d로 검색해서 Papervison3D 구글코드 페이지(http://code.google.com/p/papervision3d/)로 들어간다. Papervision3d의 라이센스와 각종 링크들을 보면 다른 정보들도 확인할 수 있다.

물론 화면 우측 Featured downloads에 있는 zip 및 swc 파일을 받아 직접 프로젝트에 복사해 사용할 수 있으나(많은 블로그에 이 방법을 소개하고 있다.) 앞서 말한데로 새로 업데이트되는 최신소스를 바로바로 사용해보려면 이 방법은 너무 불편하다. 게다가 공개 라이브러리를 사용하는게 4~5개 이상 넘어가면 지속적인 업데이트가 힘들다.

어떤 개발자는 너무 최신 버전이면 버그가 있을지도 모르지 않겠느냐? 라고 의심할 수 있을 것이다. 하지만 Papervision3D와 같이 이미 대중적(?)으로 인기를 모으고 있는 라이브러리라면 철저한 검증없이 함부로 최신화(commit) 하지 않는다.


위 Source 탭으로 들어가 Checkout 메뉴를 보면 아래처럼 SVN checkout 주소가 있다. 이 주소는 저장소의 주소라 불리운다. 여러분은 이 주소로 Papervision3D 소스 코드를 받아올 수 있겠다.




3. SVN을 이용해 Papervision3D 라이브러리 프로젝트 만들기
이제 본격적으로 Papervision3d를 SVN으로 받아와 라이브러리 프로젝트를 만들어보자.

Flash Builder를 실행한다. 실행되면 메뉴에서 File > Import 로 들어간다. 아래 처럼 창이 뜨면 SVN > Checkout Projects from SVN 을 선택한다음 Next 버튼을 누른다.



아래 처럼 보이면 새로운 저장소 위치를 만들기 위해 Create a new repository location을 선택후 Next 버튼을 누른다. 이는 새로운 저장소라는 것은 SVN을 접속할 주소를 의미한다고 보면 되겠다. 여기서는 Google 코드에서 봤던 주소 http://papervision3d.googlecode.com/svn/trunk 가 되겠다.

아래처럼 나오면 주소를 입력하고 Next 버튼을 누른다.



아래 화면처럼 나오면 http://papervision3d.googlecode.com/svn/trunk 저장소 내에 있는 Papervision3D 소스 경로를 볼 수 있다. 우리는 ActionScript 3.0 기반에서 제작하기 때문에 as3/trunk를 선택한다. 이때 선택하는 기준은 그 안에 src 폴더의 상위 폴더이어야 한다. 이 방식은 다른 라이브러리를 참조해서 하더라도 저장소내에 구조가 조금씩 다르지만 같은 방법을 사용하므로 기억하자.


위 창에서 Next 버튼을 누르면 다음 창으로 전환된다. 세부적으로 Check out 하는 방법을 설정할 수 있는데 우리는 최신 버전을 사용할 것이기 때문에 바로 Finish 버튼을 누른다.



이제 Papervison3D 라이브러리를 가져올 SVN 주소 설정을 끝냈으므로 이 라이브러리가 담길 프로젝트를 생성해야한다. 위 절차를 모두 끝내면 자동적으로 다음과 같이 New Project 창이 뜬다. 이때 Flex Library Project를 선택하면 되겠다.


다음 그림처럼 Project name을 Papervision3D(이름은 아무거나 써도 상관없다.)으로 설정하고 Flex SDK Version을 선택한 다음 Finish버튼을 누른다.


참고로 Flex SDK Version을 선택시에 라이브러리가 AIR 코드가 포함되어 있는 경우라면 Include Adobe AIR libraries를 선택해야한다.(예: as3corelib) 또한 라이브러리가 구동되기 위한 SDK가 무엇인지도 알아야한다. 가령 Flash Player 10부터 3D API를 사용한 라이브러리라면 그것을 지원하는 SDK를 사용해야한다는 것을 의미한다. SDK는 Adobe Labs에서 최신버전을 받아 사용하면 된다.(방법을 모르시면 댓글을 ^^)

아래처럼 Confirm Overwrite 메시지가 뜨면 그냥 OK 버튼을 누른다.



이제 구글 코드 저장소로부터 아래처럼 Papervision 3D 코드를 받아온다.


Package Explorer에 추가된 Papervion3D 라이브러리 프로젝트를 확인하자. 하지만 만약 에러메시지가 나온다면 다음과 같이 해보자. 해당 프로젝트를 선택하고 오른쪽 마우스 버튼을 눌러 컨텍스트 메뉴에서 Properties로 들어가보자. 아래와 같은 창이 나오면 왼쪽 메뉴에서 Flex Library Build Path를 누르고 우측 상단 탭에 Classes를 선택한다. 그리고 Select classes to include in the library를 선택한 다음 src 앞에 check박스를 체크한다. 그리고 OK 버튼을 누르면 다시 컴파일 되면서 컴파일 에러가 사라질 것이다.



여러분은 이제 최신버전의 Papervision3D를 사용할 수 있게 되었다. 아래처럼 해당 프로젝트를 선택하고 오른쪽 마우스 버튼을 눌러 컨텍스트 메뉴에서 Team > Update to Head를 선택하는 것만으로 최신버전으로 업데이트 할 수 있게 된다. 이러한 방법은 SVN으로 공유한 다른 라이브러리들을 항상 최신으로 유지하는데 쉬운 방법을 제공하게 된다.


한가지 언급하자면 위에서 소개하는 방법은 Papervision3D를 예로 들었기 때문에 다른 라이브러리의 공개 형태에 따라 수행하는 방법의 차이가 있을 수 있다는 점을 강조하고 싶다. 그러한 점은 개발자가 알아서 체크할 수 있어야 한다.


4. 조금만 더 가다듬어 보기 (관심있는 사람만 읽으면 됨)
3번까지 진행하는 것만으로도 개발하는데 전혀 문제없지만 아래 내용을 좀더 알고 가면 더욱 좋을 듯 싶다.

지금까지 구글 코드로부터 SVN 저장소를 통해 받아온 Papervison3d 라이브러리는 설정파일을 제외한 ActionScript 3.0 코드가 대부분이다. 그래서 실질적으로 프로젝트에 필요한 설정구성요소인 .actionScriptProperties나 .flexLibProperties등의 파일들은 Papervision3D 개발자가 처음부터 저장소에 공유하지 않는다. 왜냐하면 .actionScriptProperties, .flexLibProperties들은 Flex Builder나 Flash Builder와 같이 특정 개발툴에서 필요한 파일이기 때문에 다른 IDE에서는 무의미 할 수 있기 때문이다.

아래 처럼 Papervision3D의 프로젝트 이름에 SVN으로 공유되었으나 폴더그림에 * 표시가 되어 있다. 이 표시는 원래 SVN 저장소 내용과 프로젝트 내용이 다를때 나온다. 이 다른 내용이라는 것은 금방 언급했던 .actionScriptProperties, .flexLibProperties 등이다.


Flash Builder에서는 프로젝트내의 .actionScriptProperties, .flexLibProperties 파일을 직접 볼 수 없도록 되어 있다. 이는 Filter 처리가 되어 있기 때문이다. 아래 그림처럼 선택해 Filter 처리된 파일들을 전부 check out하자.



위 그림 처럼 Filter 처리된 파일을 check out하면 아래처럼 프로젝트 내에 .actionScriptProperties, .flexLibProperties 등을 볼 수 있게 된다. 이 파일의 아이콘에 ?로 표시된 것은 저장소에 이 파일이 존재하지 않음을 나타내는 것이다.

* 표시나 ? 표시를 없애기 위해서 이러한 파일들이 SVN 저장소와 공유되지 않도록 무시할 수 있도록 하면 된다. Flash Builder에 설치된 SVN 플러그인은 이러한 기능을 지원해준다. 메뉴에서 window > Preference로 들어가 창이 뜨면 Team > Ignored Resources로 들어가면 아래 처럼 나온다. 여기에 다음 내용을 Add Pattern하자.





이제 아래 그림처럼 * 표시나 ? 표시가 없어지고 저장소의 원본과 프로젝트의 소스가 일치함을 나타내는 표시로 바뀐다.




5. Away3D를 SVN으로 받아오기

Papervision3D 라이브러리를 이용해서 애플리케이션을 만드는 예제는 굳이 설명안해도 된다고 생각한다. 대신 Away3D를 활용하는 방법을 약간 언급하고자 한다.

Away3D도 Papervision3D처럼 구글코드(http://code.google.com/p/away3d/)를 통해 SVN으로 소스를 공개하고 있다. 하지만 Away3D는 Papervision3D와 다르게 Flash Player 9, Flash Player 10 버전을 함께 제공하면서 Flash Player 10 3D 라이브러리를 이용한 3D 엔진인 Away3DLite도 제공한다. 또한 몇가지 유용한 예제도 함께 제공하고 있다.


Away3D 저장소 주소(http://away3d.googlecode.com/svn/trunk)로 접속하면 아래처럼 나온다. fp9과 fp10은 각각 Flash Player 9, 10 버전을 의미한다. 아무래도 Flash Player 10 버전이 최신이면서 효율적으로 만들어졌으므로 fp10에 있는 공개 라이브러리와 예제소스를 참고할 것이다.

fp10에 보면 Away3D, Away3DLite 소스가 있음을 확인할 수 있다. 또한 그에 대한 예제는 Examples에 들어 있다.


아래는 해당 라이브러리와 예제의 저장소 주소이다.

• Away3D 라이브러리 : http://away3d.googlecode.com/svn/trunk/fp10/Away3D 
• Away3DLite 라이브러리 : http://away3d.googlecode.com/svn/trunk/fp10/Away3DLite
• Away3D 라이브러리 예제 : http://away3d.googlecode.com/svn/trunk/fp10/Examples/Away3D/as/ 
• Away3DLite 라이브러리 예제 : http://away3d.googlecode.com/svn/trunk/fp10/Examples/Away3DLite/as/

여러분은 Papervision3D를 SVN으로 프로젝트를 만든 것처럼 Away3D에서도 그래도 하면 된다. 단. Examples의 경우 중간에 프로젝트 생성시 ActionScript 프로젝트를 선택하기 바란다. 물론 Flash Player 10 기준이라는 점도 명심하자.

예제 프로젝트에서는 해당 라이브러리 프로젝트의 경로를 포함시켜줘야한다. Away3D_Example은 Away3D 라이브러리를 Away3DLite_Examples는 Away3dLite 라이브러리를 포함해야한다. 방법은 간단하다. Away3D_Example와 Away3DLite_Examples내에 libs 폴더안에 각각의 라이브러리 프로젝트에서 만들어진 bin디렉토리에 있는 
swc를 복사하면 된다. 하지만 이는 애플리케이션을 전부 만들고 배포하고 난 다음에 백업을 위해 선택할 방법이고 실제로 개발할때는 다음과 같이 한다.

1. Away3D_Example 프로젝트를 선택한다.
2. 메뉴에서 Project > Properties를 선택한다.
3. 창이 뜨면 좌측 ActionScript Build Path(Flex의 경우 Flex Build Path)를 선택한다.
4. 상단 Library path 탭을 선택한다.
5. Add Project를 선택한 다음 Away3D 라이브러리를 선택한다.
6. OK 버튼을 누른다.
7. Away3D_Example의 .actionScriptProperties를 연다.
아래 그림처럼  default package에 있는 소스 들은 전부 애플리케이션들이다. 이 코드들이 진정한 애플리케이션으로서 동작하려면 .actionScriptProperties내에 application으로 등록해야한다. 수작업이긴 해도 전부 등록하자. 또는 해당 as 파일을 선택후 마우스 오른쪽 버튼을 눌러 Set as Default Application 항목을 선택해도 된다. 이는 애플리케이션으로 등록하는 동시에 Default 애플리케이션으로 잡아준다. Default 애플리케이션을 지칭하는 것은 .actionScriptProperties 파일 내에 actionScriptProperties 태그의 mainApplicationPath 속성이 그 역할을 한다.

위 처럼 설정하면 이제 예제 파일들을 아무 문제없이 동작시킬 수 있을 것이다.
8. Away3DLite_Example도 위와 비슷한 방법으로 하면 되겠다.

아래는 Away3DLite_Examples에 있는 Advanced_Mario1000.as 애플리케이션을 실행하는 화면이다.

아마 어떤 애플리케이션은 as3dmod 라이브러리가 필요하다는 에러가 나올것이다. 이것도 비슷한 방법으로 Google Code에서 가져올 수 있다. 단, 몇가지 다른 설정을 해야하는데 여기서 설명하지 않고 각자의 몫으로 돌리겠다.


정리하며

개발자라면 Google Code와 친해져야하지 않을까? 또한 기존 라이브러리가 있는가 검색을 해보는 성의가 있어야하지 않을까? 그리고 그 라이브러리를 잘 활용하는 방법을 스스로 깨달으려고 노력해야하지 않을까?

잘못된 사항이나 더 좋은 정보가 있다면 얼마든지 댓글이나 트랙백 부탁한다.


참고
bs-papervision : http://code.google.com/p/bs-papervision/ 
as3dmod : http://code.google.com/p/as3dmod/
sandy3d : http://www.flashsandy.org 
alternativa3D : http://alternativaplatform.com/en/alternativa3d/

글쓴이 : 지돌스타(http://blog.jidolstar.com/639)

 

Flash 3D에 관련된 3D 엔진 및 학습할 만한 사이트를 골라 네이버 오픈캐스트에 발행했습니다. 요즘 Flash 3D에 푹빠져 있는데 관심있는 분들과 함께 공부하고 싶네요. 전 3D 초급수준이라 공부할 것도 많네요. ㅎㅎ

 

http://opencast.naver.com/FL188/5

 

좋은 자료 되길 바랍니다.

 

글쓴이 : 지돌스타(http://blog.jidolstar.com/576 )

 

Alternativa3D 공식페이지 : http://alternativaplatform.com/en/alternativa3d/