English | Japanese

<- Back to Tips Index

Object hierarchy and insertion of labels and buttons

• When adding labels and buttons in custom JS, it is easier to do so if you understand the hierarchical structure of objects.
• This is because added labels and buttons will look different depending on which object they are added under.

Example of adding a label on the play screen

• The hierarchical structure of the play screen is shown in the figure below.
• Here is how it would look if labels 1-3 were added to "divRoot", "mainSprite", and "backSprite", respectively.
• The addition of the same label will change whether it is displayed in the front or in the back, depending on where it is inserted.
• Label 1 will appear at the very front, and label 3 will appear behind the arrow/freeze arrow.

How to add a label

• Add a label using the format (name of object to be added).appendChild(newly created object).
• For newly created objects, use createDivCss2Label function is useful.
• For more details, see [Get started the custom-JS#Example 2-Create a custom label](./tips-0020-firststep-customjs#Example 2-Create a custom label) for details.

Notes on adding labels

• For an overview of the hierarchy of each screen, see Object hierarchy for an overview of the hierarchy of each screen.
• All screens have "canvas-frame" and "divRoot" objects, but when you switch screens, all objects under "divRoot" will disappear (divRoot itself will disappear).
• If you want to display them permanently, use "canvas-frame", but be careful because labels added to "canvas-frame" will always be displayed in the foreground, as shown in the figure above.

How to resolve the case where the label covers the entire screen

• If the label is large, existing buttons may not be able to be pressed depending on the situation as shown below.
• In this case, specify pointerEvents: "none" when specifying the createDivCss2Label function.

    const label = createDivCss2Label(`local_lblName`, `Label test`, {
        x: 0, y: 350, w: g_sWidth, h: 30, siz: 14, align: C_ALIGN_LEFT, color: `#cccccc`, 
        pointerEvents: `none`,
    });