[ndc14] 라이브중인 2d게임에 시스템 변경 없이 본 애니메이션...
Post on 12-Jun-2015
1.014 Views
Preview:
TRANSCRIPT
라이브중인 2D 게임에 시스템 변경 없이 본 애니메이션 도입하기 [던전앤파이터 ]
네오플 던파개발실
이승원
이 승 원2010-2011 UCENT 프로그래머
2011 – 현재 네오플 던전앤파이터 클라이언트개발자
발표자 소개
발표 내용 소개
본 애니메이션이란
던전앤파이터에서이미지를 사용하는 방식
던전앤파이터에서 이미지를 사용하는 방식
던전앤파이터에서 이미지를 사용하는 방식
[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
던전앤파이터에서 이미지를 사용하는 방식
본 애니메이션을 도입하게 된 이유
본 애니메이션을 도입하게 된 이유
본 애니메이션을 도입하게 된 이유
본 애니메이션을 도입하게 된 이유
1116 * 783
본 애니메이션을 도입하게 된 이유
533*521
본 애니메이션을 도입하게 된 이유
Spine?
본 애니메이션을 도입하게 된 이유
본 애니메이션을 도입하게 된 이유
본 애니메이션을 도입하게 된 이유
본 애니메이션을 도입하게 된 이유
[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
본 애니메이션을 도입하게 된 이유
본 애니메이션을 도입하게 된 이유
본 애니메이션을 도입하게 된 이유
본 애니메이션을 도입하게 된 이유
본 애니메이션을 도입하게 된 이유
본 애니메이션을 도입하게 된 이유
본 애니메이션을 도입하게 된 이유
작업을 시작해 보자 !
작업을 시작해보자
작업을 시작해보자
● Spine 데이터 분석
● Parsing
● 계산 – ★ Bone 계산 ★ Skin 계산
● 적용
●Spine 데이터 분석
●Spine 데이터 분석
Bones,slots,skins,animations
Bones ,slots,skins,animations
"name":"body",
"parent":"bone1",
"length":51.68,
"x":-189.19,
"y":-172.74,
"rotation":90.45
●Spine 데이터 분석
bones, slots ,skins,animations
"name":"body-chain-",
"bone":"body-chain",
"attachment":
“body_under_chain"
●Spine 데이터 분석
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 데이터 분석
bones,slots,skins, animations"right-topper-arm":{
"rotate":[{"time":0,"angle":0,…..},
{"time":0.3333,"angle":0.43,"curve":"stepped"},
{"time":1,"angle":0}],
"translate":[{"time":0,"x":0,"y":0},
{"time":0.3333,"x":-1,"y":0},
{"time":1,"x":0,"y":0}]},
"scale":[{"time":0,"x":1,"y":1,"curve":"stepped"},
{"time":1,"x":0.9,"y":0.9}]},
{"time":1.3333,"x":1,"y":1}]
●Spine 데이터 분석
● Spine 데이터 분석
● Parsing
● 계산 – ★ Bone 계산 ★ Skin 계산
● 적용
파서를 만들자 . Json 파서 많이 있네
●Parsing
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
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
●Parsing
Class SkinClass{...…
Int ImageIndex;}
01234......
● Spine 데이터 분석
● Parsing
● 계산 – ★ Bone 계산 ★ Skin 계산
● 적용
SPINE 에서 좌표계 던파에서 좌표계
● 계산 - ★Bone 계산
currentPositionX -= (float)(currentImage.Width * 0.5);currentPositionY -= (float)(currentImage.Height * 0.5);
SPINE 에서 좌표계 던파에서 좌표계
● 계산 - ★Bone 계산
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 계산
for( 해당 애니메이션 시간대저장한것을 돌아준다 .) [0.1,0.2,0.3,0.4……..0.9,1.0]{
}
for( 모든 Slot 을 돌면서 )
{List<boneClass>
boneList;최상단부모부터 차례대로 정렬
}
● 계산 - ★Bone 계산
● 계산 - ★Bone 계산
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 계산
● Spine 데이터 분석
● Parsing
● 계산 – ★ Bone 계산
★ Skin 계산
● 적용
● 계산 - ★Bone 계산
선회전 들어간 이미지 작업 .
[IMAGE ROTATE] 0.785398
SRT RST
● 계산 - ★Bone 계산
추가로 필요한 값 NonUniformScale 값 .
[IMAGE ROTATE] 0.785398
[NON UNIFORM SCALE] 0.1 2 0.5
● 계산 - ★Bone 계산
// 이미지의 맞는 좌표의계산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 계산
● Spine 데이터 분석
● Parsing
● 계산 – ★ Bone 계산 ★ Skin 계산
● 적용
● 적용
● 적용
● 적용
● 적용
Spine 좌표계기준
● 적용
던전앤파이터 로컬 좌표계기준
● 적용
던전앤파이터 로컬 좌표계기준
● 적용
● Spine 데이터 분석
● Parsing
● 계산 – ★ Bone 계산
★ Skin 계산
● 적용
던전앤파이터 로컬 좌표계기준
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 계산
{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 계산
● Spine 데이터 분석
● Parsing
● 계산 – ★ Bone 계산 ★ Skin 계산
● 적용
● 적용
● 적용
● 정리
이미지 생성작업
애니메이션 작업
던파에 적용
큰이미지 직접그릴경우
여러이미지혼합해서사용할경우
이런 함정이 !!!! 혹은 신경쓸것 !!!!
회전값 : -10, 350, 10
좌표계
● 이런 함정이 !!! 신경쓸것 !!!
결론 !!!!!
결론
개발 : Not Difficult!
디자인작업 : Fast!!!
Thanks
감사합니다 .
Q & A
top related