Clipping - kuimoani/defold GitHub Wiki

Clipping

ํ…์Šค์ณ๋‚˜ ํ…์ŠคํŠธ๋ฅผ ์‚ฌ์šฉํ•œ GUI ๋…ธ๋“œ๋Š” ๊ทธ๋ž˜ํ”ฝ์„ GUI์— ์ถ”๊ฐ€ํ•˜์ง€๋งŒ ๋•Œ๋กœ๋Š” ํ™”๋ฉด์˜ ๊ทธ๋ž˜ํ”ฝ ์ผ๋ถ€๋ถ„์„ ์ œ๊ฑฐํ•˜๊ฑฐ๋‚˜ ํŠน์ • ๋ถ€๋ถ„์„ ๋ณด์—ฌ์ฃผ๋Š” ๋งˆ์Šคํฌ ๊ธฐ๋Šฅ์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฉ”๋‰ด์–ผ์€ ์ด๋ฅผ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•์„ ์„ค๋ช…ํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ๊ฒŒ์ž„์—์„œ ํ”Œ๋ ˆ์ด์–ด๊ฐ€ ์ž์‹ ์˜ ๋ฐฉํ–ฅ์„ ์žก๊ธฐ ์œ„ํ•œ ๋ฏธ๋‹ˆ๋งต์ด ์žˆ๋Š” HUD ์š”์†Œ๋ฅผ ํ™”๋ฉด์— ์ƒ์„ฑํ•ด์•ผ ํ•œ๋‹ค๊ณ  ์นฉ์‹œ๋‹ค.

Minimap HUD

ํด๋ฆฌํ•‘(clipping)๊ณผ ํ•จ๊ป˜ ํŒŒ์ด ๋…ธ๋“œ(pie node)๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฏธ๋‹ˆ๋งต์„ ๋งค์šฐ ์‰ฝ๊ฒŒ ๋งŒ๋“ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Making the minimap

  1. pie ๋…ธ๋“œ ์ถ”๊ฐ€. ๋งต์„ ์œ„ํ•œ "์—ด์‡ ๊ตฌ๋ฉ" ์—ญํ• ์„ ํ•˜๊ฒŒ๋จ
  2. box ๋…ธ๋“œ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ณ  ๋งต ํ…์Šค์ณ๋ฅผ ๋ฐ˜์˜ํ•จ
  3. box ๋…ธ๋“œ๋ฅผ pie๋…ธ๋“œ์˜ ์ž์‹๋…ธ๋“œ๋กœ ์ง€์ •ํ•จ
  4. pie ๋…ธ๋“œ์˜ Clipping ํ”„๋กœํผํ‹ฐ๋ฅผ "Stencil"๋กœ ์„ค์ •ํ•จ

Clipping preview

์ด์ œ ๋ถ€๋ชจ ๋…ธ๋“œ๋Š” ์ž์‹ ๋…ธ๋“œ์— ๋Œ€ํ•œ "์—ด์‡ ๊ตฌ๋ฉ" ์—ญํ• ์„ ํ•˜๊ฒŒ ๋˜์–ด ๋ถ€๋ชจ ํด๋ฆฌํ•‘ ๋…ธ๋“œ์— ์˜ํ•ด ๋ฐ”์ธ๋”ฉ ๋œ ๊ทธ๋ž˜ํ”ฝ๋งŒ ํ‘œ์‹œ๋˜๋ฏ€๋กœ ๋ถ€๋ชจ ๋…ธ๋“œ๋Š” ๋งต์˜ ๊ทธ๋ž˜ํ”ฝ ์™ธ๋ถ€ ์˜์—ญ์„ ์ •์˜ํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ๋งต ๋…ธ๋“œ๋ฅผ ์ž์œ ๋กญ๊ฒŒ ์›€์ง์—ฌ๋„ ๋ถ€๋ชจ ์˜์—ญ ๋‚ด์— ์žˆ๋Š” ๋ถ€๋ถ„์ด ํ‘œ์‹œ๋˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

ํด๋ฆฌํ•‘์€ box๋…ธ๋“œ์™€ pie ๋…ธ๋“œ์— ๋ฐ˜์˜ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ Text ๋…ธ๋“œ๋Š” ๋‹ค๋ฅธ ๋…ธ๋“œ์™€ ํด๋ฆฌํ•‘ ํ•  ์ˆ˜ ์—†์Šต๋‹ˆ๋‹ค. ํด๋ฆฌํ•‘์—๋Š” ๋‘ ๊ฐ€์ง€ ํƒ€์ž…์ด ์žˆ๋Š”๋ฐ ํด๋ฆฌํผ์˜ ๋ชจ์–‘์„ ๊ทธ๋ฆฌ๋Š” Visible clipper์™€ ํด๋ฆฌํ•‘ ๋งˆ์Šคํฌ์— ๋ฏธ์น˜๋Š” ์˜ํ–ฅ์„ ๋ฐ˜์ „์‹œํ‚ค๋Š” Inverted clipper๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. (์ž์„ธํ•œ ๋‚ด์šฉ์€ ์•„๋ž˜ ์ฐธ๊ณ )

Clipping properties

Stencil ํด๋ฆฌํ•‘์€ box ๋…ธ๋“œ์™€ pie ๋…ธ๋“œ์— ๋ฐ˜์˜ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, Stencil์—๋Š” ๋ช‡ ๊ฐ€์ง€ ์ œํ•œ์‚ฌํ•ญ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

  1. stencil clippers์˜ ์ด ์ˆ˜๋Š” 256๊ฐœ๋ฅผ ์ดˆ๊ณผํ•  ์ˆ˜ ์—†์Œ
  2. stencil ์ž์‹ ๋…ธ๋“œ์˜ ์ตœ๋Œ€ ์ค‘์ฒฉ ๊นŠ์ด(nesting depth)๋Š” 8๋‹จ๊ณ„์ž„(stencil ํด๋ฆฌํ•‘ ์นด์šดํŠธ๋ฅผ ์‚ฌ์šฉํ•œ ๋…ธ๋“œ๋งŒ)
  3. stencil ํ˜•์ œ ๋…ธ๋“œ์˜ ์ตœ๋Œ€ ์ˆ˜๋Š” 127๊ฐœ์ž„. stencil ๊ณ„์ธต๊ตฌ์กฐ ์•„๋ž˜์˜ ๊ฐ ๋ ˆ๋ฒจ์˜ ์ตœ๋Œ€ ์ œํ•œ์€ ์ ˆ๋ฐ˜์œผ๋กœ ์ค„์–ด๋“ฌ
  4. Inverted ๋…ธ๋“œ๋Š” ๋น„์šฉ์ด ๋งŽ์ด ๋“ฌ. 8๊ฐœ์˜ inverted clipping ๋…ธ๋“œ๊ฐ€ ํ•œ๊ณ„์ด๊ณ  non-inverted clipping ๋…ธ๋“œ์˜ ์ตœ๋Œ€์น˜์˜ ์ ˆ๋ฐ˜์ด ๋จ
  5. Stencils์€ ํ…์Šค์ณ๊ฐ€ ์•„๋‹Œ ๋…ธ๋“œ์˜ ์ง€์˜ค๋ฉ”ํŠธ๋ฆฌ๋กœ๋ถ€ํ„ฐ stencil ๋งˆ์Šคํฌ๋ฅผ ๋ Œ๋”๋งํ•จ. Inverted clipper ํ”„๋กœํผํ‹ฐ๋ฅผ ์„ค์ •ํ•ด์„œ ๋งˆ์Šคํฌ๋ฅผ ๋ฐ˜์ „ ์‹œํ‚ฌ ์ˆ˜ ์žˆ์Œ

Stencil mask

์Šคํ…์‹ค ํด๋ฆฌํ•‘์ด ์–ด๋–ป๊ฒŒ ๋™์ž‘ํ•˜๋Š”์ง€ ์ดํ•ดํ•˜๊ธฐ ์œ„ํ•ด, ์Šคํ…์‹ค์˜ ๊ณ„์ธต์ด ์–ด๋–ป๊ฒŒ ๊ฐœ๋ณ„ ํด๋ฆฌํ•‘์˜ ๋ชจ์–‘์„ ๊ทธ ๊ณ„์ธต๊ตฌ์กฐ ํ•˜์—์„œ ์ „์ฒด ๋งˆ์Šคํฌ๋กœ ๋ฐ˜์˜ํ•˜๋Š”์ง€ ์ƒ์ƒํ•ด ๋ณด๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค. ํด๋ฆฌํ•‘ ๋…ธ๋“œ์˜ ๋งˆ์Šคํฌ ์„ธํŠธ๋Š” ํ•ด๋‹น ๋…ธ๋“œ์˜ ์ž์‹๋“ค๋กœ ์ƒ์†๋˜๋ฉฐ ์ž์‹ ๋…ธ๋“œ๋“ค์€ ์ ˆ๋Œ€ ๋งˆ์Šคํฌ๋ฅผ ํ™•์žฅํ•˜์ง€ ์•Š๊ณ  ์˜ค์ง ํด๋ฆฌํ•‘๋งŒ ํ•ฉ๋‹ˆ๋‹ค. ๊ตฌ์ฒด์ ์ธ ์˜ˆ์ œ๋ฅผ ์‚ดํŽด ๋ด…์‹œ๋‹ค.

Clipping hierarchy

hexagon ๊ณผ square ๋ชจํ˜• ๋‘˜ ๋‹ค ์Šคํ…์‹ค ํด๋ฆฌํผ๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค. Inverted clipper ํ”„๋กœํผํ‹ฐ๋ฅผ ์„ค์ •ํ•˜๋ฉด ํ•ด๋‹น ๋…ธ๋“œ๋กœ ์ƒ์†๋œ ๋งˆ์Šคํฌ๋ฅผ ๋ฐ˜์ „ ์‹œํ‚ต๋‹ˆ๋‹ค. ์œ„์˜ ๊ณ„์ธต๊ตฌ์กฐ์—์„œ normal clippers์™€ inverted clippers๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ 4๊ฐ€์ง€์˜ ์กฐํ•ฉ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.

Stencil masks

๋งŒ์•ฝ ์ธ๋ฒ„ํŠธ๋œ ๋…ธ๋“œ ์•„๋ž˜์— ๋˜ Inverted clipper๋กœ ์„ค์ •๋œ ๋…ธ๋“œ๊ฐ€ ์žˆ๋‹ค๋ฉด, ์ž์‹ ๋…ธ๋“œ์— ์˜ํ•ด ๋งˆ์Šคํฌ๋œ ์˜์—ญ์ด ์ธ๋ฒ„ํŠธ๋ฉ๋‹ˆ๋‹ค. inverted clippers ๋…ธ๋“œ๋ฅผ ๊ฐ๊ฐ ์ž์‹๋…ธ๋“œ๋กœ ์—ฎ๋Š” ๋ฐฉ๋ฒ•์œผ๋กœ ๋…ธ๋“œ์— ์—ฌ๋Ÿฌ๊ฐœ์˜ ๊ตฌ๋ฉ์„ ๋‚ผ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

Two inverters cutting a node

Layers

๋ ˆ์ด์–ด๋Š” ๋…ธ๋“œ์˜ ๋ Œ๋”๋ง ์ˆœ์„œ(์ผ๊ด„ ์ฒ˜๋ฆฌ(batch))๋ฅผ ์ œ์–ดํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ ˆ์ด์–ด์™€ ํด๋ฆฌํ•‘ ๋…ธ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ผ๋ฐ˜์ ์ธ ๋ ˆ์ด์–ด ์ˆœ์„œ๊ฐ€ ๋ฌด์‹œ(override) ๋ฉ๋‹ˆ๋‹ค. ํด๋ฆฌํ•‘ ์ˆœ์„œ๋Š” ๋ ˆ์ด์–ด ์ˆœ์„œ๋ณด๋‹ค ์šฐ์„ ํ•˜๊ฒŒ ๋˜๋Š”๋ฐ, ์ฆ‰ ๋…ธ๋“œ๊ฐ€ ์†ํ•œ ๋ ˆ์ด์–ด์— ๊ด€๊ณ„ ์—†์ด, ๋…ธ๋“œ ๊ณ„์ธต์— ๋”ฐ๋ผ ํด๋ฆฌํ•‘ ๋ฉ๋‹ˆ๋‹ค. ๋ ˆ์ด์–ด๋Š” ์˜ค์ง ๊ทธ๋ž˜ํ”ฝ์˜ ๊ทธ๋ฆฌ๊ธฐ ์ˆœ์„œ์—๋งŒ ์˜ํ–ฅ์„ ๋ฏธ์น˜๋ฉฐ, ๋” ๋‚˜์•„๊ฐ€์„œ ํด๋ฆฌํ•‘ ๋…ธ๋“œ์— ์„ค์ •๋œ ๋ ˆ์ด์–ด๋Š” ํ•ด๋‹น ํด๋ฆฌํผ ๊ณ„์ธต์˜ ๊ทธ๋ฆฌ๊ธฐ ์ˆœ์„œ์—๋งŒ ์˜ํ–ฅ์„ ๋ฏธ์นฉ๋‹ˆ๋‹ค.

์˜ˆ๋ฅผ ๋“ค์–ด, ์•ˆ์ชฝ ๊ทธ๋ฆผ์ž ํ…์Šค์ณ(inner shadow texture)๊ฐ€ ์žˆ๋Š” "window_and_shadow" ๋ผ๋Š” ํด๋ฆฌํผ ๋…ธ๋“œ๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด ๋ด…์‹œ๋‹ค. ์ด ๋…ธ๋“œ์˜ Visible clipper ํ”„๋กœํผํ‹ฐ๋ฅผ ์ฒดํฌํ•˜๊ณ  "layer2"๋กœ ์„ค์ •ํ•ด์„œ "layer0"์˜ "map" ๋…ธ๋“œ์™€ ํด๋ฆฌํ•‘์„ ์—ฐ๊ฒฐํ•ฉ๋‹ˆ๋‹ค. ์ด ํด๋ฆฌํผ ํ…์Šค์ณ๋Š” "map" ์ž์‹๋…ธ๋“œ์˜ ์œ„์—์„œ ๋ Œ๋”๋ง๋ฉ๋‹ˆ๋‹ค. "map"์— ์„ค์ •๋œ ๋ ˆ์ด์–ด ํ˜น์€ "window_and_shadow" ์„ค์ •๋œ ๋ ˆ์ด์–ด๋Š” "blue_box" ("layer2") ์™€ "orange_box" ("layer1") ์— ๊ด€๋ จ๋œ ๋ Œ๋”๋ง ์ˆœ์„œ์— ์˜ํ–ฅ์„ ์ฃผ์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ๋งŒ์•ฝ "blue_box" ์™€ "orange_box" ์— ๊ด€๋ จํ•ด์„œ "window_and_shadow" ์˜ ๋ Œ๋”๋ง ์ˆœ์„œ๋ฅผ ๋ณ€๊ฒฝํ•˜๋ ค๋ฉด, ๋…ธ๋“œ ํŠธ๋ฆฌ์˜ ์ˆœ์„œ๋ฅผ ๋ณ€๊ฒฝํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

Layers and clipping