dos e0004 animationData - cwtickle/danoniplus-docs GitHub Wiki

English | Japanese

^ Return to Screen effects specification

| < Lyrics display | Background and mask motion | CSS skin change > |

Background and mask motion (back_data, mask_data)

Overview

  • Define images, text, and animations to be displayed in the background and masked areas of the screen.

Usage & Specification

  • Basically, back_data is defined as the background layer and mask_data as the layer covering the top of the screen. Each of these layers has a multilayered structure that allows for a variety of expressions.
  • Both back_data and mask_data are described as one set per line. Each is comma-separated and can be omitted except for the first two.
  • Depending on the settings, there are 6 types, including <img> tag version, <span> tag version, and colored objects.
  • Other motions besides the main screen include backtitle_data and backresult_data for the title and result screens. These allow frame moving and looping operations in addition to the main screen functions.

1. <img> tag version (Image)

  • Static image
|mask_data=
400,0,../img/frzbar.png,,0,250,500,250,1
700,0
|
  • Animation image
|back_data=
200,0,../img/c_600.png,,20,20,200,200,0.5,leftToRightFade,120,forwards
200,1,../img/iyo_600.png,,220,220,200,200,1,spinY,120,forwards
300,0
|
No Logical name Example Description
1 Frame 200 Specifies the number of timing frames to be changed.
2 Depth 0 Specifies the depth of the background as a number; a value greater than or equal to 0. The depth can be increased, but this will increase the number of background sprites, which may make it heavier.
3 Img Source ../img/c.png Specify the directory path of the image to be displayed. Relative paths are acceptable. The image must be a png, jpg, gif, or bmp with a file extension.
4 Img Class imgMotion Sets the CSS Class to be attached to the "img" tag. This is used when there are not enough settings below.
5 Left(X) 25 Specifies the X coordinate at which the image is to be displayed.
6 Top(Y) 30 Specifies the Y coordinate at which the image is to be displayed.
7 Width(X) 200 Specifies the horizontal size of the image in "px". The default is the horizontal size of the image itself.
8 Height(Y) 200 Specifies the vertical size of the image in "px". The default is the height size of the image itself.
9 Opacity 0.5 Specifies the transparency of the image between 0 and 1. Default is 1 (no transparency); if you want the image to disappear after CSS animation, specify 0.
10 Animation-Name leftToRightFade Specify a CSS animation name. The content is defined by CSS. Default is none.
11 Animation-Duration 120 Specify the interval between CSS animations in frames.
12 Animation-Fill-Mode forwards Sets how the CSS animation is displayed at the end of the animation.
- forwards: Apply "100%(to)" style of the last @keyframes at the end of the animation
- backwards: Apply the style of the first @keyframes "0%(from)" after the animation is completed
Default is unspecified.

2. <span> tag version (Text)

|back_data=
400,2,Flow test,,100,140,36,0,0,fromBig,100,forwards
500,2,Flow test,,100,140,36,0,0,upToDown,100,forwards
600,2,Flow test,,100,140,36,0,1,spinX,100,forwards
700,2,Flow test,,100,140,36,0,1,spinY,100,forwards
800,2,Flow test,,100,140,36,0,1,spinZ,100,forwards
900,2,Flow test,,100,140,36,0,1
950,2
|
No Logical name Example Description
1 Frame 200 Specifies the number of timing frames to be changed.
2 Depth 0 Specifies the depth of the background as a number; a value greater than or equal to 0. The depth can be increased, but this will increase the number of background sprites, which may make it heavier.
3 Display Flow Test If you put text instead of the directory path of the image, it will be treated as a <span> tag. HTML tags can be used.
4 Span Class spanMotion Sets the CSS Class to be attached to the "span" tag. This is used when there are not enough settings below.
5 Left(X) 25 Specifies the X coordinate at which the image is to be displayed.
6 Top(Y) 30 Specifies the Y coordinate at which the image is to be displayed.
7 FontSize 36 Specifies the horizontal size of the image in px. Default is the horizontal size of the screen. (Not the width of the image itself.)
8 FontColor #ffff00 Specify the color of the text by color code.
9 Opacity 0.5 Specifies the transparency of the image between 0 and 1. Default is 1 (no transparency); if you want the image to disappear after CSS animation, specify 0.
10 Animation-Name leftToRightFade Specify a CSS animation name. The content is defined by CSS. Default is none.
11 Animation-Duration 120 Specify the interval between CSS animations in frames.
12 Animation-Fill-Mode forwards Sets how the CSS animation is displayed at the end of the animation.
- forwards: Apply "100%(to)" style of the last @keyframes at the end of the animation
- backwards: Apply the style of the first @keyframes "0%(from)" after the animation is completed
Default is unspecified.

3. Color Object (Arrow, Onigiri, Ascii art)

|backtitle_data=
330,3,[c]giko/#ff9999:yellow,,5,200,200,200,0,spinY,120,forwards
480,3
|
No Logical name Example Description
1 Frame 200 Specifies the number of timing frames to be changed.
2 Depth 0 Specifies the depth of the background as a number; a value greater than or equal to 0. The depth can be increased, but this will increase the number of background sprites, which may make it heavier.
3 ColorObject/Color [c]giko/#ff9999 Specify in the format [c]color object name:rotation amount/color code. The color object name is the property name of g_imgObj (arrow, giko, c, etc.).
4 ColorObject Class imgMotion Sets the Class to be added to the color object. This is used when there are not enough settings below.
5 Left(X) 25 Specifies the X coordinate at which to display the color object.
6 Top(Y) 30 Specifies the Y coordinate at which to display the color object.
7 Width(X) 200 Specifies the horizontal size of the color object in "px".
8 Height(Y) 200 Specifies the vertical size of the color object in "px".
9 Opacity 0.5 Specifies the transparency of the color object between 0 and 1. Default is 1 (no transparency); Disabled if opacity setting is present in CSS animation.
10 Animation-Name leftToRightFade Specify a CSS animation name. The content is defined by CSS. Default is none.
11 Animation-Duration 120 Specify the interval between CSS animations in frames.
12 Animation-Fill-Mode forwards Sets how the CSS animation is displayed at the end of the animation.
- forwards: Apply "100%(to)" style of the last @keyframes at the end of the animation
- backwards: Apply the style of the first @keyframes "0%(from)" after the animation is completed
Default is unspecified.

4. Clear Display

|backtitle_data=
200,0,../img/c_600.png,,20,20,200,200,0.5,leftToRightFade,120,forwards
200,1,../img/iyo_600.png,,220,220,200,200,1,spinY,120,forwards
400,2,Flow test,,100,140,36,0,0,fromBig,100
500,ALL
No Logical name Example Description
1 Frame 200 Specifies the number of timing frames to be changed.
2 Depth 0 Specifies the background depth as a number, 0 or greater. "ALL" will clear the display set at all depths.
3 Display Empty to erase images and text. No further specification is required.

5. Comments

|back_data=
200,-,"This is a comment."
|
No Logical name Example Description
1 Frame 200 Specify the number of frames. Specification is optional.
2 Position - Hyphen fixed.
3 Comment Comment text can be freely entered.

6. Loop and Frame Jump (Title and Results only)

|backtitle_data=
200,0,../img/c_600.png,,20,20,200,200,0.5,leftToRightFade,120,forwards
200,1,../img/iyo_600.png,,220,220,200,200,1,spinY,120,forwards
300,0
320,1,../img/iyo_600.png,,220,220,200,200,0,leftToRightFade,120,forwards
400,2,Flow test,,100,140,36,0,0,fromBig,100,forwards
500,2,Flow test,,100,140,36,#ff9999,0,upToDown,100,forwards
600,2,Flow test,,100,140,36,#ffff99,1,spinX,100,forwards
700,2,Flow test,,100,140,36,#99ff99,1,spinY,100,forwards
800,2,Flow test,,100,140,36,#99ffff,1,spinZ,100,forwards
900,2,Flow test,,100,140,36,0,1
1000,0,[jump],1100,3
1050,0,[loop],200:700:700
1200,0,../img/giko_600.png,,220,220,200,200,1,spinX,120
1300,0
|
No Logical name Example Description
1 Frame 200 Specify the number of frames. Specification is optional.
2 - 0 No designation
3 Keyword [jump] Keyword Designation.
[loop]Returns to the specified frame.
[jump]Moves to the specified frame with loop condition.
4 gotoAndPlay 1200 Specifies the destination frame. By specifying a colon (:), you can branch by probability which frame to jump to.
例）Example: 300:1500 → 300 frames at 1/2 probability, 1500 frames at 1/2 probability
Example: 300:300:1200 → 300 frames with 2/3 probability, 1200 frames with 1/3 probability
5 LoopCondition 2 Only [jump] is specified. If the loop has completed the number of times specified here, it moves to the frame specified in 4.

7. Redirection of other preferences (Except for "Title motion")

|backCross_data=backRev_data|
No Logical name Example Description
1 Data Name backRev_data Specify the name of the background or mask motion setting from which to copy.

Data Name Type

The data name differs depending on the screen where the settings are made.
back_data and mask_data are for the main screen and can have data for each chart.
If main(reverse) is not specified, main(normal) data will be used.
The same applies to main (Cross, Split, etc.).

For normal usage

Display/Type Background
(language not specified)		 Mask
(language not specified)		 Mask
(En)
Title backtitle_data masktitle_data masktitleEn_data
Main(Normal) back_data,
back2_data,
...		 mask_data,
mask2_data,
...		 maskEn_data,
maskEn2_data,
...
Main(Reverse) backRev_data,
backRev2_data,
...		 maskRev_data,
maskRev2_data,
...		 maskRevEn_data,
maskRevEn2_data,
...
Main(Cross, Split etc.) backAlt_data,
backAlt2_data,
...
backCross_data,
backFlat_data,
...		 maskAlt_data,
maskAlt2_data,
...
maskCross_data,
maskFlat_data,
...		 maskAltEn_data,
maskAltEn2_data,
...
maskCrossEn_data,
maskFlatEn_data,
...
Result(Cleared) backresult_data
backresult2_data
...		 maskresult_data
maskresult2_data
...		 maskresultEn_data
maskresultEn2_data
...
Result(Terminate midway) backfailedS_data
backfailedS2_data
...		 maskfailedS_data
maskfailedS2_data
...		 maskfailedSEn_data
maskfailedSEn2_data
...
Result(Quota failure) backfailedB_data
backfailedB2_data
...		 maskfailedB_data
maskfailedB2_data
...		 maskfailedBEn_data
maskfailedBEn2_data
...

For another key mode usage

Display/Type Background
(language not specified)		 Mask
(language not specified)		 Mask
(En)
Main(Normal) backA_data,
backA2_data,
...		 maskA_data,
maskA2_data,
...		 maskAEn_data,
maskAEn2_data,
...
Main(Reverse) backRevA_data,
backRevA2_data,
...		 maskRevA_data,
maskRevA2_data,
...		 maskRevAEn_data,
maskRevAEn2_data,
...
Main(Cross, Split etc.) backAltA_data,
backAltA2_data,
...
backCrossA_data,
backFlatA_data,
...		 maskAltA_data,
maskAltA2_data,
...
maskCrossA_data,
maskFlatA_data,
...		 maskAltAEn_data,
maskAltAEn2_data,
...
maskCrossAEn_data,
maskFlatAEn_data,
...

For motions other than the title motion, if not specified, e.g., for the result of the second chart (on quota failure), they are applied in the following order.

Priority Applicable data Meaning
1 backfailedBJa2_data
backfailedBEn2_data		 Second chart of result (quota failure, language specified)
2 backfailedBJa_data
backfailedBEn_data		 First chart of result (quota failure, language specified)
3 backfailedB2_data Second chart of result (quota failure, language not specified)
4 backfailedB_data First chart of result (quota failure, language not specified)
5 backresultJa2_data
backresultEn2_data		 Second chart of result (cleared, language specified)
6 backresultJa_data
backresultEn_data		 First chart of result (cleared, language specified)
7 backresult2_data Second chart of result (cleared, language not specified)
8 backresult_data First chart of result (cleared, language not specified)

Additional information

  • Starting from ver34.0.0, it is possible to specify by key types and by key patterns.
|transKey9A=$$9B$9C|

|back_data=...|         // Overall Common
|back2_data=...|        // Common to the 2nd chart
|backEn2_data=...|      // Applicable to the 2nd chart, English mode only.
|backAEn2_data=...|     // Applies only to the 2nd chart, English mode, and another key mode (9B, 9C)
|back<9C>En2_data=...|  // Applies only to the 2nd chart, English mode, and another key mode (9C)
|back<9A>En2_data=...|  // Applies only to the 2nd chart, English mode, and not another key mode (9A)
|back[2]En2_data=...|   // Applies only to the 2nd chart, English mode, and key pattern: 2

Embedded variable specification

  • Variables can be embedded for the coordinates of the background and mask motion. Specify in the form {variable}. Mathematical expressions can be inserted as long as they are within {variable}.
|mask_data=
330,3,[c]arrowSpecial/red:#ffff6666,,{g_workObj.stepX[3]},200,50,50,0,leftToRightFade,120
700,0
|

Related pages

Changelog

Version Change details
v36.0.0 - Changed to automatically remove tabs, and half-width spaces before and after commas.
v34.0.0 - Added the ability to combine individual background and mask motion settings while referencing data from other charts.
- Implemented background and mask motion settings by key types and key patterns.
v31.2.0 - Added the ability to specify the data name of another background or mask motion to refer to the settings of that data name.
v30.2.0 - Support for background and mask motion by scroll setting.
v30.1.1 - Implemented colored objects in background and mask motion
- Supports variable embedding for coordinates of background and mask motion
- Implemented "Animation-Fill-Mode" for background and mask motion
v30.0.1 - Supports for description of background and mask motion for another key modes
v24.2.1 - Multilingual support for backgrounds and mask motions
v18.4.0 - Changed to allow HTML tags in the<span> tag version of Display.
v15.1.0 - Supports mathematical notation in terms of number of frames and depth
v10.2.1 - Implementation of background and mask motions (backAlt_data, maskAlt_data) for scroll extension settings
v9.1.0 - Added background and mask motion application order settings (similar to result motion)
v8.0.0 - Result motion settings by chart are implemented.
v7.9.0 - Result motion for failed attempts implemented.
- Implemented comment line
v7.7.0 - Support for multiple simultaneous drawing of the same frame.
- Depth "ALL" (clear all) was implemented for display erasure.
v7.6.0 - Extended loop and frame jumps for title and result motions
v6.3.0 - Implemented title motion (masktitle_data), result motion (backresult_data, maskresult_data)
- Implementation of background and mask motion for reverse (backRev_data, maskRev_data)
v4.7.0 - Implemented loop and frame jump for title motion (backtitle_data)
v4.4.0 - Implemented title motion (backtitle_data)
v4.2.0 - Implemented mask display (mask_data)
v1.0.0
(v0.67.0)		 Background display (back_data) Initial implementation

| < Lyrics display | Background and mask motion | CSS skin change > |

  • Some pages may have broken links. In this case, replace "danoniplus-docs" with "danoniplus" in the URL (However, in Japanese).
⚠️ **GitHub.com Fallback** ⚠️