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

카테고리

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



ㅁ GDI+ 모양 그리기


선은 Graphics 객체에서 Draw로 시작하는 메소드를 통해 그릴수 있고, Graphics 객체의 메소드들 을 보면 Fill로 시작하는 메소드들은 도형을 그리고 그 도형 안에 색을 채워 주는 메소드로 Brush 객체를 매개변수로 사용 한다.

※ Graphics 클래스의 모양 그리기(채우기) 메소드

 메소드

 설명

 FillClosedCurve  Point 구조체의 배열에 의해 정의된 닫힌 카디널 스플라인의 내부를 채운다.
 FillEllipse  좌표, 너비, 높이의 쌍으로 지정된 경계 사각형에 의해 정의되는 타원의 내부를 채운다.
 FillPath  GraphicsPath 개체의 내부를 채운다.
 FillPie  좌표 쌍, 너비, 높이, 및 두 개의 방사형 선에 의해 지정된 타원에 의해 정의되는 부채꼴 섹션의 내부를 채운다.
 FillPolygon  Point 구조체에 의해 지정된 점의 배열에 의해 정의되는 다각형의 내부를 채운다.
 FillRectangle  좌표 쌍, 너비 및 높이로 지정된 사각형의 내부에 의해 정의되는 사각형의 내부를 채운다.
 FillRectangles  Rectangle 구조체에 의해 지정된 일련의 사각형의 내부를 채운다.
 FillRegion  Region 개체의 내부를 채운다.

아래 참고 예제는 WinForm 프로젝트로 확인한 예제이다.

1.그림

사용자 삽입 이미지


위 그림은 Form 위에 Button 컨트롤 6개를 올려둔 모습이며, 이 예제에서는 각각의 버튼을
클릭하면 원하는 도형이 그려지도록 하는 예제이다.
아래는 코드는 각각의 Button 이벤트에서 일어나는 행위들을 정의한 것이다.

//////////////////////////////////////////////////////////////////////////////////////////

// 추가

using System.Drawing.Drawing2D;

 

// 사각형그리기버튼이벤트

private void btn_Rectangle_Click(object sender, EventArgs e)

{

            // Graphics 객체를생성한다.

            Graphics _graphics = this.CreateGraphics();

            // 메인폼의Graphics 객체를통해바탕화면을희색으로Clear한다.

            _graphics.Clear(Color.White);

 

            // 검은색Pen 객체를생성한다.

            Pen _pen = new Pen(Color.Black);

            // 검은색펜을통해사각형선을그린다.

            _graphics.DrawRectangle(_pen, 10, 10, 320, 165);

 

            // 노란색SolidBrush 객체를생성한다.

            SolidBrush _brush = new SolidBrush(Color.Yellow);

            // 노란색으로채워진사각형을그린다.

            _graphics.FillRectangle(_brush, 10, 180, 320, 165);

}

 

// 원그리기버튼이벤트

private void btn_Ellipse_Click(object sender, EventArgs e)

{

            // Graphics 객체를생성후폼을희색으로Clear 한다.

            Graphics _graphics = this.CreateGraphics();

            _graphics.Clear(Color.White);

 

            // 검은색Pen 객체생성

            Pen _pen = new Pen(Color.Black);

            // 검은색펜으로원선을그린다.

            _graphics.DrawEllipse(_pen, 10, 10, 320, 165);

 

            //토마토색SolidBrush 객체를생성후원안의색을채운다.

            SolidBrush _brush = new SolidBrush(Color.Tomato);

            _graphics.FillEllipse(_brush, 10, 180, 320, 165);

}

 

// 삼각형그리기버튼이벤트

private void btn_Polygon_Click(object sender, EventArgs e)

{

            // Graphics 객체를생성후폼을희색으로Clear 한다.

            Graphics _graphics = this.CreateGraphics();

            _graphics.Clear(Color.White);

 

            // 검은색Pen 객체생성

            Pen _pen = new Pen(Color.Black);

            //삼각형을그리기위한포인트배열을생성한다.

            Point[] _point01 = new Point[]{

                new Point(175,10), new Point(10,165), new Point(340,165)

};

            //검은색펜으로다각형선을그린다.

            _graphics.DrawPolygon(_pen, _point01);

 

            // 은색SolidBrush 객체를생성후다각형안을채운다.

            SolidBrush _brush = new SolidBrush(Color.Silver);

            Point[] _point02 = new Point[]{

                new Point(10,175), new Point(175,340), new Point(340,175)

            };

            _graphics.FillPolygon(_brush, _point02);

}

 

// Hatch Style 버튼이벤트

private void btn_Hatch_Click(object sender, EventArgs e)

{

            // Graphics 객체를생성후폼을희색으로Clear 한다.

            Graphics _graphics = this.CreateGraphics();

            _graphics.Clear(Color.White);

 

            // Hatch Style을그리기위해offSet 정수형변수를생성한다.

            int offSet = 10;

            // HatchStyle 타입의열거형값들을받아Array Object 객체를생성한다.

            // HatchStyle 타입의열거형생성하려면using문추가System.Drawing.Drawing2D;

            Array obj = Enum.GetValues(typeof(HatchStyle));

            // HatchStyle 열거형값이많아10개의값만출력할수있도록반복문생성한다.

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

            {

                // i번째HatchStyle 열거형값의HatchStyle 객체를생성한다.

                HatchStyle h_Style = (HatchStyle)obj.GetValue(i);

                /* 생성된Hatchstyle 객체를통해HatchBrush 객체

                 희색전경색에검은색배경색으로생성한다. */

                HatchBrush H_brush = new HatchBrush(h_Style, Color.White, Color.Black);

                // HatchStyle 객체의값이름을DrawString 메소드를통해그린다.

                _graphics.DrawString(h_Style.ToString(), new Font("굴림체", 10), new SolidBrush(Color.Black), 0, offSet);

                // 생성된HatchBrush 객체의브러시를통해채워진사각형을그린다.

                _graphics.FillRectangle(H_brush, 140, offSet, 200, 20);

                // 다음객체를그리기위해좌표를offSet 변수를통해재설정한다.

                offSet += 30;

            }

}

 

// Texture 버튼이벤트

private void btn_Texture_Click(object sender, EventArgs e)

{

            /* bgimage.bmp파일과txtimage.bmp 파일을해당프로젝트에

             bin폴더안에Debug폴더안에넣어두었다.*/

 

            // 백그라운드이미지객체를생성한다.

            Image _bgimg = new Bitmap("bgimage.bmp");

            // 생성한이미지객체를통해TextureBrush 객체를생성한다.

            TextureBrush txtbgbrush = new TextureBrush(_bgimg);

 

            // 텍스트이미지객체를생성한다.

            Image txtimg = new Bitmap("txtimage.bmp");

            // 생성한이미지객체를통해TextureBrush 객체를생성한다.

            TextureBrush txtbrush = new TextureBrush(txtimg);

 

            // Graphics 객체를생성후폼을희색으로Clear 한다.

            Graphics _graphics = this.CreateGraphics();

            _graphics.Clear(Color.White);

 

            /* 백그라운드이미지를통해생성된TextureBrush 객체를통해

             현재폼을이미지로채운다.*/

            _graphics.FillRectangle(txtbgbrush, this.ClientRectangle);

            // 텍스트에이미지를입혀서그린다.

            _graphics.DrawString("Texture Brush~!", new Font("굴림체", 60, FontStyle.Bold | FontStyle.Italic), txtbrush, this.ClientRectangle);

}

 

// Gradient 버튼이벤트

private void btn_Gradient_Click(object sender, EventArgs e)

{

            // Graphics 객체를생성후폼을희색으로Clear 한다.

            Graphics _graphics = this.CreateGraphics();

            _graphics.Clear(Color.White);

 

            int offSet = 10;

            /* 그라데이션브러시를생성하기위해비워있는

              LinearGradientBrush 객체를생성한다. */

            LinearGradientBrush Lbrush = null;

            Rectangle _rectangle = new Rectangle(0, 0, 100, 100);

            // LinearGradientMode 타입의열거형값을Array 객체로생성한다.

            Array obj = Enum.GetValues(typeof(LinearGradientMode));

 

            // LinearGradientMode 타입의열거형값을출력하기위해반복문생성한다.

            for (int i = 0; i < obj.Length; i++)

            {

                // i 번째LinearGradientMode 객체의열거형값객체를생성한다.

                LinearGradientMode lgMode = (LinearGradientMode)obj.GetValue(i);

                /* 생성된LinearGradientMode 객체를통해LinearGradientBrush 객체를

                   빨강색과파랑색을혼합하여생성한다. */

                Lbrush = new LinearGradientBrush(_rectangle, Color.Red, Color.Blue, lgMode);

                // LinearGradientMode 객체의열거형값이름을그린다.

                _graphics.DrawString(lgMode.ToString(), new Font("굴림체", 10), new SolidBrush(Color.Black), 0, offSet);

                // 생성된LinearGradientBrush 객체의브러시를통해채워진사각형그린다.

                _graphics.FillRectangle(Lbrush, 140, offSet, 200, 50);

                // 다음객체를그리기위해좌표를offSet 변수를통해재설정한다.

                offSet += 80;

            }

}

//////////////////////////////////////////////////////////////////////////////////////////


아래 그림은 결과 화면이다.


2. 그림 (사각형)

사용자 삽입 이미지


3.그림(원)

사용자 삽입 이미지


4.그림 (삼각형)

사용자 삽입 이미지


5.그림 (Hatch Style)

사용자 삽입 이미지


6.그림(Texture)

사용자 삽입 이미지


7.그림(Gradient)

사용자 삽입 이미지




- 참고 서적 : C# 게임 프로그래밍 -





Posted by happydong
, |



ㅁ  GDI+ 선 다루기


 - Graphics클래스에 정의된 렌더링 메소드들의 매개변수로 Pan객체를 넘겨 줌으로써 원하는 선을 그릴 수 있다. (Graphics는 다양한 선을 그리는데 사용하는 메소드를 지원 한다.)

※ Graphics 클래스의 선 그리기 메소드

 메소드

 설명

 DrawArc  좌표, 너비, 높이의 쌍으로 지정된 타원의 부분을 나타내를 호를 그린다.
 DrawBezier  Point 구조체 네 개로 정의되는 Bezier 스플라인을 그린다.
 DrawDeziers  일련의 Bezier 스플라인을 Point 구조체의 배열에서 그린다.
 DrawClosedCurve  Point 구조체의 배열에 의해 정의되는 닫힌 카디널 스플라인을 그린다.
 DrawCurve  Point 구조체의 지정된 배열을 따라 카디널 스플라인을 그린다.
 DrawEllipse  좌표, 높이, 너비의 쌍으로 지정된 경계 사각형에 의해 정의되는 타원을 그린다.
 DrawLine  좌표 쌍에 의해 지정된 두 개의 점을 연결하는 선을 그린다.
 DrawLines  Point 구조체의 배열을 연결하는 일련의 선 세그먼트를 그린다.
 DrawPath  System.Drawing.Drawing2D 네임스페이스에 정의된 GraphicsPath 객체를 이용해서 경로가 정해진 선/곡선의 집합을 그린다.
 DrawPie  좌표 쌍, 너비, 높이 및 두 개의 방사형 선에 의해 지정된 타원으로 정의된 부채꼴 모양을 그린다.
 DrawPolygon  Point 구조체의 배열에 의해 정의된 다각형을 그린다.
 DrawRectangle  좌표 쌍, 너비 및 높이에 의해 지정된 사각형을 그린다.
 DrawRectangles  Rectangle 구조체에 의해 지정된 일련의 사각형을 그린다.
 DrawString  지정된 위치에 지정된 Brush 및 Font 개체로 지정된 텍스트 문자열을 그린다.

아래 코드는 WinForm프로젝트로 알아본 예제 코드 입니다.

///////////////////////////////////////////////////////////////////////////////////////

//이벤트선택: paint 이벤트는컨트롤을다시그려야할때발생하는이벤트이다.

private void Form1_Paint(object sender, PaintEventArgs e)

{

            //Graphics 객체통해서화면에그래픽이미지작업을처리

            Graphics graphics = e.Graphics;

 

            //굵기, 파생색펜을생성

            Pen pen = new Pen(Color.Blue, 10);

 

            //Pens으로부터지정된Pen 객체를얻는다.

            Pen pens = Pens.Firebrick;

           

            //다양한펜을이용해여러형태의선을그린다.

            //1. 원그리기

            graphics.DrawEllipse(pen, 10, 10, 100, 100);

            //2. 선그리기

            graphics.DrawLine(pens, 10, 150, 110, 150);

            //3. 부채꼴그리기

            graphics.DrawPie(Pens.Black, 120, 10, 120, 150, 90, 80);

 

            //4. 보라색대쉬선을이용한도형만들기

            Pen pPen = new Pen(Color.Purple, 5);

            //DashStyle사용하려면using 추가System.Drawing.Drawing2D

            pPen.DashStyle = DashStyle.DashDotDot;

            Point[] dotPoint = new Point[]{

                new Point(150,330),new Point(20,100),

                new Point(30,80), new Point(80,100),

                new Point(50,220)

            };

            graphics.DrawPolygon(pPen, dotPoint);

 

            //5. 사각형안에텍스트넣기

            Rectangle rectangle = new Rectangle(150, 10, 130, 60);

            graphics.DrawRectangle(Pens.Blue, rectangle);

            graphics.DrawString("오호그래픽~이렇게나오는구나~!", new Font("돋움체", 12), Brushes.Red, rectangle);

 

            //6. 폼의가장자리에커스텀DashPattern을이용해선을그리기

            Pen cDashPen = new Pen(Color.BlueViolet, 5);

            float[] cDashes = { 5.0f, 2.0f, 1.0f, 2.0f };

            //길이5인대시, 2인공백,길이1인대시, 2인공백

            cDashPen.DashPattern = cDashes;

            graphics.DrawRectangle(cDashPen, ClientRectangle);

}

//////////////////////////////////////////////////////////////////////////////////////////

위 코드중 DashStyle 속성을 설정하고 있는데..DashStyle열거형의 Dash 스타일은 다음 표와같다.

 열거형

 설명

 Custom  사용자 정의의 대쉬 스타일을 나타낸다
 Dash  짧은 선(dash)으로만 이루어진 파선을 나타낸다
 DashDot  짧은 선(dash)과 점(dot)으로 이루어진 일점 쇄선을 나타낸다.
 DashDotDot  짧은 선(dash) 사이에 점(dot)이 두 개가 들어가는 이점 쇄선을 나타낸다.
 Dot  점(dot)으로만 이루어진 점선을 나타낸다.
 Solid  중간에 공백이 없는 일반 직선을 나타낸다.

아래는 결과 화면이다.

사용자 삽입 이미지



 - 참고 서적 : C# 게임 프로그래밍 -


Posted by happydong
, |



ㅁ Silverlight 게임 "같은 그림 찾기"

아하~초보인 제가 드뎌 Sliverlight를 이용한 게임을 만들어 봤습니다.
정말 몇일동안 삽질에 연속이었지요.. 하지만 이렇게 결과를 보니깐...넘 기쁘고 흥분을 가라안 출수가 없네요..ㅋㅋ
모.. 그리 대단한것도 아닌데..하시는 분들도 있으시겠지만...저 같은 머리로....이렇게 만들기란 정말 쉽지 않았습니다~^^;;;;에~구ㅋ
자~ 그럼 어떻게 동작하는지 아래그림들을 보면서 알아 보도록 하겠습니다.^^
아하~이름만 읽고도 알수 있겠지만....작성자의 성의를 봐서 한번 읽어주세요~ㅋ
(감사 -.- _._ -.- (꾸벅))

1. 그림

사용자 삽입 이미지


위 그림은 "같은 그림 찾기" 메인 모습입니다. 처음 들어 오시면 이미지들이 다운로드 되고 있기때문에 성격이 급하신 분들은...
잠시 기다려주는 센스 잊지 마세요~^^;;ㅋ
정말 디자인이 단순하지 않습니다. 누가 디자인을 해준것이 아니기 때문에...
제가 직접하다 보니깐..이렇게 됐네요...ㅋㅋ초등학교때는 미술 잘했는데....ㅋㅋ
아무튼 여기서 "START"를 클릭하면 게임이 시작이 됩니다.

2. 그림

사용자 삽입 이미지


3. 그림

사용자 삽입 이미지

위 그림 2,3은 START를 클릭하면 이미지들이 보여지면서 빙글빙글 돌아 갑니다. 그때 이미지들의 위치를 기억해야 겠지요~^^
그럼 시간이 되면 아래 그림처럼 이미지들이 안보이게 되고 시간이 흘러 가게 됩니다.

4.그림

사용자 삽입 이미지

시간이 흐러가고 있네요...그리고 마우스로 하나씩 클릭하면 위 그림과 같이 보여지게 되며, 같은 그림이 아닐 경우에는 다시 제 자리로 들어 가게 됩니다. 같은 그림일 경우에는 아래 그림과 같이 사라지게 되겠지요^^


5. 그림

사용자 삽입 이미지

모든 그림을 다 찾으셨다면 메세지창으로 게임 종료된 시간이 나타나게 됩니다.
아래 그림처럼요.

6. 그림

사용자 삽입 이미지


여기까지가 "같은그림찾기" 스토리보드였습니다~^^
정말 다른 사람이 만들었으면 금방 만들었을 텐데... 저는 머리가 그리 좋게 아니라서리....
엄청난 삽질에 연속이었습니다. 이제 "같은 그림찾기" 게임 만들기 강좌를 올리려고 합니다.
코드가 정리되는 대로 소스코드와 강좌를 올리도록 하겠습니다. 지금 마구 짜는 바람에.....코드가 좀 정신이 없습니다. 마치 제 머리처럼 말이지요~ㅋㅋ아무튼 기대해 주세요~^^

혹시 게임을 직접해 보고 싶으시면 아래 주소로 들어 오시면 될겁니다.
해보시고 에러사항이나 추가 사항 있으시면 덧글 부탁 드립니다~^^

게임 해보기
(위 주소는 임시 테스트로 돌리는 거라서... 언제 닫을지는 장담 못합니다~^^;;;;;)

Posted by happydong
, |