Introduction à stage.js

stage.js est une bibliothèque JavaScript open source légère pour le développement de jeux HTML5 2D multiplateforme. Il utilise un modèle de type DOM pour manipuler la toile et gère le cycle de rendu de l'application elle-même. Ce tutoriel présentera les fonctionnalités principales de Stage.js pour vous aider à démarrer facilement.

Points clés

• Stage.js est une bibliothèque JavaScript open source légère pour le développement de jeux HTML5 2D multiplateforme, qui utilise des modèles de type DOM pour gérer la toile et gérer indépendamment le cycle de rendu de votre application.
• La bibliothèque fournit plusieurs fonctionnalités, notamment le positionnement des nœuds (déterminant comment les nœuds s'attachent à leur nœud parent), les événements de souris et de contact pour les mises à jour interactives, les animations de tween pour les transitions en douceur et les écrans graphiques et les animations pour les affichages graphiques et la collection de textures d'animations.
• stage.js est facile à utiliser et intuitif, et convient aux développeurs qui souhaitent créer des applications Web ou des jeux interactifs sans codage complexe ou une connaissance approfondie des graphiques Web. Il peut être installé à l'aide de NPM (Node Package Manager) et grâce à sa conception réactive, il est compatible avec les plates-formes de bureau et mobiles.

Installation et utilisez

Tout d'abord, téléchargez la bibliothèque stage.js. Vous pouvez obtenir la dernière version du référentiel GitHub (qui contient quelques exemples débutants). Vous pouvez également le charger directement à partir du CDN si vous préférez. Après avoir inclus les fichiers principaux, vous devez ajouter vos propres fichiers JavaScript, mais veillez à ne pas inclure vos fichiers d'application avant la bibliothèque .

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

La création d'une application dans stage.js est réalisée en passant une fonction de rappel à

. La bibliothèque chargera tous les composants requis. Enfin, il appellera la fonction de rappel et rendra tout à l'écran. Chaque application que vous créez aura un arbre et la scène sera à la racine de cet arbre. Tous les autres éléments, tels que des images ou des chaînes, deviendront leurs nœuds. Au cours de chaque cycle de rendu, lorsque le nœud est mis à jour, l'arborescence d'application sera redessinée. Stage()

Positionnement du nœud (épinglage)

Le positionnement du nœud détermine comment un nœud est attaché à son nœud parent. Il existe de nombreuses options que vous pouvez définir en utilisant le positionnement du nœud. Certains d'entre eux sont la taille, la position, l'alignement et la transformation. Voici un exemple simple et son explication.

<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>

Nous spécifions d'abord la taille de la fenêtre. Nous fixons la roue d'image.png référencée comme "roue" à la scène. Après cela, nous utilisons "Handle" pour définir la position initiale de cette image ou nœud. "Gire" sur n'importe quel nœud, se plaçant au décalage spécifié par le point d'alignement sur son nœud parent. Les "manche" et "alignent" sont spécifiés sous forme d'unités relatives. Par exemple, 0 est le coin supérieur gauche et 1 est le coin inférieur droit. Le code ci-dessus positionne la roue au centre de la fenêtre.

Pour positionner l'image à une distance horizontale spécifique du centre, vous pouvez utiliser "Offsetx" comme indiqué ci-dessous:

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

Veuillez noter que la distance ci-dessus n'est pas 300 pixels, mais 3/14 fois la taille de la fenêtre. Vous pouvez également définir d'autres valeurs pour les nœuds tels que l'échelle, l'inclinaison et la rotation. Pour évoluer dans une direction spécifique (comme horizontal), vous pouvez utiliser Scalex. L'extrait de code suivant fait évoluer la roue horizontalement de 1,4 fois.

<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>

La rotation, le zoom et l'inclinaison seront le centre du nœud comme point de rotation par défaut. Vous pouvez également définir différents points de rotation pour les nœuds en utilisant les méthodes suivantes:

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

Dans l'ensemble, les éléments fixes vous permettent de les déplacer et de les faire évoluer ou de les faire pivoter.

Événements de souris et de toucher

Pour mettre à jour les nœuds dans l'interaction utilisateur, vous pouvez utiliser une variété d'événements de souris et de contact. Continuez avec notre exemple de roue ci-dessus, nous pouvons écrire le code suivant:

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

ou vous pouvez définir ces événements, tels que Stage.Mouse.CLICK = 'click';. Le code mis à jour sera:

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

Un autre exemple est Stage.Mouse.MOVE = 'touchmove mousemove';.

Tween Animation (tweening)

L'animation Tween applique des transitions lisses aux valeurs de positionnement du nœud. Cela empêche les changements soudains de la position ou de la taille des nœuds pertinents. Par exemple, le code ci-dessous fait pivoter la roue brusquement en radians Pi et modifie sa position de 600 chaque fois qu'il clique.

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

Cependant, l'ajout de la méthode Tween peut lisser la transition.

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

Un certain nombre d'options sont disponibles, telles que la méthode d'assouplissement, la durée et le retard. Dans le code ci-dessus, j'ai réglé la durée à 3000 millisecondes et la fonction de soulagement pour rebondir. De plus, vous pouvez utiliser une variété de fonctions d'assouplissement telles que linéaire, quad, cubique et quart. La définition du retard commencera la transition après le retard spécifié. Si aucun nœud n'est nécessaire une fois l'animation terminée, vous pouvez appeler tween.remove(); pour supprimer le nœud. Pour effectuer d'autres actions, vous pouvez exécuter la fonction de rappel à l'aide de l'extrait de code suivant une fois l'animation Tween terminée:

<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

La texture est utilisée par le nœud d'arbre pour dessiner des graphiques sur la toile. Pour afficher des graphiques sur une toile, vous pouvez utiliser une table de sprite, également connue sous le nom de «galerie de textures». La définition du nom de l'atlas de texture est facultative. La table Sprite doit avoir un ensemble de textures nommées. Pour les utiliser dans une application, nous pouvons nous référer par leur nom. Vous pouvez utiliser des tableaux de texture sous forme de trames pour créer des animations. L'animation elle-même est un nœud. Voici un exemple avec des guerriers animés:

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

Pour animer un guerrier, vous avez besoin du code suivant. Pour le rendre plus rapide, vous pouvez augmenter FPS:

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

anim Il existe de nombreuses autres méthodes, telles que gotoFrame(n), qui vous mèneront directement dans le cadre n . Selon la valeur de n , vous pouvez également utiliser moveFrame(n) pour déplacer le cadre n vers l'avant ou vers l'arrière.

Résumé

Dans ce tutoriel d'introduction, nous couvrons tout ce dont vous avez besoin pour commencer avec stage.js. Les concepts discutés devraient vous aider à créer des animations de personnages de base et interagir avec les utilisateurs à l'aide de sprites. Vous pouvez en savoir plus sur cette bibliothèque sur le site officiel. Je vous recommande également de télécharger des fichiers à partir de leur page GitHub. La démo incluse dans le fichier de téléchargement clarifiera davantage le problème.

(La section FAQ doit être ajoutée ici, le contenu est le même que la section FAQ dans le texte d'entrée, mais peut être légèrement réécrit et ajuster au besoin)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!