Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

도트클리커 게임만들기

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

도트클리커 게임만들기

  1. 1. 도트 클리커게임 만들기 2017. 12. 9. 유유자적 라이프 김윤정
  2. 2. 강연자 소개  2000 년대 초반 , 피쳐폰 초기 도트디자이너 .  게임회사 2D/3D 디자이너로 12 년 일했고 , 지금은 인디게임 만듭니다 .  종종 도트 강의도 합니다 . 게임잼 참가만 16 번째 게임잼 참가만 16 번째
  3. 3. 게임잼에서 만든 게임들 내 꿈은 건물주 (2015) 냥찡코 (2017)운빨용사님 (2016) 주로 미니게임 주로 미니게임
  4. 4. 2-4 인용 PC 게임 2-4 인용 PC 게임 그래피티 파이터 (2017)
  5. 5. 즐겁게 놀면서 즐겁게 완성했던 그 게임이 기억에도 오래 남아요 .
  6. 6. 여기 아니면 언제 또 .. 이 또한 게임잼의 재미 ! 이 또한 게임잼의 재미 ! [ 사진 ] 인디게임위크엔드 2 회 ( 출처 : 인벤 )
  7. 7. • 혼자 모든 걸 다 하려고 애쓰지 마세요 . • 완벽하지 않아도 되요 . • 할 수 있는 데까지만 . • 처음부터 잘하는 사람 없어요 . • 훗날 지금의 도전이 값진 경험이 될거예요 . 단골 참가자의 경험담 현재를 즐기세 요 ! 현재를 즐기세 요 !
  8. 8. 오늘의 게임 : 도트 클리커 게임 만들기
  9. 9. 도트 게임에 필요한 리소스 제작 [ 오늘의 목표 ] 포토샵 기능 익히며 , 도트게임 만들기 캐릭 터 캐릭 터배경배경 이펙 트 이펙 트 몬스 터 몬스 터 UIUI 오늘 실습할 내용
  10. 10. 시작하기 전에 “ Photoshop 은 도구일 뿐입니다 .” • 도트 작업은 어떤 툴을 쓰셔도 좋아요 . • Photoshop, Aseprite, GIMP, 그림판 등 편하신 대로 ! • 그보다 중요한 건 무엇을 그릴 것인지 , • 어떻게 표현할 것인지에 대한 생각 ! • 그리고 관찰을 바탕으로 표현하기 !
  11. 11. Photoshop Adobe 사의 그래픽 편집 프로그램 . 다양한 이미지 편집 가능 * 이 수업은 , Photoshop CC 를 기준으로 진행합니다 .
  12. 12. ctrl C+ : 복사 ctrl V+ : 붙여 넣기 ctrl Z+ : 취소 (Undo) 자주 쓰는 단축키는 포토샵도 같아요 . ctrl A + : 전체 선택 ctrl S : 저장 + ctrl N+ : 새 그림 기본 단축키
  13. 13. 픽셀 (pixel)  화면을 구성하는 가장 기본이 되는 단위 .  연필로 한 땀 한 땀 (1px 씩 ) 아주 작은 그림을 그려요 .  작게 그려서 마지막에 400%, 500% 확대해서 *.png 로 저장
  14. 14. 포토샵 도트작업 , 이 3 가지 도구만 꼭 기억하세요 ! 연필 , 지우개 , 돋보기 ! 도트 작업에 필요한 기본기능은 이 것 . (+ 그 외 편집 기능 )
  15. 15. 도구 (1) - 돋보기
  16. 16. 도구 (2) - 연필 연필 크기는 1px, Opacity 는 100%
  17. 17. 도구 (3) - 지우개 도트작업할 땐 꼭 Block 으로 놓고 그리기
  18. 18. 환경설정 (Grid) [Edit]-[Preference]-[Guides, Grid & Slice] 에서 1 로 변경
  19. 19. 환경설정 (Snap) [View]-[Show]-[Grid] 체크 . Snap 은 체크 해제 .
  20. 20. 환경설정 (Rulers) [View]-[Show]-[Rulers] 를 체크 ( 눈금자 단위는 pixel)
  21. 21. 배경을 투명하게 !
  22. 22. Q. 단검을 도트로 ? 단검은 도트로 어떻게 표현할까요 ?(16x16)
  23. 23. Q. 단검을 도트로 ? 45 도 기울였습니다 . 도트로 어떻게 표현할까요 ?(16x16) * 연필과 지우개만 써서 만들어 보세요 .
  24. 24. 연필과 지우개만 쓰세요 포토샵에서 회전시키면 기본적으로 픽셀이 뭉개집니다 . 픽셀이 부드럽게 보이도록 자동으로 보정해주기 때문 . [ 출처 : 구글 이미지 검색 ]
  25. 25. 대각선의 표현 도트에서는 대각선을 이렇게 규칙적으로 표현해요 . 픽셀은 정수 단위입니다 . 1.5 픽셀은 없어요 .
  26. 26. 도트로 그린 단검
  27. 27. 이게 없으면 나중에 편집이 힘들어요 . 수시로 저장 (*.psd) 해요
  28. 28. 유유자적 상점 용사님 , 이불 밖은 위험해요 (..) 설마 맨손으로 싸우시려고요 ? 검과 방패를 만드세요 ! 0 NPC 유유자적 구매하기 [ 가격 ] 100
  29. 29. 500% 확대 해보세요 ! [Image]-[Image Size] 에서 확대할 수 있어요 .
  30. 30. 150% 확대 안되요 ! 픽셀은 정수 단위입니다 . 1.5 픽셀은 없어요 .
  31. 31. 1. 새 그림 만들기 (16x16 or 32x32) 2. 연필과 지우개로 그리기 3. 픽셀 확대 하기 (Image Size) 4. 마지막 *.png 저장 도트작업은 ? 표현 방식만 픽셀일 뿐 , 결국은 작은 그림을 그리는 것
  32. 32. 색상 고르기 : 고민의 시작
  33. 33. 다른 게임 색감 참고하기 [ 출처 : 성검전설 – 구글 이미지 검색 ] 스포이드로 찍으세요 ! 스포이드로 찍으세요 !
  34. 34. Swatches( 팔레트 ) 게임의 전체적인 색감이 안정되고 통일됩니다 . [ 다운로드 ] https://goo.gl/4scTfU
  35. 35. Swatches 를 권장하는 이유 • 한 눈에 보이니까 색상 정하기 편리해요 . • 색상선택으로 고민하는 시간이 줄어들어요 . • 팔레트를 쓰면 전체적인 색감의 통일감도 생겨요 .
  36. 36. 오늘의 게임 : 도트 클리커 게임 만들기
  37. 37. 게임 설명 필요한 이미지는 .. •캐릭터 / 몬스터 •배경 •UI/ 아이콘 •이펙트 작업 해상도 144 x 256 최종 해상도 720 x 1280 500% 확대
  38. 38. 크기 시안 작업 대략적인 크 기를 정하세요 대략적인 크 기를 정하세요
  39. 39. Marquee( 선택영역 ) 특정 모양의 영역 선택하기 . - Rectangular Marquee( 사각형 ) - Elliptical Marquee( 원형 ) - Single Row Marquee( 가로로 한 줄 ) - Single Column Marquee( 세로로 한 줄 ) * 기본도형 그릴 때도 써요 .
  40. 40. 단축키 Paint Bucket( 색상 채우기 ) - 넓은 면을 연필색으로 채웁니다 . - Alt + Del : 연필색 ( 전경색 ) 으로 채우기 - Ctrl + Del : 지우개색 ( 배경색 ) 으로 채우기
  41. 41. - Tolerance( 동일색상 허용값 ) - 미묘하게 비슷한 색 중 몇 개까지 같은 색으로 볼까 ? - 정확히 그 색상인 픽셀만 선택하려면 1 - Anti-alias( 계단현상 방지 ) - 체크하면 , 투명도가 미묘하게 다른 색이 섞임 .( 픽셀 보정 ) - 체크 해제 해야 , 정확히 그 색상인 픽셀만 선택 . - Contiguous( 인접 ) 체크하면 , 클릭한 위치 주변에서 같은 색을 찾아 선택 . 체크 해제 하면 , 이미지 전체를 대상으로 선택 .
  42. 42. 캐릭터를 만들어봅시다 . 다함께 도트 다함께 도트
  43. 43. 캐릭터 기본형 만들기 크기 16x16 크기 16x16 크기 32x32 크기 32x32
  44. 44. 함께 있으면 외롭지 않아 ! 마음껏 신나게 만들어 보세요 .
  45. 45. 몬스터 제작 : 슬라임 애니메이션
  46. 46. 애니메이션  시간적으로 연속된 정지 이미지들의 모음  각각의 정지 이미지를 프레임 (frame) 이라고 부릅니다 .  시간을 통해 완성되는 작업 . 0.2 초가 지날 때마다 다음 이미지를 보여줌
  47. 47. Lv1. 슬라임 동작
  48. 48. 애니메이션 (*.gif) CC 버전은 [Window]-[Timeline] 이전 버전은 [Window]-[Animation]
  49. 49. 타임라인 타임라인에 프레임을 추가하고 , 레이어의 눈을 껐다 / 켰다 해보세요 .
  50. 50. 타임라인 재생 시간과 재생 방법을 변경하세요 . ( 재생시간 0.2, 재생방법 Forever)
  51. 51. 슬라임 애니메이션 이렇게 2 프레임의 도트로 움직임을 표현할 수 있어요 .
  52. 52. 도트 확대 [Image]-[Image size] 에서 1000% 확대 ( 리샘플링 : Nearest Neighbor)
  53. 53. 애니메이션 제작 완료 도트 애니메이션은 이렇게 만들어집니다 .
  54. 54. 리소스 저장 (*.png) [File]-[Export]-[Save for Web(Legacy)] 에서 각각의 프레임을 따로 따로 Png-24 로 저장합니다 . 이전 버전은 [File]-[Save for Web Devices]
  55. 55. 명암 넣는 방법
  56. 56. 슬라임도 공과 비슷
  57. 57. 색상 바꾸기 [Image]-[Hue/Saturation] 슬라이더를 움직여 보세요 . (Hue : 색상 , Saturation : 채도 , Lightness : 명도 )
  58. 58. 부분적으로 바꾸고 싶을 땐 1. 작업할 레이어와 선택영역을 잡고 - Marquee( 선택영역 ), MagicWand( 마법봉 ) 등 2. 색상을 수정합니다 . - Hue/Saturation - Color Balance - Adjust Level 등등 3. 선택영역을 해제합니다 .(ctrl+D)
  59. 59. 이왕 만든 거…색상별로 .. LV 1 슬라임 LV 3 골든슬라임 LV 5 블루슬라임 슬라임 색상 늘리기
  60. 60. 우리는 모두 친구 슬라임 3 종 세트가 완성되었습니다 .
  61. 61. 캐릭터를 움직여봅시다 . 다함께 도트 다함께 도트
  62. 62. 대기 16x16( 앞 ) 숨쉴 때 허리를 1px 만 살짝 늘려준 게 전부 ! 만들어 보세요 만들어 보세요
  63. 63. 좀더 쉬운 걷기 [ 출처 : 구글 이미지 검색 ] 앞으로 가 ! 앞으로 가 ! 제자리에 차렷 ! 제자리에 차렷 !
  64. 64. 걷기 ( 옆 ) 사람은 걸을 때 , 키가 살짝 커집니다 . 다리를 일자로 펴고 있는 타이밍에 . [ 출처 : 구글 이미지 검색 ]
  65. 65. 걷기 32x32(4 프레임 ) 오른손 앞으로 ~ 왼발 앞으로 ~ 오른손 앞으로 ~ 왼발 앞으로 ~ 왼손 앞으로 ~ 오른발 앞으로 ~ 왼손 앞으로 ~ 오른발 앞으로 ~
  66. 66. 걷기 (4 프레임 ) • 왼팔을 앞으로 내민 길이와 오른팔을 뒤로 보낸 길이는 같아요 . 즉 , 팔다리 방향만 바꿔서 하나 더 만들면 되는 것 ! * 몸에 가려 지는 팔 / 다리는 어둡게 표현하 거나 , 몸통 선을 그어줌 실루엣이 같아요 실루엣이 같아요
  67. 67. 오른쪽으로 걷는건 ? 좌우 반전 좌우 반전 보통 프로그래밍에서 방향을 바꿔서 쓰니 따로 안 그려도 되요 이미지에서 좌우 반전시킨다면 [Edit]-[Transform]-[Flip Horizontal]
  68. 68. 공격 애니메이션 이펙트를 붙이면서 단검이 움직인 괘적을 알 수 있고 , 찌르고 잠시 멈춰 있는 동작으로 힘주어 공격했음을 표현 .
  69. 69. 배경을 만들어볼까요 ? 다함께 도트 다함께 도트
  70. 70. 아까 했던 크기 시안 작업 게임화면 144 x 80 게임화면 144 x 80
  71. 71. 배경 [File]-[New] 에서 144x80 의 새 캔버스를 만들어요 .
  72. 72. 타일
  73. 73. 16 x 24 타일 제작 패턴을 반복시켰을 때 서로 맞닿는 부분을 고려
  74. 74. 땅은 이렇게 앞에서 만든 타일을 바닥에 배치합니다 . ( 열심히 레이어 복사 )
  75. 75. 하늘은 이렇게 하늘색 위에 파랑색을 고르고 , 50% 투명도로 덧칠하면 중간색이 되요 .
  76. 76. 중간색 찾기 연필의 Opacity( 불투명도 ) 를 활용하세요 . 0% 100%50% #0030FF#13FFFF #0997FF 25% 75%
  77. 77. 배경에 모두 올려 보기 하늘이 심심하니 구름도 몇 개 그려주세요 .
  78. 78. 이제 게임에 UI 를 붙여 봅시다 . 다함께 도트 다함께 도트
  79. 79. 만들자 ! 클리커
  80. 80. 텍스트  텍스트는 Type Tool 에 서 타이핑할 수 있어요 .  반투명은 레이어의 opacity( 불투명도 ) 를 조 정하면 됩니다 .
  81. 81. Canvas 늘리기 [Image]-[Canvas Size] 에서 세로를 256 으로 늘려주세요 .
  82. 82. 영역 선택 사각형 선택툴로 영역을 선택하세요 . (140 x 28)
  83. 83. 색 채우기 페인트통으로 색을 채우고 ctrl+ D
  84. 84. 배치하기 같은 방법으로 아이콘과 버튼이 들어갈 자리를 만듭니다 .
  85. 85. UI 만들기 각각 떼서 *.png 로 저장하고 게임에 넣으면 됩니다 .
  86. 86. 9patch 작은 용량으로 크기에 맞게 늘려서 사용 . ( 버튼 / 팝업창 / 말풍선 등 )
  87. 87. 말풍선 응용 말풍선도 버튼과 같은 방법으로 만들 수 있어요 .
  88. 88. UI 만들기 UI 가 불투명일 땐 왼쪽 , UI 가 50% 반투명일 땐 오른쪽 . 반투명도 가능해요 반투명도 가능해요
  89. 89. 팝업창 응용 레이어의 투명도를 조정하면 , 반투명하게 쓸 수도 있어요 .
  90. 90. 이미지 폰트를 만들어봅시다 . 다함께 도트 다함께 도트
  91. 91. 이미지폰트 효과를 좀더 강조하고 싶을 때 , 이미지 폰트는 어떻게 만들까요 ?
  92. 92. 이미지폰트 200 x 200 새 캔버스를 만들고 , Horizontal Type 툴로 0 부터 9 까지 칩니다 . (Arial, Regular, 18pt, None, Faux Bold)
  93. 93. 이미지폰트 Rasterize Type 을 누르시면 텍스트 대신 이미지로서 편집할 수 있어요 .
  94. 94. 이미지폰트 사각영역 선택 툴로 영역 잡고 , 페인트통으로 색상을 채우세요 . 노란색도 마찬가지 . 마지막에 선택영역 해제는 Ctrl+D
  95. 95. 이미지폰트 글자 바깥으로 2px 테두리를 칩니다 . 마지막에 선택영역 해제는 Ctrl+D
  96. 96. 이미지폰트 이제 개별로 숫자를 개별 *.png 로 저장해야 합니다 . 크기는 가장 큰 쪽에 맞춰야 해요 . 세로는 동일하니 가로가 가장 넓은 숫자는 ? 이 폰트에선 4
  97. 97. 이미지폰트 제일 큰 숫자인 4 를 기준으로 새 캔버스에 모든 숫자들을 하나씩 복사해서 붙여 넣습니다 . ctrl + C( 복사 ) ctrl + N( 새 캔버스 ) ctrl + V( 붙여 넣기 )
  98. 98. 이미지폰트 이렇게 0 부터 9 까지 각각 *.png 저장하면 됩니다 .
  99. 99. Q. 특수폰트 제작 이것도 한번 만들어보세요 .
  100. 100. 클리커 게임 완성 최종 500% 확대 최종 500% 확대
  101. 101. 감사합니다 . 유유자적 라이프 100 세까지 즐겁게 게임 만들기 http://fb.com/livefreelygames

×