Einführung in Stage.js

Stage.js ist eine leichte Open-Source-JavaScript-Bibliothek für plattformübergreifende 2D-HTML5-Spieleentwicklung. Es verwendet ein DOM-ähnliches Modell, um die Leinwand zu manipulieren und den Rendering-Zyklus der Anwendung selbst zu verwalten. In diesem Tutorial wird die Kernfunktionen von Bühnen.Js vorgestellt, damit Sie leicht loslegen können.

Schlüsselpunkte

• Stage.js ist eine leichte Open-Source-JavaScript-Bibliothek für plattformübergreifende 2D-HTML5-Spieleentwicklung, die DOM-ähnliche Modelle verwendet, um Leinwand zu verarbeiten und den Rendering-Zyklus Ihrer Anwendung unabhängig zu verwalten.
• Die Bibliothek enthält mehrere Funktionen, einschließlich der Knotenpositionierung (Feststellung, wie Knoten an ihren übergeordneten Knoten anhängen), Maus- und Berührungsereignisse für interaktive Updates, Tween -Animationen für reibungslose Übergänge und grafische Anzeigen und Animationen für grafische Anzeigen und Animationen Textursammlung.
• Stage.js ist einfach zu bedienen und intuitiv und eignet sich für Entwickler, die interaktive Webanwendungen oder Spiele ohne komplexe Codierung oder umfangreiche Kenntnisse der Webgrafiken erstellen möchten. Es kann mit NPM (Knotenpaketmanager) installiert werden und dank des reaktionsschnellen Designs ist es mit Desktop- und Mobilfunkplattformen kompatibel.

Installation und verwenden Sie

Laden Sie zunächst die Bühne.JS -Bibliothek herunter. Sie können die neueste Version aus dem Github -Repository (mit einigen Anfänger -Beispielen) erhalten. Sie können es auch direkt vom CDN laden, wenn Sie es vorziehen. Nachdem Sie die Kerndateien eingefügt haben, müssen Sie Ihre eigenen JavaScript -Dateien hinzufügen. Achten Sie jedoch darauf, dass Sie Ihre Anwendungsdateien nicht vor der Bibliothek einfügen.

<🎜>
<🎜>

Erstellen einer Anwendung in Stage.js wird erreicht, indem eine Rückruffunktion an

übergeben wird. Die Bibliothek lädt alle erforderlichen Komponenten. Schließlich wird die Rückruffunktion aufgerufen und alles auf den Bildschirm rendern. Jede Anwendung, die Sie erstellen, hat einen Baum und die Bühne befindet sich an der Wurzel dieses Baumes. Alle anderen Elemente, wie Bilder oder Saiten, werden zu ihren Knoten. Während jedes Rendering -Zyklus wird der Anwendungsbaum neu gezeichnet, wenn der Knoten aktualisiert wird. Stage()

Knotenpositionierung (Pinning) Die Positionierung der Knoten

bestimmt, wie ein Knoten an seinen übergeordneten Knoten angehängt wird. Es gibt viele Optionen, die Sie mit der Knotenpositionierung festlegen können. Einige von ihnen sind Größe, Position, Ausrichtung und Transformation. Hier ist ein einfaches Beispiel und seine Erklärung.

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

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

Wir geben zuerst die Ansichtsfenstergröße an. Wir befestigen das Bildrad. Danach verwenden wir "Handle", um die Anfangsposition dieses Bildes oder Knotens festzulegen. "Handle" auf jedem Knoten und platzieren Sie sich am Offset, der durch den Ausrichtungspunkt auf seinem übergeordneten Knoten angegeben ist. Sowohl "Griff" als auch "Align" werden als relative Einheiten angegeben. Zum Beispiel ist 0 die obere linke Ecke und 1 die untere rechte Ecke. Das obige Code positioniert das Rad in der Mitte des Ansichtsfensters.

Um das Bild in einem bestimmten horizontalen Abstand von der Mitte zu positionieren, können Sie "OffsetX" verwenden, wie unten gezeigt:

<🎜>
<🎜>

Bitte beachten Sie, dass die obige Entfernung nicht 300 Pixel, sondern das 14/14 -fache der Größe des Ansichtsfensters beträgt. Sie können auch andere Werte für Knoten wie Skalierung, Kippen und Rotation festlegen. Um in eine bestimmte Richtung (z. B. horizontal) zu skalieren, können Sie Scalex verwenden. Der folgende Code -Snippet skaliert das Rad horizontal um das 1,4 -fache.

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

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

Rotation, Zoom und Neigung sind standardmäßig die Mitte des Knotens als Rotationspunkt. Sie können auch verschiedene Rotationspunkte für Knoten mit den folgenden Methoden einstellen:

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

Insgesamt können Sie mit festen Elementen sie bewegen und skalieren oder drehen.

Maus- und Berührereignisse

Um Knoten in der Benutzerinteraktion zu aktualisieren, können Sie eine Vielzahl von Maus- und Berührungsereignissen verwenden. Weiter mit unserem Radbeispiel oben können wir den folgenden Code schreiben:

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

oder Sie können diese Ereignisse definieren, wie z. B.

. Der aktualisierte Code ist: Stage.Mouse.CLICK = 'click';

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

Ein weiteres Beispiel ist

. Stage.Mouse.MOVE = 'touchmove mousemove';

Tween Animation (Tweening)

Tween Animation wendet reibungslose Übergänge auf Knotenpositionierungswerte an. Dies verhindert plötzliche Änderungen der Position oder Größe der relevanten Knoten. Beispielsweise dreht der folgende Code das Rad abrupt in PI -Radians und ändert seine Position bei jedem Klicken um 600.

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

Das Hinzufügen der Tween -Methode kann jedoch den Übergang glätten.

wheelNode.on(click, function () {
     // 在此处对轮子执行某些操作。
 });

Eine Reihe von Optionen sind verfügbar, z. B. Lockerungsmethode, Dauer und Verzögerung. Im obigen Code habe ich die Dauer auf 3000 Millisekunden und die zu sprungende Lockerfunktion festgelegt. Darüber hinaus können Sie eine Vielzahl von Lockerungsfunktionen wie linear, Quad, Kubik und Quart verwenden. Wenn Sie die Verzögerung festlegen, startet der Übergang nach der angegebenen Verzögerung. Wenn nach Abschluss der Animation kein Knoten benötigt wird, können Sie

anrufen, um den Knoten zu löschen. Um andere Aktionen auszuführen, können Sie die Rückruffunktion mit dem folgenden Code -Snippet ausführen, nachdem die Tween -Animation abgeschlossen ist: tween.remove();

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

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

Texturatlas

Textur wird vom Baumknoten verwendet, um Grafiken auf der Leinwand zu zeichnen. Um Grafiken auf einer Leinwand anzuzeigen, können Sie eine Sprite -Tabelle verwenden, die auch als "Texture Gallery" bezeichnet wird. Das Einstellen des Namens des Texturatlas ist optional. Die Sprite -Tabelle muss über eine Reihe benannter Texturen verfügen. Um sie in einer Anwendung zu verwenden, können wir sie mit Namen auf sie verweisen. Sie können Textur -Arrays als Frames verwenden, um Animationen zu erstellen. Die Animation selbst ist ein Knoten. Hier ist ein Beispiel mit animierten Krieger:

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

Um einen Krieger zu animieren, benötigen Sie den folgenden Code. Um es schneller zu machen, können Sie FPS erhöhen:

tween.done(function () {
    // 在此处执行您的操作。
});

Es gibt viele andere Methoden wie anim, die Sie direkt zum gotoFrame(n) n -Rahmen bringen. Abhängig vom Wert von n können Sie auch verwenden, um den moveFrame(n) n Frame vorwärts oder rückwärts zu verschieben.

Zusammenfassung

In diesem Einführungs -Tutorial behandeln wir alles, was Sie brauchen, um mit Bühne.js zu beginnen. Die besprochenen Konzepte sollen Ihnen helfen, grundlegende Charakteranimationen zu erstellen und mit den Nutzern mit Sprites zu interagieren. Sie können mehr über diese Bibliothek von der offiziellen Website erfahren. Ich empfehle auch, dass Sie Dateien von ihrer Github -Seite herunterladen. Die in der Download -Datei enthaltene Demo wird das Problem weiter klarstellen.

(Der FAQ -Abschnitt sollte hier hinzugefügt werden, der Inhalt entspricht dem FAQ -Abschnitt im Eingangstext, kann jedoch leicht umschreiben und nach Bedarf einstellen)

Das obige ist der detaillierte Inhalt vonEinführung in Stage.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!