English | Japanese

<- Back to Tips Index

Get started the custom-JS

What is "Custom-JS" (or "Skin-JS") ?

• Custom JS (danoni_custom.js) is an extension script file for Dancing☆Onigiri (CW Edition).
• It is used to insert a process into an existing screen.
• It is written using JavaScript. In addition to the standard functions, common functions defined in CW Edition can be used.
• Functions that are difficult to define in the conventional chart settings can be implemented. (with some restrictions).

Examples of Use

• Kirizma ( GitHub Repository )
• Punching◇Panels ( GitHub Repository )
• Example of changing button placement and hiding
• Score drum roll (lower right of play screen)

Advantages

• Can be written without changing the main source code.
• Possible to implement functions that do not exist in the existing functions.
• Can be linked with off-screen (HTML page background).

Disadvantages

• May not work due to version upgrades of the main unit source code.
  • Mainly in the case of a major version upgrade.
  • Please refer to the Migration Guide for the main possible effects.

What to prepare

• You will be writing JavaScript, so it is recommended to have a text editor that supports JavaScript.
• Visual Studio Code is recommended.
• Object structure/buttons / ID List : This page describes the relationships between existing objects.

Basic usage

• Create a new js file and store it in the “js” folder.
• Specify the following in the score header.

|customjs=name of the file you created.js|
```
- Insert the part you want to insert into [g_customJsObj's property](./AboutCustomFunction#g_customjsobj).
- If you want to call it on the title screen, it is "title (after the title screen (initial) is displayed)", so describe as follows.

```javascript
g_customJsObj.title.push(() => {
    // Describe the process here
});
```

### Example 1: Adding motion to the title of the settings screen

- The following is an example of attaching animation to an existing label.
- The id of the existing label is defined for each screen element, and can be checked in the [ID List](./IdReferenceIndex).

```javascript
g_customJsObj.option.push(() => {

    // Set additional motion for id: lblTitle indicating the title.
    // Add an animation that moves from top to bottom with a 1.5 second animation.
    // Originally, a separate CSS animation named "upToDown" needs to be prepared, but since it is already included, it can be used as is.
    const lblTitle = document.getElementById(`lblTitle`);
    lblTitle.style.animationDuration = `1.5s`;
    lblTitle.style.animationName = `upToDown`;

});
```

### Example 2: Creating a custom label

- The [createDivCss2Label](https://github.com/cwtickle/danoniplus/wiki/fnc-c0002-createDivCss2Label) function can be used to create a label.
- Below is an example of creating and displaying an arbitrary label on the title screen.
- The name of the id should have distinguishing characters such as "local_" and "308_" (work number) at the beginning of the name so that it does not cover the body of the label.

```javascript
g_customJsObj.title.push(() => {

    // Create a label named id: local_lblName
    // The second argument is the text to be displayed on the label, and the third argument is the position and size information of the label
    // Here, x: 0px, y: 350px, width: screen width size (g_sWidth), height: 30px
    const label = createDivCss2Label(`local_lblName`, `For label testing. Text written here will be displayed.`, {
        x: 0, y: 350, w: g_sWidth, h: 30, siz: 14, align: C_ALIGN_LEFT, color: `#cccccc`, 
    });

    // Add the variable stored above for the object you want to add, and the label will appear.
    divRoot.appendChild(label);

    // The created label can be called with document.getElementById.
    const newLabel = document.getElementById(`local_lblName`);
});
```

### Example 3: Creating a custom button

- A button can be created using the [createCss2Button](https://github.com/cwtickle/danoniplus/wiki/fnc-c0004-createCss2Button) function can be used to create a button.
- Below is an example of creating and displaying an arbitrary button on the title screen.

```javascript
g_customJsObj.title.push(() => {

    // Create a button named id: local_btnInfo
    // The second argument is the function to process, the third argument is the position and size of the button, and the accompanying processing
    // Here we create a button with x: 3/4 of the screen width, y: 340px, width: 1/4 of the screen width

    // This button is supposed to be used when moving to another custom screen
    // clearTimeout(g_timeoutEvtTitleId) is needed to stop the loop process in the title screen
    // customCommentInit() is the next function to process and must be defined separately

    const btn = createCss2Button(`local_btnInfo`, `Info`, _ => clearTimeout(g_timeoutEvtTitleId), {
        x: g_sWidth / 4 * 3, y: 340, w: g_sWidth / 4,
        resetFunc: _ => customCommentInit(),
    }, g_cssObj.button_Tweet);

    // Add the variable stored above to the object you want to add and the button will appear.
    divRoot.appendChild(btn);

    // The created label can be called with document.getElementById.
    const newButton = document.getElementById(`local_btnInfo`);
});
```

### Example 4: Creating a custom chart setting

- You can create your own chart settings with custom JS.
- Variables defined in the format `|variable=configuration name|` are all available in `g_rootObj.variable`.
- It is recommended to prefix the chart setting name with a distinguishing character such as `local_' to indicate that the name is unique.

#### Setup on the chart side

```
|local_workNo=123|
```

#### Custom JS description

```javascript
g_customJsObj.title.push(() => {

    // Process to store custom variables defined on the chart side
    // Check to see if it is undefined, in case it is not specified
    let workNo = ``;
    if (g_rootObj.local_workNo !== undefined) {
        workNo = g_rootObj.local_workNo;
    }

});
```

### Example 5: Processing at a specific time during play

- You can add a little gimmick by processing at a specific time during play.
- The number of frames during play can be obtained with `g_scoreObj.baseFrame`, so this variable is used.
- Define it in `mainEnterFrame` that handles loop processing during play.

```javascript
g_customJsObj.mainEnterFrame.push(() => {

    if (g_scoreObj.baseFrame === 1000) {
        // Hide half of the arrow and freeze arrow area at 1000 frames
        $id(`arrowSprite0`).display = `none`;

    } else if (g_scoreObj.baseFrame === 1050) {
        // Undo at 1050 frames
        $id(`arrowSprite0`).display = `inherit`;
    }

});
```