블로그 이미지
내게 능력 주시는 자 안에서 내가 모든것을 할수 있느니라 - 빌립보서 4 : 13 - happydong

카테고리

Happydong (1363)
프로그래밍 (156)
MUSIC (16)
인물 (3)
Utility (10)
세미나 소식&내용 (22)
IT뉴스 (18)
운동 (830)
CAFE (10)
Life (282)
Total
Today
Yesterday



Silverlight게임 만들기 빨리 진행을 해서 끝내야 하는데제가 회사일 때문에 조금 바빠서리자꾸 늦어 지네요~^^;;아주 혹시나 제 글을 관심 있게 봐주시는 분들에게 죄송하다는 말을 드리고 싶네요~^^;;

그럼 지난 강좌를 이어가도록 하겠습니다. 지난번 시간에는 랜덤함수를 이용해서 이미지들을 생성해서 보여주는 것까지 코드를 짜보았습니다. 이번 시간에는 간단하게 Blend를 이용해서 여러 가지 Storyboard만들어 볼 것이며, 같은 그림을 클릭했을 때 이미지가 지워지도록 만들어 볼 것입니다. ~ 그럼 지난 시간까지 무리 없이 잘 따라오셨다면 Blend를 실행시키시고 해당 프로젝트를 열어주세요. 프로젝트가 다 열리셨다면 Photo.xaml파일을 클릭해서 열어 주세요~

사용자 삽입 이미지


위 그림과 같이 열리셨다면 Rectangle객체를 선택을 해서 전에 만들었던 Image객체 위 크기와 높이를 똑같이 합니다. (Left Top 0 이며, Rectangle객체는 img_back(Canvas객체)의 하위에 생성하지 않습니다.) 속성설정은 아래 그림과 같으며 혹시나 해서 코드소스를 같이 붙어 드립니다^^ 그리고 혹시 객체 색을 어떻게 지정하는지 궁금하신 분들은 [무한도전]Silverlight 메뉴바 만들기(3)를 참고 하세요~!

사용자 삽입 이미지

Photo.xaml 페이지

<Rectangle Width="96" Height="96" Stroke="#FF000000" x:Name="imghide" Opacity="1" RenderTransformOrigin="0.5,0.5" Cursor="Hand">

<Rectangle.RenderTransform>

<TransformGroup>

<ScaleTransform ScaleX="1" ScaleY="1"/>

<SkewTransform AngleX="0" AngleY="0"/>

<RotateTransform Angle="0"/>

<TranslateTransform X="0" Y="0"/>

</TransformGroup>

</Rectangle.RenderTransform>

<Rectangle.Fill>

<LinearGradientBrush EndPoint="0.505,0" StartPoint="0.5,0.979">

<GradientStop Color="#FF2A2A2A" Offset="0.019"/>

<GradientStop Color="#FF474646" Offset="0.538"/>

<GradientStop Color="#FF414141" Offset="0.486"/>

<GradientStop Color="#FF999999" Offset="0.923"/>

<GradientStop Color="#FF333333" Offset="0.269"/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>


위 코드는 img_back(Canvas객체) 바로 아래에 넣으시면 되고,그렇게 생성이 될 것 입니다^^

 

이제는 몇가지 Storyboard를 만들어 보도록 하겠습니다. 이 부분은 그림으로 하나하나 캡쳐뜨는 것이 너무 많을 것 같아서 동영상으로 찍어 보았습니다. ^^;;처음 찍어보는 거라 좀 쓱쓰럽네요~^^그래도 혹시 Blend에 익숙하지 않은 분들에게 도움이 되셨으면 좋겠습니다~

참고로 마이크가 없는 관계로 말로 설명을 하지 못했습니다. 다소 보는데 불편하시더라고 이해해주세요~!^^;;;

 



두개의 StoryBoard를 말들었습니다. 하나는 Photobig이고, 하나는 Photosmall입니다.

각각의 행위는 아래와 같습니다.

  Photobig : 사용자가 클릭을 했을 때 객체가 커지면서 이미지가 보여지는 StoryBoard.

Photosmall : 같은 그림이 아닐경우 객체가 작아지면서 이미지가 보이지 않는 StoryBoard.

 

생성된 코드는 아래와 같습니다.

Photo.xaml 페이지

<Canvas.Resources>

<Storyboard x:Name="Photobig">

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="img_back" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1.25"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="img_back" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1.25"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imghide" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1.25"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imghide" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1.25"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imghide" Storyboard.TargetProperty="(UIElement.Opacity)">

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="0"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

<Storyboard x:Name="Photosmall">

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="img_back" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.25"/>

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imghide" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.25"/>

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="img_back" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.25"/>

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imghide" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.25"/>

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>

</DoubleAnimationUsingKeyFrames>

<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="imghide" Storyboard.TargetProperty="(UIElement.Opacity)">

<SplineDoubleKeyFrame KeyTime="00:00:00" Value="0"/>

<SplineDoubleKeyFrame KeyTime="00:00:00.5000000" Value="1"/>

</DoubleAnimationUsingKeyFrames>

</Storyboard>

</Canvas.Resources>

<!-- 전에 있던 코드에서 코드가 조금 추가 되었습니다. 유의하세요~! -->

<Canvas Width="96" Height="96" Canvas.Left="0" Canvas.Top="0" x:Name="img_back" RenderTransformOrigin="0.5,0.5">

<Canvas.RenderTransform>

<TransformGroup>

<ScaleTransform ScaleX="1" ScaleY="1"/>

<SkewTransform AngleX="0" AngleY="0"/>

<RotateTransform Angle="0"/>

<TranslateTransform X="0" Y="0"/>

</TransformGroup>

</Canvas.RenderTransform>

<Image Width="96" Height="96" Stretch="Fill" x:Name="image1">

</Image>

</Canvas>


이제 StoryBoard가 만들어 졌으니깐 같은 그림일 때 지워지고 같은 그림이 아니라면 다시 원래되로 돌아가는 소스코드를 짜보도록 하겠습니다. 먼저 Photo페이지의 cs코드부분 열어주시고, 아래 코드들를 입력 합니다.

(참고로 아래 코드들은 전에 작성했던 코드에 추가적으로 들어가는 코드이니 혼동없으시길 바랍니다)

 

Photo.xaml.cs 페이지 (전역변수 선언)

기존 코드 생략

// 클릭을 했는지 여부를 확인 하기위한

bool _Mousedown = false;

 

Photo.xaml.cs 페이지 (Property)

/// <summary>

/// 객체가 클릭 여부를 지정하거나 반환

/// </summary>

public bool MouseDown

{

            get { return _Mousedown; }

            set { _Mousedown = value; }

}

 

위 변수는 사용자가 한객체를 여러 번 클릭하는 행위를 방지하기 위해서 선언한 것 이며,

Property를 통해서 Page클래스에서 확인할수 있습니다.

 

Photo.xaml.cs 페이지

public Photo(Page page,Downloader down ,String URL)

{

    기존 코드 생략

    // 객체 클릭 이벤트 생성

this.MouseLeftButtonDown += new MouseEventHandler(Photo_MouseLeftButtonDown);

}

void Photo_MouseLeftButtonDown(object sender, MouseEventArgs e)

{

 // Page클래스의 SetPoint에 접근

_Page.SetPoint(this, _root);

}

 

SetPoint를 아래코드에서도 알수 있겠지만 접근제한자가 internal이여서 접근이 가능하며, 인자값으로 자신(Photo) _root(FrameworkElement)를 받고 있습니다. Page클래스 단에서 쉽게 Photo클래스를 컨트롤 하기 위해서 입니다.

 

Photo.xaml.cs 페이지 (Property)

/// <summary>

/// 객체의 이미지 URL값을 반환

/// </summary>

public string getUrl

{

get { return _URL; }

}


Property Page클래스에서 같은 그림인지 아닌지 확인 하기위해서 만든 것입니다. , 같은 그림인지 여부는 URL값으로 확인 할수 있습니다. 이제 대충 어떻게 해야하는지 감을 잡으신 분들분 계실 것 같군요~!^^이제 Page.xaml.cs페이지에서 코드를 짜보도록 하겠습니다. 먼전 변수 선선언부부터 하도록 하겠습니다 .

 

Page.xaml.cs 페이지 (전역변수 선언)

기존 코드 생략

 

// 사용자의 두번 클릭을 위한 전역 변수

int number = 0;

// 선택한 두개의 이미지 확인을 위한 Photo 배열

private Photo[] _ImgArray = new Photo[2];

// Photo FramworkElement 생성 각각의 StoryBoard 두개를 실행하기 위함.

private FrameworkElement[] _ROOT = new FrameworkElement[2];

 

보시기 편하게 주석으로 각각의 변수가 어떻게 쓰여질지 작성해 봤습니다.다음은 SetPoint부분의 코드를 작성해 보겠습니다.

 

Page.xaml.cs 페이지

internal void SetPoint(Photo photo, FrameworkElement root)

{

// 사용자가 막 클릭하는 걸 방지..딱 두번만 클릭관련 조건~!

if (number < 2)

{

// 스크린 Canvas에서 이미지 삭제

screen.Children.Remove(photo);

// 스크린 Canvas에 이미지 다시 추가

screen.Children.Add(photo);

 

//같은 그림들 두번 클릭하면 안됨. 그래서 해당 Photo에 마우스클릭을 했었는지 확인함.

if (!photo.MouseDown)

{

photo.MouseDown = true;

// Photo에 있는 StoryBoard를 생성하기.

Storyboard Photobig = root.FindName("Photobig") as Storyboard;

Photobig.Begin();

 

_ImgArray[number] = photo;

_ROOT[number] = root;

number++;

if (_ImgArray[1] != null)

{

// 두번째로 찍은 이미지이면 스토리보드 실행후 이벤트 발생함

Photobig.Completed += new EventHandler(Photobig_Completed);

}

}

}

}


위 코드는 주석을 통해서도 대충 이해하실수 있을 것이라고 생각이 됩니다. 조금 이상하게 보일 부분이 이미지를 삭제하고 추가하는 부분일텐데요. 이 부분은 왜 이렇게 했냐면
사용자 정의 컨트롤이 for문을 돌면서 동적으로 생성이 되다 보니깐 먼저 생성된 것들은 제일 마지막에 생성된 객체의 밑에 있게됩니다. 만약 사용자가 제일 밑에 있는 객체을 클릭했다고 했을 때 그 객체의 StoryBoard는 어떻게 되겠습니까? 상상이 가시나요~^^ 제일 위에 있는 객체에 겹치게 되어서 제일 위에 있는 객체 위로 못올라 오게 됩니다. 그럼 클릭한 객체의 zindex값을 조정해 주면 되지 않을까 생각하시는 분이 있을까 생각이 됩니다. 저 또한 그렇게 생각을 했으니깐요.그래서  사용자 정의 컨트롤의 최상위 Canvas zindex값을 조정해 봤는데 안되더군요~^^;; 나름 고민과 좌절을 겪고 있던중 문득 생각이 난 것이 새로 추가하면 위로 가지 않을까 싶어서 삭제후 다시 추가를 했던 것 입니다~^^;;그러니 내가 원하던데로 움직이니정말 좋았습니다.ㅋㅋ 음..다음 조건들은 주석에서도 설명하고 있듯이 사용자가 객체 클릭횟수를 조절하기 위함이고요, 그 다음은 한 객체를 두번 클릭을 방지하기 위한 조건입니다. 한 객체를 두번 클릭하면 StoryBoard가 두번 일어나겠지요~!그럼 안되잖아요~! 클릭하면 _ImgArray배열 변수에 값을 지정하게 되고 두번째 값까지 들어가게 되면 생성한 StoryBoard의 이벤트(Completed:StoryBoard가 끝나면 일어나는 이벤트)를 생성합니다~! 이벤트 내용 코드는 아래와 같습니다~

 

Page.xaml.cs 페이지

void Photobig_Completed(object sender, EventArgs e)

{

//이미지 URL이 같다면 지워버리게 함.

if (_ImgArray[0].getUrl == _ImgArray[1].getUrl)

{

for (int i = 0; i < 2; i++)

{

//스크린 Canvas에서 제거

screen.Children.Remove(_ImgArray[i]);

number = 0;

}

}

else

{

for (int i = 0; i < 2; i++)

{

// Photo에 있는 StoryBoard를 생성하기.

Storyboard Photosmall = _ROOT[i].FindName("Photosmall") as Storyboard;

Photosmall.Begin();

// 그림이 같이 않을 경우 StoryBoard가 실행이 다 끝난 다음에 클릭할수 있도록 하기 //위한 이벤트처리.

Photosmall.Completed += new EventHandler(Photosmall_Completed);

//마우스 관련 다시 false로 돌림

_ImgArray[i].MouseDown = false;

}

}

//배열은 null 값으로 재지정함.

for (int k = 0; k < 2; k++)

{

_ImgArray[k] = null;

_ROOT[k] = null;

}

}

// Photosmall StoryBoard 이벤트부분

void Photosmall_Completed(object sender, EventArgs e) { number = 0; }

 

위 코드가 바로 같은 그림인 경우 객체를 삭제하는 코드 부분입니다.URL값으로 확인을 해서 같은 그림이라면 삭제가 이루어 지고요, 같은 그림이 아니라면 Photosmall StoryBoard를 생성해서 실행하게 됩니다.StoryBoard가 실행이 끝나면 다시 클릭할수 있도록 number변수를 초기화 해줍니다.

그리고 _ImgArray배열과 _ROOT배열의 값을 null로 초기화 해줍니다~ 이렇게 해야 다음에 다시 확인할수 있을 테니깐요~^^ 아래 동영상은 잘 작동이 되는 모습을 찍어본 것 입니다.



 

~이제 어느정도 게임 처럼 작동하고 있군요~^^ 이제부터는 간단한 조건과 스토리보드만 추가하면 게임이 완성이 됩니다~^^ 한번 잘 생각해 보시고 직접 미리만들어 보는 것도 괜찮을 것 같네요~ 여기까지 따라오느라 수고 많으셨습니다~^^ 혹시 제 내용중에 부족한 부분이 있거나 궁금하신 부분이 있다면 언제든지 말씀해 주세요~^^
 
Posted by happydong
, |





"같은 그림 찾기" 만들기 2

 

저번 시간에는 간단하게 Page.xaml 파일에 디자인을 그려봤습니다. 이번에는 사용자 정의 컨트롤을 이용해서 저번 시간에 그렸던 디자인 화면에 이미지 파일들이 정렬된 형태로 나타나도록 코드를 짜보도록 하겠습니다코드를 보기 앞서 먼저 Web프로젝트를 하나 만들어 줍니다. . Image파일을 Silverlight로 다운로드하기 위해서는 Web프로젝트가 필요하기 때문 이지요~! 솔루션 탐색기 >> 솔루션(오른쪽마우스클릭) >> 추가 >> 새 프로젝트 추가를 선택해서 Web프로젝트를 하나 생성합니다.프로젝트 이름은 저는WebPage라고 해봤습니다. 이제 두 개의 프로젝트가 생성이 됐군요~! 그럼 실버라이트 프로젝트를 웹 프로젝트에서 쓸 수 있도록 연결을 해주어야겠네요! 솔루션 탐색기에서 Web프로젝트 마우스 오른쪽 버튼을 클릭하면 Add Silverlight Link 라고 있을 것입니다. 그 걸 클릭해주시면 됩니다.

 

1.     그림

 

사용자 삽입 이미지

 

 

Web프로젝트를 보면 ClientBin폴더가 추가되면서 Silverlight.dll이 포함됩니다. 그리고 참고로 TestPage.html, TestPage.html.js, Silverlight.js 3개 파일은 자동적으로 추가되지 않습니다.그래서 임의적으로 Silverlight 프로젝트에서 복사해서 붙여 넣어 주셔야 합니다.

그럼 이제 Silverlight프로젝트에서 사용자 정의 컨트롤을 만들도록 합니다. 혹시 사용자 정의 컨트롤을 왜 만드는 것일까 하는 분들이 있을 지도 모르겠는데요. 똑 같은 객체를 여러 번 만드는 것 보다는 하나 만들어 두고 불러서 쓰는 것이 좀더 편하기 때문이라고 할까요~^^
사용자 정의 컨트롤을 처음 만들어 보시는 분들을 위해 간단하게 그림으로 준비해 봤습니다.

 

2.     그림

 

사용자 삽입 이미지

 

 

위 그림은 솔루션탐색기에서 마우스 오른쪽 클릭~! 한 모습입니다.

 

3.그림

사용자 삽입 이미지


Silverlight User Control 템플릿 선택!! 이름을 알맞게 지어주세요 저는 Photo.xaml이라고 했습니다 사용자 정의 컨트롤을 만들었다면 이제 거의 필요한 파일들이 갖추어 진 것 같습니다. 이제 이미지 압축 파일만 있으면 되겠네요~! 제가 위에 올려 드린 파일을 다운로드 하셔서 Web프로젝트에 추가를 합니다. 그럼 이제 아래 그림과 같이 파일들이 구성이 되었겠군요~!

 

4.그림

사용자 삽입 이미지


위 그림과 같이 파일이 갖추어 졌다면 Photo.xaml 파일 열어서 코드를 보도록 하겠습니다.

Photo.xaml 파일에서 생성된 코드 중에서 Width , Height를 각각 96으로 설정해 주시고요, Background 는 지워 버리세요. 그리고 나서 Image객체를 생성 하도록 합니다.코드는 아래와 같습니다.

 

Photo.xaml 페이지

 <Canvas xmlns="http://schemas.microsoft.com/client/2007"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        Width="96"

        Height="96"

        >

  <Image Width="96" Height="96" Stretch="Fill" x:Name="image1"></Image>

</Canvas>

 

위 코드와 같이 작성 하셨다면 이제는 블랜드를 이용해서 간단하게 작업을 하도록 하겠습니다.블랜드를 실행 시켜서 해당 프로젝트를 열어 주세요~! 아래 그림은 블랜드에서 열어본 모습 입니다.

 

5.그림

사용자 삽입 이미지


저와 같은 모습으로 나타나셨나요!^^ 두 개의 객체가 나타날 것 입니다. 부모Canvas객체와
image객체….이 상태에서 canvas객체를 하나 더 만들도록 합니다. 옆에 메뉴 중에서 canvas객체를 선택을 하고 원하는 크기 만큼 그려줍니다.^^ 그리고 나서 아래그림과 같이 설정을 간단하게 설정을 해주시고 먼저 만들었던 image객체를 자식객체로 마우스 드래그 해서 canvas객체 안으로 지정해 줍니다. (Name : img_back , Width : 96 , Height : 96 , Color : 무)

 

6.그림

사용자 삽입 이미지

생성된 코드는 아래와 같습니다~!

Photo.xaml 페이지

<Canvas Width="96" Height="96" Canvas.Left="0" Canvas.Top="0" x:Name="img_back">

        <Image Width="96" Height="96" Stretch="Fill" x:Name="image1">

        </Image>

</Canvas>


여기까지 다 준비가 되셨다면 이제 코드를 짜보도록 하겠습니다. 다시 VS2008로 돌아와서 Page.xaml.cs파일을 열도록 합니다. 그럼 먼저 이미지 파일을 다운로드 하는 코드부터 짜 보도록 하겠습니다. 코드는 아래와 같습니다.

 

Page.xaml.cs 페이지

 // 추가 using

using System.Windows.Browser;

namespace ImageGame

{

public partial class Page : Canvas

{

// 다운로드 클래스

Downloader _down;

 

public void Page_Loaded(object o, EventArgs e)

{

// Required to initialize variables

InitializeComponent();

 

// 생성

_down = new Downloader();

// Downloader 이벤트 다운로드가 끝이 나면 발생.

_down.Completed += new EventHandler(_down_Completed);

// GET 방식으로 다운로드... 이미지 경로지정

_down.Open("GET", new Uri(HtmlPage.DocumentUri, "images.zip"));

// 다운로드 실행

_down.Send();

}

// 다운로드가 끝나면 이벤트 발생

void _down_Completed(object sender, EventArgs e)

{

}

}

}

 

위 코드를 간단하게 애기하자면 images.zip파일을 실버라이트 프로젝트로 다운로드 하는 것 입니다. 주석을 통해서도 간단하게 예측하셨으리라 생각 됩니다. 그럼 이제 다운로드가 끝나고 난 다음에 이미지를 정렬해서 보여 주도록 하는 코드를 짜보도록 하겠습니다. 먼저 전역 변수들을 입력합니다.

 

Page.xaml.cs 페이지 

 // 랜덤으로 나온 숫자를 기억하기 위한 Generic함수

        List<int> number1;

        List<int> number2;

        // 랜덤함수 변수

        Random _random;

        // UserControl FrameworkElement를 배열로 넣음.

        FrameworkElement[] _Photo_FE;

        // Photo객체 변수

        Photo _Photo;

        // UserControl의 위치를 지정하기위한 변수

        int _left = 35;

        int _top = 15;

        // 다운로드 클래스

        Downloader _down;

위 코드는 전역으로 선언한 변수들 입니다. Generic함수를 쓰기 위해서 추가적으로 using문을 선

언해 두는 것이 좋습니다. (using System.Collections.Generic;)

Generic함수를 두개를 사용한 이유는 랜덤 함수를 무제한 돌려서 같은 숫자가 2개만 받을 수 있도록 하기 위해서 입니다. 나중에는 두개의 함수를 한쪽으로 몰아 줄 것입니다. 좀 제가 복잡하게 짠걸까요~^^;;ㅋㅋ 계속해서 Random함수는 따로 설명이 필요 없겠군요~^^ FrameworkElement함수를 배열로 선언했습니다. 각각의 사용자 정의 컨트롤을 컨트롤 하기위해서 입니다. Photo는 사용자 정의 컨트롤을 뜻하는 거 아시겠지요! _left , _top는 이미지들을 정렬하기 위해서 선언해 두었습니다. 이제 랜덤으로 Image가 생성이 되도록 하나의 메소드로 만들어 보도록 하지요~!

 

 Page.xaml.cs 페이지

 // 게임 시작하기 위한 메소드

private void StartGame()

{

// Generic 함수생성

number1 = new List<int>();

number2 = new List<int>();

 

// Random 함수생성

_random = new Random();

 

//총 이미지가 보여질 숫자 만큼 반복함.

for (int i = 0; i < 20; i++)

{

// 랜덤을 무한적으로 돌림.

for (int h = 0; h < 2; h--)

{

int testnum = _random.Next(10);

// 랜덤으로 돌린 숫자가 처음나오는 거면 제네릭함수에 넣음.

if (!number1.Contains(testnum))

{

number1.Add(testnum);

break;

}

else

{

// 랜덤으로 돌린 숫자가 두번째 나온거면 제넥릭함수에 넣음

if (!number2.Contains(testnum))

{

number2.Add(testnum);

break;

}

}

}

}

//두개의 제네릭합수에 있는 번호를 하나의 제네릭에 합침.

for (int k = 0; k < number2.Count; k++)

{

number1.Add(number2[k]);

}

// FrameworkElement 배열 생성

_Photo_FE = new FrameworkElement[20];

 

int align = 4;

// 이미지 생성함.

for (int t = 0; t < number1.Count; t++)

{

// 이미지객체의 URL지정. 제네릭함수에서 하나하나 읽어 image URL를 지정합니다.

string ImgURL = string.Format("img0{0}.jpg", number1[t].ToString());

// Photo객체 생성

_Photo = new Photo(this, _down, ImgURL);

// Photo객체 위치 지정

_Photo.SetValue<int>(TopProperty, _top);

_Photo.SetValue<int>(LeftProperty, _left);

 

_Photo_FE[t] = _Photo._thisROOT;

 

//위치 지정~!

if (t != align)

{

_left += 100;

}

else

{

_top += 105;

_left = 35;

align += 5;

}

//스크린 Canvas에 이미지 추가

screen.Children.Add(_Photo);

}

 

// 제넥릭 함수 메모리 삭제

number1.Clear();

number2.Clear();

// 변수 초기화

_left = 35;

_top = 15;

}

 

위 코드를 간단하게 설명하자면 위에 2개의 반복 문을 이용해서 랜덤숫자를 Generic함수에 넣도록 합니다. 즉 밖에 있는 반복문은 총 20번을 돌게 되는 거구요 , 안 쪽에 있는 반복문은 무제한 반복이 되도록 해서 같은 숫자가 두번째 나오면 그걸 2번째 Generic함수에 넣고 break로 반복을 빠져나옵니다. 주의할점은 반복이 되는 동안 하나의 Generic함수에 이미들어가 있는 숫자가 또 않드러 가도록 조건 검사를 해주어야 합니다^^..이정도는 이미눈치 채셨으리라 생각이 되는군요~^^ 이렇게 두개의 Generic함수가 나왔다면 이제 하나로 함쳐주고 FrameworkElement의 배열 개수를 20개로 지정해주고Photo(사용자 정의 컨트롤)를 생성합니다. 위치를 지정해 주고요 screen객체의 하위 객체로 추가해 주도록 합니다. 이렇게 만든 메소드를 위해서 다운로드후 이벤트 부분에 정의해 주도록 합니다.

 

Page.xaml.cs 페이지

 // 다운로드가 끝나면 이벤트 발생

void _down_Completed(object sender, EventArgs e)

{

        StartGame();

}

 

이렇게 했다면 Photo.xaml.cs 파일을 열어서 코드를 짜도록 하겠습니다.

 

Photo.xaml.cs 페이지

 namespace ImageGame

{

    public class Photo : Control

    {

        FrameworkElement _root;

        Image _image1;

        Page _Page;

        string _URL;

 

        public Photo(Page page,Downloader down ,String URL)

        {

            System.IO.Stream s = this.GetType().Assembly.GetManifestResourceStream("ImageGame.Photo.xaml");

            // InitializeFromXaml 메소드는 최상위 FrameworkElement객체로 반환함.

            _root = this.InitializeFromXaml(new System.IO.StreamReader(s).ReadToEnd());

 

            _URL = URL;

            _Page = page;

        // image1객체 생성

            _image1 = _root.FindName("image1") as Image;

        // image1객체 URL 지정

            _image1.SetSource(down, URL);

        }

 

        // FrameworkElement 객체 반환

        internal FrameworkElement _thisROOT

        {

            get { return _root; }

        }

    }

}

 

위 코드의 전역변수부터 설명 드리자면 _root는 주석에서도 나와 있듯이 Photo클래스의 최상의 객체를 받기 위해서 입니다. 사용자 정의 컨트롤에서는 Page.xaml.cs 에서 처럼 아이디로 찾을수 없습니다. 최상위객체에서 자식객체를 찾도록 해야 합니다. _image1Image객체를 찾아서 쓰기위해서 이고요. _Page는 차후에 사용되기 때문에 그때 설명하도록 하겠습니다. _URL은 중요한 변수 이지요. 같은 그림인지 아닌지 확인할 때 사용이 됩니다.여기까지 변수 설명이 끝났고요.. 코드부분은 눈으로 보셔도 가뿐하게 이해 하 실수 있을 것 같군요~!^^


여기까지 코드를 다 입력하셨다면은 한번 실행을 시켜 보도록합니다. 실행시킬때 꼭 Web프로젝트를 시작프로젝트로 설정을 하고
TestPage.html 파일을 시작페이지로 설정해 주는 센스 잊지 마시고요~^^
그럼 아래 그림과 같이 나타나나요~^^

 

7.그림

사용자 삽입 이미지


F5
번을 눌러서 위치가 변화는지 확인해 보세요~^^
지금 까지 쓰고 보니 참 내용이 길었습니다.^^;;;;;;;여기까지 잘 참고 읽어 주시고 따라와 주셔서 감사합니다. 남은 하루도 보람차게 보내세요~^^

 

Posted by happydong
, |



"같은 그림 찾기" 만들기 1

 

 이제 Silverlight 메뉴바 만들기에 이어 Silverlight Game를 만들어 보도록 하겠습니다. 정말 기대 되지 않습니까~!?ㅋ 저는 이렇게 제가 실버라이트로 게임을 만들었다는 사실에 깜짝 놀랬 습니다. 늘 말했듯이 저 또한 완전 초보 개발자라는 사실...^^;;;그렇기 때문에 누구나 Silverlight프로젝트에 도전할 수 있으리라 생각이 됩니다~^^ 그럼 이제 본론으로 들어가서 한번 만들어 보도록 하겠습니다. 이 강좌가 언제쯤 완성 될찌...아직 모

르겠습니다. 그냥 꾸준히 포스팅 하도록 노력하겠습니다~! 저도 나름 회사에서 일을 하고 있는 지라^^

~ 그럼 이제 본격적으로 만들어 보도록 하겠습니다.

그럼 일단 VS2008 프로젝트를 실행을 해서 Silverlight 템플릿에서 Silverlight프로젝트를 원하시는 프로젝트명을 입력해서 만드세요~ 저는 "ImageGame" 이라고 해봤습니다. ((한글버전)파일 >>새로만들기 >>프로젝트 선택 Silverlight 템플릿선택~!) 혹시 잘 어떻게 프로젝트를 생성하는지 모르시면 "[무한도전] Silverlight 메뉴바 만들기 (2)" 참고 하 세요~^^

프로젝트가 만들어 지셨다면 이제 블랜드를 실행해서 기본적인 디자인을 만들어 보도록 하겠습니다. 모 원하시는모양으로 만들어도 상관은 없습니다.~^^ㅋㅋ저는 아주 미적감각이 뛰어나서....ㅋㅋ (믿거나 말거나...ㅋ) 아래 그림과 같이 멋지게 만들어 보았습니다.^^;;  

1. 그림

 

사용자 삽입 이미지

 

혹시 제가 만든 디자인이 몹시 맘에 들어 하시는 분들을 위해서...ㅋㅋ 아래 소스를 준비해 드리겠습 니다~^^ㅋ 그냥 page.xaml 파일에 복사해서 붙어 넣으시면 됩니다~^^;; 혹시 따로 디자인을 하시는 분들은 주의해서 id를 지정해 주세요~^^;; 따로 만드시다 보면 제가 지정한 id와 달아서 혼돈이 있을 수도 있으니깐요~!^^


 

 

 Page.xaml페이지

 <Canvas x:Name="background"

xmlns="http://schemas.microsoft.com/client/2007"

xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

Loaded="Page_Loaded"

x:Class="ImageGame.Page;assembly=ClientBin/ImageGame.dll"

Width="640"

Height="480"

Background="White"

> 

<!-- 여기서 부터 추가된 코드 입니다. Canvas는 기본 생성되는 코드입니다. -->           

<Canvas x:Name="background_Copy" Width="640" Height="532" Background="#FF2A2929">

<Canvas x:Name="body" Width="603" Height="461" Canvas.Left="20" Canvas.Top="24" Background="#FF595858">

<Canvas x:Name="screen" Width="568" Height="436" Canvas.Left="18" Canvas.Top="8" Background="#FFFBFBFB"/>

</Canvas>

<Rectangle x:Name="title" Width="603" Height="31" Stroke="#FF000000" RadiusX="20" RadiusY="20" Canvas.Left="20" Canvas.Top="8">

<Rectangle.Fill>

<LinearGradientBrush EndPoint="0.497,-6.888" StartPoint="0.5,7.863">

<GradientStop Color="#FF000000" Offset="0.346"/>

<GradientStop Color="#FFFFFFFF" Offset="0.918"/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<TextBlock Width="339" Height="20" Text="dong wook - http://drum-83.tistory.com" TextWrapping="Wrap" Canvas.Top="12" Canvas.Left="54" Foreground="#FFF8E9E9" x:Name="txtdown" Cursor="Hand"/>

<Rectangle Width="624" Height="54" Stroke="#FF000000" RadiusX="20" RadiusY="20" Canvas.Left="8" Canvas.Top="469" x:Name="Menuber">

<Rectangle.Fill>

<LinearGradientBrush EndPoint="0.497,-6.888" StartPoint="0.5,7.863">

<GradientStop Color="#FF000000" Offset="0.428"/>

<GradientStop Color="#FFFFFFFF" Offset="0.918"/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

</Canvas>

 

</Canvas>

 

~혹시 블랜드로 객체들을 하나하나 만들어 보고 싶은데 어떻게 만드는지 모르시겠다 하시는 분들 은 제가 쓴 "[무한도전]Silverlight 메뉴바 만들기"를 참고 하시고요, 간단하게 START버튼을 만드는 과정을 그림으로 살짝 보시겠습니다~^^

2. 그림

 

 

사용자 삽입 이미지

 

블랜드 왼쪽 메뉴에서 Rectangle객체에 마우스 오른쪽 버튼을 누르면 위와 같은 화면이 나타 납니다. Ellipse 객체를 선택을 한 후 아래와 같이 그려 봅니다.

 

3. 그림

 

사용자 삽입 이미지

 

위 그림과 같이 그리 셨다면 아이디를 지정하고 사이즈과 위치 정보를 지정합니다.

 

4. 그림

 

사용자 삽입 이미지

 

위 와 같은 방법으로 블랜드를 이용해서 객체들을 만들면 됩니다. 소스는 아래와 같습니다. 아래 소스는 page.xaml 파일에 붙어 넣으시면 되고요 아까 위에서 봤던 디자인 코드 다음부분에 작성하면 됩니다. (주의 : 기본생성된 부모 Canvas 안에 넣으세요^^)

 

 Page.xaml페이지

 <Rectangle Width="148" Height="40" Stroke="#FF000000" RadiusX="73.5" RadiusY="73.5" x:Name="start_body" RenderTransformOrigin="0.5,0.5" Canvas.Left="81" Canvas.Top="475" Canvas.ZIndex="0">

<Rectangle.RenderTransform>

<TransformGroup>

<ScaleTransform ScaleX="1" ScaleY="1"/>

<SkewTransform AngleX="0" AngleY="0"/>

<RotateTransform Angle="0"/>

<TranslateTransform X="0" Y="0"/>

</TransformGroup>

</Rectangle.RenderTransform>

<Rectangle.Fill>

<LinearGradientBrush EndPoint="0.501,-1.363" StartPoint="0.513,2.388">

<GradientStop Color="#FF000000" Offset="0"/>

<GradientStop Color="#FFFFFFFF" Offset="1"/>

<GradientStop Color="#FFB3B3B3" Offset="0.705"/>

</LinearGradientBrush>

</Rectangle.Fill>

</Rectangle>

<TextBlock Width="109" Height="31" Canvas.Left="108" Canvas.Top="478" Text="START~!" TextWrapping="Wrap" x:Name="txt_start" FontSize="24" FontWeight="Bold" Cursor="Hand" RenderTransformOrigin="0.5,0.5" Foreground="#FFEE5555">

<TextBlock.RenderTransform>

<TransformGroup>

<ScaleTransform ScaleX="1" ScaleY="1"/>

<SkewTransform AngleX="0" AngleY="0"/>

<RotateTransform Angle="0"/>

<TranslateTransform X="0" Y="0"/>

</TransformGroup>

</TextBlock.RenderTransform>

</TextBlock>

  

~여기까지 잘 따라와 주셨나요~^^;;그럼 이제 START버튼 옆에 시간을 나타나게한 TextBlock만들어 주세요~! 블랜드에서 왼쪽에 보시면 컨트롤이 있을 것 입니다. 원하시는 위치에서 그려주세요 저는 아래 소스와 같이 만들었습니다.

 

 Page.xaml페이지

 <TextBlock Width="117" Height="51" Canvas.Left="297" Canvas.Top="467" Text="TIME :" TextWrapping="Wrap" x:Name="Time1" Foreground="#FFFFFFFF" FontWeight="Bold" FontSize="36"/>

<TextBlock Width="50" Height="43" Canvas.Left="416" Canvas.Top="468" Text="0" TextWrapping="Wrap" x:Name="Time" Foreground="#FFEED9D9" FontWeight="Bold" FontSize="36"/>

 

여기까지해서 간단하게 디자인을 끝이 난 것 같습니다. 자 그럼 이제 한번 실행을 시켜 볼까요~!^^ 잠깐 여기서 실행하기 전에 TestPage.html 페이지에서 style를 변경해 줍니다. 아래와 같이 100% 로 해주세요~^^ 이렇게 안하고 실행 시키면 Silverlight프로젝트가 약간 짤여서 나거든요~^^;;
 

 TestPage.html 페이지

 <style type="text/css">

        .silverlightHost { width: 100%; height: 100%; }

</style>

자 실행을 시켜보면 아래와 같은 그림이 나타날 것입니다.

 

5. 그림

 

사용자 삽입 이미지

 

자 여기까지 잘 따라 오셨는지 모르겠네요~오늘은 이렇게 디자인까지만 다루어 보도록 하겠습니다 이 다음에는 UserControl 아주 간단히 디자인을 하고간단한 스토리보드프로그래밍적인 부분을 알아 보도록 하겠습니다.

 

 

Posted by happydong
, |