Tutorial zur JavaScript-Verbesserung – Cocos2d-JS-Bildschirmanpassungslösung

Dieser Artikel ist das offizielle HTML5-Schulungs-Tutorial der H5EDU-Organisation. Er stellt hauptsächlich vor: JavaScript-Erweiterungs-Tutorial – Cocos2d-JS-Bildschirmanpassungslösung

1. Legen Sie die Bildschirmanpassungsrichtlinie fest (Auflösungsrichtlinie). 🎜 >Wenn Sie keine Auflösungsrichtlinie verwendet haben, müssen Sie nur den folgenden Code aufrufen, nachdem der Ladevorgang des Spiels abgeschlossen ist (im Rückruf der Funktion cc.game.onStart):

cc.view.setDesignResolutionSize(320 , 480 , cc.ResolutionPolicy.SHOW_ALL);
Die ersten beiden Parameter der setDesignResolutionSize-Funktion sind die Spielauflösung, die Sie in Ihrem Code verwenden möchten, und der dritte Parameter ist das von Ihnen gewählte Anpassungsschema. In die Engine sind fünf Anpassungsschemata integriert, von denen jedes sein eigenes, einzigartiges Verhalten aufweist. Einzelheiten finden Sie weiter unten.

Wenn Sie die Designauflösung festgelegt haben, können Sie Ihre Auflösungsrichtlinie direkt festlegen:

cc.view.setResolutionPolicy(cc.ResolutionPolicy.NO_BORDER);
In nativen Spielen immer verwenden den gesamten Bildschirmbereich aus, aber im Web kann Ihre Seite außer dem Spiel noch andere visuelle oder textliche Elemente enthalten, oder Sie müssen vielleicht einen schönen Rahmen für Ihr Spiel entwerfen. Daher passt sich das Anpassungsschema der Web-Engine in Cocos2d-JS standardmäßig an den übergeordneten Knoten des Spiel-Canvas-Elements an. Wenn Sie möchten, dass sich die Spielszene an den Browserbildschirm anpasst, müssen Sie den Canvas nur direkt darunter platzieren der Körper:


🎜>
Auflösung verwenden Die Vorteile von Policy liegen auf der Hand. Unabhängig von der Bildschirmgröße des Geräts oder dem Seitenverhältnis des Browserfensters wird Ihre Spielszene automatisch auf die Bildschirmgröße skaliert. Noch wichtiger ist, dass Sie im Spielcode die Spielszene immer mit der von Ihnen entworfenen Spielauflösung gestalten. Wenn Sie beispielsweise die Designauflösung auf 320 * 480 einstellen, lauten die Koordinaten der oberen rechten Ecke Ihres Spielfensters im Spielcode immer (320, 480) (im FIXED_WIDTH-Modus kann die Höhe skaliert werden, auch in FIXED_HEIGHT-Modus Die Breite kann skaliert werden, siehe Details unten.

3. Überwachen Sie Ereignisse zur Änderung der Browserfenstergröße.

Das neue Anpassungsschema ermöglicht einen automatischen Wiederholungsversuch der Anpassung, wenn sich die Browsergröße ändert. Zum Beispiel, wenn Benutzer ziehen, um die Browsergröße zu ändern, oder, was noch nützlicher ist, wenn sie ihr Telefon drehen. Dieses Verhalten kann jederzeit im Spiel aktiviert werden. Rufen Sie einfach die Funktion resizeWithBrowserSize von cc.view auf:

cc.view.resizeWithBrowserSize(true); Wir bieten cc. view bietet eine neue Funktion über die setResizeCallback-Funktion, um auf Ereignisse zur Änderung der Browserfenstergröße zu warten:

cc.view.setResizeCallback(function() {
// Machen Sie, was Sie wollen. Erforderliche Anpassungsvorgänge auf der Ebene des Spielinhalts
// Sie können beispielsweise den anzuwendenden Anpassungsmodus basierend auf der Ausrichtung des Mobilgeräts des Benutzers bestimmen
}); 🎜>
Fullscreen API ist eine neu entwickelte API, die es Browsern ermöglicht, dass Webseiten den Vollbildmodus des Benutzers abrufen.

Cocos2d-JS wird versuchen, in mobilen Browsern automatisch den Vollbildmodus aufzurufen, um Benutzern ein besseres Spielerlebnis zu bieten (es ist zu beachten, dass nicht alle Browser diese API unterstützen).

Andererseits unterstützen fast alle modernen Browser auf dem Desktop die Vollbild-API. Wenn Sie diese API verwenden möchten, vereinfacht Cocos2d-JS auch die Verwendung:

Versuchen Sie, den Vollbildmodus einzugeben Modus (erfordert Benutzerinteraktion): cc.screen.requestFullScreen(targetElement, onFullScreenCallback);
Erkennen, ob es sich im Vollbildmodus befindet: cc.screen.fullScreen();
Vollbildmodus verlassen: cc.screen. exitFullScreen();
4.4.3 Wichtige Konzepte

1. Der Spielrahmen ist der anfängliche übergeordnete Knoten Ihres Spiel-Canvas-Elements das HTML-Dokument. Wenn Sie möchten, kann es sich jedoch um einen beliebigen Containerknoten in der DOM-Struktur handeln. Die anfängliche Größe des Canvas-Elements ist nicht wichtig; sie wird automatisch an die Rahmengröße angepasst, die Sie während des Bildschirmanpassungsprozesses festgelegt haben. Auch hier gilt: Wenn Sie möchten, dass das Spielfenster in das gesamte Browserfenster passt, platzieren Sie das Canvas-Element einfach direkt unter dem Körper.

2. Game-Container-Container

Während des Initialisierungsprozesses von Cocos2d-JS platziert die Engine Ihr Canvas-Element automatisch in einem DIV-Container und dieser Container wird dem Canvas hinzugefügt ursprünglicher übergeordneter Knoten (Spielrahmen). Dieser Spielecontainer ist ein wichtiges Hilfselement für die Implementierung von Bildschirmanpassungslösungen. Sie können über cc.container darauf zugreifen.

3. Spielweltinhalt

Die Spielwelt stellt das im Spiel verwendete Weltkoordinatensystem dar.

4. Ansichtsfenster

Das Ansichtsfenster ist die Koordinaten und Größe der Spielwelt im Verhältnis zum Koordinatensystem des Spiel-Canvas-Elements

5 🎜>
Die Containeranpassungsstrategie ist dafür verantwortlich, den Spielcontainer und die Spiel-Canvas-Elemente so zu skalieren, dass sie zum Spielrahmen passen.

6. Inhaltsanpassungsstrategie Inhaltsstrategie

Die Inhaltsanpassungsstrategie ist für die Skalierung der Spielwelt an den Spielcontainer verantwortlich und berechnet und legt auch das Fenster fest.