안녕하세요. 오이갤에 올렸던 옷갈아 입히기 스크립트가 관리자 인증게시글에 올라서 기쁘네요.
이번에는 제목대로 "두가지 그림을 하나의 옷갈아 입히기 스크립트에 넣기"을 해볼려고 합니다.
글쓰기에 앞서, 이번에 사용한 그림은 "아악"님에게 커미션을 받은것입니다. 사전에 그림 변형 허가를 받은것을 알려드립니다. (몇몇 커미션 하시는 분들은 그림 변형을 허가 하지 않는 경우도 있으니 주의)
이번에 사용할 그림은 2개입니다.
하나는 모자를 쓰고 있고, 하나는 모자를 벗고 있죠.
바리에이션은 모자를 쓴것이 표정 2개, 모자를 벗고 있는것이 표정 3개, 모자안에 과자가 있거나 없거나 이렇게 2개 입니다.
원래대로라면 바리에이션을 하나씩 분해해야 하는데, 이번 커미션 그려주신 분은 표정과 몸통을 따로 분리해준 덕분에 수월하게 진행 할 수 있었습니다.
이렇게요.
이 표정들과 몸통을 따로 하나씩 png로 출력합니다. 그리고 레이어를 보시면 아시겠지만 paper=흰색 배경이 있기 때문에, 이걸 끄고 출력해야 합니다.
출력한 그림들을 업로드용 게시판 혹은 인장 이미지 게시판에 올려줍시다. 저는 아래 링크에 올렸습니다
-------
자 그럼 이제 스크립트 부분입니다.
스크립트는 전에 인증을 받았던 글인 스압) 옷갈아입히기 스크립트를 만들자 3편 (포즈와 옷을 연동시키기) 에 올렸던 스크립트를 활용한것입니다.
이전 스크립트의 경우 장갑을 몸의 움직임에 연동시키기 위해 팔을 올린 그림과 팔을 내린 그림 두가지를 베이스로 올렸는데, 그것을 활용하는겁니다. ( 베이스 스크립트를 2개를 만들어서 버튼을 누르면 한쪽 베이스 스크립트가 비활성화 되고 또한쪽 스크립트가 활성화 되는 식. data-inven-click-css="{'bod1':[{'display':'none'},{'display':'block'}],'bod2':[{'display':'block'},{'display':'none'}]} )
먼저 결과물 부터 보고 갑시다.
----------
스크립트는 아래와 같습니다.
<div style="width: 425px; height:500px;"><div style="width:100%; height:100%;display:block;background:url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16095670198.png)center / 100% no-repeat;" data-inven-id="bod1"><div data-inven-id="face1"style="width:100%;height:100%;background:url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16036174473.png) center / 100% no-repeat;">
</div></div>
<div style="width:100%; height:100%;display:none;background:url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16059579934.png)center / 100% no-repeat;" data-inven-id="bod2">
<div data-inven-id="candy" style="width:100%;height:100%;">
<div data-inven-id="face2"style="width:100%;height:100%;background:url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16056693711.png) center / 100% no-repeat;">
</div></div></div></div>
<div style="width: 100px; 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'}]}"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:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'face1':[{'background':'url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16085670134.png) center / 100% no-repeat'},{'background':'url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16036174473.png) center / 100% no-repeat'}],'face2':[{'background':'url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16037748781.png) center / 100% no-repeat'},{'background':'url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16078918317.png) center / 100% no-repeat'},{'background':'url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16056693711.png) center / 100% no-repeat'}]}"><span style="font-weight:bold;">표정</span></div>
<div style="width: 80px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'candy':[{'background':'url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16008439143.png) center / 100% no-repeat'},{'background':'none'}]}"data-inven-list="li3,li4" data-list-id="li3"><span data-inven-id="li3" style="font-weight:bold;">과자 주기</span><span data-inven-id="li4" 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(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16036174473.png) center / 100% no-repeat'},'face2':{'background':'url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16056693711.png) center / 100% no-repeat'},'bod1':{'display':'block'},'bod2':{'display':'none'},'li1':{'display':'block'},'candy':{'background':'none'},'li2':{'display':'none'},'li3':{'display':'block'},'li4':{'display':'none'}}"><span style="font-weight:bold;">초기화</span></div>
------------------
해설
<div style="width: 425px; height:500px;"><div style="width:100%; height:100%;display:block;background:url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16095670198.png)center / 100% no-repeat;" data-inven-id="bod1"><div data-inven-id="face1"style="width:100%;height:100%;background:url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16036174473.png) center / 100% no-repeat;">
</div></div>
<div style="width:100%; height:100%;display:none;background:url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16059579934.png)center / 100% no-repeat;" data-inven-id="bod2">
<div data-inven-id="candy" style="width:100%;height:100%;">
<div data-inven-id="face2"style="width:100%;height:100%;background:url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16056693711.png) center / 100% no-repeat;">
</div></div></div>
</div>
가장 기본 뼈대가 되는 부분입니다.
모자를 쓴 그림의 아이디는 bod1, 얼굴은 face1 입니다.
모자를 벗은 그림의 아이디는 bod2, 얼굴은 face2, 과자의 아이디는 candy 입니다. 과자는 모자를 벗은 그림에만 보이므로 여기에만 넣어줍니다.
-----
div style="width: 100px; 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'}]}"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:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'face1':[{'background':'url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16085670134.png) center / 100% no-repeat'},{'background':'url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16036174473.png) center / 100% no-repeat'}],'face2':[{'background':'url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16037748781.png) center / 100% no-repeat'},{'background':'url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16078918317.png) center / 100% no-repeat'},{'background':'url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16056693711.png) center / 100% no-repeat'}]}"><span style="font-weight:bold;">표정</span></div>
<div style="width: 80px; height:18px; margin:5px; float: left; background-color:yellow; border-radius: 5px;text-align:center;" data-inven-click-css="{'candy':[{'background':'url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16008439143.png) center / 100% no-repeat'},{'background':'none'}]}"data-inven-list="li3,li4" data-list-id="li3"><span data-inven-id="li3" style="font-weight:bold;">과자 주기</span><span data-inven-id="li4" 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(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16036174473.png) center / 100% no-repeat'},'face2':{'background':'url(https://upload2.inven.co.kr/upload/2018/04/05/bbs/i16056693711.png) center / 100% no-repeat'},'bod1':{'display':'block'},'bod2':{'display':'none'},'li1':{'display':'block'},'candy':{'background':'none'},'li2':{'display':'none'},'li3':{'display':'block'},'li4':{'display':'none'}}"><span style="font-weight:bold;">초기화</span></div>
스크립트 입니다.
이 부분들은 지난번에 제가 썼던 글들을 참고해주시기 바랍니다.
li1, li2 이렇게 되어 있는건 눌렀을때 나타날 글자의 아이디입니다. block=표시, none=비표시 입니다.
에노히
에노히
