dos e0004 animationData - cwtickle/danoniplus-docs GitHub Wiki
English | Japanese
^ Return to Screen effects specification
| < Lyrics display | Background and mask motion | CSS skin change > |
- Define images, text, and animations to be displayed in the background and masked areas of the screen.
- Basically,
back_datais defined as the background layer andmask_dataas 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_dataandmask_dataare 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_dataandbackresult_datafor the title and result screens. These allow frame moving and looping operations in addition to the main screen functions.
- 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 completedDefault is unspecified. |
|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 completedDefault is unspecified. |
|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 completedDefault is unspecified. |
|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. |
|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. |
|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. |
|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. |
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.).
| 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 ... |
| 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) |
- 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
- 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
|
- displayUse π Availability of Display item, initial value setting
- masktitleButton π Enable/disable a set of buttons on the title screen
- maskresultButton π Enable/disable a group of buttons on result screen
- resultMotionSet π ON/OFF setting of result motion
- preloadImages π Preload image file settings
- autoPreload π Auto loading settings for image files
- Lyrics Display (word_data) π
| 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 > |