[XNA] 이미지 로드하고 화면에 출력하기




이전 XNA 관련 글 보기

2011/09/15  [XNA] Wanna Make a Game? : XNA 4.0 소개, 그리고 설치
2011/10/01  [XNA] XNA 기본 함수 6가지와 동작원리

 XNA의 기본 동작방식을 알아봤으니, 이제는 게임제작의 제일 기본이 되는 화면 출력을 해볼 차례입니다. 
 미리 정해놓은 그림을 화면에 로딩해서 띄워보는 거죠. 가장 기본인 만큼 어렵지는 않습니다.
 

STEP 1. 새로운 XNA 프로젝트 생성하기

STEP 2. 화면에 출력할 그림 Content 프로젝트에 추가하기

STEP 3. 화면 해상도 변경해 보기 (800 x 600)

STEP 4. 변수 선언하고 이미지로드 하기

STEP 5. Starting Debugging(F5)

 

 

STEP 1. 새로운 XNA 프로젝트 생성하기

* 혹시, XNA 프로젝트를 생성하실 줄 모른다거나,
기본 화면에 대해서 이해가 필요하신 분은 이전 포스팅을 참고하세요!

 

 

STEP 2. 화면에 출력할 그림 Content 프로젝트에 추가하기

그림과 같은 resource를 추가하는 방법은 간단합니다.
Visual Studio의 프로젝트 탐색창에서 오른쪽 클릭으로 간단히 추가할 수 있죠.
우선, '로딩.png' 파일을 저장했습니다.

[ Content 프로젝트 Name에 오른쪽 클릭 >> Add >> Existing Item ]

 

XNA 지원 Texture

XNA의 Texture는 기본적으로 < *.png, *tga, *.jpg >를 지원합니다.

다른 것들은 익숙한데, tga는 생소하네요.
검색을 해보니, *tga 포맷은 트루비전 사의 타가보드를 위하여 개발된 그래픽 파일 포맷으로 비디오 게임분야에서 텍스처 및 스크린샷 저장 기능 등을 이용할 때 흔히 사용하는 파일포맷이라고 합니다.

 

* tga 파일 포맷 : TGA(‘TARGA’의 줄임말 / Truevision Advanced Raster Graphics Adapter)

http://ko.wikipedia.org/wiki/TGA

 

 

STEP 3. 화면 해상도 변경해 보기 (800 x 600)

XNA 4.0에서의 기본 해상도는 800 X 480 이라고 합니다.
해상도를 800 x 600 으로 변경해봅니다.
여기서 해당 화면을 전체화면으로 보려면 IsFullScreen 속성을 true로 설정합니다.


 

STEP 4. 변수 선언하고 이미지로드 하기

그림파일은 LoadContent() 함수로 읽어 들이고, Texture2D라는 클래스를 이용하여 이미지를 저장합니다.

Texture2D는 XNA에서 불러들인 2차원 이미지를 저장하는 클래스입니다.

그리고 이미지 출력은 SpriteBatch 클래스의 Draw() 함수로!!
   

 

  

STEP 5. Starting Debugging(F5)

 이제 신나는 디버깅만 남았습니다.


결과화면

  로딩이라는 영문글자가 정확하게 정중앙에 오지 않아서 조금 거슬리기는 하지만, 제법 뭔가 로딩하고 있는 느낌의 글자(사실은 이미지)가 출력되었습니다.
  중요한건, 이 예제 그림의 해상도가 딱 800 x 600이기 때문에, 실행창의 크기를 임의로 변경하게 된다면, 글자 주변의 검은색이 창을 가득 채우지 못하는 상황이 발생합니다.
  단, 전체화면으로 실행했을 때는 예외입니다.


  그러면, 좀더 크기가 작은 그림 파일(XNA logo.jpg)을 출력해보겠습니다.
  기존 코딩에 그림파일만 바꿔서 출력 했다면, 그림은 실행창의 최상단 왼쪽에 붙어서 출력될 것입니다.
  그림파일의 최상단 왼쪽의 기준점을 (0, 0)으로 설정해둬서 그런 것인데요~ 아래 스크린 샷 처럼 화면의 정중앙에 오도록 만들어봅시다! (약간의 시행착오가 필요하겠죠? ^_^ )

  

### csharp
        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);
 
            spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.AlphaBlend);
            spriteBatch.Draw(tex, new Vector2(0, 0), Color.White);
             // 이미지의 좌측 상단 좌표 기준, 이미지의 위치
             // 이 부분을 수정해서 위와 같이 만들어보자!
            spriteBatch.End();
 
            base.Draw(gameTime);
        }

소스코드 
 

### csharp
### Game1.cs
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 Proto0
{
    /// <summary>
    /// This is the main type for your game
    /// </summary>
    public class Game1 : Microsoft.Xna.Framework.Game
    {
        GraphicsDeviceManager graphics;
        SpriteBatch spriteBatch;
        Texture2D tex;
        // 변수 선언


        public Game1()
        {
            graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
            graphics.PreferredBackBufferHeight = 600;
            graphics.PreferredBackBufferWidth = 800;
            //this.graphics.IsFullScreen = true;
            // 전체화면 활성화
        }


        /// <summary>
        /// Allows the game to perform any initialization it needs to before starting to run.
        /// This is where it can query for any required services and load any non-graphic
        /// related content.  Calling base.Initialize will enumerate through any components
        /// and initialize them as well.
        /// </summary>
        protected override void Initialize()
        {
            // TODO: Add your initialization logic here


            base.Initialize();
        }


        /// <summary>
        /// LoadContent will be called once per game and is the place to load
        /// all of your content.
        /// </summary>
        protected override void LoadContent()
        {
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);


            tex = Content.Load<Texture2D>("로딩");
            // TODO: use this.Content to load your game content here
        }


        /// <summary>
        /// UnloadContent will be called once per game and is the place to unload
        /// all content.
        /// </summary>
        protected override void UnloadContent()
        {
            // TODO: Unload any non ContentManager content here
        }


        /// <summary>
        /// Allows the game to run logic such as updating the world,
        /// checking for collisions, gathering input, and playing audio.
        /// </summary>
        /// <param name="gameTime">Provides a snapshot of timing values.</param>
        protected override void Update(GameTime gameTime)
        {
            // Allows the game to exit
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
                this.Exit();


            // TODO: Add your update logic here


            base.Update(gameTime);
        }


        /// <summary>
        /// This is called when the game should draw itself.
        /// </summary>
        /// <param name="gameTime">Provides a snapshot of timing values.</param>
        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);


            spriteBatch.Begin(SpriteSortMode.Deferred, BlendState.AlphaBlend);
            spriteBatch.Draw(tex, new Vector2(0, 0), Color.White);
            // 이미지의 좌측 상단 좌표 기준, 이미지의 위치
            spriteBatch.End();
            // TODO: Add your drawing code here


            base.Draw(gameTime);
        }
    }
} 

 

SPACECHILD_XNA_Proto0.zip

/* Reference */
톡톡튀는 XNA를 이용한 단계별 슈팅게임 만들기
 

톡톡튀는 XNA를 이용한 단계별 슈팅게임 만들기 국내도서>컴퓨터/인터넷 저자 : 최창수,서정만 출판 : 도서출판정일 2011.08.25 상세보기