모션블러 기능을 만들고 있습니다.
어쩔 수 없이 엔진의 구조가 조금씩 바뀌네요. 이런!
모션블러 기능을 만들고 있습니다.
어쩔 수 없이 엔진의 구조가 조금씩 바뀌네요. 이런!
튜토리얼02 입니다.
이번 텍스쳐 입히기 튜토리얼은 아주 간단합니다.
우선 기존에 튜토리얼 01에서 작성했던 코드를 살펴볼까요?
package
{
import com.atoonz.foge3d.mesh.*;
import com.atoonz.foge3d.meterial.*;
import com.atoonz.foge3d.object.*;
import com.atoonz.foge3d.rendering.*;
import com.atoonz.foge3d.scene.*;
import com.atoonz.foge3d.view.*;
import flash.display.*;
import flash.events.Event;
import flash.geom.Vector3D;
public class foge3d_tutorial01 extends Sprite
{
private var scene:Scene3D = new Scene3D(); //Scene3D를 생성합니다.
private var viewport:Viewport3D = new Viewport3D(null); //viewport를 생성합니다.
private var renderer:BasicRenderer = new BasicRenderer(); //BasicRenderer를 생성합니다.
private var meshobj:MeshObject = new MeshObject(); //보여줄 물체를 생성합니다.
public function foge3d_tutorial01()
{
this.stage.align = StageAlign.TOP_LEFT;
this.stage.scaleMode = StageScaleMode.NO_SCALE;
meshobj.meshData = new Cube(50, 50, 50); //기하물체가 어떤 모양인지 정한다.
meshobj.meterialData= new WireMeterial( 0x000000, 2 ); //어떤 질감으로 출력될지 정한다.
meshobj.position.z = 200;
meshobj.rotate(Vector3D.X_AXIS, 30);
scene.addObject3D( meshobj ); //오브젝트를 씬에 등록한다.
viewport.x = 320;
viewport.y = 240;
this.addChild(viewport);
this.addEventListener( Event.ENTER_FRAME, onEnterFrame)
}
public function onEnterFrame( e:Event ):void
{
meshobj.rotate(Vector3D.X_AXIS, meshobj.rotateAngle+5);
renderer.render(scene, viewport);
}
}
}
{
import com.atoonz.foge3d.mesh.*;
import com.atoonz.foge3d.meterial.*;
import com.atoonz.foge3d.object.*;
import com.atoonz.foge3d.rendering.*;
import com.atoonz.foge3d.scene.*;
import com.atoonz.foge3d.view.*;
import flash.display.*;
import flash.events.Event;
import flash.geom.Vector3D;
public class foge3d_tutorial01 extends Sprite
{
private var scene:Scene3D = new Scene3D(); //Scene3D를 생성합니다.
private var viewport:Viewport3D = new Viewport3D(null); //viewport를 생성합니다.
private var renderer:BasicRenderer = new BasicRenderer(); //BasicRenderer를 생성합니다.
private var meshobj:MeshObject = new MeshObject(); //보여줄 물체를 생성합니다.
public function foge3d_tutorial01()
{
this.stage.align = StageAlign.TOP_LEFT;
this.stage.scaleMode = StageScaleMode.NO_SCALE;
meshobj.meshData = new Cube(50, 50, 50); //기하물체가 어떤 모양인지 정한다.
meshobj.meterialData= new WireMeterial( 0x000000, 2 ); //어떤 질감으로 출력될지 정한다.
meshobj.position.z = 200;
meshobj.rotate(Vector3D.X_AXIS, 30);
scene.addObject3D( meshobj ); //오브젝트를 씬에 등록한다.
viewport.x = 320;
viewport.y = 240;
this.addChild(viewport);
this.addEventListener( Event.ENTER_FRAME, onEnterFrame)
}
public function onEnterFrame( e:Event ):void
{
meshobj.rotate(Vector3D.X_AXIS, meshobj.rotateAngle+5);
renderer.render(scene, viewport);
}
}
}
우리가 바꿔야 하는 코드는 바로
meshobj.meterialData= new WireMeterial( 0x000000, 2 ); //어떤 질감으로 출력될지 정한다.
이 부분입니다.MeshObject 클래스에는 meterialData 라는 속성이 있습니다. 이것은 MeterialBase 타입입니다.
foge3d에서 물체를 출력할 때 물체의 색을 정한다거나 질감을 지정한다거나 할 때 사용하는 클래스가 바로 MeterialBase 클래스 입니다. 하지만 MeterialBase 클래스는 "추상클래스"이기 때문에 new 연산자를 이용해서 직접 인스턴스화 할 수 없습니다. 대신 MeterialBase를 상속받아 구현한 구체클래스들을 사용할 수 있습니다. MeterialBase를 상속받아 구현한 "구체클래스로"는 현재 다음과 같은 클래스들이 있습니다.
(앞으로 더 추가 될 예정입니다.)
| TextureMeterialBase | MeterialBase를 상속받았지만 MeterialBase처럼 추상클래스 입니다. 이것 대신 BitmapMeterial을 사용합니다. |
| BitmapMeterial | BitmapData를 이용해서 텍스쳐를 입힐 수 있도록 하는 질감클래스입니다. |
| ColorMeterial | 물체에 단일한 색을 입힐 수 있는 질감 클래스 입니다. |
| WireMeterial | 철사구조로 물체를 그려주는 질감 클래스 입니다. |
우리가 사용할 클래스는 위에 표에서 '굵게' 처리된 BitmapMeterial 클래스 입니다.
BitmapMeterial 클래스는 TextureMeterialBase클래스의 자식클래스이고 TextureMeterialBase는 MeterialBase 클래스의 자식클래스 이므로 BitmapMeterial클래스는 MeterialBase 클래스의 손자클래스가 됩니다. BitmapMeterial 클래스를 사용하려고 보니 BitmapData 객체를 인자로 요구합니다.
public function BitmapMeterial( bitmapdata:BitmapData )
이런! Embed 시켜서 BitmapData 객체를 하나 만들기로 하지요. 질감으로 사용 할 그림 파일 이름은 goya_forge.jpg 입니다. (제가 아주 좋아하는 화가 '고야'의 그림을 골랐습니다!)
public class foge3d_tutorial02 extends Sprite
{
//텍스쳐로 사용할 그림을 embed 합니다.
[Embed (source="./goya_forge.jpg")]
private var Texture:Class;
...
{
//텍스쳐로 사용할 그림을 embed 합니다.
[Embed (source="./goya_forge.jpg")]
private var Texture:Class;
...
위와 같이 Embed 시켰습니다. 물론 프로젝트에도 아래 그림처럼 파일을 추가했구요.
자 이제 BitmapMeterial 객체를 만들 수 있게 됐습니다~ 한번 만들어 보지요.
var texture:Bitmap = new Texture;
meshobj.meterialData = new BitmapMeterial( texture.bitmapData );
meshobj.meterialData = new BitmapMeterial( texture.bitmapData );
이제 F11을 눌러서 실행하면 아래와 같은 화면을 볼 수 있습니다.
정육면체에 텍스쳐를 입혔더니 이상 하군요-_-;
물체를 평면으로 한번 바꿔보도록 하지요.
meshobj.meshData = new Cube(50, 50, 50);
라고 써진 부분을 이렇게 바꾸도록 하죠.
meshobj.meshData = new Plane( 50, 70 );
이제 다음과 같은 화면을 볼 수 있습니다.
이제 그림답게 나옵니다. 간단하죠?
ColorMeterial 사용법은 더 간단합니다. 한번 해보세요. ^^
foge3d_tutorial02.zip
TAG foge3d
튜토리얼01 입니다. 튜토리얼00 은 환경을 구성했습니다. 이제 그 환경에서 foge3d를 이용해서 코딩을 해 볼 차례입니다. 실제로 코드를 작성하는건 처음이군요.
이번 튜토리얼에선 foge3d를 이용해서 간단한 기하물체를 화면에 출력하는 것을 목표로 합니다.
이렇게 출력하는 것이 목표입니다.
이 글을 쓰고 있는 현재 foge3d에서 기본적으로 제공되는 물체들은 몇가지 안됩니다.
어제 제가 막 Sphere를 추가했네요. 그래서 지금은 Plane, Sphere, Cube 등이 있습니다. 아직 많이 부족하죠 ^^;
그럼 본격적으로 시작하겠습니다.
새로운 ActionScript Project를 만듭니다.
project name에는 foge3d_tutorial01 이라고 하죠.
Flex SDK version 은 Flex4.0 으로 선택합니다.
그리고 Finish 버튼을 누르면 아래와 같이 새 프로젝트가 만들어집니다.
프로젝트가 Flex SDK 4를 사용한다고는 설정했지만 Flash Player 10을 사용한다고는 설정이 되어있지 않습니다. Flash player 10을 사용하도록 설정해주어야 합니다.
프로젝트를 마우스 오른쪽버튼으로 클릭하여 나오는 팝업메뉴에서 맨아래에 Properties 를 선택합니다.
이 창에서는 프로젝트에 관련된 속성들을 설정할 수 있습니다.
아래 그림처럼 ActionScript Compiler 를 선택하시고 사용할 플레이어 버젼을 수정합니다. 아마 기본적으로 9. xx. xx 정도로 적혀있을겁니다. 이곳을 10. 0. 0 으로 바꿔주세요.
마지막으로 이프로젝트가 foge3d를 사용할 것이라고 알려주어야 합니다.
ActionScript Build Path 를 선택하시고 Library path 탭을 선택합니다.
이때 오른쪽에 보이는 Add Project 버튼을 클릭하시고 foge3d를 선택해주세요.
※참고 : 여기에서 foge3d 가 보이지 않는다면 튜토리얼00 환경구성하기 를 확인하세요.
자 코딩할 준비가 끝났군요. 드디어 코딩을 합니다!
foge3d를 이용해서 화면에 물체를 출력하려면 기본적으로 다음 3가지 클래스가 필요합니다.
1. Scene3D
2. Viewport3D
3. BasicRenderer
1. Scene3D
Scene3D는 화면에 어떤 물체를, 어떻게 그릴지에 대한 정보를 담는 클래스 입니다. Scene3D는 생성자에서 필요한 인자가 없으므로 다음과 같이 간단히 만들 수 있습니다.
var scene:Scene3D = new Scene3D();
아무런 인자도 없이, Scene3D 객체가 생성됩니다. 간단하죠?
2.Viewport3D
Viewport3D 클래스는 사실 Sprite 클래스 입니다. Viewport3D 객체는 3D물체가 그려질 '스크린' 이라고 생각하면 됩니다. Viewport3D 클래스는 생성자에 인자가 필요하긴 하지만, 그냥 null을 넘겨주어도 잘 생성됩니다.
어려운 것은 모두 생각하지 말고 그냥 하죠! null을 넘깁시다. foge3d는 쉽습니다 !
var viewport:Viewport3D = new Viewport3D(null);
생성한 스크린을 addChild해서 실제 화면에 붙여야 합니다.
this.addChild(viewport);
Viewport3D는 사실 Sprite 기 때문에 문제 없이 잘 붙습니다!
3. BasicRenderer
사실 BasicRenderer 클래스는 다른 클래스가 될 수도 있습니다. BasicRenderer의 역할은 Scene3D에 담긴 내용을 Viewport3D 에 그려주는 역할을 합니다.
var renderer:BasicRenderer = new BasicRenderer();
보시다시피 생성하시면 됩니다.
자 이제 화면을 그려보도록 하죠.
scene 에 담긴 정보를, viewport 에 그려달라고 renderer에게 요청합니다.
renderer.render( scene, viewport );
각 클래스는 아래와 같이 import해야 사용할 수 있습니다. FlexBuilder 가 원래는 자동으로 패키지를 찾아주지만 Flex4SDK에 대해서는 불안정해서 잘 찾아주지 못하는 경우가 있습니다. 그럴 경우엔 아래와 같이 직접 입력해 주세요.
import com.atoonz.foge3d.rendering.*;
import com.atoonz.foge3d.scene.*;
import com.atoonz.foge3d.view.*;
import com.atoonz.foge3d.scene.*;
import com.atoonz.foge3d.view.*;
여기까지 하고 전체적인 소스 코드를 한번 살펴볼까요.
전체코드보기
지금은 실행하더라도 그려질 정보를 Scene3D객체에 넣지 않았기 때문에 아무것 도 그려지지 않습니다.
간단한 정육면체를 그리도록 합시다. 과정은 다음과 같습니다.
1. 기하물체객체를 만든다.
2. 기하물체가 어떤 모양양인지 알려준다.
3. 기하물체가 어떤 질감으로 출력될지 정한다.
4. 씬에 등록한다.
이 과정을 코딩하면 아래와 같이 됩니다.
var meshobj:MeshObject = new MeshObject(); //기하물체를 만든다.
meshobj.meshData = new Cube(50, 50, 50); //기하물체가 어떤 모양인지 정한다.
meshobj.meterialData= new WireMeterial(); //기하물체가 어떤 질감으로 출력될지 정한다.
scene.addObject3D( meshobj ); //오브젝트를 씬에 등록한다.
meshobj.meshData = new Cube(50, 50, 50); //기하물체가 어떤 모양인지 정한다.
meshobj.meterialData= new WireMeterial(); //기하물체가 어떤 질감으로 출력될지 정한다.
scene.addObject3D( meshobj ); //오브젝트를 씬에 등록한다.
주석을 보시면 각 코드가 어떤 일을 하시는지 알 수 있습니다. MeshObject나 WireMeterial 에 대한 이해가 가지 않더라도 일단은 그러려니 하고 봐주세요. 다음 튜토리얼에서 자세히 설명 하도록 하겠습니다.
물체를 처음 생성하면 좌표가 <0, 0, 0> 이기 때문에 카메라 바로 앞에 있습니다. 좀 뒤로 밀어주도록 하죠.
meshobj.position.z = 200; //position 속성을 이용해서 좌표를 이동시킬 수 있습니다.
그리고 viewport 가 <0, 0> 좌표에 붙어있어서 보기 좋지 않습니다. 위치를 약간 옮기도록 하죠.
viewport.x = 320;
viewport.y = 240;
viewport.y = 240;
이제 바뀐 코드를 살펴보면 다음과 같습니다.
전체코드보기
이제 정육면체가 출력됩니다! 하지만 멈춰있으니 심심하네요. 계속 회전하게 바꿔보지요.
프레임마다 각도를 바꿔주고 renderer.render(scene, viewport); 을 다시 호출하면 됩니다.
ENTER_FRAME 이벤트리스너를 를 추가합니다.
this.addEventListener(Event.ENTER_FRAME, onEnterFrame);
private function onEnterFrame( e:Event ):void
{
meshobj.rotate(Vector3D.X_AXIS, meshobj.rotateAngle+5); //물체의 각도를
renderer.render(scene, viewport);//화면을 다시 그립니다.
}
{
meshobj.rotate(Vector3D.X_AXIS, meshobj.rotateAngle+5); //물체의 각도를
renderer.render(scene, viewport);//화면을 다시 그립니다.
}
이제 빙글빙글 돌아가는 정육면체가 나옵니다!!
완성된 코드를 보면 아래와 같습니다.
전체코드보기
수고하셨습니다!
오오 멋지십니다.
화이팅!!!
기대하고 있습니다!
감사합니다!
봐주시는 분들이 있는걸 보니 열심히 해야겠네요^^
오오 swf된 것이 올라왔군요! 멋지십니다.
RSS 등록해서 구독하겠습니다~
등록 감사합니다. 회사 일에 쫓기다 보니 작업 할 시간이 그리 많진 않네요 ㅠㅠ
점점 멋있어지네요
실력이 안대서 도움은 못드리지만 열심히 응원할깨요 화이팅!!
호응을 해주시니 힘이 되네요! 감사합니다.