원문 : http://www.raywenderlich.com/14865/introduction-to-pixel-art-for-games
픽셀아트는 요즘 게임쪽에서 아주 인기있는중인데, 그 이유는 아래 세가지 정도라고 생각한다.
- 외관(Looks). 픽셀아트는 보기 훌륭하다! 한 스프라이트에 각 픽셀에대해 만드는 것에대핸 이야기를 말한다.
- 향수를 일으킨다(Nostalgia). 픽셀아트는 플레이어들이 자라면서 즐겼던 닌텐도, Super 닌텐도, Genesis(나의 경우!)등의 엄청난 향수를 불러일으킨다.
- 배우기가 편하다.(Ease of learning). 픽셀아트는 배우기에 가장 쉬운 타입의 디지털 게임중 하나로써, 특별하게 당신이 아티스트이기보다는 프로그래머 타입에 가깝다면 더욱이 쉽다.
이제 픽셀아트를 만져볼 생각이 있는가? 그럼 나와 같이 따라오면 내가 가장 간단하게 만들면서 게임에 바로 사용할 수 있는 쿨내 풍기는 캐릭을 어떻게 만드는지 보여주겠다!
그리고 추가로, 캐릭 만드는 법을 보여주고 난 다음에는, iPhone game에 적용시키는 법을 Ray가 알려줄 것이다!
이 강좌를 따라오려면 Adobe Photoshop이 필요하다. 만약 포토샵이 없으면, 여기 어도비에서 제공하는 무료 다운로드 링크(http://www.adobe.com/cfusion/tdrc/index.cfm?product=photoshop)를 이용하면 된다.
픽셀속으로 빠져들어 읽어내려가보자!
픽셀 아트가 뭔가?
시작하게전에 “픽셀아트”이 뭔지 부터 깔끔하게 잡고 가자. “픽셀아트”은 당신이 생각하는것 만큼 명확한 뜻이 있진 않다. 그래서 의견이나 스타일의 문제이나 이번 강좌에서 정의를 나름 지어질 수 있길 바란다 :]
가장 쉽게 “픽셀아트”을 정의하는 방법은 무엇이 “픽셀아트"이 아닌가를 생각하면 된다. 무엇이든 generates 픽셀이면 픽셀아트가 아니라 할 수 있다. 아래 예제가 있다.
Blur tools : 픽셀들을 확인하여 이전의 이미지의 새로운 이미지를 만들기위해 되풀이/수정한다. 이것 또한 pixel art라 할 수 없다.
당신은 이제 저것들을 피해야한다.
시작하며
첫 pixel art를 만들어보기 전에, 당신은 pixel art는 쉽게 크기변환을 할 수 없다는 사실을 알아야한다. 만약 스케일을 줄인다면 그것은 어떤 덩어리로 보일 것이다. 아니면 스케일을 크게한다면 두배정도 올리기 전까지 보기 괜찮을 것이다.
이 문제를 피하기 위해서는 시작하기 전에 게임 캐릭터/적/게임 요소들의 크기를 얼만큼 할건지 정확하게 생각하여 잡아놓아야한다. 당신이 타겟으로 잡은 디바이스의 화면 사이즈를 기반으로 눈으로 보기에 얼마나 큰 “pixels”을 사용할지 정할 수 있다.
예를 들어 해상도가 480x320 픽셀의 iPhone 3GS에서 두배 사이즈의 게임이 되길 원한다고 해보자(“난 내 게임의 픽셀이 굉장히 북고풍으로 보이길 원한다!”). 그러면 당신의 작업 해상도는 그 절반의 사이즈(240x160 픽셀)로 해야한다.
포토샵에서 새 캔버스를 열고(File > New ...) 저 사이즈로 설정한 다음 한번 확인해봐라. 그리고 당신의 캐릭터 사이즈를 정하면 된다.
32x32 pixel이다!
나는 32x32 픽셀을 그냥 막 고른 것이 아니라 이 해상도에 적합해 보여서 골랐다. 그러나 32x32픽셀은 2의 제곱수이고 이것은 게임엔진에서 다루기 편할 수 있다.(타일 사이즈들이 2의 제곱수이고, 텍스처가 2의 제곱수로 체워지기 때문의 이유 등등)
Tip : 비록 사용하는 게임엔진이 어떤 사이즈라도 적용이 가능할지라도, 짝수의 이미지 크기는 굉장히 좋은 습관이다. 이 방법으로, 이미지의 스케일이 커져야한다면, 이 짝수의 크기가 나눠졌을때 깔끔하게 보기 좋게 나타날 것이다.
너의 첫 캐릭을 만들어보자
pixel art는 최고의 모양새나 명료함 그리고 그래픽적으로 판별하기 쉬운 것으로써 잘 알려져있다. 당신은 캐릭터의 얼굴, 눈, 머리카락, 몸통 등의 부분을 고작 몇 픽셀로 표현할 수 있다. 그러나 개발자 사이즈는 더 복잡하다. 더 작은 캐릭은 모든것에 맞추기 어렵다.
더 많은 예제로 만들어서 캐릭에 어떻게 더 작게, 보기 쉽게 할지 정한다. 나는 항상 눈을 선택한다. 그 이유는 (마법적이게도) 캐릭에게 생명을 불어넣는 가장 좋은 방법중 하나기 때문이다.
포토샵에서, Pencil tool을 고른다. 만약 찾지 못했다면 Brush Tool을 꾹 눌러서 스크롤을 내리면 Pencil Tool이 나온다(아마 두번째에 있을 것이다). 그리고 brush size를 1로 설정해야한다(tool options bar에서 클릭하여 크기를 변경하거나 ‘[‘단축키를 누르면 된다)
당신은 또한 Erase tool 또한 필요하다. 클릭하여(혹은 단축키 ‘E’) “Mode:Pencil”로 바꿔 설정한다. (이게 브러쉬의 안티에일리싱을 막아준다)
그리고 픽셀링을 시작해보자! 아래와 같이 두 눈썹과 눈을 이미지에 그린다.
키읔! 난 픽셀링한다!! (역자주:미국 개그가 물씬 느껴지는 멘트내요)
당신은 벌써 lineart(당신이 자연스럽게 그리듯이 라인을 그리고 캐릭의 모양을 잡으면된다.)를 시작할 수 있다. 그러나 더 연습을 위한 방법으로 실루엣을 먼저 만들어보자. 좋은 점은 이 단계에서 완벽하게 할 필요 없이 표현할 것의 크기와 자세를 잡아보는 것이다.
회색으로 아래와 같이 해보자:
이 단계에서는 완벽하게 할 필요 없다는 것을 명심하자
빈 공간을 남겨두는 것 또한 주의하자. 당신은 빈 캔버스를 채울 필요가 없고, 나중에 다른 프레인에 더 많은 공간이 필요하게 될 것이다. 그리고 모두 같은 캔버스 크기를 유지하는게 굉장히 유용할 것이다(역자:무슨 말인지 이해하지 못했습니다..)
실루엣 작업이 끝나고, lineart작업을 할 차례이다. 이제 좀 더 조심스럽게 픽셀을 건드려야한다. 옷이나 방어구같은 디테일한건 아직 건드리지말고 작업하자. 만약 그것이 필요하다면 새 레이어를 만들어서 디테일한것을 작업하며, 실루엣이 작업된 레이어가 수정되지 않게 한다.
pencil tool로 작업하는데 엄청 느리게 느껴진다면 Line tool을 사용하는것도 괜찮은 방법이다 - 대신 Pencil 만큼 정확하진 않다는걸 기억하라. 그리고 아래 보이는 것과 같이 설정할 필요가 있다.
사각형을 누르고 있음으로써 스크롤을 내려 Line tool을 선택하자.
tool settings bar로 가서 세번째 아이콘 (“Fill pixels”)을 고르고, 굵기(Weight)를 1로 한뒤 “Anti-alias” 체크를 해제한다. 아래와 같이 보이면 된다.
Tip : 내가 아래쪽 발부분에 테두리선을 만들지 않았음을 주의하라. 발은 다리와 구별하는 필수적인 요소가 아니므로써 반드시 필요한게 아니고, 그럼으로써 당신은 한 줄의 픽셀을 절약할 수도 있다.
색과 그림자를 적용시키기
이제 색을 입힐 준비가 되었다. 일부로 아주 적당한 색을 고르려 하지는 않아도 된다. 색은 나중에 굉장히 쉽게 바꿀 수 있으니 말이다. 대신 모든 것이 고유의 색을 가지게 만들어라. 이제 Swatch 탭(Window > Watches)에서 기본 색들을 사용할 수 있다.
돌아와서 당신의 창조물을 아래와 같이 색을 입힌다. (그냥 자유롭고 크리에이티브하게 당신의 색을 입혀라!)
대조적인 좋은 색감은 당신의 작업물의 가독성을 더 좋게해준다!
나는 아직 옷이나 머리카락의 어떠한 아웃라인도 만들지 않았음을 알고 있어라. 당신이 할 수 있는한 많은 픽셀을 절약하는 것을 항상 기억해라!
아참, 각 칼라 픽셀을 조심스럽게 배치하는데 시간을 낭비하지 말라. 작업 속도를 높히기 위해서는 색에 대한 라인은 잡고 Paint bucket tool을 이용해서 공간을 채우는 방법이다. 당신은 이 툴 또한 설정해줘야한다. 툴바에서 이 툴을 선택하고(단축키 ‘G’를 눌러도 된다) Tolerance을 0으로 바꾸고 anti-alias 체크를 해제한다.
Tip : 만약 Magic Wand tool을 사용해본 적이 없다면, Paint bucket과 같은 설정을 적용해주어라 - tolerance나 anti-alias를 없핸다.
다음 작업에서는 기초적인 빛과 그림자에 대한 상식이 필요하다. 만약 자세히 모른다면 여기링크에 빠른 가이드가 있고, 여기 하나더 완성된 링크가 있다. 만약 지금 당장 배우고 싶지 않다면 그냥 이 단계를 스킵하고 “Spicing up your palette”(모든것이 끝난뒤 넣는 명암은 스타일을 정하고, 당신의 게임의 느낌과 장래를 정한다)로 가도 된다.
혹은 심플하게 내 예제와 비슷하게 명암을 넣어도 된다!
전체에서 같은 밝기를 사용한다.
당신이 할 수 있는/원하는 만큼 모양을 주려고 해보라. 그러면 보통 결과물이 보기에 더 풍성하게 보일 것이다. 예를들어 이제 당신이 코, 눈쌀, 머리볼륨, 깊이감, 접힌 바지들을 볼 수 있다. 또한 약간의 발광점을 추가하여 더 괜찮게 보이게 하면 된다.
명암에 같은 밝기를 유지하라
당신의 팔레트에 양념을 치자
많은 사람들은 기본 팔레트 색을 사용한다. 그러나 그것 때문에 많은 게임들이 서로 비슷해 보이기도 한다.
포토샵은 엄청 다양한 색을 가진 표준 팔레트를 가지고있다. 그러나 그것에 너무 의존해서는 안된다. 하단의 툴바에서 메인 팔레트를 클릭하여 당신의 고유 색을 만드는게 최고이다.
그런다음, Color Picker Window에서 오른쪽 바에 색을 고르면서 찾아보고 메인 영역에서 밝기(흰색<->검정색)를 선택하고 채도(선명한<->흐릿한)를 선택한다.
당신이 색을 고르고 나면 OK를 누르고 Paint Bucket tool을 다시 설정해라. 아, 혼란스러워하지말고 그냥 “Contiguous”박스의 체크를 해제하면된다. 이제 새로운 색으로 색칠할때, 모든 픽셀들이 같은색으로 칠해지게 될 것이다.
이것은 왜 색 갯수를 줄이는게 중요한지에대한 이유이고, 같은 요소(셔츠, 머리카락, 헬맷, 방어구 등등)를 작업할때 항상 같은 색을 사용해야한다. 그러나 각 다른 영역에는 다른 색을 사용해야함을 잊지말자, 그렇지 않으면 다시 색칠해야할 수도 있다!
같은 색의 픽셀들을 모두 칠하기 위해 “Contiguous”의 체크를 해제한다.
당신이 만족할 때 까지 색을 바꿔보자. 그리고 당신 캐릭터에 섹시한 색이 될 때까지 해보면 된다! 당신은 아웃라인 또한 다시 채색할 수 있다. 그냥 배경과 함께 적절히 알맞게 만들면 된다.
마지막으로 배경색을 테스트해보자. 캐릭터 레이어 밑에 새 레이어를 만들어서 다양한 색을 넣어보면 된다. 이 작업은 캐릭터가 보여질 밝거나 어둡거나 따뜻하거나 시원한 배경들에게 알맞은지 확인하는 것은 굉장히 중요하다.
포토샵에서 픽셀을 수정하는 팁
당신도 보았다시피 나는 내가 사용하는 모든 툴의 anti-alias을 껐다. Elliptical marquee 나 Lasso tool과 같은 다른 툴들은 이 기능을 끄지 않았음을 명심하자.
그것은 일부분의 사이즈를 바꾸거나 회전을 시킬때, 더 나아가 애니메이션을 돌릴때도 편하게 작업할 수 있다. 이렇게 하여, marquee tool (단축키 ‘M’)을 이용하여 영역을 지정하고, 오른쪽 마우스 눌러서 ‘Free Transform’을 선택한다(혹은 단축키 Ctrl+T). 그러면 리사이징이나 회전을 쉽게 할 수 있을 것이다.
그러나 포토샵은 Transform 기능을 사용하여 수정한 모든것에 자동적으로 anit-alias을 해버린다. 수정물을 확인하기 전에 Edit > Preferences > General (Ctrl+K)에 들어가서 “Image Interpolation”을 “Nearest Neighbour”으로 바꾸어라. 한마디로 이것은 새 포지션과 사이즈를 어림잡아 계산해주며 새 컬러나 투명도를 적용시키지 않고 당신이 선택한 색들이 알아서 변경되지 않게 막아준다.
iPhone Game에 Pixel Art 넣기
레이먼이 왔습니다. 나는 이 강좌에 쏙 들어와서 어떻게 Cocod2D 아이폰 게임 프레임워크로 Pixel art를 적용시킬 수 있는지 보여줄 것입니다.
만약 Cocos2D가 처음이거나 아이폰 개발이 처음이라면 다른 수많은 강좌보다 Cocos2D and iPhone tutorials 이 강좌를 먼저 보고 오길 추천합니다. 그리고 당신이 Xcode와 Cocos2D가 깔려있고 기본 지식이 있다면, 읽어주세요! :]
iOS\cocos2d v2.x\cocos2d iOS template, 이름은 PixelArt로하고 iPhone for device family를 선택하여 새 프로젝트를 만듭니다.
그리고 당신의 프로젝트에다가 당신이 최종적으로 만든 pixel art 캐릭터를 드래그해넣습니다.
다음 HelloWorldLayer.m을 열고 아래 init메소드로 대체합니다.
1 2 3 4 5 6 7 8 9 | -(id) init { if( (self=[super init])) { CCSprite * hero = [CCSprite spriteWithFile:@"sprite_final.png"]; hero.position = ccp(96, 96); hero.flipX = YES; [self addChild:hero]; } return self; } |
우리는 스프라이트를 화면의 왼쪽 사이드에 놓고 그가 오른쪽을 보는것처럼 만들것입니다.
컴파일하고 돌려보면 당신이 예상한대로 스프라이트는 화면에 나타날것입니다.
그러나 이 강좌에서 처음 말했던것을 기억하세요. 우리는 일부로 크기를 키워야합니다. 그리고 각 픽셀들이 추가 블록을 주어 픽셀아트 느낌이 나도록 보이게 하고 싶다.
따라서 init 메소드에 아래 라인을 추가하자:
1 | hero.scale = 2.0; |
쉽지요? 컴파일과 실행... 잉? 스프라이트가 블러처리가 되버렸다!
이건 스케일이 바뀔 때 Cocos2D의 기본 세팅인 anti-aliases art 때문이다. 픽셀아트에서는 이걸 사용하지 말아야한다. - 우리는 딱 떨어지는 엣지가 필요하다.
운좋게도, 아래 라인 하나만 더 추가하면 굉장히 쉽게 해결할 수 있다.
1 | [hero.texture setAliasTexParameters]; |
이 설정은 image의 스케일을 변화시켜도 anit-aliasing이 일어나지 않게 Cocos2D를 세팅하고, 이것은 “pixel-like”하게 보이게 만든다. 컴파일과 실행하여... ㅇ어로올1!! 된다!!
pixel art를 사용할 때 이점을 말하자면 - 우리는 실제 화면에 보이는 그림 사이즈보다 작은 이미지 파일을 사용하면 된다, 이건 텍스쳐 용량을 엄청나게 줄여준다. 그리고 우리는 레티나 디스플레이를 위한 이미지를 따로 준비할 필요가 없다!
이제 뭘 해야하나?
나는 당신이 이 튜토리얼을 즐기고 pixel art에대해 조금이나마 배워갔기를 바란다.
헤어지기전에 여기 마지막 팁들을 주겠다.
- 항상 anti-alias, gradients나 너무 많은 컬러를 사용하는것을 피해야 한다는 것을 기억하자. 이것은 당신이 알지 못하고 하는것보다 알고 하는것이 당신 자신에게 굉장히 좋을 것이다.
- 만약 당신이 북고풍을 구현하기를 REALLY 원한다면, 8-bit나 16-bit와 같은 완전 극한의 오래된 콘솔 작품을 한번 구경해 보아라.
- 거기엔 ‘복고풍’을 떠나서 엄청나게 많은 스타일이 있다. 하드웨어가 좋아지면서, 리소스들은 더 좋고 더 다양한(섹시한) 색을 사용할 수 있게 되었다. 이것은 오래된 하드웨어에서 어떻게 픽셀아트가 만들어지는지 몰라도 되게 되었으며, 더 다양하고 새로운 아티스트들을 이끌었다. Newer consoles like Game Boy Advance, Nintendo DS, Playstation 1 and some mobile phones have games with these styles, so look into those!
- 몇몇 스타일에서는 어두운 테두리가 없다; 어떤건 빛이나 그림자가 없다. 이것은 스타일에 따라 다르다! 이 강좌를 통해 알게된 작업물에 어떻게 명암을 주는지 아는것은 훌륭한 일이지만, 당신이 마음 가는대로 스타일링하는것을 마음속에 새겨두자.
- 만약 좀 더 자신이 있다면, 다음 용어들로써 더 세세한 강좌를 찾아볼 수 있을 것이다: isometric, dithering, anti-alias, celout and subpixel animation.
Pixel art는 시작할 때 쉬워서 쉽게 느껴질 수 있지만 사실 엄청난 시간이 걸려야 좋은 pixel art 가 만들어진다.
스킬을 올리는 가장 좋은 방법은 연습, 연습 또 연습이다. - 그리고 pixel artists에게 조언을 받는것까지!
나는 당신이 pixel art 포럼에 당신의 작업물을 올려 다른 작가로부터 조언을 받을것을 강력히 추천한다. 작게 시작하고, 많이 연습하여 피드백을 받으면 당신은 엄청난 pixel art 게임을 탄생시킬 준비가 된 것이다!
만약 pixel art에 대해 다른 질문이 있다면, 아래 토의 포럼에 가입하고 당신들이 미래에 굉장한 pixel art를 만들 수 있는 모습을 보게되면 좋겠다! :]
translated by canapio
'Swift와 iOS' 카테고리의 다른 글
| [번역]WWDC 2017 보는 법 (0) | 2017.08.13 |
|---|---|
| [번역] 여러분이 놓친 리액티브 프로그래밍에 대한 이야기 (0) | 2017.01.01 |
| [iOS] iOS에서 푸시 받는거 놓히지 않기 - Push Notification (0) | 2015.07.04 |
| [iOS] 맥에서 구글 드라이브를 이용한 URL 앱 배포 (adhoc) (4) | 2015.05.06 |
| (번역) Grand Central Dispatch In-Depth: Part 1/2 - 1 (0) | 2015.03.26 |
WRITTEN BY
- tucan.dev
개인 iOS 개발, tucan9389
