Label - kuimoani/defold GitHub Wiki

Label

๊ฒŒ์ž„ ์˜ค๋ธŒ์ ํŠธ์— ํ…์ŠคํŠธ๋กœ ๋œ ์ปจํ…์ธ ๋ฅผ ๋ถ€์ฐฉํ•˜๋Š” ๊ฒƒ์€ ๊ฝค ์ผ๋ฐ˜์ ์ž…๋‹ˆ๋‹ค. Defold์˜ GUI ์ง€์› ์‹œ์Šคํ…œ์ด ์žˆ๊ธด ํ•˜์ง€๋งŒ, ์ •๋ณด๊ฐ€ ๊ฒŒ์ž„ ์˜ค๋ธŒ์ ํŠธ์— ๋ถ™์–ด ๋”ฐ๋ผ๋‹ค๋‹ˆ๊ฒŒ ๋งŒ๋“ค๊ธฐ๋Š” ๊ท€์ฐฎ์€ ์ผ์ž…๋‹ˆ๋‹ค. Label ์ปดํฌ๋„ŒํŠธ๋Š” ๊ฒŒ์ž„ ์˜ค๋ธŒ์ ํŠธ์— ํ…์ŠคํŠธ ์ปจํ…์ธ ๋ฅผ ์ฒจ๋ถ€ํ•˜์—ฌ ์ด๋ฅผ ์‰ฝ๊ฒŒ ๊ตฌํ˜„ํ•ด ์ค๋‹ˆ๋‹ค.

Creating a label

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

๋ผ๋ฒจ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•์€ ์•„๋ž˜์™€ ๊ฐ™์Šต๋‹ˆ๋‹ค.

  • ๊ฒŒ์ž„ ์˜ค๋ธŒ์ ํŠธ์— ๋งˆ์šฐ์Šค ์˜ค๋ฅธ์ชฝ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๊ณ  Add Component๋ฅผ ์„ ํƒํ•œ ํ›„ Label์„ ์„ ํƒํ•˜๊ณ  OK๋ฅผ ๋ˆ„๋ฆ…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด ํ•ด๋‹น ๊ฒŒ์ž„ ์˜ค๋ธŒ์ ํŠธ์˜ ๋‚ด์žฅ ์ปดํฌ๋„ŒํŠธ๋กœ ๋ผ๋ฒจ์ด ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค. Add label

  • ๋งŒ์•ฝ ๊ฐ™์€ ํ…œํ”Œ๋ฆฟ์œผ๋กœ ๋ถ€ํ„ฐ ๋‹ค์ˆ˜์˜ ๋ผ๋ฒจ์„ ์ธ์Šคํ„ด์Šคํ™” ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ์ƒˆ Label File์„ ๋งŒ๋“ค๊ณ  (Project Explorer ์ฐฝ์˜ ํ•œ ํด๋”์—์„œ ์˜ค๋ฅธ์ชฝ ํด๋ฆญํ•˜๊ณ  New โ–ธ Label File ์„ ํƒ) ๊ฒŒ์ž„ ์˜ค๋ธŒ์ ํŠธ์— ์˜ค๋ฅธ์ชฝ ํด๋ฆญํ•ด์„œ Add Component From File์„ ์„ ํƒํ•œ ํ›„ ์•„๊นŒ ๋งŒ๋“  ๋ผ๋ฒจ ํŒŒ์ผ์„ ์„ ํƒํ•˜๋Š” ๋ฐฉ์‹์œผ๋กœ ์—ฌ๋Ÿฌ ๋ฒˆ ์“ธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋ผ๋ฒจ ์ปดํฌ๋„ŒํŠธ๋Š” ๋Ÿฐํƒ€์ž„ ์ค‘์— ํ˜น์€ ๊ฐœ๋ฐœ ์ค‘์— ๋ณ€๊ฒฝ ๊ฐ€๋Šฅํ•œ ํŠน๋ณ„ํ•œ ์†์„ฑ๋“ค์„ ๊ฐ€์ง€๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

New Label component

Size

ํ…์ŠคํŠธ ๊ฒฝ๊ณ„ ์ƒ์ž(text bounding box)์˜ ํฌ๊ธฐ์ž…๋‹ˆ๋‹ค. ์•„๋ž˜ ์žˆ๋Š” Line Break ์†์„ฑ์„ ์„ค์ •ํ•˜๋ฉด ์ด ๊ฐ’์„ ๊ธฐ์ค€์œผ๋กœ ํ…์ŠคํŠธ๊ฐ€ ์ค„๋ฐ”๊ฟˆ ๋ฉ๋‹ˆ๋‹ค.

Text

์ด ์†์„ฑ์— ์ž…๋ ฅ๋œ ํ…์ŠคํŠธ๊ฐ€ ํ™”๋ฉด์— ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

Color

ํ…์ŠคํŠธ์˜ ์ƒ‰์ƒ

Alpha

ํ…์ŠคํŠธ์˜ ์•ŒํŒŒ๊ฐ’

Pivot

ํ…์ŠคํŠธ์˜ ํ”ผ๋ฒ—(pivot). ํ…์ŠคํŠธ ์ •๋ ฌ(text alignment)์„ ๋ณ€๊ฒฝํ•˜๋ ค๋ฉด ์‚ฌ์šฉํ•˜์„ธ์š”. (์•„๋ž˜ ์ฐธ๊ณ )

Line Break

์ด ์†์„ฑ์„ ์„ค์ •ํ•˜๋ฉด ํ…์ŠคํŠธ๊ฐ€ ์—ฌ๋Ÿฌ ์ค„๋กœ ๋‚˜๋‰˜์–ด ์งˆ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ปดํฌ๋„ŒํŠธ์˜ ๋„“์ด์— ๋”ฐ๋ผ ํ…์ŠคํŠธ๊ฐ€ ๋žฉ(wrap) ๋  ๊ฒƒ์ธ์ง€๊ฐ€ ๊ฒฐ์ •๋˜๋ฉฐ ํ…์ŠคํŠธ๋ฅผ ์ค„๋ฐ”๊ฟˆ ํ•˜๊ธฐ ์œ„ํ•ด์„  ๊ณต๋ฐฑ๋ฌธ์ž(space)๊ฐ€ ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค.

Leading

ํ–‰๊ฐ„(line spacing)์˜ ์Šค์ผ€์ผ ์ˆซ์ž. ๊ธฐ๋ณธ๊ฐ’์€ 1์ด๋ฉฐ, 0 ๊ฐ’์œผ๋กœ ์…‹ํŒ…ํ•˜๋ฉด ํ–‰ ์‚ฌ์ด์˜ ๊ณต๊ฐ„๋„ ์—†์œผ๋ฏ€๋กœ ํ•œ ์ค„๋กœ ํ‘œ์‹œ๋ฉ๋‹ˆ๋‹ค.

Tracking

์ž๊ฐ„(letter spacing)์˜ ์Šค์ผ€์ผ ์ˆซ์ž. ๊ธฐ๋ณธ๊ฐ’์€ 0

Outline

์™ธ๊ณฝ์„ ์˜ ์ƒ‰์ƒ

Outline Alpha

0.0~1.0๊ฐ’ ์‚ฌ์ด์˜ ์™ธ๊ณฝ์„  ์•ŒํŒŒ์ฑ„๋„ ๊ฐ’

Shadow

๊ทธ๋ฆผ์ž์˜ ์ƒ‰์ƒ

Shadow Alpha

0.0~1.0๊ฐ’ ์‚ฌ์ด์˜ ๊ทธ๋ฆผ์ž ์•ŒํŒŒ์ฑ„๋„ ๊ฐ’

Font

๋ผ๋ฒจ์— ์‚ฌ์šฉํ•  ํฐํŠธ ๋ฆฌ์†Œ์Šค

๊ธฐ๋ณธ ๋ฉ”ํ„ฐ๋ฆฌ์–ผ์€ ์„ฑ๋Šฅ์ƒ์˜ ์ด์œ ๋กœ ๊ทธ๋ฆผ์ž(shadow) ๋ Œ๋”๋ง์ด ๋น„ํ™œ์„ฑํ™” ๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.

Alignment

pivot ์†์„ฑ์„ ์„ค์ •ํ•˜์—ฌ ํ…์ŠคํŠธ์˜ ์ •๋ ฌ ๋ฐฉ์‹์„ ์กฐ์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Center

pivot์„ "Center", "North", "South" ๋กœ ์„ค์ •ํ•˜๋ฉด, ํ…์ŠคํŠธ๊ฐ€ ์ค‘์•™ ์ •๋ ฌ๋ฉ๋‹ˆ๋‹ค.

Left

pivot์„ "West" ๋กœ ์„ค์ •ํ•˜๋ฉด, ํ…์ŠคํŠธ๊ฐ€ ์™ผ์ชฝ ์ •๋ ฌ๋ฉ๋‹ˆ๋‹ค.

Right

pivot์„ "East" ๋กœ ์„ค์ •ํ•˜๋ฉด, ํ…์ŠคํŠธ๊ฐ€ ์˜ค๋ฅธ์ชฝ ์ •๋ ฌ๋ฉ๋‹ˆ๋‹ค.

Text alignment

Runtime manipulation

๋Ÿฐํƒ€์ž„์‹œ์— ๋ผ๋ฒจ ํ…์ŠคํŠธ๋ฅผ ์ฝ๊ณ  ์„ค์ •ํ•  ์ˆ˜ ์žˆ์„ ๋ฟ ์•„๋‹ˆ๋ผ ์•„๋ž˜์™€ ๊ฐ™์€ ๋‹ค์–‘ํ•œ ์†์„ฑ์„ ๋‹ค๋ฃฐ ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

color

vector4 ๋ผ๋ฒจ์˜ ์ƒ‰์ƒ

outline

vector4 ๋ผ๋ฒจ์˜ ์™ธ๊ณฝ์„  ์ƒ‰์ƒ

scale

number | vector3 ๋ผ๋ฒจ์˜ ์Šค์ผ€์ผ, ๊ทœ๊ฒฉํ™”๋œ ์Šค์ผ€์ผ์ด๋ผ๋ฉด number ํƒ€์ž…, ๊ฐ xyz ์ถ•์— ๋”ฐ๋ผ ๊ฐœ๋ณ„์ ์œผ๋กœ ์„ค์ •ํ•œ๋‹ค๋ฉด vector3 ํƒ€์ž…

shadow

vector4 ๋ผ๋ฒจ์˜ ๊ทธ๋ฆผ์ž ์ƒ‰์ƒ

size

vector3 ๋ผ๋ฒจ์˜ ํฌ๊ธฐ

function init(self)
    -- ํ˜„์žฌ ์Šคํฌ๋ฆฝํŠธ์™€ ๋™์ผํ•œ ์˜ค๋ธŒ์ ํŠธ์— ์žˆ๋Š” "my_label" ์ปดํฌ๋„ŒํŠธ์˜ ํ…์ŠคํŠธ๋ฅผ ์„ค์ •ํ•จ
    label.set_text("#my_label", "New text")
end
function init(self)
    -- ํ˜„์žฌ ์Šคํฌ๋ฆฝํŠธ์™€ ๋™์ผํ•œ ๊ฒŒ์ž„ ์˜ค๋ธŒ์ ํŠธ์— ์žˆ๋Š” "my_label" ์ปดํฌ๋„ŒํŠธ์˜ ์ƒ‰์ƒ์„ grey๋กœ ์„ค์ •ํ•จ...
    local grey = vmath.vector4(0.5, 0.5, 0.5, 1.0)
    go.set("#my_label", "color", grey)

    -- ...๊ทธ๋ฆฌ๊ณ  ์•ŒํŒŒ๊ฐ’์— 0์„ ์ค˜์„œ ์™ธ๊ณฝ์„  ์‚ญ์ œ...
    go.set("#my_label", "outline.w", 0)

    -- ...๊ทธ๋ฆฌ๊ณ  x์ถ•์œผ๋กœ ํฌ๊ธฐ๋ฅผ 2๋ฐฐ๋กœ ๋Š˜๋ฆผ...
    local scale_x = go.get("#my_label", "scale.x")
    go.set("#my_label", "scale.x", scale_x * 2)
end