Spine nodes - kuimoani/defold GitHub Wiki

GUI Spine nodes

κ²Œμž„ μ˜€λΈŒμ νŠΈμ—μ„œ 뿐만 μ•„λ‹ˆλΌ GUI μ• λ‹ˆλ©”μ΄μ…˜μ—μ„œλ„ 슀파인 λ³Έ μ• λ‹ˆλ©”μ΄μ…˜μ„ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 이 맀뉴얼은 GUI μ”¬μ—μ„œ 슀파인 μ• λ‹ˆλ©”μ΄μ…˜ 데이터λ₯Ό μž„ν¬νŠΈν•˜λŠ” 방법을 μ„€λͺ…ν•©λ‹ˆλ‹€.

ν˜„μž¬, 슀파인 λ…Έλ“œλŠ” 슀파인 이벀트λ₯Ό μ§€μ›ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. SpineModel κ²Œμž„ μ˜€λΈŒμ νŠΈλŠ” μ• λ‹ˆλ©”μ΄μ…˜ νƒ€μž„λΌμΈμ˜ 이벀트λ₯Ό ν¬ν•¨ν•˜κ³  κ²Œμž„μ˜€λΈŒμ νŠΈμ— λ©”μ„Έμ§€λ₯Ό 전솑할 수 μžˆμ§€λ§Œ 슀파인 λ…Έλ“œμ—μ„œλŠ” μ§€μ›λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

μž„ν¬νŠΈλœ 슀파인 λ³Έ μ• λ‹ˆλ©”μ΄μ…˜(Spine bone animation)은 κ²Œμž„ 였브젝트 뿐 μ•„λ‹ˆλΌ GUI μ”¬μ—μ„œλ„ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€(SpineModel μ»΄ν¬λ„ŒνŠΈλ₯Ό ν†΅ν•΄μ„œ). Defoldμ—μ„œ 슀파인 λ³Έ μ• λ‹ˆλ©”μ΄μ…˜μ„ λ™μž‘μ‹œν‚€κΈ° μœ„ν•΄, λ¨Όμ € μ• λ‹ˆλ©”μ΄μ…˜ 데이터λ₯Ό μž„ν¬νŠΈν•˜κ³  슀파인 씬(Spine Scene) λ¦¬μ†ŒμŠ€λ₯Ό μ„€μ •ν•΄μ•Ό ν•©λ‹ˆλ‹€. 이λ₯Ό μœ„ν•œ μ„€λͺ…은 [Spine animation](Spine animation) λ¬Έμ„œλ₯Ό μ°Έκ³ ν•˜μ‹œκΈ° λ°”λžλ‹ˆλ‹€.

GUI μ”¬μ—μ„œ 슀파인 씬 λ¦¬μ†ŒμŠ€μ˜ 컨텐츠λ₯Ό μ‚¬μš©ν•˜λ €λ©΄, Outline 창의 Spine Scenes 폴더에 마우슀 였λ₯Έμͺ½ λ²„νŠΌμ„ 눌렀 Add Spine Scene 메뉴λ₯Ό μ„ νƒν•˜κ³  μ‚¬μš©ν•˜λ €λŠ” 슀파인 씬을 μ„ νƒν•©λ‹ˆλ‹€.

Add Spine Scene

Added Spine Scene

이제 슀파인 λ…Έλ“œλ₯Ό λ§Œλ“€λ©΄(Outline 창의 Nodes 폴더에 마우슀 였λ₯Έμͺ½ λ²„νŠΌ λˆ„λ₯΄κ³  Add Spine Node 선택) 그에 λ”°λ₯Έ μƒˆ 슀파인 λ…Έλ“œμ˜ ν”„λ‘œνΌν‹°λ“€μ„ μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

Spine node

Spine Scene

이 λ…Έλ“œμ˜ 데이터 μ†ŒμŠ€λ‘œ μ‚¬μš©ν•  슀파인 씬

Spine Default Animation

씬이 μ΄ˆκΈ°ν™” 될 λ•Œ μžλ™μ μœΌλ‘œ μž¬μƒν•  μ• λ‹ˆλ©”μ΄μ…˜

Skin

씬이 μ΄ˆκΈ°ν™” 될 λ•Œ μ• λ‹ˆλ©”μ΄μ…˜μ— μ‚¬μš©ν•  μŠ€ν‚¨

Runtime animation control

슀파인 λ…Έλ“œλŠ” 슀크립트λ₯Ό 톡해 λŸ°νƒ€μž„μ‹œ μ œμ–΄ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ…Έλ“œμ—μ„œ μ• λ‹ˆλ©”μ΄μ…˜μ„ μ‹œμž‘ν•˜λ €λ©΄ gui.play_spine() ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•˜κΈ°λ§Œ ν•˜λ©΄ λ©λ‹ˆλ‹€.

local catnode = gui.get_node("cat_note")
local blend_time = 0.3
gui.play_spine(catnode, hash("run"), gui.PLAYBACK_ONCE_FORWARD, blend_time, function(self, node)
    print("Animation done!")
end)

The bone hierarchy

슀파인 μŠ€μΌˆλ ˆν†€μ—μ„œ 뼈 각각은 GUI λ…Έλ“œλ‘œ μ‘΄μž¬ν•˜κ²Œ λ©λ‹ˆλ‹€. 이 λ…Έλ“œλ“€μ€ 슀파인 μ„€μ •μ—μ„œ μ§€μ •λœ 이름에 따라 μ§€μ–΄μ§‘λ‹ˆλ‹€.

Spine bone names

예λ₯Ό λ“€μ–΄, μ–΄λ–€ λ…Έλ“œλ₯Ό λ‹€λ₯Έ λ³Έ λ…Έλ“œμ— μ—°κ²°ν•˜λ €λ©΄, gui.get_spine_bone() λ₯Ό μ‚¬μš©ν•˜μ—¬ ν•˜μœ„μ˜ λ³Έ λ…Έλ“œλ₯Ό μ΄λ¦„μœΌλ‘œ μ‘°νšŒν•΄μ„œ μžμ‹ λ…Έλ“œλ‘œ μ—°κ²°ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

-- text λ…Έλ“œλ₯Ό cat의 tail에 연결함
local cat = gui.get_node("cat_node")
local textnode = gui.new_text_node(vmath.vector3(400, 0, 0), "Hello tail!")
local tail = gui.get_spine_bone(cat, "tail")
gui.set_parent(textnode, tail)

λ˜ν•œ λͺ¨λ“  본은 슀파인 λ…Έλ“œμ˜ 이름과 "/"λ₯Ό μ ‘λ‘μ–΄λ‘œ μ‚¬μš©ν•˜μ—¬ go.get_node() 둜 μ ‘κ·Ό κ°€λŠ₯ν•©λ‹ˆλ‹€.

-- text λ…Έλ“œλ₯Ό cat의 tail에 연결함
local textnode = gui.new_text_node(vmath.vector3(400, 0, 0), "Hello tail!")
local tail = gui.get_node("cat_node/tail")
gui.set_parent(textnode, tail)