tips 0009 key types change v34 - cwtickle/danoniplus-docs GitHub Wiki

English | Japanese

| < How to display background | Example of implementation of a key types change work || Top page > |

Example of implementation of a key types change work (before v35.1.0)

  • Since ver 30, key types change works can be created without using "customJs". However, since prerequisite knowledge such as custom key definitions is required for actual creation, we have compiled a list of tips based on actual examples.

Custom key definition

  • Define overlapping subkeys. The position of the overlap is described by posX and the subkey definition by keyGroupX. It is difficult to understand the value of posX, but we will use the following image.
  • divX is the start and end position of the bottom row +1.
    In this example, they are 9 and 16.
|minWidth11D=650| // Minimum width (in px) required by this key type
|pos11D=1.5,2.5,3.5,4.5,3.5,4.5,5.5,6.5,9,10,11,12,13,14,15,0,1,2,3,4,5,6,7,8|
|keyGroup11D=11L,11L,11L,11L,11,11,11,11,11/11L,11/11L,11/11L,11/11L,11/11L,11/11L,11/11L,9C,9C,9C,9C,9C,9C,9C,9C,9C|
|div11D=9,16|
  • Along with the mapping specified above, assign a color number (colorX), a variable name to be assigned (charaX), an arrow display rotation amount (stepRtnX), and a key assignment (keyCtrlX).
// For convenience of display order, 11Lkey (upper row) -> 11key (upper row) -> 7key (lower row) -> 9Ckey (upper row) are specified in this order
|color11D=3,3,3,3,4,4,4,4,0,1,0,2,0,1,0,3,3,3,3,2,4,4,4,4|
|chara11D=sleft,sdown,sup,sright,tleft,tdown,tup,tright,left,leftdia,down,space,up,rightdia,right,aleft,adown,aup,aright,aspace,bleft,bdown,bup,bright|
|stepRtn11D=0,-90,90,180,0,-90,90,180,0,-45,-90,onigiri,90,135,180,0,-90,90,180,onigiri,0,-90,90,180|
|keyCtrl11D=W,E,D3/D4,R,Left,Down,Up,Right,S,D,F,Space,J,K,L,W,E,D3/D4,R,Space,Left,Down,Up,Right|

Insert key types change data

  • The key types change timing is read from the chart.
  • Since the key types change timing is planned to be animated, the number of key types in that part is defined by X.
|keych_data=0,11,7520,X,7540,11L,12879,X,12899,11F,13754,X,13925,9C|
//    0 frames: 11key mode
// 7520 frames: (invisible)
// 7540 frames: 11Lkey mode
//12879 frames: (invisible)
//12899 frames: 11Fkey mode　*Half of the top row of 11 and 11L
//13754 frames: (invisible)
//13925 frames: 9Ckey mode　 *11 and 11L upper section + rice balls
  • In fact, for the 7520 and 12879 frame locations, the lower 7keys (and part of the upper 11Lkeys) were not moved, so the key types change data was reviewed as follows.
|keych_data=0,11,7520,7,7540,11L,12879,11LL,12899,11F,13754,X,13925,9C|
//    0 frames: 11key mode
// 7520 frames: (Fixed display of bottom 7 keys -> keyGroup: 7)
// 7540 frames: 11Lkey mode
//12879 frames: (Fixed display of lower 7keys + upper left 2 of 11Lkeys -> keyGroup: 11LL)
//12899 frames: 11Fkey mode　*Half of the top row of 11 and 11L -> keyGroup: 11F
//13754 frames: (invisible)
//13925 frames: 9Ckey mode　 *11 and 11L upper section + rice balls
  • To accommodate this result, keyGroupX in the custom key definition is modified as follows.
  • Newly created keygroups: 7, 11LL, 11F are added.
|keyGroup11D=11L/11LL/11F,11L/11LL/11F,11L,11L,11,11,11/11F,11/11F,7/11/11L/11LL/11F,7/11/11L/11LL/11F,7/11/11L/11LL/11F,7/11/11L/11LL/11F,7/11/11L/11LL/11F,7/11/11L/11LL/11F,7/11/11L/11LL/11F,9C,9C,9C,9C,9C,9C,9C,9C,9C|
  • However, the newly added key groups: 7, 11LL, and 11F are only duplicates on the key config, so we will remove them from the key config list. Use keyGroupOrder on the chart side for this setting.
  • Since ver35.1.0, keyGroupOrderX can be used on the custom key definition side, which is more convenient.
|keyGroupOrder11D=11,11L,9C| // 11key, 11Lkey, 9Ckey(11key, upper part of 11Lkey + rice ball) mode only

Add animation data

  • Now that the base setup is done, we can use mask_data to create the parts that connect the key type changes.
  • The first 11key to 11Lkey change involves the following lateral movement and rotation.
  • Create these four patterns of animation with css animation. The arrow object is itself rotated, so it is moved with translateX and then rotated with rotate.
  • In this case, the rotation is applied after moving the object, since the first and last half of the rotation is applied at the beginning and the end.
@keyframes slide1-0 {
	0% {
		transform: translateX(0) rotate(0deg);
	}
	
	100% {
		transform: translateX(55px) rotate(180deg); /* Move 55px to the right and rotate 180 degrees */
	}
}
@keyframes slide1-1 {
	0% {
		transform: translateX(0) rotate(-90deg);
	}

	100% {
		transform: translateX(-55px) rotate(90deg); /* Move 55px to the left and rotate 180 degrees */
	}
}
@keyframes slide1-2 {
	0% {
		transform: translateX(0) rotate(90deg);
	}
	
	100% {
		transform: translateX(-165px) rotate(270deg); /* Move 165px to the left and rotate 180 degrees */
	}
}
@keyframes slide1-3 {
	0% {
		transform: translateX(0) rotate(180deg);
	}
	
	100% {
		transform: translateX(-275px) rotate(360deg); /* /* Move 275px to the left and rotate 180 degrees */
	}
}
  • Next, add this animation to the mask_data. To use the arrow itself, use a colored object.
  • The coordinate part is a mathematical expression as follows. The advantage of this method is that it is resistant to changes in width and scroll direction and can be used almost as is.
Types Calculation Formula (Step Zone Position)
X-coordinate {g_workObj.stepX[j]}
Y-coordinate {g_posObj.stepY + g_posObj.reverseStepY * g_workObj.dividePos[j]}
  • g_workObj.stepX[j] is the X coordinate of the step zone, g_posObj.stepY is the Y coordinate of the step zone (upper), and g_posObj.reverseStepY is the distance between step zones (top/bottom). g_workObj.dividePos[j] is 0 in normal case and 1 in reverse.
  • Following the format of mask_data and reflecting the css animations "slide1-0" through "slide1-3" defined above, we can write the following. Here we have adjusted the step zone so that the step zone is at the top of 11Lkey in 20 frames.
  • The [j] part takes the 0th as the starting position, and the position corresponding to charaX is entered. This time, the upper row of 11 keys is assigned [4]-[7] since it is placed in the 4th to 7th position.
  • The animation is produced at frame 7520, and at frame 7540 (to display the 11Lkey step zone), all animation is erased.
|mask_data=
7520,-,//11->(7->)11L
7520,-,//Move 11key upper row (4 to 7) to 11Lkey upper row (0 to 3)
7520,0,[c]arrow/#ccccff,,{g_workObj.stepX[4]},{g_posObj.stepY + g_posObj.reverseStepY * g_workObj.dividePos[4]},50,50,1,slide1-0,20,forwards
7520,1,[c]arrow:-90/#ccccff,,{g_workObj.stepX[5]},{g_posObj.stepY + g_posObj.reverseStepY * g_workObj.dividePos[5]},50,50,1,slide1-1,20,forwards
7520,2,[c]arrow:90/#ccccff,,{g_workObj.stepX[6]},{g_posObj.stepY + g_posObj.reverseStepY * g_workObj.dividePos[6]},50,50,1,slide1-2,20,forwards
7520,3,[c]arrow:180/#ccccff,,{g_workObj.stepX[7]},{g_posObj.stepY + g_posObj.reverseStepY * g_workObj.dividePos[7]},50,50,1,slide1-3,20,forwards
7540,ALL
|
  • After that, the animation part can be created by creating animations in the same way.

Page author

  • tickle

Related pages

| < How to display background | Example of implementation of a key types change work || Top page > |