[NDC14] 라이브중인 2D게임에 시스템 변경 없이 본 애니메이션 도입하기[던전앤파이터]

라이브중인 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


[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 데이터 분석


Bones,slots,skins,animations

Bones ,slots,skins,animations

"name":"body",

"parent":"bone1",

"length":51.68,

"x":-189.19,

"y":-172.74,

"rotation":90.45


bones, slots ,skins,animations

"name":"body-chain-",

"bone":"body-chain",

"attachment":

“body_under_chain"


bones,slots, skins ,animations"body_under_chain ":{

"Image/body_under_chain"{

"x":96.53,

"y":-148.73,

"rotation":-90.45,

"width":611,

"height":274

}}


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}]



● Parsing


● 적용

파서를 만들자 . 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......


● Parsing


● 적용

SPINE 에서 좌표계 던파에서 좌표계

● 계산 - ★Bone 계산

currentPositionX -= (float)(currentImage.Width * 0.5);currentPositionY -= (float)(currentImage.Height * 0.5);

SPINE 에서 좌표계 던파에서 좌표계


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;

해당하는 애니메이션타임에맞는 값 넣어주는것


for( 해당 애니메이션 시간대저장한것을 돌아준다 .) [0.1,0.2,0.3,0.4……..0.9,1.0]{

}

for( 모든 Slot 을 돌면서 )

{List<boneClass>

boneList;최상단부모부터 차례대로 정렬

}



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;

}



● Parsing

● 계산 – ★ Bone 계산

★ Skin 계산

● 적용


선회전 들어간 이미지 작업 .


SRT RST


추가로 필요한 값 NonUniformScale 값 .


[NON UNIFORM SCALE] 0.1 2 0.5


// 이미지의 맞는 좌표의계산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);



● Parsing


● 적용

● 적용

● 적용

● 적용

● 적용

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 계산


● Parsing


● 적용

● 적용

● 적용

● 정리

이미지 생성작업

애니메이션 작업

던파에 적용

큰이미지 직접그릴경우

여러이미지혼합해서사용할경우

이런 함정이 !!!! 혹은 신경쓸것 !!!!

회전값 : -10, 350, 10

좌표계

● 이런 함정이 !!! 신경쓸것 !!!

결론 !!!!!

결론

개발 : Not Difficult!

디자인작업 : Fast!!!

Thanks

감사합니다 .

Q & A

Presentations & Public Speaking

[NDC14] 라이브중인 2D게임에 시스템 변경 없이 본 애니메이션 도입하기[던전앤파이터]