WP7에서 이미지와의 연계 - 폰 속 이미지 처리

이번 과정에서는 XNA와 실버라이트에서 이미지를 삽입하는 방법과 관련된 여러가지를 언급해보고자 합니다.
 우선 XNA프로젝트로 XnaLocalBitmap이라고 하나 만듭시다. 그리고 content 부분에 하나의 그림을 삽입해봅니다. 참고로 저는 이 이미지를 사용했습니다.

(이 이미지는 가로 320픽셀에 세로 160픽셀로 되어 있습니다.)

결과는 다음과 같이 되겠지요.

 
일단 다음과 같은 그림을 실제상에서 써먹으려면 메인 클래스상에서 정의가 되주어야 합니다.
항상 나오는 것처럼

 
와 같이 정의해줍니다. 2차원상에서 이미지의 크기를 관장하는  Texture2D 클래스와 이 위치를 결정하는 Vector2 클래스를 사용합니다.
이걸 쓰기 위해선 LoadContent 부분을 조금 수정해줘야 합니다.

앞에서 많이 보신 것처럼 화면 가운데에 출력하기 위한 코드입니다.
이제 배경화면과 사진의 출력에 관한 정보를 Draw()에서 불러와야 합니다.
다음과 같이

 

여기서 컬러 부분을 수정하게 된다면 기존 사진이 조금 바래져서 나오게 됩니다. 지금처럼 white를 유지한다면 색상의 변화없이 그림 그대로 올라가게 되는 것이지요. 결과는 다음과 같이 나옵니다.

 
지난 시간에 언급한 것처럼 IsFullScreen을 정의한다던가 삽입하는 사진을 다르게 한다면 지금 보여드리는 것보다 다양하게 표현할 수 있겠지요.

다음으로는 실버라이트로 구현해보겠습니다. 그런데 어떻게 보면 실버라이트로 구현하는 것은 더 쉽게 보일 수 있습니다. SilverlightLocalBitmap이란 이름으로 프로젝트를 하나 만듭시다.

참고로 언급하고 싶은게 두가지가 있습니다. 우선 앞에서 해본 XNA에서는 사용할 수 있는 그림 포멧이 jpg,png,gif 세가지가 됩니다. 하지만 실버라이트에서는 jpg과 png 포멧만 프로젝트로 추가해서 쓸 수 있습니다.
두번째 이야기는 보통 이미지나 음원과 같은 건 프로젝트 내에 폴더를 따로 만들어서 거기서 관리하는게 편하다는 거지요. 기본적인 것만 빼고 사용자가 집어넣는 사진이나 음원은 폴더로 따로 관리하는 게 좋겠지요. 그림과 같이 말입니다.

그러고는 아까 예제 그림 파일을 Image 폴더로 넣어놓으면 편리하게 관리할 수 있습니다.

실행시키려면 Content Panel에 한줄만 집어넣으면 됩니다.

그냥 자기가 집어넣은 폴더와 파일명을 source 원으로 지정해놓으면 됩니다.
그런데 한번 SupportedOrientation 부분을 PortraitOrLandscape로 바꾸고 실행해보세요.

 Portrait 모드일때와 Landscape 모드일때의 이미지의 크기가 다르다는 걸 확인할 수 있을겁니다.이는 실버라이트 자체에서 자기가 가진 이미지를 가로 세로비율을 유지하면서 확대 또는 축소하는 성질을 지녔기 때문입니다. 아까 XNA에서는 확인할수가 없었지요. 
그런데 사용자의 필요상 Landscape모드에서도 사진의 크기를 그대로 유지하고 싶을 수 있습니다.그때는 이렇게 

크기가 유지된다는 것을 확인할 수 있을겁니다.
이밖에도 웹상의 이미지를 그대로 따올 수도 있습니다. 그 이미지의 주소만 알고 있다면 말이지요. 제 이미지를 한번 삽입해보겠습니다.

페이스북에 있는 사진도 이렇게 

넣을 수가 있겠네요. 그런데 고려할 사항이 있습니다. 만약 이 폰이 인터넷에 접속되어 있지 않다면 어떻게 될까요? 또 이미지가 너무 고화질이라 용량이 크면 어떻게 될까요? 이에 대한 문제점이 발생할 수 있겠지요. 그래서 웹상으로 이미지를 받아오는 경우가 빈번할 경우에는 따로 이벤트를 삽입해줘야 합니다.
지금까지는 실버라이트에서 웹의 이미지를 불러오는 것을 했으니까 다음 해볼것은 XNA로 웹의 이미지를 받아와야 합니다. 이때는 Webclient라는 .net 클래스를 사용하면 가능하답니다.
이를 위해서는 사전에 네임스페이스를 system.Net을 추가해줘야 합니다. 
XnaWebBitmap이라는 프로젝트를 xna에서 하나 만듭시다.

메인 클래스의 내용은 이전 프로젝트와 같습니다.다음으로 LoadContent 부분에서 Webclient를 호출해야 합니다. 다음과 같이 코딩을 합니다.

간략하게 언급하자면 webclient를 사용해서 완전히 읽었을때는 completed되는 함수를 새롭게 선언한 것입니다. 물론 뒤에 위 함수가 언급되어 있지 않으므로 따로 만들어줘야 하지요.

중간에 취소나 오류가 나지 않으면 결과값을 stream형으로 받아서 testTexture로 넣어주고, 위치를 결정지어주게 됩니다.

일반적으로 프로그램의 동작상 LoadContent 메서드는 update나 draw에 비해 먼저 호출되는데 한가지 유의할 점이 있습니다. 반드시 download가 완료가 된후에 update나 draw로 넘어가야 된다는 겁니다. 약간의 시간이 필요하다는 겁니다. 그래서 받아오는 texture2D 개체가 다 완료되고 나서야 draw가 실행되면 좋겠지요.

결과는 다음과 같이

나오게 되지요. 아마 다운 받을 수 없다면 뭔가 표현이 안될 듯합니다.

일단 xna와 silverlight상에서 그림을 삽입하고 크기를 자동으로 조절해주는 기능에 대해 설명해드렸습니다. silverlight로는 구현이 간단하다는게 조금 눈에 띄네요. ㅎ