이번시간에는 출력화면 크기를 바꿔보는 걸 해보겠습니다.

맨날 800x600이 나와서 조금 답답하셨죠 - _- ? ㅋ
아주아주 간단하니까 오늘은 편하게 따라갑시다. ㅋ

저두 기본지식없이 혼자 공부하면서 적는거라...틀린사항들은 정정부탁드려요~
이번 듀토리얼보면서 따라한건데......이해가안되는 부분이 많쿤요-0-;;;;



사용자 삽입 이미지












그래픽디바이스 를 설정할 전역변수라고 하는데요.....무슨소린지 잘모르겠습니다.
전역변수라고함은 프로그래밍전체에 쓰이는 저장소란 뜻인건 알겠는데...
윈도우 창이나 기본 속성 설정을 바꾸는데 이것이 왜필요한지 잘모르겠습니다.
없어도 잘 실행됩니다.

사용자 삽입 이미지








initialize  프로그래밍실행시 먼저 실행되는 구문이라고 생각하면 편하겠습니다.

윈도우 창 속성에 대한 내용을 적을 함수를 만들겟습니다 그 함수의 명이 setupdevice 입니다.
함수라고함은 일종의 하나의 공식이라고 생각하면 됩니다.
이런 프로그래밍을 하는데 이 공식이 필요하겠다 해서 만들기도하고 가져와서 쓰기도 합니다.

우리는 윈도우의 창속성을 간편하게 바꿀수있는 공식을 만들어보겟습니다.


사용자 삽입 이미지














private 이 함수가 다른곳에서는 쓰일 일이 없기떄문에 private로 설정한것 같구요 void는...뭘까요...

나머지는 xna스튜디오의 기본적인 명령어들 같습니다.

맨위는 왼도우 너비와 높이를 결정하구요 아래쪽은 풀스크린으로 출력할것인지 아니면 윈도우모드
일지를 설정합니다. true가 되면 -_ -풀스크린으로 나옵니다...당혹스러웠습니다. ㅋㅋ

위에 설정을 적용하는 함수가 그다음이고...윈도우 맨위 제목을 설정할수 있는 것같습니다.



사용자 삽입 이미지



















맨위 제가 적은 영어가 보입니다..크기또한 바뀌었네요~유용한 함수를 하나 배웠습니다.^^;

오늘 공부한 내용이 너무 작아 컬러키에 대해서 간단히 설명하겠습니다.

컬러키란~ 그 이미지에 어떤색을 무시하라 라는 뜻입니다.
한마디로 완전 투명으로 출력하라는 뜻이겠습니다 ㅋ
다른 명령어가 필요로 하는 것이아니라 오른쪽 이미지 자체에서 수치만 적어주면 바로적용이 됩니다.


사용자 삽입 이미지

















컬러 키를 적어주시면 그수치의 색이 투명으로 출력됩니다.
R.G.B.투명도값
이런식으로 되어있습니다 RGB수치는 포토샵이나 간단한 이미지조정 소프트웨어 들어가면 간단하게
볼수 있습니다. 아래는 포토샵의 색조정창입니다. 0,0,0 된곳에 수치를 입력하거나 색을 고르면 색상
수치정보를 알수있습니다.


<포토샵 색 조정창 >
사용자 삽입 이미지











그럼 적용시켜 봅시다. 단 JPG 파일형식은 컬러키가 안먹힌다는 거 알아주시고요~
 BMP파일로 하겠습니다.

컬러키 수치를 흰색을 투명하게 하기위해 255.255.255.255 로 해보겠습니다.
맨마지막 알파값은 투명도조절이라고 생각하시면 됩니다. 수치가 낮을수록 투명도가 없어지고
높을수록 투명합니다. 그럼 출력해보겠습니다.

흰색을 컬러키로 지정하니 - _-오른쪽화면처럼 없어져버립니다. 하하

   
사용자 삽입 이미지
사용자 삽입 이미지








 

게임의 배경화면에 컬러키가 적용되는 사항이 많을 것입니다. 그러니 꼭 숙지하고 넘어갑시다^-^

자 4번째 시간입니다. -_-ㅋ
이제 슬슬 XNA스튜디오의 모습이 익숙해져가고 있습니다 하하하..

이번시간에는 이미지를 이동시키는 법을 배워보겠습니다.

2D 비행기게임같은경우 위에서 아래로 맵을 이동시켜야겠쬬?
이미지를 계속 아래로 내려주면서 이동하는 느낌을 주도록 합시다.

준비사항은 XNA스튜디오 출력화면이 800X600 이니까 이사이즈의 그림파일을 하나 추가시켜줍시다.



사용자 삽입 이미지
1이라는 그림파일을 하나 추가시켰습니다.
컨텐츠에 그림파일 불러오는건 다들 +_+알죠?

알거라 믿습니다. + _ +ㅋ








우리가 해야할 일은 Y자표의 이동으로 이미지를 아래로 움직이게 하는 것입니다.
그러기 위해선 좌표값을 저장할 공간이 필요합니다.

사용자 삽입 이미지










저기 보시면 그냥 단순히 숫자(좌표값)을 저장하기 위한 공간을 마련했습니다.
private int imy;//저장공간마련
imy <라는 저장공간을 마련했습니다.

아 그리고 yong 이미지를 저장할공간안에 컨텐츠로드에가서 이미지 불러오는거 까먹지 마시구요~



사용자 삽입 이미지
앞시간에
이미지띄우
기에서 했던
사항입니다.^^



자 이제 이미지를 아래로 내리려고하면 Y값을 계속 변화를 줘야 하겠습니다.


사용자 삽입 이미지


Update 부분으로 가서 Y값에 변화를 줘봅시다.
imy += 10
imy라는 저장공간에 10씩 계속 더해줘라를 적었습니다.
if (imy >= 600)
 imy = 0;
if구문인데요 간단하게 만얀 무엇이라면 아래 문장을 실행하라라는 뜻입니다.
이미지가 아래로 계속 이동하다가 화면 끝에까지 이동하면 다시 맨위로 올라와라라는 뜻으로
600이상이되면 0으로 초기화 하도록 구문을 적었습니다.

Y좌표를 설정했습니다.

깔끔하게 출력해보도록합시다. 끌어내기 + _+ Draw로 가봅시다.


사용자 삽입 이미지














spriteBatch.Draw(이미지가저장된곳,화면상이미지가 출력될 위치,그림파일자체크기설정,Color.White);
Draw의 간단한 문법설명입니다. 우리 프로그래밍에 맞게 적어보겠습니다.
spriteBatch.Draw(yong,new Rectangle(0, imy, 800, 600),new Rectangle(0, 0, 800, 600),Color.White);
복잡해보이지만 간단합니다.+_+
 yong는 이미지저장한 곳이고,
new Rectangle는 (x,y,가로,세로) 입니다.
x좌표는 0이겠죠 위쪽은 imy로 수치가 올라가면서 아래로 이동하겠죠 맨위가 0부터시작하니까요~그렇게 수치가
올라가고 가로는 이미지 크기까지니까 800 아래로는 600이겠습니다. ^^화면상에 보여질 위치설정했구용~

이미지파일 자체는 전부다 나와야겠죠?
이미지크기만큼 800x600으로 설정하겠습니다.new Rectangle(0, 0, 800, 600) ~그담은 색지정입니다.

자이제 출력해보겠습니다. 어떻게 나올지 상상이가시죠~-0-
사용자 삽입 이미지
저는 심심해서 상당히 무서운 포스터를 이용했습니다.
잠이 확 달아납니다.............................................

잘움직이죠?ㅎ
내려가기만하고 뭐 좀 어색합니다. 좀더 깔끔하게 짤린 부분을 위로 올려서 비행기게임 맵처럼
올라가게해보겠습니다.

이렇게 하려면 Y축으로 이동만하는게 아니라 이동한 만큼 짤린 그림을 위로 출력시켜야겠습니다.
그럼 생각해봅시다-_-Y축으로 이동한만큼을 어떻게 위에 출력 시킬것인가.


사용자 삽입 이미지








 


spriteBatch.Draw(
         yong, new Rectangle(0, 0, 800, imy), new Rectangle(0, 600 - imy, 800, imy),
         Color.White);

이부분이 추가 되었습니다.

앞에서 설명한부분입니다. 이게왜 짤린부분을 가져오냐면~봅시다

new Rectangle(0, 0, 800, imy),  이게 화면에 출력될 사각형을 설정해주는 부분입니다.

왼쪽과 위쪽이 0,0 으로 딱 붙여놨구요 오른쪽을 800으로 이미지 크기만큼 그리고
아래쪽으로는 짤린부분을 내려야하니까  imy로 설정했습니다. imy가 처음에는 0이다가
imy의 수치가커지면서 아래로 출력화면이 커지겠습니다.

이제 이거에 맞게 원본이미지크기를 설정해주면 되는데요 주의하실점이 이미지가 아래쪽부터 출력하게
해야한다는걸 생각하고있어야 합니다. 그래야 그림이 돌아가는 것처럼 보이겠죠?


사용자 삽입 이미지
















new Rectangle(0, 600 - imy, 800, imy),이게 원본그림파일을 이크기로 불러오겠단 설정입니다.
왼쪽은 0이고요 이미지를 아래에서 부터 출력시켜야함으로 위쪽크기를 이미지 크기만큼 600으로 올려서
imy만큼 빼야합니다. 그다음은 이미지 크기만큼 오른쪽 800이구요  아래부분은 imy만큼 설정하면 되겠죠

자 이제 됐습니다.

상큼하게 에프 오번을 눌러봅시다^^;

사용자 삽입 이미지

빙글빙글 잘 돌아갑니다........무섭군요..........

이번시간에는 이미지를 입력받아 움직이게 해보겠습니다.  + _ +

2# 에서 했던 프로젝트를 열어주세용~ -0- //

오늘할 내용은 무지 간단합니다. 빨리마치고 밥먹어야겠습니다 ㅋㅋ

사용자 삽입 이미지












자 여기서 추가 된 내용이 Vector2 imodi; < 이건데용
Vector2 저번시간에 이것이 x,y좌표라고 말씀드렸죠-0-/
요놈을 저장공간을 마련해서 위치를 설정할것입니다.
엑스와이좌표를 공간을 마련해서 그속에 어떻게 움직여라를 넣을 것입니다.

저장공간 마련 Vector2 imodi;
저장공간의 이름은 imodi 이것입니다.

사용자 삽입 이미지
이미지를 움직이게 하려면 일단 키보드를 눌렀는지 안눌렀는지를 알아야합니다.+_+

KeyboardState currentKeyState = Keyboard.GetState();
이 구문인데요 일단 키보드를 눌렀는가 안눌렀는가의 상태를 저장할 저장공간입니다.
KeyboardState currentKeyState 저장공간마련하고  Keyboard.GetState();현재 키보드상태를 저장

float move = 10 * (float)gameTime.ElapsedGameTime.TotalMilliseconds / 1000.0f;

움직임을 주는 값입니다. 뭐 10픽셀씩 움직이는 구문이라고하는데...확실히 이해가안되는군요 ㅠ
아무튼 키보드 누를때 10픽셀씩 움직이라고 구문을 적어놨습니다.

 if (currentKeyState.IsKeyDown(Keys.Right))
                imodi.X += move;
 if(currentKeyState.IsKeyDown(Keys.Left))
                imodi.X -= move;
if(currentKeyState.IsKeyDown(Keys.Up))
                imodi.Y -= move;
if(currentKeyState.IsKeyDown(Keys.Down))
                imodi.Y += move;

아까 Vector2 imodi;라고 선언했었죵

imodi를 현재 누른 키보드에따라서 move(10픽셀씩 움직이라고 지정했었죠)값만큼 이동

사용자 삽입 이미지










Draw 이제 화면으로 끌어내봅시다.
  spriteBatch.Draw(yong, imodi, Color.Blue);

여기서 앞에서는 Vector2 zero; 제로였지만
이제는 imodi로 위치를 지정해줍시다.

자이제 에프오번을 눌러주세요~
사용자 삽입 이미지

브라운색깔의 독특한-_-이미지가 키보드에따라 움직이는군요 - _-성공 ㅋ

자 두번째 시간 ㅋㅋ(혼자 놀기의 진수 --)

이번에는 간단한 이미지를 출력해보겠습니다. 흠.....
출력하고싶은 이미지를 폴더에 넣어놓습니다.
컨텐츠라는 그 폴더안에 파일이있어야 불러올수 있나봅니다. 컨텐츠 폴더안으로 파일을 넣어봅시다.

사용자 삽입 이미지
이렇게 간단하게 컨텐츠 클릭하셔서 기존 항목으로 추가하시면 됩니다. 저는 그 유명한 파일이름 "Untitled-3"
이란 이미지를 넣어놨습니다!


사용자 삽입 이미지





자 이제 이미지를 저장할 공간을 마련해 봅시다 + _ +    
변수선언?을 하는것이죠.-_-..
간단하게 말해서 내가 넣을 이미지공간을 만들어준다고 생각하면 편하겠군요 + _ +
Texture2D < 이것이 2D이미지 공간마련의 명령어인 것 같습니다. + _+  ?맞죠?

yong라는 저장공간을 만들어 놓았습니다.

사용자 삽입 이미지








저장공간을 만들었으면 그곳으로 파일을 일단 가져와야겠죠? - _-?당근 ㅋ
자 앞에 영문 무시하고 로드컨텐츠가 보일것입니다.
컨텐츠 파일안에있는 Untitled-3 < 요놈을 데리고 와야 겠쬬?

 yong = Content.Load<Texture2D>("Untitled-3");
 yong란 공간에 컨텐츠에 있는 이미지파일 Untitled-3 요놈을 데리고온다

완벽해석 - _- b

자 이제 공간 만들어서 그곳에 이미지를 불러왔습니다. 다음은? 예!
나타내야겠죠 저장공간에 가져왔으니 이제 보여주는 일만 남았습니다.

사용자 삽입 이미지









Draw 음..끌어내다?ㅡㅡ뭐 나타내다? 그런뜻이겠쬬?
봅시다...대충 보니 그래픽을 클리어한다는게 나와있군요 처음에 출력시 봤다 그 오묘한 ㅡㅡ파란색이
CorenflowerBlue 이놈인가 보군요..뭐 저런색이 ㅋㅋ
자거기에 친절하게 너의 드로잉 코드는 여기라고 나와있는 영어가 있습니다 + _ +

            spriteBatch.Begin();
            spriteBatch.Draw(yong, Vector2.Zero, Color.Brown);
            spriteBatch.End();

spriteBatch < 요놈이 이미지를 출력해주는 함수라고 합니다 많이 쓰일것같군요-_-;;
자 시작 나타내고 끝내고 -_ - ...간단하군요
spriteBatch.Draw(저장공간, 위치설정, 색지정); 뭐 이런식이 군요
벡터2는 이차원(x축,y축)을 의미합니다. 제로로 설정해으니 0.0 에 나오겠죠 -0- ?

디버깅해봅시다...
사용자 삽입 이미지

브...브라운색깔이 저색이군요.......난감한데?ㅋㅋ

여기까지 파란화면에 내가만든 이미지를 넣어보았습니다. - _-이것도 프로그래밍이라는 자부심을 가집시다.
다음에는 더 잘해봅시다+_ +
짠 ~ XNA 스튜디오.

꼭 해보고 싶었지만 지금까지 그래픽카드 문제로 돌리지 못했던 XNA 스튜디오
http://blog.naver.com/bt2103
제 글은 위 주소의 블로그에서 배우면서 경험한것을 제가 생각한방식대로 복습하는 곳입니다.
참고해주세요~-_-;;

제목에서도 보이듯이 저는 이제 제대한지 한달쯤 되어가는 예비역입니다. ㅋ
군대오기전에 잠시 배웠던 C, C++,액션스크립트 전부다 -_-맛만 본 상태입니다.
자세히 아는건 아무것도 없고 이미 다까먹어서 백지장 상태입니다.

XNA스튜디오를 해보면서 필요한 사항을 공부해나갈 생각입니다.

차차 따라가 봅시다 -_ - /
자 긴 여행 지금부터 시작합니다 + _+


XNA스튜디오 게임을 제작하는 소프트웨어 인거 빼고는 아는 것이 없습니다.
아니 이정도면 충분하다고 생각합니다 소프트웨어가 무엇을 목적으로 가지는지만 알면
프로그램 배울 준비는 완벽하다고 생각합니다. 선행학습이 좀 필요하다는 것은 알고있지만
군대에서 배운 깡으로  그냥 가보겠습니다.^^/
http://blog.naver.com/bt2103 <설치는 여기서 따라하시면 됩니다. 추후에 제가 배우는 것도 여기서
천천히 배워갈 생각입니다. XNA스튜디오 배우는 블로그나 싸이트는 다 들어가볼 생각입니다.
자료있으신분 공유합세~ - 0- //

사용자 삽입 이미지

자 기본적인 XNA스튜디오를 설치 후 깔끔하게 디버깅을 눌러보았습니다.
디버깅이뭐지 ㅡㅡ? 그냥 출력물을 나타내는 것이 아닐까해서 눌러보았습니다 흐흐..ㅋㅋ
무식하다고 뭐라하지 말아요~ - 0 - /ㅋ ~
사용자 삽입 이미지

상콤하게 파란색 화면이 나옵니다.......-_-뭐 솔직한 심정으로 뭐지?-_-? 란 생각이 듭니다.ㅋ
만약 이 창이 안뜨면...그래픽카드 문제이니..그래픽카드 교체를 ....추천합니다. 저두 라데온9550을 달았습니다.
자자 첫번째는 디버깅을 시작하여 파란색 화면까지 나오는 것을 보았습니다.

화면 창에 뭐 많은 명령어들이 있습니다. 파란색 초록색 검은색 회색...예 하나도 모르겠고요..아 주석은
대충 알수 있겠습니다. 주석은 뭐 메모라고 생각하시면 됩니다. 프로그래밍에는 어떠한 영향도 안미치고요~ㅋ

너무 조급하게 어렵다고 생각하지 맙시다. 많은 명령어들 나중에 되면 다 익숙한 한글처럼 될테니...+_ +

첫 모험담은 여기까지만 줄이고 다음 모험담은 저기 파란색화면에 뭐라도 띄워봅시다. -0-~!!



200315

+ Recent posts