이미지 로드하기 (Draw Sprite) - monogame 튜토리얼 2

monogame 두번째 튜토리얼은

이미지를 로드하는 것 입니다.

 

게임에서 사용하는 이미지를 스프라이트

(Sprite)라고 말합니다.

 

스크린에 움직이는 모든 것이

스프라이트라고 할 수 있는데요.

 

게임에서 애니메이션 원리도

일반 애니메이션의 원리와 같습니다.

 

애니메이션의 원리는 여러개의 그림을

연속적으로 보여주는 것 입니다.

(모든 영상이 같습니다.)

초당 몇개의 이미지를 보여주느냐에

따라서 눈이 느끼는 부드러움에

차이가 있는데 컴퓨터 게임에서의

스프라이트 애니메이션과 다른 점은

사용자의 조작에 의해서 이 스프라이트가

독립적으로 화면에서 움직인다는 점입니다.

 

당연한 내용이긴 한데 스프라이트

프로그래밍을 하려면 정확하게 알고

있는 쪽이 아무래도 응용력이 좋습니다.

 

컴퓨터 게임을 만드는 것은 그래픽 적으로

사용자의 조작에 따라 변하는 애니메이션을

제작하는 것과 비슷하면서 다르니까

한번 비교해보는 것도 의미가 있을 겁니다.

 

지금은 CG를 사용한 3D애니메이션이

주류가 되고 있지만 전통적 애니메이션의

제작 방식은 손으로 그리는 수작업이었습니다.

 

 

컴퓨터 게임에서의 애니메이션이란

사용자의 조작키 등의 입력을 받아

스프라이트 정보를 업데이트하는 방식입니다. 

 

게임 라이브러리에 미리 정의된 함수들로

이미지 한장만으로 다양한 애니메이션 효과

(이동, 회전, 색변화 등)를 줄 수 있다는 것이

컴퓨터 게임의 애니메이션의 특징입니다.

게임이라고 한정되기 보다는

그게 컴퓨터 그래픽스의 특징이지요.

 

지난 튜토리얼에서 게임 스켈레톤(와꾸)의

초기화를 하고 창을 띄우는 것 까지 했으니

이번 포스팅에서는 이미지를 로드해보겠습니다.

 

monogame 시작하기 - monogame 튜토리얼 1

monogame 시작하기 - monogame 튜토리얼 1 - C# 게임 개발 프레임워크

 

 

*그러면 monogame 프레임워크에서

이미지를 로드하는 방법을 알아보겠습니다.

 

이미지 로드하기

배경이 투명한 png 파일을 하나 준비합니다.

인터넷 무료 png 파일을 다운로드해도 좋고

이미지를 만들어도 됩니다.

 

아래는 메디방 앱으로 export 한 png 파일입니다.

파일의 이름은 st1.png 입니다.

st1.png

 monogame 튜토리얼1에서 크로스플랫폼

monogame 프로젝트를 만들었다면 그 폴더안의

Content 폴더를 열어봅니다.

Content.mgcb 라는 파일이 보입니다.

monogame 을 설치할 때 같이 설치했을 겁니다.

더블클릭해서 MGCB 에디터를 실행합니다.

예전에는 Monogame Pipeline이라는 이름의

콘텐트 관리 앱입니다.

 

이미지 뿐 아니라 사운드 파일이나, 3d 모델 등

각종 게임 리소스들을 관리하는 도구입니다.

 

아래와 같이 existing item으로 png 파일을 추가합니다.

카피할 것인지 링크할 것인지 묻습니다.

 

폴더 안에서 다 관리하려면 카피하고

외부에서 관리하려면 링크합니다.

 

 

 

마지막으로 rebuild 하는 작업을 합니다.

build 결과가 표시됩니다.

 

 

다음은 소스코드입니다.

 

길어보이지만 크래스플랫폼 데스크탑

템플릿 소스코드에서 Texture2D

객체를 추가해서 프로그램에

로드한 것 입니다.

 

- Texture2D 객체에서 Load 합니다.

좌표를 사용해야 하는데 Vector2

객체는 2D 좌표 타입입니다.

 

png 이미지는 2D이므로 Vector2를 사용합니다.

 

최종적으로 스프라이트는 Draw에 추가하는데

추가하려는 이미지를 Begin 메소드와

End 메소드 사이에 넣습니다.

 

using Microsoft.Xna.Framework;
using Microsoft.Xna.Framework.Graphics;
using Microsoft.Xna.Framework.Input;

namespace MyMonogame
{
    public class Game1 : Game
    {
        private GraphicsDeviceManager _graphics;
        private SpriteBatch _spriteBatch;
        
        // 텍스처와 벡터 좌표 객체 변수
        private Texture2D _texture;
        private Vector2 _position;

        public Game1()
        {
            _graphics = new GraphicsDeviceManager(this);
            Content.RootDirectory = "Content";
            IsMouseVisible = true;
        }

        protected override void Initialize()
        {
            base.Initialize();

            SetupWindows();
        }
        private void SetupWindows()
        {
            // 화면 해상도 초기화
            _graphics.PreferredBackBufferWidth = 800;
            _graphics.PreferredBackBufferHeight = 600;
            _graphics.ApplyChanges();    
        }

        protected override void LoadContent()
        {
            _spriteBatch = new SpriteBatch(GraphicsDevice);

            // 콘텐츠 빌드에서 텍스처를 로드 
            _texture = Content.Load<Texture2D>("st1");
            _position = new Vector2(100,100);
        }

        protected override void Update(GameTime gameTime)
        {
            if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed || Keyboard.GetState().IsKeyDown(Keys.Escape))
                Exit();

            base.Update(gameTime);
        }

        protected override void Draw(GameTime gameTime)
        {
            GraphicsDevice.Clear(Color.CornflowerBlue);

            // 스프라이트를 추가합니다.

            _spriteBatch.Begin();
            _spriteBatch.Draw(_texture, _position, Color.White);
            _spriteBatch.End();

            base.Draw(gameTime);
        }
    }
}

실행한 결과는 아래와 같습니다.

 

png 이미지의 크기는 300 x 300 이고

화면크기는 800 x 600 입니다.

 

문법에 따라서 쓰면 실행될 겁니다.

별것은 아니지만 이미지를 조작하려면

우선 이미지를 로드해야 하니까요.

 

 

이런 식으로 콘텐트를 추가하면 화면안에

여러개의 텍스쳐를 표시할 수 있습니다.

 

 

*MGCB Editor 를 사용해서 이미지 등

편리한 콘텐트 작업이 가능한 것은 장점입니다.

 

이미지를 로드한 것 만으로도 훌륭한 진전입니다.

 

다음 포스팅에서는 스프라이트를

이동시키는 내용을 포스팅하겠습니다.

 

 

*참고: monogame 문서

 

https://docs.monogame.net/articles/getting_started/4_adding_content.html

Adding Content | MonoGame Documentation