English | Japanese

| < Overwrite key pattern of regular key types | How to display background | Example of implementation of a key types change work > |

• Use the CSS skin specification method. The method is simple, just put the following in the chart settings.

|--background=#000000:#222222| // To specify a background color
|--background=url("(..)back123.png")| // apply "back123.png" from the same folder to the background

• If you want to change the background only on the play screen, use the CSS skin change.

|style_data=
0,--background,#000000:#222222
|

• Let us assume that the skin name is "backgroundTest".
  In this case, you need to create a file "danoni_skin_backgroundTest.css" in the "skin" folder.

• For the sake of easy implementation, we will use the following file in the "skin" folder.
  In order to make it easy to implement, we will use "danoni_skin_background.css" in the "skin" folder.
  Copy "danoni_skin_background.css", and create "danoni_skin_backgroundTest.css".

• Open "danoni_skin_backgroundTest.css" and uncomment the background-image line.
  Specify the path where the background file is located.
  Below, create a new "background" folder, and place a background image named "back123.png" in it.

@charset "UTF-8";.
/* background */
#divBack {
	background: linear-gradient(#000000, #222222); /* alternative if background not available */
	background-image: url("../background/back123.png");
}

• Next, set up the chart file to use this background skin. On the chart data side, specify the background skin you have created for the second element of "skinType" in the chart settings.

|skinType=default,backgroundTest|

• Also, do not include a canvas element at this time. By not including the canvas element, the background div element (divBack) will be applied.

<div id="canvas-frame">
   <!-- <canvas id="layer0" width="600" height="500"></canvas> comment-out -->
   <!-- <canvas id="layer1" width="600" height="500"></canvas> comment-out -->
</div>

• This method is used when you want to display the background only on the main screen.
  In this example, we create a new "background" folder and place a background image named "back123.png" in it.

|back_data=
0,0,./background/back123.png,,0,0,600,500
|

• In this case, the background size must match the vertical and horizontal size of the game (600x500 in this case).
  (since the image will be scaled).

• How to make chart overview
• skinType 📝 Skin setting
• Background and mask motion (back_data, mask_data)