Introduction to Stage.js

Stage.js is a lightweight, open source JavaScript library for cross-platform 2D HTML5 game development. It uses a DOM-like model to manipulate the canvas and manages the rendering cycle of the application itself. This tutorial will introduce the core features of Stage.js to help you get started easily.

Key Points

• Stage.js is a lightweight, open source JavaScript library for cross-platform 2D HTML5 game development, which uses DOM-like models to handle canvas and independently manage the rendering cycle of your application.
• The library provides multiple features including node positioning (determining how nodes attach to their parent node), mouse and touch events for interactive updates, tween animations for smooth transitions, and graphic displays and animations for graphical displays and animations texture collection.
• Stage.js is easy to use and intuitive, and is suitable for developers who want to create interactive web applications or games without complex coding or extensive knowledge of web graphics. It can be installed using npm (Node package manager) and thanks to its responsive design, it is compatible with desktop and mobile platforms.

Installation and use

First, download the Stage.js library. You can get the latest version from the GitHub repository (which contains some beginner examples). You can also load it directly from the CDN if you prefer. After including the core files, you must add your own JavaScript files, but be careful not to include your application files before the library .

<code class="language-html">
</code>

Creating an application in Stage.js is achieved by passing a callback function to

. The library will load all required components. Finally, it will call the callback function and render everything to the screen. Each application you create will have a tree and the stage will be at the root of that tree. All other elements, such as images or strings, will become their nodes. During each rendering cycle, when the node is updated, the application tree will be redrawn. Stage()

Node Positioning (Pinning)

Node positioning determines how a node is attached to its parent node. There are many options you can set using node positioning. Some of them are size, position, alignment, and transformation. Here is a simple example and its explanation.

<code class="language-javascript">Stage(function (stage) {
    stage.viewbox(700, 700);
    Stage.image('wheel')
        .appendTo(stage)
        .pin('handle', 0.5);
});

Stage({
    name: 'wheel',
    image: 'wheel.png'
});</code>

We first specify the viewport size. We attach the image wheel.png referenced as "wheel" to the stage. After that, we use "handle" to set the initial position of this image or node. "handle" on any node, placing itself at the offset specified by the alignment point on its parent node. Both "handle" and "align" are specified as relative units. For example, 0 is the upper left corner and 1 is the lower right corner. The above code positions the wheel in the center of the viewport.

To position the image at a specific horizontal distance from the center, you can use "offsetX" as shown below:

<code class="language-html">
</code>

Please note that the distance above is not 300 pixels, but 3/14 times the size of the viewport. You can also set other values ​​for nodes such as scaling, tilting, and rotation. To scale in a specific direction (such as horizontal), you can use scaleX. The following code snippet scales the wheel horizontally by 1.4 times.

<code class="language-javascript">Stage(function (stage) {
    stage.viewbox(700, 700);
    Stage.image('wheel')
        .appendTo(stage)
        .pin('handle', 0.5);
});

Stage({
    name: 'wheel',
    image: 'wheel.png'
});</code>

Rotation, zoom, and tilt will be the center of the node as the rotation point by default. You can also set different rotation points for nodes using the following methods:

<code class="language-javascript">Stage.image('wheel')
    .appendTo(stage)
    .pin({
        handle: 0.5,
        offsetX: 300
    });</code>

All in all, fixed elements allow you to move them and scale or rotate them.

Mouse and touch events

To update nodes in user interaction, you can use a variety of mouse and touch events. Continue with our wheel example above, we can write the following code:

<code class="language-javascript">Stage.image('wheel')
    .appendTo(stage)
    .pin({
        handle: 0.5,
        scaleX: 1.4
    });</code>

Or you can define these events, such as Stage.Mouse.CLICK = 'click';. The updated code will be:

<code class="language-javascript">node.pin({
    pivotX: x,
    pivotY: y
});</code>

Another example is Stage.Mouse.MOVE = 'touchmove mousemove';.

Tween animation (Tweening)

Tween animation applies smooth transitions to node positioning values. This prevents sudden changes in the position or size of the relevant nodes. For example, the code below rotates the wheel abruptly in PI radians and changes its position by 600 each time it clicks.

<code class="language-javascript">var wheelNode = Stage.image('wheel').appendTo(stage);
wheelNode.pin({
    'handle': 0.5
});
wheelNode.on('click', function () {
    // 在此处对轮子执行某些操作。
});</code>

However, adding the tween method can smooth the transition.

<code class="language-javascript">wheelNode.on(click, function () {
     // 在此处对轮子执行某些操作。
 });</code>

A number of options are available, such as easing method, duration, and delay. In the above code, I have set the duration to 3000 milliseconds and the easing function to bounce. Additionally, you can use a variety of easing functions such as linear, quad, cubic, and quart. Setting the delay will start the transition after the specified delay. If no node is needed after the animation is completed, you can call tween.remove(); to delete the node. To do other actions, you can execute the callback function using the following code snippet after the tween animation is completed:

<code class="language-javascript">var wheelRotation = Math.PI;
var wheelPosition = 300;

wheelNode.on('click', function () {
    wheelRotation = -wheelRotation;
    wheelPosition = -wheelPosition;
    this.pin({
        rotation: wheelRotation,
        offsetX: wheelPosition
    });
});</code>

Texture Atlas

Texture is used by the tree node to draw graphics on the canvas. To display graphics on a canvas, you can use a sprite table, also known as a "texture gallery." Setting the name of the texture atlas is optional. The sprite table needs to have a set of named textures. To use them in an application, we can refer to them by name. You can use texture arrays as frames to create animations. The animation itself is a node. Here is an example with animated warriors:

<code class="language-javascript">wheelNode.on('click', function () {
    wheelRotation = -wheelRotation;
    wheelPosition = -wheelPosition;
    this.tween(3000)
        .pin({
            rotation: wheelRotation,
            offsetX: wheelPosition
        })
        .ease('bounce');
});</code>

To animate a warrior, you need the following code. To make it faster you can increase fps:

<code class="language-javascript">tween.done(function () {
    // 在此处执行您的操作。
});</code>

anim There are many other methods, such as gotoFrame(n), which will take you directly to the n frame. Depending on the value of n, you can also use moveFrame(n) to move the n frame forward or backward.

Summary

In this introductory tutorial, we cover everything you need to get started with Stage.js. The concepts discussed should help you create basic character animations and interact with users using sprites. You can learn more about this library from the official website. I also recommend that you download files from their GitHub page. The demo included in the download file will further clarify the issue.

(The FAQ section should be added here, the content is the same as the FAQ section in the input text, but can be slightly rewrite and adjust as needed)

The above is the detailed content of Introduction to Stage.js. For more information, please follow other related articles on the PHP Chinese website!