참고글:

자, 이번에는 포즈를 바꿔도 특정 그림이 그 포즈에 따라가도록 합시다. 근데 기존의 스크립트로는 이게 불가능 합니다. 예시를 위해 일단 먼저 이걸 인벤녀한테 끼웁시다. 


.... 고무 장갑이에요.  김치 담글때 쓰는거.

끼웁시다. 일단. 장갑 버튼을 눌러주세요.


몸
눈썹
입
분위기
수증기
하트
장갑
초기화











네, 보시면 아시겠지만, 이런식으로 몸과 장갑이 따로 놉니다. 포즈를 바꾸면 장갑도 다시 눌러줘야 해요.

이번에는 연동시켜봅시다.



몸
눈썹
입
분위기
수증기
하트
비표시표지
초기화



----------------------------------------
짠! 잘 되네요! 스크립트를 봅시다!
--------------------------------------



<div style="width: 450px; height:450px;">

<div style="width:100%; height:100%;display:block;background:url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15908101704.png)center / 100% no-repeat;" data-inven-id="bod1">
<div style="width: 100%; height:100%;" data-inven-id="AAA">
<div data-inven-id="face1"style="width:100%;height:100%;background:url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15997994522.png) center / 100% no-repeat;">
<div data-inven-id="face2"style="width:100%;height:100%;background:url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15971786767.png) center / 100% no-repeat;">
<div data-inven-id="bunwigi" style="width:100%;height:100%;">
<div data-inven-id="suzungi" style="width:100%;height:100%;">
<div data-inven-id="hat" style="width:100%;height:100%;">
</div></div></div></div></div></div></div>

<div style="width:100%; height:100%;display:none;background:url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15956295155.png)center / 100% no-repeat;" data-inven-id="bod2">
<div style="width: 100%; height:100%;" data-inven-id="BBB">
<div data-inven-id="face1"style="width:100%;height:100%;background:url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15997994522.png) center / 100% no-repeat;">
<div data-inven-id="face2"style="width:100%;height:100%;background:url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15971786767.png) center / 100% no-repeat;">
<div data-inven-id="bunwigi" style="width:100%;height:100%;">
<div data-inven-id="suzungi" style="width:100%;height:100%;">
<div data-inven-id="hat" style="width:100%;height:100%;">
</div></div></div></div></div></div></div>

</div>


<div style="width: 60px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'bod1':[{'display':'none'},{'display':'block'}],'bod2':[{'display':'block'},{'display':'none'}]}"><span style="font-weight:bold;">몸</span></div>

<div style="width: 60px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'face1':[{'background':'url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15914721135.png) center / 100% no-repeat'},{'background':'url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15997994522.png) center / 100% no-repeat'}]}"><span style="font-weight:bold;">눈썹</span></div>

<div style="width: 60px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'face2':[{'background':'url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15928887123.png) center / 100% no-repeat'},{'background':'url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15971786767.png) center / 100% no-repeat'}]}"><span style="font-weight:bold;">입</span></div>

<div style="width: 60px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'bunwigi':[{'background':'url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15912963868.png) center / 100% no-repeat'},{'background':'none'}]}"><span style="font-weight:bold;">분위기</span></div>

<div style="width: 60px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'suzungi':[{'background':'url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15991610072.png) center / 100% no-repeat'},{'background':'none'}]}"><span style="font-weight:bold;">수증기</span></div>

<div style="width: 60px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'hat':[{'background':'url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15971244886.png) center / 100% no-repeat'},{'background':'none'}]}"><span style="font-weight:bold;">하트</span></div>

<div style="width: 60px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'AAA':[{'background':'url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15992994562.png) center / 100% no-repeat'},{'background':'none'}],'BBB':[{'background':'url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15979216242.png) center / 100% no-repeat'},{'background':'none'}]}" data-inven-list="li1,li2" data-list-id="li1"><span data-inven-id="li1" style="font-weight:bold;">비표시</span><span data-inven-id="li2" style="font-weight:bold;display:none;">표지</span></div>

<div style="width: 60px; height:18px; margin:5px; float: left; background-color: lightblue; border-radius: 5px;text-align:center;" data-inven-click-css="{'face1':{'background':'url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15997994522.png) center / 100% no-repeat'},'face2':{'background':'url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15971786767.png) center / 100% no-repeat'},'bunwigi':{'background':'none'},'suzungi':{'background':'none'},'hat':{'background':'none'},'AAA':{'background':'none'},'BBB':{'background':'none'},'bod1':{'display':'block'},'bod2':{'display':'none'},'li1':{'display':'block'},'li2':{'display':'none'}}"><span style="font-weight:bold;">초기화</span></div>

------------------------------------------------------

먼저 레이어 블록 부터

<div style="width:100%; height:100%;display:block;background:url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15908101704.png)center / 100% no-repeat;" data-inven-id="bod1">
<div style="width: 100%; height:100%;" data-inven-id="AAA">
<div data-inven-id="face1" style="width:100%;height:100%;background:url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15997994522.png) center / 100% no-repeat;">
<div data-inven-id="face2" style="width:100%;height:100%;background:url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15971786767.png) center / 100% no-repeat;">
<div data-inven-id="bunwigi" style="width:100%;height:100%;">
<div data-inven-id="suzungi" style="width:100%;height:100%;">
<div data-inven-id="hat" style="width:100%;height:100%;">
</div></div></div></div></div></div></div>

<div style="width:100%; height:100%;display:none;background:url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15956295155.png)center / 100% no-repeat;" data-inven-id="bod2">
<div style="width: 100%; height:100%;" data-inven-id="BBB">
<div data-inven-id="face1" style="width:100%;height:100%;background:url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15997994522.png) center / 100% no-repeat;">
<div data-inven-id="face2" style="width:100%;height:100%;background:url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15971786767.png) center / 100% no-repeat;">
<div data-inven-id="bunwigi" style="width:100%;height:100%;">
<div data-inven-id="suzungi" style="width:100%;height:100%;">
<div data-inven-id="hat" style="width:100%;height:100%;">
</div></div></div></div></div></div></div>

</div>


보시면 아시겠지만, 기존의 스크립트랑 다른 부분은 

<div style="width:100%; height:100%;display:block;background:url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15908101704.png)center / 100% no-repeat;" data-inven-id="bod1">
<div style="width: 100%; height:100%;" data-inven-id="AAA">

랑

<div style="width:100%; height:100%;display:none;background:url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15956295155.png)center / 100% no-repeat;" data-inven-id="bod2">
<div style="width: 100%; height:100%;" data-inven-id="BBB">

입니다.

첫번째는 팔을 닫은 포즈고, 또 하나는 팔을 편 포즈 입니다. 나머지 부분은 같습니다. 포즈를 2개에서 3개로 늘릴려면 CCC, bod3 로 해서 스크립트를 더 추가하면 되겠죠? 물론 나머지 부분을 넣는걸 잊지 마세요.

소스 구조는 

<포즈 1>
<장갑AAA>
</포즈 1>

<포즈 2>
<장갑BBB>
</포즈 2>

<신발 ="AAA, BBB, 버튼 리스트">
<장 버튼 리스트>
</장갑>

<자세 ="포즈 1 (숨김/표시), 포즈 2 (표시/숨김)">

입니다.

....솔직히 저도 이 부분은 뭐라 설명해야 할 지 모르겠네요.


---------------------------------
다음은 버튼 부분입니다.


<div style="width: 60px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'bod1':[{'display':'none'},{'display':'block'}],'bod2':[{'display':'block'},{'display':'none'}]}"><span style="font-weight:bold;">몸</span></div>

이건 몸의 포즈를 바꾸는 버튼입니다. 누르면 처음 포즈를 비표시 하고({'display':'none'}) 두번째 포즈를 표시 합니다.({'display':'block'}). 다시 누르면 처음 포즈를 표시하고, 두번째 포즈를 비표시 합니다.

만약 포즈가 3개라면 

{
'bod1':[{'display':'none'},{'display':'none'},{'display':'block'}],
'bod2':[{'display':'block'},{'display':'none'},{'display':'none'}],
'bod3':[{'display':'none'},{'display':'block'},{'display':'none'}]
}

가 되겠죠? (처음부터 포즈1이 있으므로, 눌렀을때 포즈2가 나오고, 그 다음 포즈3, 마지막으로 포즈1이 다시 나오도록 합니다.)



<div style="width: 60px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'AAA':[{'background':'url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15992994562.png) center / 100% no-repeat'},{'background':'none'}],'BBB':[{'background':'url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15979216242.png) center / 100% no-repeat'},{'background':'none'}]}" data-inven-list="li1,li2" data-list-id="li1"><span data-inven-id="li1" style="font-weight:bold;">비표시</span><span data-inven-id="li2" style="font-weight:bold;display:none;">표지</span></div>

이 버튼 스크립트는 장갑을 표시/비표시하는 버튼의 스크립트입니다. 

처음 레이어 스크립트를 보면 아시겠지만, bod1이랑 AAA가 같이 있고, bod2와 BBB가 같이 있죠? 처음 몸의 포즈를 바꾸는 버튼을 누르면 bod2와 BBB가 표시되는 상태가 됩니다. 아직 이 상태에서는 장갑이 표시되지 않지만, 이 버튼을 누르면 장갑을 표시합니다. 

만약에 포즈가 3개라면
AAA-BBB-CCC가 되고

같은 포즈에서 색깔을 바꾸는 거라면(비표시-빨간색 장갑-초록색 장갑)
[{'background':'url(빨간색 장갑 이미지 주소) center / 100% no-repeat'},{'background':'url(초록색 장갑 이미지 주소) center / 100% no-repeat',{'background':'none'}]
가 되고(비표시가 기본 상태이므로 눌렀을때 빨-초-비표시 가 되게 해야됨),

여기에 추가로 버튼를 (비표시-빨간색-초록색) 로 바꿔줘야 합니다. 비표시는 기본 상태입니다!

data-inven-list="li1,li2" data-list-id="li1"><span data-inven-id="li1" style="font-weight:bold;">비표시</span><span data-inven-id="li2" style="font-weight:bold;display:none;">표지</span></div>

를

data-inven-list="li1,li2,li3" data-list-id="li1"><span data-inven-id="li1" style="font-weight:bold;">비표시</span><span data-inven-id="li2" style="font-weight:bold;display:none;">빨간색</span><span data-inven-id="li3" style="font-weight:bold;display:none;">초록색</span></div>

으로 바꿔줍시다.

지금 이 스크립트에서 버튼의 상태는 현재 보여주고 있는 이미지의 상태이므로(비표시 버튼은 지금 옷갈아입히기에서 장갑을 안보여주고 있다는것), 취향에 따라서 (빨간색으로 바꾸기-초록색으로 바꾸기-비표시 하기) 로 바꿔도 되겠죠? 물론 이 경우 버튼의 이름 말고는 건드려선 안됩니다.

-----------------------
마지막으로 초기화 버튼입니다.

<div style="width: 60px; height:18px; margin:5px; float: left; background-color: lightblue; border-radius: 5px;text-align:center;" data-inven-click-css="{'face1':{'background':'url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15997994522.png) center / 100% no-repeat'},'face2':{'background':'url(http://upload2.inven.co.kr/upload/2017/12/02/bbs/i15971786767.png) center / 100% no-repeat'},'bunwigi':{'background':'none'},'suzungi':{'background':'none'},'hat':{'background':'none'},'AAA':{'background':'none'},'BBB':{'background':'none'},'bod1':{'display':'block'},'bod2':{'display':'none'},'li1':{'display':'block'},'li2':{'display':'none'}}"><span style="font-weight:bold;">초기화</span></div>



음... AAA, BBB (장갑)을 비표지 하고, 포즈1(bod1)을 표시, 포즈2(bod2)를 비표시 합니다. 더 추가하실거면 아시죠?
CCC, bod3, li3 를 추가해주시면 됩니다.
--------------------------------------

그리고 마지막으로 이 연동되는 스크립트를 보시면 아시겠지만, 버튼이 옷갈아입히기를 넘었습니다. 

원하신다면


이것처럼 버튼 부분의 스크립트를 강재 개행 시켜주세요. 그러면



이렇게 표시됩니다.

다만 인장에 넣으실때는 걱정 안하셔도 됩니다. 인장을 넘지 않고 알아서 조정되니깐요.




아! 그리고 제일 중요한건데, 만약 동일한 게시글, 혹은 인장에 여러 옷갈아입히기 스크립트를 넣을 경우, 각 스크립트의 id를 다르게 해주셔야 합니다! 안그러면 서로에게 영향을 줘서 엉망징창이 됩니다.

gif를 옷갈아 입히기에 사용하기 등도 좀 생각해 봤는데, 가능은 할겁니다, 다만 무지 복잡해서 그렇지...



일단 옷갈아입히기 관련 설명은 이걸로 마춥니다, 봐주셔서 Thank♂ you♂ sir♂