Blend Modes 사용해서 Creative Effects 내기

Creative Effects Using Blend Modes

Posted on October 30, 2012

. Written by Brent Sorrentino


할로윈 시즌 입니다. 오늘은 코로나의 blend modes  에 대해서 다루겠습니다. 그리고 이것이 어떻게 앱 내에서 창조적인 비쥬얼 효과를 내는데 사용될 수 있는지에 대해서도 알아보구요. 대부분의 Corona API들이 그렇지만 이런 효과도 간단한 코딩에 의해서 구현할 수 있습니다. Blend mode는 다양한 시각 효과에서 아주 유용하게 사용할 수 있습니다. 그리고 포토샵 같은 데서나 낼 수 있었던 그런 효과들을 내고 싶은 디자이너들도 활용하실 수 있습니다. blend mode가 무엇인지 모르시는 분들은 이 글을 끝까지 읽으세요. 이 글에서는 두개의 Halloween-theme image들을 사용할 겁니다. spooky swamp 와 wisps요. 이 글을 그대로 따라하면서 배우고 싶으신 분들은 여기에서 이미지를 다운 받아서 사용하세요. (제가 만든거니까요 다른데에 배포하지는 말아주세요.)

Layers and Pixels

다른 그래픽 어플리케이션과 개발 언어와 마찬가지로 코로나에도 layers 가 있어서 back에서 front로 z-index 순으로 비쥬얼 객체들을 arrange 합니다. 레이어들은 코로나에서는 display groups를 말하고 용법은 같습니다.

보시는 바대로 위 레이어에 있는 객체(wisps) 의 모든 픽셀들은 그 아래 있는 레이어의 객체 앞에 overlap 돼 있습니다. 그리고 그 픽셀들이 렌더링되서 뒤의것과 잘 조화 돼 있죠.  이것은 Painter's Algorithm 이라는 개념입니다. 실제 캔버스에 그림을 그린다고 보면 붓질을 하면 물감은 이전 물감의 위에 덧칠되게 됩니다. 이것이 Painter's Algorithm 입니다.

About Visual “Blending”

위의 예와 같은 기초적인 layering 도 유용하고 필요한 기술이긴 하지만 creative visual effect를 구현하기에는 한계가 있습니다. 그래서 대부분의 그래픽 애플리케이션은 (코로나도 마찬가지구요.) 레이어들에 blending 이라는 사용할 수 있도록 허용하고 있습니다.

core level에서 보면 blending 은 수학적인 알고리즘을 이용해서 여러 레이어들에 걸쳐 픽셀들이 overlapping 돼 서로 combine (blend) 하도록 하는 메소드 입니다. 단지 위에 오는 레이어의 픽셀들이 밑의 픽셀들에 overlapping 되서 밑의 것을 안 보이도록 하는  것이 아니라 blend를 사용하면 multiple pixels 들이 한꺼번에 보이게 됩니다.

현실세계를 상상해 보시죠. Painter’s Algorithm analogy를 사용하면 붓의 터치가 가해지면 밑의 색에 덧칠 됩니다. 또 그 색에 붓질을 하게 되면 마찬가지로 덧칠을 하게 되죠. blend 도 마찬가지로 digital painting canvas 에서 똑 같은 일을 하는 겁니다. 다만 실제 세계의 캔버스에서와는 다르게 표시되게 되죠.

디지털 환경에서 생각해 보면 blending은 3원색-red, green, and blue (RGB)- 모두에 적용 됩니다. 이 각각의 색을 channel 이라고 하는데요. 더 자세히는 다루지 못하지만 각 channel 마다 0 에서 255 까지의 숫자 범위가 있다는 것은 알아 두시기 바랍니다. 0 은 none 을 의미하고 255는 maximum을 의미합니다. 얼마나 이런 channel 들이 mix 되느냐에 따라서 최종 색이 결정 되는 겁니다. RGB 값 0,0,0 은 검은색이고 255,255,255 는 흰색입니다. 이 RGB에 대해 더 자세히 알고 싶으시면 여기를 참조하세요.

이 튜토리얼을 보시려면 각 color channel 마다 0-255 의 숫자 범위가 있다는 것만 아시면 됩니다. 이 글에서는 blend 가 어떻게 각 channel의 숫자들을 다루고 그 픽셀의 최종색을 만드는지를 설명 드릴 겁니다.

object.blendMode

코로나에서 객체에 blend mode를 apply 하려면 blendMode parameter에 add, multiply, screen, or normal 중 하나의 값을 대입시키면 됩니다.

예를 들어

wisps.blendMode = "add"

“normal” blend mode (default) 는 그냥 blend mode를 사용하지 않는다는 의미입니다. 그 외에 3개의 blend mode에 대해서는 아래에서 설명 하겠습니다.

한가지 기억하셔야 할 것은 반드시 blend mode는 per-object basis로 apply 해야 한다는 것입니다. object:setFillColor() 와 비슷합니다. blend mode를 전체 display group에 한번에 적용할 수는 없습니다. 하나의 display group 에 다 같은 blend mode를 적용하시려면 display group 의 child 만큼 loop를 돌려서 각각의 아이템마다 blend mode를 별도로 적용시켜야 합니다.

Blend Mode “add”

add blend mode 는 불이나 레이저, exaggerated 같은 glowing visual effects를 주는데 효과적입니다. 대부분의 그래픽 애플리케이션에서는 linear dodge로 알려져 있기도 합니다. 하는 일은 단순하게 모든 레이어에 걸쳐서 각 color channel 의 값을 adds 하는 겁니다.

이제 테크니컬하게 들어가 볼까요! 객체에 부여된 RGB 값들은 아래와 같습니다.

background:      ( 34, 34, 44 )
red circle:      ( 255, 51, 51 )
green circle:    ( 0, 153, 51 )
blue rectangle:  ( 102, 153, 204 )

With each object set to blendMode=“add”, Corona’s OpenGL engine simply adds the channel values for each pixel.

각 객체마다 blendMode=“add”로 세팅 돼 있습니다. 코로나의 OpenGL 엔진은 단순히 각 픽셀의 channel 값을 더할 겁니다.

산수를 한번 해 보죠. 빨간 원과 배경이 합쳐지는 부분에 대해 계산을 합니다.

R: 34 + 255 = 289
G: 34 + 51  = 85
B: 44 + 51  = 95

R (red) 값은 255를 넘었네요. (maximum 값이 255 잖아요). 이럴 경우는 그냥 255로 됩니다. 그러니까 최종 RGB 값은 (255,85,95) 가 되죠. 원래 빨간색의 RGB 값은 (255,51,51) 였죠. 두 이미지에서 빨간 원 부분을 보세요. blend 가 적용된 부분의 좀 더 밝아 졌죠.

다음은 좀 더 복잡한 부분을 볼까요. 빨간색과 녹색 원이 겹쳐지는 부분입니다. 그리고 파란 네모가 겹쳐진 부분은 제외하구요.

R: 34 + 255 + 0   = 289
G: 34 + 51  + 153 = 238
B: 44 + 51  + 51  = 146

이 경우 background 까지 합해서 각 channel 의 값들의 합을 구합니다. 255 가 넘는 겂이 있으면 그냥 255로 정해 지는 거구요. 그러면 최종값은 (255,238,146)이 됩니다.

이 add blend를 사용하면 우리의 Halloween scene 은 어떻게 될 까요? wisps 에 blendMode=“add”를 적용하면 좀 더 creative 한 효과를 볼 수 있습니다. 하얀 wisps 부분은 눈부시게 빛나는 것 같고 어두운 wisps 부분도 (원래 보라색이었던 부분) 약간 빛나면서 번져 보입니다.

여기에는 없지만 만약 black pixels 들이 있다면 그 픽셀들은 완전 투명하게 될 겁니다. 왜 그러냐구요? 검은색의 RGB 값은 (0,0,0) 이거든요. 그러니까 픽셀에 아무 값도 더해지지 않게 됩니다. 그러면 당연히 밑의 색이 그대로 보이겠죠. 그러니까 검은색은 투명한 효과가 나게 되는 겁니다.

요약하자면 add blend mode는 각 color channel 의 값을 더해 주는 겁니다. 더해진 값이 255가 넘으면 그냥 255로 정해지는 거구요. 그러니까 모든 색이 더 밝아 지겠죠. additive blending 은 그래서 레이저, 불, flash 들 같은 밝고 colorful 한 효과를 내는데 좋습니다.

IMPORTANT NOTE:  저 위에서 계산하는 거 보셨죠? 여러분이 프로그래밍할 때 저 계산을 할 필요는 없습니다. 코로나에서 해 주니까요. 여러분은 그냥 어떤 blend 효과를 사용할 지만 정하시면 됩니다.

Blend Mode “multiply”

이 이름만 보고는 딱 와 닿지 않지만 multiply blend mode는 사실 좀 더 어둡게 만드는 효과가 필요할 때 사용하시면 됩니다. 예를 들어 그림자 효과 같은 것을 넣을 때 좋죠.

color channel value들을 더하는 대신에 multiply blend mode는 (짐작하시겠지만) 그 값들을 multiply (곱하기) 합니다. 이렇게 하면 RGB channel 값이 65025 (255*255) 같이 아주 높아지겠죠. add blend mode 였다면 모두 255(하얀색)이 될 겁니다. 그런데 왜 multiply blend 는 좀 더 어둡게 될 까요? 왜냐하면 곱한 값을 다시 255로 나누거든요.

아래 그 공식을 보겠습니다.

resulting color = ( top color * bottom color ) / 255

다시 각 부분의 RGB 값을 볼까요.




background:      ( 34, 34, 44 )
red circle:      ( 255, 51, 51 )
green circle:    ( 0, 153, 51 )
blue rectangle:  ( 102, 153, 204 )

빨간 원의 왼쪽 부분을 계산해 봅시다. (잘 보세요. 좀 더 어두워 질 거예요.)

R: ( 34 * 255 ) / 255 = 34
G: ( 34 * 51 )  / 255 = 6.8
B: ( 44 * 51 )  / 255 = 8.8

먼저 곱한 다음에 그 값을 다시 255로 나누기 때문에 결과값이 낮은 겁니다. 그러면 더 어두운 색이 되겠죠. 검은색은 어떻게 되는지도 보셔야 할 겁니다. 검은색은 그 값이 0 이죠. 0에 무슨 값을 곱해도 0 이 되죠. 그래서 black 인 부분은 항상 black 이 됩니다.

아래 이미지는 Halloween 이미지들에 blendMode=“multiply” 값을 세팅한 결과 입니다.

보시다시피 wisps 가 있는 부분들은 더 어두워 졌죠? 이 효과는 이런 Halloween 에 맞는 효과는 아니네요. 그냥 multiply blend 가 어떻게 효과를 내는지 이해하는데만 사용하세요. 흰색(255) 부분은 어떻게 됐을 까요. 255에 무엇을 곱하더라도 다시 255로 나누면 그냥 그 색이 되겠죠? 그러니까 이 효과에서는 흰색은 투명한 효과가 납니다. 그냥 밑에 있는 색이 그대로 보이는 거죠.

Blend Mode “screen”

screen blend mode 도 add blend mode 와 마찬가지로 좀 더 밝게 만들어 주는데요. 다만 아주 어두운 부분은 오히려 lightening 하지 않습니다. 이 blend mode의 algorithm은 좀 복잡한데요. channel 값들은 마이너스를 하고 곱하기를 하고 그리고 다시 마이너스를 하고 뭐 그렇습니다.

아래 그 공식이 있습니다.

resulting color = 255 - ( ( ( 255 - top color ) * ( 255 - bottom color ) ) / 255 )

multiply blend 의 반대 효과를 주어서 밝게 만듭니다. 그러니까 add blend 와 비슷한 효과를 주기는 하지만 아주 똑 같지는 않구요.

이 screen blend 의 공식은 복잡합니다. 다행히 여러분은 이런 계산을 하지 않으셔도 됩니다. 단지 여러분은 Halloween 장면에 어떤게 더 효과적인지만 정하시면 됩니다.

이것도 효과가 괜찮네요. 이 효과의 특징은 additive blend 와 비슷하지만 그것보다 살짝 연하다는 겁니다. wisps 의 어두운 부분들은 아주 연하게 표현이 됐습니다. 이렇게 어두운 부분은 additive blend 가 좀 더 낫지 않나 싶네요.

In Summary

코로나에서의 Blend modes는 특정 상황에서는 아주 powerful 한 tool 이 될 수 있습니다. 이 기능을 적용하는 것도 아주 간단합니다. (단지 한 줄만 코딩해 넣으면 됩니다.)  코로나의 그래픽 엔진이 모든 계산을 다 해 줄 겁니다. 어떤 blend mode를 사용할 까는 여러분 앱의 scene 에 어떤 효과를 넣어야 할지 여러분이 결정하시면 됩니다.  질문이 있으신 분들은 여기 에 댓글로 질문해 주세요. Happy Halloween!