16장. 그래픽

(1)

IT응용공학과 허석렬

[email protected]

16장. 그래픽

(2)

도움얻기 - 파이게임



컴퓨터에서 그래픽(그리고 사운드) 작업을 하는 것 은 다소 복잡한 과정을 거침



이 과정에서 운영체제, 그래픽 카드, 상당한 양의 저 수준 코드(단순 반복적인 코드를 말함)를 다루어야 함



파이게임 모듈을 이용하여 위의 과정을 간단하게 처리할 수 있음



파이게임을 이용하면 시스템의 지저분한(?) 세부사 항에 대해 알지 못하더라도 그래픽을 비롯한 게임 을 동작시키는데 필요한 다양한 것들을 만들 수 있 음

(3)

파이게임 창



가장 먼저 그래픽을 그릴 창(window)을 만들자



위의 프로그램은 아무 일도 하지 않음



게임은 플레이어와 상호작용해야 함



따라서 파이게임 프로그램에서는 사용자가 키를 입 력하거나 마우스를 움직이거나 창을 닫는 등 사용 자가 무슨 일을 하는지 끊임없이 검사하는 이벤트 루프(event loop)가 실행되어야 함

(4)

파이게임 -이벤트 루프



파이게임에서 이벤트 루프를 계속 실행되게 하려 면 while 반복문을 이용하면 됨

(5)

창 안에 그리기



창안에 그래픽 그리기

(6)

‘플립’이란?



화면표시 객체(여기서는 screen)에는 파이게임 창에 표시되는 것에 대한 두 개의 복사본이 있음



복사본을 만드는 이유는 애니메이션을 시작할 때 애니메이션을 가능한 한 부드럽고 빠르게 진 행시키고자 하는 이유임



그래픽에 약간의 변화를 줄 때마다 화면을 갱신 하는 대신 여러 개의 변경사항을 적용한 다음 새 버전(숨겨진 다음 화면 내용)의 그래픽으로 빨리 전환할 수 있음



두 개의 복사본은 현재의 화면과 다음 화면임

(7)

원을 만드는 법



pygame.draw.circle( )함수에는 5가지 인자가 필요



원을 그릴 곳( 이 경우 screen)



원의 색상( 이 경우 빨간색: [255,0,0])



원이 그려질 위치( [100,100]



원의 크기( 30)



선의 두께

(8)

파이게임 표면



파이게임에서는 표면(surface)이 그림을 그리는 곳



파이게임에서는 여러 개의 표면을 가질 수 있음



한 표면에 있는 이미지를 다른 표면으로 복사할 수 도 있으며 표면을 회전시키거나 크기를 조절할 수 있음



한 표면마다 두 개의 사본이 있음. 이를 이중 버퍼 (double buffered)라고 함

(9)

파이게임에서 색상 다루기



RGB(Red, Green, Blue)



각각 0 ~ 255의 범위를 가짐



파이게임에서는 [R,G,B] 표기법을 사용하고 싶지 않을 때에 이용할 수 있는 색상명 리스트가 있음



colordict.py 파일에 정의됨



사용예

from pygame.color import THECOLORS

…

pygame.draw.circle(screen, THECOLORS[‘red’],[100,100],30,0)

(10)

위치 : 화면 좌표



화면에 뭔가를 그리거나 두고 싶다면 화면상의 어느 곳에 위치할지 지정해야 함



x축: 수평방향, y축: 수직방향

(11)

창의 한 가운데 원 그리기

(12)

도형의 크기



사각형의 경우 Rect 객체를 사용하며 4개의 좌 표가 필요

(13)

현대 미술?

(14)

예제 실행결과

(15)

색상이 변하는 현대 미술

(16)

개별 픽셀



픽셀을 가지고 사인(sine)곡선 그리기



pygame.draw.sinewave( ) 라는 메서드는 없음

(17)

실행결과

(18)

점 잇기



사인곡선이 이어지지 않고 떨어져 있음



이유는 사인 곡선이 가파른 지점에서는 오른쪽으 로 1픽셀 이동 할 때 위(또는 아래)로는 3 픽셀만큼 옮겨야 하기 때문



각 점이 연결되도록 짧은 선을 이용해서 그려보자



메서드는 pygame.draw.line( ) 이며



surface: 선을 그릴 표면



color: 색상



closed: 처음과 끝을 닫히게 할 지 말지 결정



list: 연결할 점



width: 선의 굵기

(19)

연결된 사인 곡선

(20)

점으로 그리기



한 픽셀의 색상만 바꾸고 싶을 때



draw 함수 대신 Surface.set_at( ) 메서드를 이용 하면 표면상의 각 개별 픽셀에 접근할 수 있음



이 함수를 이용해 설정하고 싶은 픽셀에 설정하 고 싶은 색상을 지정하면 됨

screen.set_at([x, y], [0, 0, 0]) 을 사용하면(예제 16.7 의 8번째 줄) 같은 결과를 얻을 수 있음



Surface.get_at( ) 메서드를 이용하면 픽셀에 설 정된 색상을 확인 할 수 있음

(21)

이미지



파이게임에서 image 함수를 이용하면 화면에 디지털 사진이나 웹에서 다운로드한 그림, 또는 이미지를 사용할 수 있음

c:\Program Files\helloworld\examples\images\beach_ball.png.

(22)

실행결과

(23)

공을 움직여 봅시다!



옆으로 움직이기

(24)

실행결과

(25)

애니메이션



컴퓨터 그래픽을 이용해 애니메이션 작업을 할 경우 뭔가를 움직이는 두 가지 단계 다음과 같다

1.

새로운 위치에 대상을 그린다.

2.

이전 위치에 있던 대상을 지운다.



컴퓨터 그래픽에서 뭔가를 “지우기” 위해서는 실제로 페인트로 “덧칠”을 해야 함



배경색으로 덧칠을 하면 대상이 지워짐

(26)

이미지 지우기 예제

(27)

밑에는 무엇이 있을까?



흰색 배경에서 덧칠하는 것은 상당히 쉬움



그런데 구름이 낀 하늘에 새를 그렸다면? 우거 진 배경에 새가 그려져 있다면? 이런 상황에서 새가 날아 옮긴 뒤의 화면을 그리려면?



날아 옮긴 새를 그리고 날아간 뒤의 화면을 그리 고 배경으로 새를 덧칠해야 됨



다른 방법으로는 전체 풍경을 다시 그린 다음, 날 아간 새를 다시 그리면 됨

(28)

더 부드러운 애니메이션



작은 단계로 옮기기

(29)

공이 계속 움직이게 하기



앞의 예제는 공이 창의 오른쪽으로 움직인 다음 멈춤 => 공이 계속 움직이도록 수정하려면?



for looper in range( 1, 200): 으로 수정하면 반복 문이 두배 실행. 그러나…



사라져 버린 공을 계속 보고 싶다면



공이 창의 끝에서 튕기게 만든다



공이 창의 반대쪽에서 돌아서 나오게 만든다

(30)

공 튕기기



공이 창의 끝에서 튕기게 하려면



공이 언제 창의 가장자리에 부딪히는지 알아야 하 고 반대 방향으로 움직이게 해야 함



왼쪽 가장자리의 경우



공의 자리가 0인지(또는 더 작은 숫자인지)만 검사



오른쪽 가장자리의 경우



공의 오른쪽이 창의 오른쪽 끝에 닿았는지를 검사



공의 위치는 오른쪽 편이 아닌 왼쪽편이 기준이기 때문에 공의 너비만큼 빼야 함

(31)



공을 계속 튀게 하기 위하여 공을 표시하는 코드 를 while 반복문 안으로 옮김



공의 위치를 고정값(5)을 더하는 대신 speed라 는 새로운 변수를 만들어 움직이는 속도를 지정

(32)

비치볼 바운스

(33)

2D로 튕기기

(34)

공이 돌아서 나오게 만들기

(35)

도전과제



파이게임에서는 선, 호, 타원, 다각형을 그리는 메서드를 제공합니다. 이러한 메서드를 이용하여 다른 도형을 그리는 프로그램을 작성하시오.

(36)

도전과제 해답

# Released under MIT license http://www.opensource.org/licenses/mit-license.php import pygame, sys

pygame.init()

screen=pygame.display.set_mode((640, 480)) screen.fill((250, 120, 0))

pygame.draw.arc(screen, (255, 255, 0), pygame.rect.Rect(43, 368, 277, 235), -6.25, 0, 15) pygame.draw.rect(screen, (255, 0, 0), pygame.rect.Rect(334, 191, 190, 290))

pygame.draw.rect(screen, (128, 64, 0), pygame.rect.Rect(391, 349, 76, 132)) pygame.draw.line(screen, (0, 255, 0), (268, 259), (438, 84), 25)

pygame.draw.line(screen, (0, 255, 0), (578, 259), (438, 84), 25) pygame.draw.circle(screen, (0, 0, 0), (452, 409), 11, 2)

pygame.draw.polygon(screen, (0, 0, 255), [(39, 39), (44, 136), (59, 136), (60, 102), (92, 102), (94, 131), (107, 141), (111, 50), (97, 50), (93, 86), (60, 82), (58, 38)], 5)

(37)

pygame.draw.rect(screen, (0, 0, 255), pygame.rect.Rect(143, 90, 23, 63), 5) pygame.draw.circle(screen, (0, 0, 255), (153, 60), 15, 5)

clock = pygame.time.Clock() pygame.display.flip()

running = True while running:

clock.tick(60)

for event in pygame.event.get():

if event.type == pygame.QUIT:

running = False

elif event.type == pygame.KEYDOWN and event.key == pygame.K_ESCAPE:

running = False pygame.quit()