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 grace à 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 .

<??>
<??>

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.

Stage(function (stage) {
    stage.viewbox(700, 700);
    Stage.image('wheel')
        .appendTo(stage)
        .pin('handle', 0.5);
});

Stage({
    name: 'wheel',
    image: 'wheel.png'
});

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:

<??>
<??>

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.

Stage(function (stage) {
    stage.viewbox(700, 700);
    Stage.image('wheel')
        .appendTo(stage)
        .pin('handle', 0.5);
});

Stage({
    name: 'wheel',
    image: 'wheel.png'
});

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:

Stage.image('wheel')
    .appendTo(stage)
    .pin({
        handle: 0.5,
        offsetX: 300
    });

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:

Stage.image('wheel')
    .appendTo(stage)
    .pin({
        handle: 0.5,
        scaleX: 1.4
    });

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

node.pin({
    pivotX: x,
    pivotY: y
});

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.

var wheelNode = Stage.image('wheel').appendTo(stage);
wheelNode.pin({
    'handle': 0.5
});
wheelNode.on('click', function () {
    // 在此處對(duì)輪子執(zhí)行某些操作。
});

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

wheelNode.on(click, function () {
     // 在此處對(duì)輪子執(zhí)行某些操作。
 });

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:

var wheelRotation = Math.PI;
var wheelPosition = 300;

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

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:

wheelNode.on('click', function () {
    wheelRotation = -wheelRotation;
    wheelPosition = -wheelPosition;
    this.tween(3000)
        .pin({
            rotation: wheelRotation,
            offsetX: wheelPosition
        })
        .ease('bounce');
});

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

tween.done(function () {
    // 在此處執(zhí)行您的操作。
});

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!