Logic Nodes und JavaScript

Blend4Web verfügt über einen sehr guten visuellen Logik-Editor, mit dem Programme entwickelt werden können, ohne Blender verlassen zu müssen. Das ist für Projekte mit geringerer Komplexität völlig ausreichend. Mit JavaScript können Sie jedoch viel mehr machen, indem Sie direkt auf die Engine API zugreifen.

Damit kommen wir zur Frage: Gibt es eine Möglichkeit, die Einfachheit der visuellen Programmierung mit der Leistungsfähigkeit des JavaScript-Codes zu verbinden? Die Entwickler von Blend4Web arbeiten schon seit längerer Zeit an einer derartigen Lösung und sind vor Kurzem auch fertig geworden.

Node-based Logic

Das Hauptelement zum Verbinden der Node Logik mit JavaScript ist der JS Callback Node. Dieser Knoten wird verwendet, um eine bestimmte Funktion aus dem Programmcode heraus aufzurufen und an sie Parameter zu übergeben. Während die Funktion ihre Arbeit ausführt, wartet JS Callback geduldig auf das Ende. Nach Abschluss der Aufgabe gibt die Funktion die Kontrolle an den JS Callback-Node zurück und die logische Knotenkette setzt ihre Arbeit fort.

Schauen wir uns ein einfaches Beispiel für eine solche Interaktion an.

Nehmen wir an, dass unsere Szene ein Objekt enthält, das eine bestimmte Funktion ausführen soll, wenn es ausgewählt ist. Der Code der Funktion erhält auch eine Textnachricht, wie z. B.“Hello World!“… oder vielleicht „Hello Script!

Machen wir zunächst eine logische Kette, die eine Variable erzeugt und überwacht, ob das Objekt ausgewählt ist.

Dies ist ein sehr einfaches und logisches Setup. Zunächst wird das R1-Register initialisiert und der Text „Hello Script! Danach wird das Control an den Knoten Switch Select übergeben, der auf das Objekt Cube wartet. Wenn es ausgewählt ist, wird das Control an den nächsten Knoten übergeben; wenn nicht, wartet der Knoten weiter.

Der nächste Halt ist der JS Callback Node selbst!

Zuerst müssen wir den Namen der Funktion angeben, die der Knoten aufrufen wird. Dies sollte im Feld Callback-ID geschehen. Wenn Sie einige Daten an die Funktion übergeben werden müssen, sollten Sie sie zum Feld Parameter hinzufügen.

Jede Variable belegt einen separaten Slot; Slots können mit der „+“ -Taste hinzugefügt werden. JS Callback kann nicht nur Variablen, sondern auch ganze Szenenobjekte (in Form von Arrays) übergeben. In unserem Fall müssen wir das R1-Register im ersten Steckplatz setzen.

Nehmen wir nun an, dass der JS Callback-Knoten seine Arbeit beendet hat und von der aufgerufenen Funktion eine Ausgabe erhalten hat. Nun, um sicher zu gehen, geben wir den Wert des R1-Registers an die Browser-Konsole aus, indem wir den Node Console Print verwenden.

JavaScript Code

Da für die Interaktion zwischen JavaScript und Node-Logik ein spezifisches Modul benötigt wird, müssen wir dieses Modul zuerst importieren.

Copy to Clipboard

Jetzt lasst uns unsere Funktion registrieren. Das sollte vor dem Laden der Szene geschehen:

Copy to Clipboard

Wie Sie sehen können, hat er die im JS-Callback-Knoten erwähnte “Node” -Kennung und den Namen der Funktion.

Und hier ist die Funktion selbst:

Copy to Clipboard

Es sollte beachtet werden, dass der JS Callback-Node Werte als Array übergibt und empfängt. Die Variable Input[0] enthält hier den Wert des R1-Registers, der in der Browser-Konsole angezeigt wird. Anschließend gibt die Funktion den Ausgang[0] mit einer Textnachricht zurück.

Der JS Callback-Node erhält das Ergebnis, während der nächste Knoten Console Print den Text an die Browser-Konsole ausgibt.

Und hier ist die komplette Liste des Skripts

Copy to Clipboard

"use strict"

// register the application module
b4w.register("logic_nodes_js_main", function(exports, require) {

// import modules used by the app
var m_app = require("app");
var m_cfg = require("config");
var m_data = require("data");
var m_preloader = require("preloader");
var m_ver = require("version");
var m_logic = require("logic_nodes");

// detect application mode
var DEBUG = (m_ver.type() == "DEBUG");

// automatically detect assets path
var APP_ASSETS_PATH = m_cfg.get_assets_path("logic_nodes_js");

/**
* export the method to initialize the app (called at the bottom of this file)
*/
exports.init = function() {
m_app.init({
canvas_container_id: "main_canvas_container",
callback: init_cb,
show_fps: DEBUG,
console_verbose: DEBUG,
autoresize: true
});
}

/**
* callback executed when the app is initialized
*/
function init_cb(canvas_elem, success) {

if (!success) {
console.log("b4w init failure");
return;
}

m_preloader.create_preloader();

// ignore right-click on the canvas element
canvas_elem.oncontextmenu = function(e) {
e.preventDefault();
e.stopPropagation();
return false;
};
m_logic.append_custom_callback("node", node_cb);
load();
}

/**
* load the scene data
*/
function load() {
m_data.load(APP_ASSETS_PATH + "logic_nodes_js.json", load_cb, preloader_cb);
}

/**
* update the app's preloader
*/
function preloader_cb(percentage) {
m_preloader.update_preloader(percentage);
}

/**
* callback executed when the scene data is loaded
*/
function load_cb(data_id, success) {

if (!success) {
console.log("b4w load failure");
return;
}

m_app.enable_camera_controls();

// place your code here

}

function node_cb(input,output) {
console.log (input[0]);
output[0] = " Hey Logic!";
}

});

// import the app module and start the app by calling the init method
b4w.require("logic_nodes_js_main").init();

Vielen Dank für Ihren Besuch.

Logic Nodes und JavaScript.

Leave A Comment

Link zur Datenschutzerklärung