XNA :: XNA Game Studio 4.0 # 3 - 이미지 출력

 

 

수많은 기능을 가진 XNA 프레임워크는 외부로 보이게끔 하는 출력의 기능을 가지고 있다.

물론, 이 기능들을 이용해서 보다 멋진 프레임워크를 구축할 수 있겠지만, 우리는 아직 걸음마를 때는 시기이므로 천천히 가보도록 하자.

 

이번 글에서는 "이미지" 출력을 해보도록 할 것이다.

이미지 출력도 XNA에서는 간단하게 구현할 수 있으니 긴장풀고 쉽게 가보도록 하자.

 

 - 이미지 출력하기

 

 먼저, 이미지를 출력하는데 있어서 이미지의 확장자는 고려를 해야할 것이다.

 XNA에서 지원하는 이미지 확장자는 대부분 지원한다.

 우리가 가장 많이쓰는 jpg, png, bmp등 여러가지를 지원하기 때문에 우리는 알파 블랜딩 효과를 사용하기 위해서는 png, 뒷배경은 용량 축소용으로 jpg 하면 될 것이다.

 

 우리가 띄울 이미지 파일을 첨부한다.

 

 

 이왕 뿌리는거 멋진 이미지를 뿌리도록 하자.

 오른쪽 클릭해서 다운로드 하여 사용하면 된다.

 파일명은 stand1 이다.

 

 그 다음 소스코드를 첨부한다.

using System; using System.Collections.Generic; using System.Linq; using Microsoft.Xna.Framework; using Microsoft.Xna.Framework.Audio; using Microsoft.Xna.Framework.Content; using Microsoft.Xna.Framework.GamerServices; using Microsoft.Xna.Framework.Graphics; using Microsoft.Xna.Framework.Input; using Microsoft.Xna.Framework.Media; namespace WindowsGame1 { /// <summary> /// This is the main type for your game /// </summary> public class Game1 : Microsoft.Xna.Framework.Game { GraphicsDeviceManager graphics; SpriteBatch spriteBatch; Texture2D texture = null; public Game1() { graphics = new GraphicsDeviceManager(this); Content.RootDirectory = "Content"; } protected override void Initialize() { base.Initialize(); } protected override void LoadContent() { spriteBatch = new SpriteBatch(GraphicsDevice); texture = new Texture2D(GraphicsDevice, 100, 100); texture = Content.Load<Texture2D>("stand1"); } protected override void UnloadContent() { } protected override void Update(GameTime gameTime) { if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed) this.Exit(); base.Update(gameTime); } protected override void Draw(GameTime gameTime) { GraphicsDevice.Clear(Color.CornflowerBlue); spriteBatch.Begin(); spriteBatch.Draw(texture, new Vector2(270, 0), new Color(255,255,255,255)); spriteBatch.End(); base.Draw(gameTime); } } }

 

 이제 소스코드를 보도록하자.

 우리는 하나의 변수를 새로 선언했다.

 

Texture2D texture = null;

 

 이 Texture2D 라는 클래스는 사용자가 2D 스프라이트를 입력하는데 쓰이는 클래스다.

 이 Texture2D 한개로 여러가지 이미지를 뿌릴 수 있으며 최대 이미지의 크기는 2024 로 제한이 된다. 이 이상의 이미지를 사용하면 에러가 나온다.

 또한 확장자는 위에 언급했듯 굉장히 많은 확장자를 사용할 수 있다.

 

 그 다음 우리가 볼 곳은 LoadContent 함수의 Texture2D 부분인데, 이 부분에서는 이미지를 로드하고 동적할당을 한다.

texture = new Texture2D(GraphicsDevice, 100, 100); texture = Content.Load<Texture2D>("stand1");

 

 texture를 동적 할당후 Content에서 이미지를 로드한다.

 이미지 로드는 솔루션 탐색기의 자신 프로젝트 안의 Content 에서 사용한다.

 물론 이미지만 폴더에 넣어놓으면 되지 않는다. 폴더에 넣기보다 솔루션 탐색기에 있는 폴더에 직접적으로 추가하는 것을 추천한다.

 왜냐하면 Content 안의 이미지 파일 이름을 읽어오기 때문인데 존재하지 않으면 에러를 반환한다.

 그리고 대부분의 XNA 코딩 실수가 이미지를 제대로 Content 안에 넣어두지 않아서난다. (....)

 

<사진 1: 꼭 Content 안에 넣어두도록 하자>

 

 이렇게 추가를 해주었다면 우리는 비로소 이미지를 뿌리기만 하면 된다.

 이미지를 뿌리는 방법은 약간 모호할 수도 있는데, 보도록 하자

 

protected override void Draw(GameTime gameTime) { GraphicsDevice.Clear(Color.CornflowerBlue); spriteBatch.Begin(); spriteBatch.Draw(texture, new Vector2(270, 0), new Color(255,255,255,255)); spriteBatch.End(); base.Draw(gameTime); }

 

 이미지를 뿌리기 위해서는 SpriteBatch가 필요하다. SpriteBatch는 저번 글에서 말했듯 "도화지" 같은 역할이다.

 SpriteBatch를 선언한 spriteBatch를 이용해서 Texture2D를 뿌려주어야 한다.

 

 먼저 SpriteBatch는 수많은 함수가 있지만 그중에서 뿌리는데 필수적인 함수들은 위의 함수들이다.

 필수적인 함수들을 알아보도록 하자.

 

 - Begin

 Begin은 이 밑부터 뿌리겠다. 정도로 알아두면 되겠다.

 Begin 함수를 사용하면 여러가지 옵션을 줄 수 있는데 그 여러가지 옵션중에는 Depth, 알파블랜딩, 버퍼 효과등 수많은 기능을 사용할 수 있다.

 오버로딩된 함수를 보도록 하자.

 

 Begin()

 -> 기본적인 함수다. 아무런 기능도 없다.

 

 Begin(SpriteSortMode sortMode, BlendState blendState)

 -> SpriteSortMode와 BlendState 모드를 설정할 수 있다.

 SpriteSortMode는 Depth에 따라 Sprite의 출력 순서를 설정 해주는 변수이다.

 BlendState는 뿌려지는 효과를 설정할 수 있다. 사용하게 되면 변수에 따라서 렌더링 옵션이 달라지게 된다.

 Begin(SpriteSortMode sortMode, BlendState blendState, SamplerState samplerState, DepthStencilState depthStencilState, RasterizerState rasterizerState);

 -> 앞 2개의 인자는 동일하며 그대신 3D 옵션이 붙었다.

 DepthStencilState는 Depth 옵션을 확장한다.

 RasterizerState는 컬링 옵션을 설정하며, 최적화 하는데 사용할 수 있겠다.

 Begin(SpriteSortMode sortMode, BlendState blendState, SamplerState samplerState, DepthStencilState depthStencilState, RasterizerState rasterizerState, Effect effect);

 -> SamplerState 는 샘플러 옵션을 설정하며, 도움되는 옵션을 추가한다.

 Effect는 말그대로 효과 클래스인데 렌더링에 도움을 주는 클래스를 제공한다.

 Begin(SpriteSortMode sortMode, BlendState blendState, SamplerState samplerState, DepthStencilState depthStencilState, RasterizerState rasterizerState, Effect effect, Matrix transformMatrix);

 -> Matrix 인자가 마지막으로 붙었는데, 이 matrix 인자를 사용하여 카메라를 만들 수 있다.

 Matrix 옵션을 사용해서 SpriteBatch 자체를 옮겨버릴수도 있으며 카메라 클래스도 만들수 있다.

 

 - Draw

 Draw 해당 오브젝트를 출력하겠다 라는 의미를 알아두면 된다.

 물론 이 함수도 오버로드된 함수들이 매우 많다.

 

 Draw(Texture2D texture, Rectangle destinationRectangle, Color color);

 -> 드로우할 2D Texture를 넣고, 이미지 위치, 크기를 설정하는 사각형, 색상을 넣으면 되는 함수

 Draw(Texture2D texture, Vector2 position, Color color);

 -> 드로우할 2D Texture를 넣고, 이미지 위치, 색상을 넣으면 되는 함수이다. 위의 함수와 틀린점은 이 함수는 이미지 크기를 텍스쳐에서 알아오는데 있다.

 Draw(Texture2D texture, Rectangle destinationRectangle, Rectangle? sourceRectangle, Color color);

 -> 드로우할 2D Texture를 넣고, 이미지 위치, 크기를 설정하는 사각형, 이미지 옵션을 설정하는 사각형 옵션, 색상을 넣으면 되는 함수이다.

 Draw(Texture2D texture, Vector2 position, Rectangle? sourceRectangle, Color color);

 -> 드로우할 2D Texture를 넣고, 이미지 위치와 옵션을 설정하는 사각형 옵션, 색상을 넣으면 된다.

 Draw(Texture2D texture, Rectangle destinationRectangle, Rectangle? sourceRectangle, Color color, float rotation, Vector2 origin, SpriteEffects effects,  float layerDepth);

 -> 드로우할 2D Texture를 넣고 이미지 위치, 크기를 설정하는 사각형, 옵션, 색상, 각도 (Degree 각도이다.) , 앵커 포인트 (중심점), 이미지 좌우 상하 반전 효과, 깊이 를 설정하면 되는 함수이다.

 Draw(Texture2D texture, Vector2 position, Rectangle? sourceRectangle, Color color, float rotation, Vector2 origin, float scale, SpriteEffects effects, float layerDepth);
 -> 드로우할 2D Texture를 넣고 이미지 위치, 옵션, 색상, 각도 (Degree 각도이다.) , 앵커 포인트 (중심점), 이미지 좌우 상하 반전 효과, 깊이 를 설정하면 되는 함수이다.

 Draw(Texture2D texture, Vector2 position, Rectangle? sourceRectangle, Color color, float rotation, Vector2 origin, Vector2 scale, SpriteEffects effects, float layerDepth);
 -> 드로우할 2D Texture를 넣고 이미지 위치, 옵션, 색상, 각도 (Degree 각도이다.) , 앵커 포인트 (중심점), 이미지 크기 , 이미지 좌우 상하 반전 효과, 깊이 를 설정하면 되는 함수이다.

 

 - End

 출력을 끝낸다는 의미로 알아두면 된다.

 

 이 오버로드된 함수들 중에 우리가 사용할 함수를 사용하면 된다.