[NDC14] 라이브중인 2D게임에 시스템 변경 없이 본 애니메이션 도입하기[던전앤파이터]
•Descargar como PPTX, PDF•
4 recomendaciones•4,809 vistas
![라이브중인 2D게임에 시스템
변경 없이 본 애니메이션
도입하기[던전앤파이터]
네오플 던파개발실
이승원](https://image.slidesharecdn.com/v7-140602220436-phpapp01/85/NDC14-2D-1-320.jpg)
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Similar a [NDC14] 라이브중인 2D게임에 시스템 변경 없이 본 애니메이션 도입하기[던전앤파이터]
Similar a [NDC14] 라이브중인 2D게임에 시스템 변경 없이 본 애니메이션 도입하기[던전앤파이터] (20)
[NDC14] 라이브중인 2D게임에 시스템 변경 없이 본 애니메이션 도입하기[던전앤파이터]
- 1. 라이브중인 2D게임에 시스템 변경 없이 본 애니메이션 도입하기[던전앤파이터] 네오플 던파개발실 이승원
- 2. 이 승 원 2010-2011 UCENT 프로그래머 2011 – 현재 네오플 던전앤파이터 클라이언트개발자 발표자 소개
- 3. 발표 내용 소개
- 4. 본 애니메이션이란
- 6. 던전앤파이터에서 이미지를 사용하는 방식
- 7. 던전앤파이터에서 이미지를 사용하는 방식
- 8. [FRAME000] [IMAGE] `Monster/Tau/Body.img` 0 [IMAGE POS] -219 -337 [IMAGE RATE] 1.0 1.0 [IMAGE ROTATE] 1.570796 [DELAY] 80 [FRAME000] [IMAGE] `Monster/Tau/Body.img` 1 [IMAGE POS] -219 -337 [IMAGE RATE] 1.0 1.0 [IMAGE ROTATE] 1.570796 [DELAY] 80 던전앤파이터에서 이미지를 사용하는 방식
- 9. 본 애니메이션을 도입하게 된 이유
- 10. 본 애니메이션을 도입하게 된 이유
- 11. 본 애니메이션을 도입하게 된 이유
- 12. 본 애니메이션을 도입하게 된 이유
- 13. 1116 * 783 본 애니메이션을 도입하게 된 이유
- 14. 533*521 본 애니메이션을 도입하게 된 이유
- 15. Spine? 본 애니메이션을 도입하게 된 이유
- 16. 본 애니메이션을 도입하게 된 이유
- 17. 본 애니메이션을 도입하게 된 이유
- 18. 본 애니메이션을 도입하게 된 이유
- 19. [FRAME000] [IMAGE] `Monster/Tau/Body.img` 0 [IMAGE POS] -219 -337 [IMAGE RATE] 1.0 1.0 [DELAY] 80 [FRAME001] [IMAGE] `Monster/Tau/Body.img` 1 [IMAGE POS] -219 -337 [IMAGE RATE] 1.0 1.0 [DELAY] 300 [FRAME000] [IMAGE] `Monster/Tau/Weapon.img` 0 [IMAGE POS] -219 -337 [IMAGE RATE] 1.0 1.0 [DELAY] 80 [FRAME001] [IMAGE] `Monster/Tau/Weapon.img` 1 [IMAGE POS] -219 -337 [IMAGE RATE] 1.0 1.0 [DELAY] 300 [FRAME000] [IMAGE] `Monster/Tau/Pants.img` 0 [IMAGE POS] -219 -337 [IMAGE RATE] 1.0 1.0 [DELAY] 80 [FRAME001] [IMAGE] `Monster/Tau/Pants.img` 1 [IMAGE POS] -219 -337 [IMAGE RATE] 1.0 1.0 [DELAY] 300 본 애니메이션을 도입하게 된 이유
- 20. 본 애니메이션을 도입하게 된 이유
- 21. 본 애니메이션을 도입하게 된 이유
- 22. 본 애니메이션을 도입하게 된 이유
- 23. 본 애니메이션을 도입하게 된 이유
- 24. 본 애니메이션을 도입하게 된 이유
- 25. 본 애니메이션을 도입하게 된 이유
- 26. 작업을 시작해 보자!
- 27. 작업을 시작해보자
- 28. 작업을 시작해보자
- 29. ● Spine 데이터 분석 ● Parsing ● 계산 – ★ Bone 계산 ★ Skin 계산 ● 적용
- 30. ●Spine 데이터 분석
- 34. bones,slots, skins ,animations "body_under_chain ": { "Image/body_under_chain"{ "x":96.53, "y":-148.73, "rotation":-90.45, "width":611, "height":274 }} ●Spine 데이터 분석
- 36. ● Spine 데이터 분석 ● Parsing ● 계산 – ★ Bone 계산 ★ Skin 계산 ● 적용
- 37. 파서를 만들자. Json파서 많이 있네 ●Parsing
- 38. Key = 0.0f, rotate = 0; Key = 1.0f, rotate = 90; <0.0f, 0> <0.1f, 9> <0.2f, 18> <0.3f, 27> <0.4f, 36> <0.5f, 45> <0.6f, 54> <0.7f, 63> <0.8f, 72> <0.9f, 81> <1.0f, 90> ●Parsing
- 39. Class BoneClass { ... … SortedList<float, pair<float, float>> TranslateTimeList; SortedList<float, pair<float, float>> ScaleTimeList; SortedList<float, float> RotateTimeList;. Float AnimationX,AnimationY; Float AnimationScaleX,AnimationScaleY; Float AnimationRotation; } 이따가 쓸라고 ●Parsing
- 41. ● Spine 데이터 분석 ● Parsing ● 계산 – ★ Bone 계산 ★ Skin 계산 ● 적용
- 42. SPINE에서 좌표계 던파에서 좌표계 ●계산 - ★Bone 계산
- 43. currentPositionX -= (float)(currentImage.Width * 0.5); currentPositionY -= (float)(currentImage.Height * 0.5); SPINE에서 좌표계 던파에서 좌표계 ●계산 - ★Bone 계산
- 44. for(해당 애니메이션 시간대저장한것을 돌아준다.) [0.1,0.2,0.3,0.4……..0.9,1.0] { } 모든 boneClass에 대해서 boneData.AnimationX = boneData.X + boneData.TranslateTimeList[timeKey].x; boneData.AnimationY = boneData.Y + boneData.TranslateTimeList[timeKey].y; boneData.AnimationRotation = boneData.Rotation + boneData.RotateTimeList[timeKey]; boneData.AnimationScaleX = boneData.ScaleX * boneData.ScaleTimeList[timeKey].ScaleX; boneData.AnimationScaleY = boneData.ScaleY * boneData.ScaleTimeList[timeKey].ScaleY; 해당하는 애니메이션타임에 맞는 값 넣어주는것 ●계산 - ★Bone 계산
- 45. for(해당 애니메이션 시간대저장한것을 돌아준다.) [0.1,0.2,0.3,0.4……..0.9,1.0] { } for(모든 Slot을 돌면서) { List<boneClass> boneList; 최상단부모부터 차례대로 정렬 } ●계산 - ★Bone 계산
- 46. ●계산 - ★Bone 계산
- 47. float currentPositionX = 0; float currentPositionY = 0; float currentScaleX = 1; float currentScaleY = 1; float currentRotation = 0; //뼈로인한회전값계산 for (최상단 부모에서부터 차례대로 쭈욱) { … ... currentPositionX += (float)((cosValue * tempX) + (sinValue * tempY)); currentPositionY -= (float)(-(sinValue * tempX) + (cosValue * tempY)); currentScaleX *= boneData.AnimationScaleX; currentScaleY *= boneData.AnimationScaleY; currentRotation += boneData.AnimationRotation; if (currentRotation > 360) currentRotation -= 360; if (currentRotation < 0) currentRotation += 360; } ●계산 - ★Bone 계산
- 48. ● Spine 데이터 분석 ● Parsing ● 계산 – ★ Bone 계산 ★ Skin 계산 ● 적용
- 49. ●계산 - ★Bone 계산
- 50. 선회전 들어간 이미지 작업. [IMAGE ROTATE] 0.785398 SRT RST ●계산 - ★Bone 계산
- 51. 추가로 필요한 값 NonUniformScale 값. [IMAGE ROTATE] 0.785398 [NON UNIFORM SCALE] 0.1 2 0.5 ●계산 - ★Bone 계산
- 52. //이미지의 맞는 좌표의계산 NonUniformRotateAngle = 360 - currentImage.Rotation; NonUniformWidthRate = currentScaleX; NonUniformHeightRate = currentScaleY; currentPositionX += (float)((cosValue * skin.PosX) - (sinValue * skin.PosY)); currentPositionY -= (float)((sinValue * skin.PosX) + (cosValue * skin.PosY)); currentPositionX -= (float)(currentImage.Width * 0.5); currentPositionY -= (float)(currentImage.Height * 0.5); ●계산 - ★Bone 계산
- 53. ● Spine 데이터 분석 ● Parsing ● 계산 – ★ Bone 계산 ★ Skin 계산 ● 적용
- 54. ●적용
- 55. ●적용
- 56. ●적용
- 57. ●적용
- 58. Spine 좌표계기준 ●적용
- 61. ● Spine 데이터 분석 ● Parsing ● 계산 – ★ Bone 계산 ★ Skin 계산 ● 적용
- 62. 던전앤파이터 로컬 좌표계기준 double tempX = -(currentImage.Width * 0.5) + centerX[frameAni.ImageIndexNumber]; double tempY = -(-(currentImage.Height * 0.5) + centerY[frameAni.ImageIndexNumber]); double tempX2 = (float)((cosValue * tempX) - (sinValue * tempY)); double tempY2 = (float)((sinValue * tempX) + (cosValue * tempY)); tempX = currentImage.X + tempX2; tempY = -(currentImage.Y + tempY2); ●계산 - ★Skin 계산
- 63. { double degree = -currentRotation * Math.PI / 180; sinValue = Math.Sin(degree); cosValue = Math.Cos(degree); currentPositionX += (float)((cosValue * tempX) - (sinValue * tempY)); currentPositionY -= (float)((sinValue * tempX) + (cosValue * tempY)); } currentPositionX -= centerX[frameAni.ImageIndexNumber]; currentPositionY += centerY[frameAni.ImageIndexNumber]; ●계산 - ★Skin 계산
- 64. ● Spine 데이터 분석 ● Parsing ● 계산 – ★ Bone 계산 ★ Skin 계산 ● 적용
- 65. ●적용
- 66. ●적용
- 67. ●정리 이미지 생성작업 애니메이션 작업 던파에 적용 큰이미지 직접그릴경우 여러이미지 혼합해서사용할경우
- 69. 회전값 : -10, 350, 10 좌표계 ●이런 함정이!!! 신경쓸것!!!
- 70. 결론!!!!!
- 71. 결론 개발 : Not Difficult! 디자인작업 : Fast!!!
- 72. Thanks 감사합니다.
- 73. Q & A
Notas del editor
- 안녕하세요 유센트라는 벤처회사에서 1년가량 고생하다가 네오플에 2011년에 사해 툴프로그래밍 1년가량하고 현재는 클라이언트 개발하고있는 이승원이라고 합니다. 제가 아직까지 발표경험이 많이 없어서 부족하고 진행이 서툴더라도 넓은 마음으로 이해해주시고 넘어가 주셨으면 좋겠습니다. 발표하기에 앞서 절 게임업계로 이끌어주신 김상규 교수님과 이런 기회를 주신 덕원직군장님, 오늘 패치날인데 저대신 자리에서 고생하고 있을 팀원들에게 감사하다는 말씀 드리고 싶습니다.
- 발표내용은 우측상단에 있는 스파인이라는 툴을 이용해 하단에 있는 사진의 던파 클라이언트로 적용시키기까지 어떻게 했는지 어떤걸 실수했었는지에 대해서 공유드리는 시간을 갖도록 하려고 합니다.
- 본애니메이션이란 다들 아시리라 생각하고 해당 작업이 3D에선 일반적으로 사용되지만 2D에서도 적용시킬 수 있고 약간 다르게 적용되어야 하는점에 대해서 이야기해보려고 합니다.
- 약간의 사전지식이 필요할것 같아서 현재 라이브서비스중인 던전앤파이터에서 사용하고있는 방식에대해서 간단히만 설명하고 넘어가도록 하겠습니다.
- 던전앤파이터에서는 한 이미지 파일에 여러 이미지를 넣어서 인덱싱으로 관리해서 사용하고 있습니다. 이런식으로 한이미지에서 0,1,2,3,4번 이미지를 이용해서 그려주기도 하고
- 이런식으로 여러 이미지를 겹쳐서 몬스터를 구성하기도 합니다. 물론 스킬에서도 여러이미지가 복합적으로 나오구요. 이런경우는 몬스터 색배리 하거나 패턴으로 여러 몬스터 만들기 위할때 쓰입니다. 대표적으로 아바타도 굉장히 많은 이미지가 같이 어우러져서 나오는 이미지이구요.
- 방금전과 같이 여러개의 이미지를 불러들일때 어떻게 하느냐 스크립트에서 이런식으로 이미지파일, 인덱스, 좌표 크기, 딜레이 이런것들 설정해서 같이 보여줘서 여러이미지를 알맞게 보여주게 됩니다. 그냥 이미지 정보가 스크립트로 빠져있구나.. 이렇게만 알고 넘어가시면 됩니다.
- 저 스크립트를 만드는건 툴을 이용해서 만들거나 메모장을 이용해서 하는데 그 애니메이션을 만들어주는 툴을 편의상 던파 애니메이션편집툴이라고 부를께요. 몬스터의 경우 간단하게 적용되지만 스킬애니메이션같은경우 회전이나 투명도같은게 많이 복잡해지기도 합니다. 해당스크립트가요.
- 자 본애니메이션을 도입하게 된 이유에 대해서 간단히 설명드릴께요
- 흑요정 묘지에 저런 봉인된 사룡이 있었어요 작년 9월에 대규모 업데이트 대전이가 있었는데 이때 사슬에 묶여있던 용이 봉인이 풀렸다. 그런 컨셉으로 몬스터기획이 정해졌습니다. 그런데 머리만해도 캐릭터보다 더 큰몬스터였는데
- 이만한 크기의 몬스터를 작업해야 되게 되어버린거죠. 아까 통짜 이미지로 작업하자니 작업엄두도 사실 안나고 잘라서 작업해도 이거 좌표맞춰주고 하고 하다보면 너무 시간이 딜레이 되었을꺼라고 생각이 됩니다.
- 물론 날개쪽과 팔사이에 빈공간이 있긴 하지만 그렇다고 하더라도 이해해주시고 1100*780픽셀의 그림을 그려야하는거죠 몸같은경우 패턴이 꼬리치기 서있기 이정도? 였다고 하면 20프레임을 그려줘야됩니다.
- 머리랑 몸통이랑 따로 작업을 해줬었는데 머리의 경우 불뿜는거, 뿔로 찌르기 소리지르기, 맞는 모션, 죽는모션 10개정도 있더라구요 어림잡아 100프레임 정도 해야되더라구요 저상태에서 머리 1도정도 살짝움직인거 그리고 그리고 그리고.. 아무튼 그래서 도저히 이건 아 이대로는 작업 못하겠다. 라고 생각을 하셨더라구요.. 물론 제가 그런생각 한건 아니에요.
- 아무튼 전 그당시 다른작업을 하고있었는데 컨텐츠 개발 프로그램파트장님께서 부르셔서 스파인이란 툴이있는데 기능이 괜찮다..라고 설명을 해주셨어요. 스파인이 어떤 툴인지 간단히 설명드리면 왼쪽에 있는 이미지를 보시면 아시겠지만 시간별로 뼈의 회전,크기조절해주고 그게 적용되서 이미지로 뽑을수 있는 툴입니다. 큰몬스터 통째로 해서 이미지뽑으면 되지 않느냐? 라고 생각할 수 있지만 이미지 리소스가 엄청 먹을테니까요… 100프레임이면 800*600정도 이미지를 100장 로드해서 가지고 있… 어우 던파 렉걸리는 소리가 여기까지 들리네요. 아 이거 나름 개그였는데.. 헤헤.. 아무튼 스파인이 이런툴이에요 스파인말고도 본에니메이션 해주는 툴 여러 개 잇는걸로 알고있어요 뭐 스파인광고하러 온거 아니니까 이정도 하고 넘어갈께요
- 그런식으로 막 설명해주시는데 정말 딱 이느낌이었어요. 던전만드느라 바쁜데 왜 나한테 스파인이 좋다 이런걸 가르쳐주시지?
- 부끄럽지만 아까 살짝 보여드린 애니메이션 편집툴이 제가 만든 툴인데 그이전에는 물론 툴은 있었지만 디자이너가 불편하다고 해서 디자이너가 이미지파일과 설명문을 줬었던 암흑의 시대가 있었어요 스킬설명문인데 중요한건 아니니까 그냥 들어주세요 스킬이 이미지를 20개 쓰는게 있따 그러면 1번 이미지 2번째 프레임에서 30도 회전 투명도 90 이런식으로 텍스트로 적어주면 그걸 개발자가 툴 혹은 스크립트를 편집해서 작업을하는거죠
- 그걸 이제 디자이너가 던파애니메이션툴을 이용해서 애니메이션 스크립트까지 작업하게되었습니다.
- 이런식으로 스크립트로요. 스파인에서 작업한것을 바로 넣을수는 없으니 해당 툴에 추가 기능을 넣어서 던파에 적용되게 햇으면 좋겠다. 그러니 작업해줄수 있겠냐...고요.
- 그러고서 디자이너분께 갔는데 이미 작업은 많이 진행하신 상황이었더라구요.
- 그래서 엇 해야 되겠는데… 라고 생각하고있었을때
- 아 스파인에서 텍스트로 작업하기 쉽게 뽑혀서 작업하기 어렵지 않을꺼다.바이너리가 아닌것만으로도 전 만족하고. JSON파일로 익스포트되는데 그땐 사실 JSON 이 뭔지도 몰랐었는데 텍스트면 보고 분석할수 있을꺼다 어렵지 않겠지라고 생각하고 쉽게 콜 했죠.
- 그러니까 바로 PNG이미지와 Json 파일을 주시더라구요 잘부탁한다면서.
- 그래서 Json파일을 열었는데 뭔지 하나도 모르겠더라구요.
- 쉬울줄 알았는데 생각보다 딱 보고 이해가 안되더라구요. 이미 작업하기로 했는데 열심히 한번 해봐야죠.
- 자 이제 작업을 시작해볼께요
- 이파일을 가지고 어떻게 하지 어떻게 하지 하는데 도저히 답이 안나오더라구요.
- 그래서 회전이나 간단한 크기 조절 할수 있는 애니메이션 하나를 만들어서 분석해보기로 했습니다.
- 이렇게 조금은 더 짧은 json파일이 생겼어요 파일을 보는데 이놈의 익스포트는 들여쓰기 같은거 안해줘서 보는데 하나도 이해를 못하겠더라구요.
- 들여쓰기를 해놓아서 정리해보니 이해가 그리 어렵지는 않았습니다. 크게 4개 카테고리로 나오더라구요 json파일 안의 내용이 간단히 말씀드리면 본은 뼈정보, 슬롯은 이미지랑 뼈랑 연결해주는정보 스킨은 이미지정보, 애니메이션은 뭐 에니메이션정보겠죠?
- 자세히 볼께요 본에는 이름 , 부모뼈 길이, 위치, 회전값 이렇게 들어가있네요. 어려울거 없네요
- 슬롯, 이름, 뼈이름 어태치먼트 뭘까봤는데요? 옆에 있는 스킨이란 데이터랑 연결해주는 스킨이름이 들어가있습니다. 어떤Bone이랑 어떤 이미지랑 연결되었는지의 값이 들어있는 데이터였습니다.
- 스킨 보면 이미지 경로, 위치, 회전값, 이미지 크기값이 있는데. 이미지랑 스킨이름이랑 따로인이유는 한 이미지가 여러군데에서 쓰일수 있으니까요. 아까 보신 사룡의 목뼈같은경우 같은 이미지가 여러번쓰인것일테니까요 물론 연결Bone은 다른 본이겠지만요. 3D에서는 버텍스에 스킨드값이 적용되는데 우측 이미지를 보시면 두개의 스킨인데요 스킨이 본의 어디에 붙어있는지에 대한 정보라고 보시면됩니다.
- 애니메이션을 보면 샘플이미지는 회전만 들어가있긴한데 실제로 이동, 크기도 변경하면 같이 뽑혀요. 뼈의 이름과 회전,이동,크기 그리고 시간값과 그 시간에 설정된 값이 들어있어요. 보면 커브 스텝드 보이는데 이부분은 과감히 넘어갈께요. 이미지 보간해주는지 안해주는지의 정보로 보이는데 설정안했는데 랜덤으로 나오더라구요.
- 자 어떤데이터가 들어있는지 알았으니 파싱을 해보도록 할께요.
- 파서를 만들려고 해보니까. Json 파서… 보니까 이미 많이 나와있네요.. 심지어 이녀석들이 지원도해주네요. 보니까 아까 분석한 데이터들에 대한 클래스까지 있네요. 유료툴인데 그정도까지는 지원해줘야겠죠. 그런데 전 파싱할때 추가로 작업을 더 해준게 있어요. 본클래스쪽과 스킨쪽에 추가로 작업을 더해준거죠.
- 던파에도 보간이 있지만 본에니메이션의 경우 약간 다른방식으로 계산을 해주기때문에 던파에서 사용하는 보간방식을 사용하게 되면 이미지가 잘못 위치하게 되어 아래와 같이 샘플링한 값을 구해줘서 계산을 해주기로 했습니다. 그럼 내부에서 따로 보간해주지않더라도 부드러운이미지가 나오겠죠?
- 샘플링한 값을 본쪽에 넣어줬습니다. 회전,크기,위치 각각따로따로요. 밑에 보면 변수들이 있는데 이따가 계산할때 쓰려고 만들어놓은거에요. 지금 설명드리고 넘어가는게 나을듯해서 보여드리고 갑니다.
- 스킨쪽에도 보면 PNG파일의 이름이 값이 들어있는데 던파에서는 여러이미지를 한 이미지파일로 만들고 인덱싱으로 이미지를 관리하기때문에 스킨에 있는 이미지 이름과 인덱싱을 해주는작업을 해주었습니다.
- 자 이제 bone에 대한 계산을 해볼께요
- 계산 하기에 앞서서 좌표계에 대해서 간단히 설명하고 넘어갈께요 Spine에서 사용하는 좌표계와 던파좌표계는 보시다시피 와이축이 서로 반대되어있어요 그래서 계산할때 더해줘야 할게 빼주는 식으로 계산해야 되는 경우가 잇습니다.
- 그리고 던파에서는 이미지 좌표가 0,0 일때 우측같이 나오는데 스파인에서는 좌측과 같이 나옵니다. 그래서 이미지의 크기의 절반을 각각 감해줬습니다.
- 자 애니메이션 시간대 저장한것 루프돌아주어야 각자 프레임에 해당하는 값을 구할 수 있겠죠?? 포문으로 아까 샘플링해놓은 시간값을 돌아주고 아까 이따가 쓸려고 해놓은데이터 기억나시나요? 그곳에다가 모든 본클래스에서 해당값을 넣어줄꺼에요. 왜냐? 부모부터 계산을 주루륵 해야돼니까.
- 자 이제 각각 뼈의 크기위치들을 구해줬으니 정렬해줄꺼에요. 각각 해당 슬롯을 돌면서 해당 본부터 최상단 부모 까지의 값을 최상단부모부터 차례대로 넣어줍시다.
- 이제 계산을 할껀데 어려운 공식 아니요 필요없어요 코 사 사 코 이거 하나면 돼요. 회전행렬이요.. 사실 크기나 위치는 공식이라고 하기 그렇자나요.
- 자 이제 최상단부모에서부터 현재 해당하는 Bone까지 루프를 돌면서 값을 계산해주면 되요. 위치 코 사 사 코, 스케일 걍 곱해주고 회전값더해주고. 저 템프엑스는 커렌트 포지션에대한 임시변수이니 그렇게 신경쓰지 않으셔도되요 밑에 빨간색으로 회전값을 0에서 360도로 고정시켜줬는데 모든툴이 그렇듯이 완벽하지 않더라구요. 스카사때는 문제가 없었는데 다른 몬스터 작업할때 보니 발이 한바퀴를 돌아가더라구요. 원인을 분석해보니 스파인에서 익스포트 된 스크립트에 0초에 -10도 0.5초에 10도 1초에 350도로 출력이되더라구요. 그렇다고 해서 이쪽회사에 따지고 아 이것때문에 우리 하지말죠. 그럴수는 없는거자나요. 디자이너랑 협의해서 우리 한번 애니메이션에 180도 이상바꾸지 않도록 하자 라고 협의후 이렇게 처리했어요.
- 자 본에 대한 애니메이션이 끝났으니 스킨에대한 정보를 계산해보도록 할께요 기억하시죠? 이미지가 뼈에 어디붙어있는지에 대한 정보에요 스킨이라는게
- 아 이미지를 넣은게 다소 던파에서만 적용되는 내용이 있을수도 있으니 양해 부탁드려요. 던파 페스티벌때 아이유 봤는데 정말로 이쁘더라구요. 어우 오랬동안 계속 말했더니 멘탈이 제상태가 아니네요.ㅋ
- 던파에서 스크립트에서 설정할수 잇는 회전값은 하나입니다. 일반적으로 하나정도로 되어있을겁니다. 굳이 두개일 이슈가 없다고 보여지긴 하니까요. 던파에서는 우측과같은 RST방식을 사용합니다. 그런데 뼈에 이미지가 어떻게 붙어서 어떻게 움직일지 모르기때문에 추가적인 계산을 지원을 해줘야되게 되었어요.
- 논 유니폼 스케일이라고 해서 시스템에 약간 추가작업을 해주어야 되었는데요. 왼쪽에 있는 이미지에 파란색이 뼈고 빨간색이 이미지라고 하면 뼈가 커지면 SRT방식으로 계산을 해줘야 합니다. 가운데이미지같은경우 뼈랑 이미지랑 딱 맞는이미지도 아니고 그리고나서 뼈까지 회전을 하게 되면 SRT도 아니고 RST도 아니고 난감한상황이됩니다. 그래서 해당상황일때에 대한 데이터 3개를 추가해줬어요 뼈와 이미지가 이루는각과 스케일값이요 그리고 나중에 내부에서 랜더링해줄때 행렬변환을 해줄텐데 최초값에 회전행렬을 곱해주고 크기변환행렬 곱해주고 다시 반대방향으로 회전행렬을 구해주고 나온값으로 원래 있던값에 적용해주면 우측과 같은 이미지를 만들어낼 수 있습니다.
- 이미지에 관한 부분도 같습니다. 단지 저기에 있는 커렌트 포지션이었던걸 해당이미지가 뼈에 어디붙어있는지에 대한값을 가지고 처리해준것뿐입니다. 저 마이너스부분도 다른좌표계라면 +일수도 있구요. 이렇게 되면 일반적으로 딱 맞는 프로젝트면 계산이 끝난겁니다. 참쉽죠? 사실 어려운수학이 있던것도 아닌데 막상짜보면 좌표어긋나는 일이 많아서 임시값넣어보고 회전반대로해보고 하는시행착오도 하면서 했습니다. 뭐 어려워 보여도 겁날 필요가 없다는거죠
- 자 이제 해당툴에서 각각 프레임에 포지션 논스케일 넣고 출력해보니
- 자 잘나왔습니다. 만족했구요. 작업이끝나고 전 다시 다른 개발일을 맡고있었죠
- 그래도 제가 만든 툴인데 신경이 쓰이자나요 시간이 조금 지나고서 디자이너님께 넌지시 물어봤습니다. 잘쓰고 계시냐고.. 그런데 안쓰고 계신다고 하더라구요. 큰몹이 없었나 생각했었는데 이미지가 미묘하게 안맞아서 안쓰고 계시다고 하시더라구요.. 혹시 여기 디자이너님 계시면 그런거 말씀을 안해주시면 잘 모릅니다. 물론 말한다고 다해드린다고는 못해드리겠지만요..
- 버그를 잡읍시다. 뭐가 문제인지 추적합시다. 아이유가 나온이유 아시죠? 던파 특화인 일일 가능성이 많다는겁니다.
- 그래서 이상하다는 이미지를 받아서 보는데 전 잘되네 라고 생각했었습니다. 개발자의 눈에서보면 잘 모르는데 디자이너님들은 이런거 엄청 크게 보인다고 하더라구요.. 둘이 완전다른거라고.. 보시면 강조해놓았는데 아시다시피 눈썹? 보면 움직임이 많이 틀립니다. 뭐가 문제일까 추적을 막 하다가 보니 또 역시나 좌표계의 문제였습니다.
- 스파인에서 쓰이는 회전입니다. 저 연두색부분은 알파값.. 즉 투명한 이미지입니다. 스파인에서 쓰이는 로컬좌표계는 회전을 하게되면 우측의 그림과 같이 이미지가 변경됩니다.
- 하지만 던전앤파이터에서 쓰이는 로컬좌표계는 그것을 보간해줘서 우측의 이미지와 같이 보간해줍니다. 결국 그이슈때문에 결과값이 다르게 나왔다고 유추하게 되었습니다.
- 왼쪽과 같은 식으로 나오던 결과를 오른쪽과 같이 Spine툴에서 작업한것과 같은결과가 나오도록 변경작업을 추가 해줘야겠네요. 그것이 원인이던 아니던 개발자로서 고치고 싶자나요. 아니 고쳐야 돼는거자나요. 자 고쳐보도록 할께요.
- 다시 Skin쪽의 계산을 해줍니다.
- 회전하기전에 이미지를 스파인과 같이 변경해주고 해야했었습니다. 이미지 중점에 맞춰서 옮겨주고 회전을 할위치가 스파인이랑 맞춰주기위해서 중심축 만큼 값을 더해줄께요 centerX, centerY가 던파로컬좌표계에서 회전하는 중심축 즉 이미지에서 화살표가 가리키는 위치의 값이에요. 그값에서 계산을 해주도록 했습니다. 여기서 cos과 sin은 skin에 있는 rotation값의 계산값이에요.
- 여기서 구한값에 뼈에서 계산한값을 추가로 적용해주면 계산은 끝이납니다. 길고긴 여정이 드디어 끝났네요…
- 자 이제 해당툴에서 각각 프레임에 포지션 논스케일 넣었더니
- 자 다시 재계산된 이미지입니다. 약간 다르다고 하실수 있는데 불꽃 이글거리는것에 대한 처리가 안되어있어서 그런거라고 이해해주세요. Slot변경하는 기능도 Json에 있는데 해당기능은 적용되지 않거든요.. 디자이너님께 OK사인 받은 이미지 입니다.ㅎㅎ
- 해당기능을 적용하는 방법은 json파일을 툴에 드래그앤 드랍으로 넣으면 슈슈슉 생기도록 했습니다. 샘플링값도 디자이너가 알아서 설정하도록 해줬구요..
- 자 정리해보면 스파인에서 작업을해주므로써 장점. 큰 몬스터의 경우겠죠.. 작업이 이미지 만들고 애니메이션 스크립트 만들고 던파에 적용인데 큰이미지를 직접그리려고 했었을경우에는 이미지 도트작업해주는 부분에서 시간이 많이.. 줄어들것이고 작은이미지 여러 개를 스크립트로 제어해서 하려고 했을경우에는 애니메이션 작업에 대한 시간이 많이.. 줄어들게 됩니다. (애니) 물론 작은이미지에서도 적용시킬수는 있지만 이런 작은애니메이션은 도트작업이 더 고 퀄로 나온다고 하시네요..(실제로 던파에 적용되지는 않을 이미지입니다. 참고로)
- 신경써야 될부분에 대해서 다시한번 말씀드리면
- 제가 헤맷던부분 회전값 툴에서 익스포트된게 정답이 아니라는거죠.. 350도와 10도의 중간 중간값이 180도여야 될꺼같자나요… 0도가 아니라. 그리고 좌표계… 던파뿐만아니라 신규 프로젝트나 기존 라이브 프로젝트라고 해도 쓰이는 좌표계가 각각 잇을텐데 Spine과 다른부분을 찾아서 해당부분을 올바르게 고쳐줘야한다는점…이에요..
- 자 대망의 결론입니다.
- 2D게임에서 본애니메이션 생소하지만 개발하기에 생각만큼 오래 걸리지 않는다는점(어려운 공식쓰인것도 아니기때문에) 그말은 도입할만하다는 이야기입니다. 디자인작업 빨라진다는 이야기겠죠.. 본애니메이션으로 편집하지 않았으면 작업 못했을것 같았던 이미지였으니까요… 포토샵이나 프로모션으로 이미지 작업하시는데 새로운툴을 만져보는것에 재미도 느끼시는것 같기도 했었으니까요..(제생각이지만요..ㅎㅎ) 감사합니다.
- 감사합니다.
- 이제 질문시간을 가져보도록 할께요…