이제 서점에서 책으로 만나요. - 만들면서 배우는 픽셀아트(한빛미디어)

1. 도트 클리커게임
만들기
2017. 12. 9.
유유자적 라이프 김윤정

2. 강연자 소개
 2000 년대 초반 , 피쳐폰 초기 도트디자이너 .
 게임회사 2D/3D 디자이너로 12 년 일했고 ,
지금은 인디게임 만듭니다 .
 종종 도트 강의도 합니다 .
게임잼 참가만
16 번째
게임잼 참가만
16 번째

3. 게임잼에서 만든 게임들
내 꿈은 건물주 (2015) 냥찡코 (2017)운빨용사님 (2016)
주로
미니게임
주로
미니게임

4. 2-4 인용
PC 게임
2-4 인용
PC 게임
그래피티 파이터 (2017)

5. 즐겁게 놀면서
즐겁게 완성했던 그 게임이
기억에도 오래 남아요 .

6. 여기 아니면 언제 또 .. 이 또한
게임잼의
재미 !
이 또한
게임잼의
재미 !
[ 사진 ] 인디게임위크엔드 2 회 ( 출처 : 인벤 )

7. • 혼자 모든 걸 다 하려고 애쓰지 마세요 .
• 완벽하지 않아도 되요 .
• 할 수 있는 데까지만 .
• 처음부터 잘하는 사람 없어요 .
• 훗날 지금의 도전이 값진 경험이 될거예요 .
단골 참가자의 경험담
현재를
즐기세
요 !
현재를
즐기세
요 !

8. 오늘의 게임
: 도트 클리커 게임 만들기

9. 도트 게임에
필요한 리소스 제작
[ 오늘의 목표 ]
포토샵 기능 익히며 , 도트게임 만들기
캐릭
터
캐릭
터배경배경
이펙
트
이펙
트
몬스
터
몬스
터
UIUI
오늘 실습할 내용

10. 시작하기 전에
“ Photoshop 은 도구일 뿐입니다 .”
• 도트 작업은 어떤 툴을 쓰셔도 좋아요 .
• Photoshop, Aseprite, GIMP, 그림판 등 편하신 대로 !
• 그보다 중요한 건 무엇을 그릴 것인지 ,
• 어떻게 표현할 것인지에 대한 생각 !
• 그리고 관찰을 바탕으로 표현하기 !

11. Photoshop Adobe 사의 그래픽 편집 프로그램 .
다양한 이미지 편집 가능
* 이 수업은 , Photoshop CC 를 기준으로 진행합니다 .

12. ctrl C+ : 복사
ctrl V+ : 붙여 넣기
ctrl Z+ : 취소 (Undo)
자주 쓰는 단축키는
포토샵도 같아요 .
ctrl A
+
: 전체 선택
ctrl S : 저장
+
ctrl N+ : 새 그림
기본 단축키

13. 픽셀 (pixel)
 화면을 구성하는 가장 기본이 되는
단위 .
 연필로 한 땀 한 땀 (1px 씩 ) 아주
작은 그림을 그려요 .
 작게 그려서 마지막에 400%,
500% 확대해서 *.png 로 저장

14. 포토샵 도트작업 ,
이 3 가지 도구만 꼭 기억하세요 !
연필 , 지우개 , 돋보기 !
도트 작업에 필요한 기본기능은 이 것 .
(+ 그 외 편집 기능 )

15. 도구 (1) - 돋보기

16. 도구 (2) - 연필
연필 크기는 1px,
Opacity 는 100%

17. 도구 (3) - 지우개 도트작업할 땐 꼭
Block 으로 놓고 그리기

18. 환경설정 (Grid)
[Edit]-[Preference]-[Guides, Grid & Slice] 에서 1 로 변경

19. 환경설정 (Snap) [View]-[Show]-[Grid] 체크 .
Snap 은 체크 해제 .

20. 환경설정 (Rulers)
[View]-[Show]-[Rulers] 를 체크 ( 눈금자 단위는 pixel)

21. 배경을 투명하게 !

22. Q. 단검을 도트로 ?
단검은 도트로 어떻게 표현할까요 ?(16x16)

23. Q. 단검을 도트로 ?
45 도 기울였습니다 . 도트로 어떻게 표현할까요 ?(16x16)
* 연필과 지우개만 써서 만들어 보세요 .

24. 연필과 지우개만 쓰세요
포토샵에서 회전시키면 기본적으로 픽셀이 뭉개집니다 .
픽셀이 부드럽게 보이도록 자동으로 보정해주기 때문 .
[ 출처 : 구글 이미지 검색 ]

25. 대각선의 표현
도트에서는 대각선을 이렇게 규칙적으로 표현해요 .
픽셀은 정수 단위입니다 .
1.5 픽셀은 없어요 .

26. 도트로 그린 단검

27. 이게 없으면 나중에 편집이 힘들어요 .
수시로 저장 (*.psd) 해요

28. 유유자적 상점
용사님 , 이불 밖은 위험해요 (..)
설마 맨손으로 싸우시려고요 ? 검과 방패를 만드세요 !
0
NPC 유유자적
구매하기
[ 가격 ] 100

29. 500% 확대 해보세요 !
[Image]-[Image Size] 에서 확대할 수 있어요 .

30. 150% 확대 안되요 ! 픽셀은 정수 단위입니다 .
1.5 픽셀은 없어요 .

31. 1. 새 그림 만들기 (16x16 or 32x32)
2. 연필과 지우개로 그리기
3. 픽셀 확대 하기 (Image Size)
4. 마지막 *.png 저장
도트작업은 ? 표현 방식만 픽셀일 뿐 ,
결국은 작은 그림을 그리는 것

32. 색상 고르기
: 고민의 시작

33. 다른 게임 색감 참고하기
[ 출처 : 성검전설 – 구글 이미지 검색 ]
스포이드로
찍으세요 !
스포이드로
찍으세요 !

34. Swatches( 팔레트 ) 게임의 전체적인 색감이
안정되고 통일됩니다 .
[ 다운로드 ] https://goo.gl/4scTfU

35. Swatches 를 권장하는 이유
• 한 눈에 보이니까 색상 정하기 편리해요 .
• 색상선택으로 고민하는 시간이 줄어들어요 .
• 팔레트를 쓰면 전체적인 색감의 통일감도 생겨요 .

36. 오늘의 게임
: 도트 클리커 게임 만들기

37. 게임 설명
필요한 이미지는 ..
•캐릭터 / 몬스터
•배경
•UI/ 아이콘
•이펙트
작업 해상도 144 x 256
최종 해상도 720 x 1280
500%
확대

38. 크기 시안 작업
대략적인 크
기를
정하세요
대략적인 크
기를
정하세요

39. Marquee( 선택영역 )
특정 모양의 영역 선택하기 .
- Rectangular Marquee( 사각형 )
- Elliptical Marquee( 원형 )
- Single Row Marquee( 가로로 한 줄 )
- Single Column Marquee( 세로로 한 줄 )
* 기본도형 그릴 때도 써요 .

40. 단축키
Paint Bucket( 색상 채우기 )
- 넓은 면을 연필색으로 채웁니다 .
- Alt + Del : 연필색 ( 전경색 ) 으로 채우기
- Ctrl + Del : 지우개색 ( 배경색 ) 으로 채우기

41. - Tolerance( 동일색상 허용값 )
- 미묘하게 비슷한 색 중 몇 개까지 같은 색으로 볼까 ?
- 정확히 그 색상인 픽셀만 선택하려면 1
- Anti-alias( 계단현상 방지 )
- 체크하면 , 투명도가 미묘하게 다른 색이 섞임 .( 픽셀 보정 )
- 체크 해제 해야 , 정확히 그 색상인 픽셀만 선택 .
- Contiguous( 인접 )
체크하면 , 클릭한 위치 주변에서 같은 색을 찾아 선택 .
체크 해제 하면 , 이미지 전체를 대상으로 선택 .

42. 캐릭터를
만들어봅시다 .
다함께
도트
다함께
도트

43. 캐릭터 기본형 만들기
크기
16x16
크기
16x16
크기
32x32
크기
32x32

44. 함께 있으면 외롭지 않아 !
마음껏 신나게 만들어 보세요 .

45. 몬스터 제작
: 슬라임 애니메이션

46. 애니메이션
 시간적으로 연속된 정지 이미지들의 모음
 각각의 정지 이미지를 프레임 (frame) 이라고 부릅니다 .
 시간을 통해 완성되는 작업 .
0.2 초가 지날 때마다
다음 이미지를 보여줌

47. Lv1. 슬라임 동작

48. 애니메이션 (*.gif) CC 버전은 [Window]-[Timeline]
이전 버전은 [Window]-[Animation]

49. 타임라인
타임라인에 프레임을 추가하고 ,
레이어의 눈을 껐다 / 켰다 해보세요 .

50. 타임라인
재생 시간과 재생 방법을 변경하세요 .
( 재생시간 0.2, 재생방법 Forever)

51. 슬라임 애니메이션
이렇게 2 프레임의 도트로 움직임을 표현할 수 있어요 .

52. 도트 확대 [Image]-[Image size] 에서 1000% 확대
( 리샘플링 : Nearest Neighbor)

53. 애니메이션 제작 완료
도트 애니메이션은 이렇게 만들어집니다 .

54. 리소스 저장 (*.png)
[File]-[Export]-[Save for Web(Legacy)] 에서
각각의 프레임을 따로 따로 Png-24 로 저장합니다 .
이전 버전은
[File]-[Save for Web Devices]

55. 명암 넣는 방법

56. 슬라임도 공과 비슷

57. 색상 바꾸기
[Image]-[Hue/Saturation] 슬라이더를 움직여 보세요 .
(Hue : 색상 , Saturation : 채도 , Lightness : 명도 )

58. 부분적으로 바꾸고 싶을 땐
1. 작업할 레이어와 선택영역을 잡고
- Marquee( 선택영역 ), MagicWand( 마법봉 ) 등
2. 색상을 수정합니다 .
- Hue/Saturation
- Color Balance
- Adjust Level 등등
3. 선택영역을 해제합니다 .(ctrl+D)

59. 이왕 만든 거…색상별로 ..
LV 1 슬라임 LV 3 골든슬라임 LV 5 블루슬라임
슬라임 색상 늘리기

60. 우리는 모두 친구
슬라임 3 종 세트가 완성되었습니다 .

61. 캐릭터를
움직여봅시다 .
다함께
도트
다함께
도트

62. 대기 16x16( 앞 )
숨쉴 때 허리를 1px 만 살짝 늘려준 게 전부 !
만들어
보세요
만들어
보세요

63. 좀더 쉬운 걷기
[ 출처 : 구글 이미지 검색 ]
앞으로
가 !
앞으로
가 !
제자리에
차렷 !
제자리에
차렷 !

64. 걷기 ( 옆 ) 사람은 걸을 때 , 키가 살짝 커집니다 .
다리를 일자로 펴고 있는 타이밍에 .
[ 출처 : 구글 이미지 검색 ]

65. 걷기 32x32(4 프레임 )
오른손 앞으로 ~
왼발 앞으로 ~
오른손 앞으로 ~
왼발 앞으로 ~
왼손 앞으로 ~
오른발 앞으로 ~
왼손 앞으로 ~
오른발 앞으로 ~

66. 걷기 (4 프레임 )
• 왼팔을 앞으로 내민 길이와
오른팔을 뒤로 보낸 길이는 같아요 .
즉 , 팔다리 방향만 바꿔서
하나 더 만들면 되는 것 !
* 몸에 가려 지는 팔 / 다리는 어둡게 표현하
거나 , 몸통 선을 그어줌
실루엣이
같아요
실루엣이
같아요

67. 오른쪽으로
걷는건 ? 좌우
반전
좌우
반전
보통 프로그래밍에서
방향을 바꿔서 쓰니
따로 안 그려도 되요
이미지에서 좌우 반전시킨다면 [Edit]-[Transform]-[Flip Horizontal]

68. 공격 애니메이션
이펙트를 붙이면서 단검이 움직인 괘적을 알 수 있고 ,
찌르고 잠시 멈춰 있는 동작으로 힘주어 공격했음을 표현 .

69. 배경을
만들어볼까요 ?
다함께
도트
다함께
도트

70. 아까 했던 크기 시안 작업
게임화면
144 x 80
게임화면
144 x 80

71. 배경
[File]-[New] 에서 144x80 의 새 캔버스를 만들어요 .

72. 타일

73. 16 x 24 타일 제작
패턴을 반복시켰을 때
서로 맞닿는 부분을 고려

74. 땅은 이렇게
앞에서 만든 타일을 바닥에 배치합니다 .
( 열심히 레이어 복사 )

75. 하늘은 이렇게
하늘색 위에 파랑색을 고르고 ,
50% 투명도로 덧칠하면 중간색이 되요 .

76. 중간색 찾기
연필의 Opacity( 불투명도 ) 를 활용하세요 .
0% 100%50%
#0030FF#13FFFF #0997FF
25% 75%

77. 배경에 모두 올려 보기
하늘이 심심하니 구름도 몇 개 그려주세요 .

78. 이제 게임에
UI 를 붙여 봅시다 .
다함께
도트
다함께
도트

79. 만들자 ! 클리커

80. 텍스트
 텍스트는 Type Tool 에
서 타이핑할 수 있어요 .
 반투명은 레이어의
opacity( 불투명도 ) 를 조
정하면 됩니다 .

81. Canvas 늘리기 [Image]-[Canvas Size] 에서
세로를 256 으로 늘려주세요 .

82. 영역 선택 사각형 선택툴로 영역을 선택하세요 .
(140 x 28)

83. 색 채우기
페인트통으로 색을 채우고 ctrl+ D

84. 배치하기
같은 방법으로 아이콘과 버튼이 들어갈 자리를 만듭니다 .

85. UI 만들기
각각 떼서 *.png 로 저장하고
게임에 넣으면 됩니다 .

86. 9patch 작은 용량으로 크기에 맞게 늘려서 사용 .
( 버튼 / 팝업창 / 말풍선 등 )

87. 말풍선 응용 말풍선도 버튼과 같은 방법으로
만들 수 있어요 .

88. UI 만들기
UI 가 불투명일 땐 왼쪽 , UI 가 50% 반투명일 땐 오른쪽 .
반투명도
가능해요
반투명도
가능해요

89. 팝업창 응용 레이어의 투명도를 조정하면 ,
반투명하게 쓸 수도 있어요 .

90. 이미지 폰트를
만들어봅시다 .
다함께
도트
다함께
도트

91. 이미지폰트 효과를 좀더 강조하고 싶을 때 ,
이미지 폰트는 어떻게 만들까요 ?

92. 이미지폰트
200 x 200 새 캔버스를 만들고 ,
Horizontal Type 툴로 0 부터 9 까지 칩니다 .
(Arial, Regular, 18pt, None, Faux Bold)

93. 이미지폰트
Rasterize Type 을 누르시면
텍스트 대신 이미지로서 편집할 수 있어요 .

94. 이미지폰트
사각영역 선택 툴로 영역 잡고 ,
페인트통으로 색상을 채우세요 . 노란색도 마찬가지 .
마지막에
선택영역 해제는 Ctrl+D

95. 이미지폰트
글자 바깥으로 2px 테두리를 칩니다 .
마지막에
선택영역 해제는 Ctrl+D

96. 이미지폰트
이제 개별로 숫자를 개별 *.png 로 저장해야 합니다 .
크기는 가장 큰 쪽에 맞춰야 해요 .
세로는 동일하니 가로가 가장 넓은 숫자는 ?
이 폰트에선 4

97. 이미지폰트
제일 큰 숫자인 4 를 기준으로 새 캔버스에
모든 숫자들을 하나씩 복사해서 붙여 넣습니다 .
ctrl + C( 복사 )
ctrl + N( 새 캔버스 )
ctrl + V( 붙여 넣기 )

98. 이미지폰트
이렇게 0 부터 9 까지 각각 *.png 저장하면 됩니다 .

99. Q. 특수폰트 제작
이것도 한번 만들어보세요 .

100. 클리커 게임 완성
최종
500%
확대
최종
500%
확대

101. 감사합니다 .
유유자적 라이프
100 세까지 즐겁게 게임 만들기
http://fb.com/livefreelygames