minigame-canvas-engine

The transform property allows rotation and scaling.

Key behaviors:

• Non-recursive: transform does not affect child nodes. If a parent is rotated, the children will not rotate with it.
• Performance: transform only affects rendering, not layout. Changing transform does not trigger a layout recalculation, making it highly efficient for animations.
• Multiple transforms: You can combine multiple transformations in one string, e.g., transform: 'rotate(30deg) scale(1.5, 1.5)'.

Supported operations:

• rotate(deg): Rotates the element (e.g., rotate(30deg)). Supported since v1.0.5.
• scale(x, y): Scales the element (e.g., scale(1.5, 1.5)). Supported since v1.0.9.

Layout is designed to be platform-agnostic by encapsulating all platform-specific dependencies (such as event listeners, image creation, and canvas management) into a single env module.

Instead of modifying the core Layout source code, you can adapt Layout to a new platform by overriding the methods within the env module before initializing the engine. The env module acts as an abstraction layer that the engine calls to interact with the host environment (e.g., WeChat Mini Game, ByteDance Mini Game, Baidu Mini Game, or Browser).

The Text component underwent significant refactoring in version v1.0.15. Users should note the following changes to avoid layout issues:

1. Width Calculation: If width is not set, the Layout engine calculates width based on text content. This can result in unexpected lengths that disrupt page layouts. Always manually set a width for text components.
2. Vertical Centering: Do not use height and lineHeight with the same value to center text. The component now automatically calculates height based on fontSize, lineHeight, and wrapping. Use the verticalAlign property to control vertical alignment instead.
3. Ellipsis Behavior: As noted in the truncation guide, text-overflow: ellipsis now requires white-space: nowrap to function.

Element is the base class for all components in the engine. It defines the common methods and properties shared by all components. While specific components inherit from Element to add specialized behaviors, every Element provides access to standard properties like dataset, classList, and style, as well as DOM-like manipulation methods.

Key concepts:

• ID Uniqueness: Unlike the Web DOM, id is not strictly unique in this engine; it is treated as an identifier. Use getElementsById to retrieve a collection or getElementById to retrieve the first match.
• Event Support: Once an element is retrieved, you can bind events such as touchstart, touchmove, touchend, touchcancel, click, and scroll (the latter is only supported by ScrollView).

The Layout engine supports pseudo-classes to provide quick, declarative interaction effects without requiring manual event listeners (like touchstart or touchend) to reset styles.

Currently, only the :active pseudo-class is supported. It triggers when a node initiates a 'touchstart' event. This is ideal for creating button-like feedback, such as scaling an element down or up when pressed.

To implement this, include the pseudo-class key in your style configuration object.

{
  "color": "#ffffff",
  "backgroundColor": "#34a123",
  "borderRadius": 10,
  "width": 400,
  "height": 120,
  "lineHeight": 120,
  "fontSize": 50,
  "textAlign": "center",
  "marginTop": 20,
  ":active": {
    "transform": "scale(1.05, 1.05)"
  }
}

BitMapText allows you to use custom-designed text as images (BitmapFonts) for better visual effects in games. This engine supports the configuration file specification produced by AngelCode BMFont.

To use a BitMapFont, you must follow two steps:

1. Manually register the font using the registBitMapFont API (to keep the engine lightweight, fonts are not automatically bundled).
2. Declare the font in your component using the font property.

// 1. Register the font first
engine.registBitMapFont(fontConfig);

// 2. Use it in a component via the 'font' property
// <BitMapText font="your_font_name" ... />

Starting from v1.0.9, Layout supports the :active pseudo-class. This triggers when a node fires a touchstart event. It is useful for implementing button feedback (like scaling) without manually binding click events to handle scaling and resetting.

{
  "color": "#ffffff",
  "backgroundColor": "#34a123",
  "borderRadius": 10,
  "width": 400,
  "height": 120,
  "lineHeight": 120,
  "fontSize": 50,
  "textAlign": "center",
  "marginTop": 20,
  ":active": {
    "transform": "scale(1.05, 1.05)"
  }
}

When integrating rewarded video ads, consider these common placement patterns:

• Revive entry: Offer an ad after a player failure to allow them to continue.
• Double reward: Offer an ad at the result screen to multiply rewards earned during a round.

Starting from v1.0.16, you can control how images are rendered using imageType (for image tags) or backgroundImageType (for containers):