Zeigen Sie die Cursors der Teilnehmer: Multi-User-Demo

Übersicht

In einem Multi-User-Experiment, an dem mehrere Teilnehmer in Echtzeit teilnehmen, möchten Sie möglicherweise ihre Cursor füreinander sichtbar machen. In dieser Demo zeigen wir Ihnen, wie Sie das einrichten.

Hinweis zur Implementierung

Bitte beachten Sie, dass es in Labvanced mehrere Ansätze gibt, um die Cursorpositionen von mehreren Teilnehmern zu teilen, da die Plattform flexibel ist. Es ist daher wichtig, Ihr experimentelles Design zu berücksichtigen, bevor Sie sich für einen Ansatz entscheiden.

Um diesen Punkt klar zu machen, werden wir zwei Ansätze präsentieren, um dies zu erreichen:

• Ansatz 1: eine Demo, die Arrays nutzt zur Verteilung der Cursorposition
• Ansatz 2: in einem weiter unten stehenden Abschnitt, werden wir eine Demo erörtern, in der Einzelwerte für x- und y-Koordinaten verwendet werden können

Ansatz 1: Cursoranzeige mithilfe von Maus-Tracking und Arrays

Diese Demo umfasst zwei Objekte (eine Maus pro Benutzer) und wird im Seitenbereich im Objekt-Panel aufgelistet. Dieser Ansatz kann für Multi-User-Studien verwendet werden, bei denen es 2 oder mehr Teilnehmer gibt.

Objekte

Unterhalb befindet sich das Object Properties Panel, in dem alle visuellen Stile bearbeitet werden können. Derzeit haben beide Cursor einen Visibility von 1 (das bedeutet Opazität = 100 %), wie unten gezeigt:

Für diese Demo werden wir den Visibility auf 0 ändern, wie unten gezeigt. Später, wenn das Experiment beginnt, werden wir einen der Cursor sichtbar machen. d.h. Wenn Sie Teilnehmer 1 sind, sehen Sie das Cursorobjekt von Teilnehmer 2 und umgekehrt. Dies wird im Abschnitt Event:Init unten beschrieben.

Wenn Sie nicht zwei Objekte für die Cursor haben möchten, beziehen Sie sich auf diesen Abschnitt, um eine alternative Methode mit nur einem einzigen Cursorobjekt zu sehen.

Benutzerdefinierte Variablen

Hier listen wir alle benutzerdefinierten Variablen auf, die für die Zwecke dieser Demo erstellt wurden. Sie können diese im Voraus oder innerhalb des Editors erstellen, während Sie Ihr Experiment aufbauen.

Ereignisübersicht

Um ein Ereignis hinzuzufügen, klicken Sie auf den [+] Frame Event (on this frame only).

Wir haben die folgenden Ereignisse in dieser Demo:

1. Ereignis:Init: Sichtbarmachen der Maus des anderen Teilnehmers
2. Ereignis: sendMove: Senden der Mauskoordinaten
3. Ereignis: receiveMove: Empfangen der Mauskoordinaten

Im Folgenden wird die Struktur jeder der Ereignisse beschrieben.

EREIGNIS: init

Dieses Ereignis spezifiziert, was passiert, wenn der Frame initialisiert wird. In diesem Fall ist unser Ziel, dass Teilnehmer 1 die Maus von Teilnehmer 2 sieht und umgekehrt.

Auslöser

Der Auslöser für das Ereignis ist On Frame Init, weil wir die Sichtbarkeit des Cursorobjekts sofort nach der Initialisierung des Frames zuweisen wollen.

Aktion

Nachdem Sie dies angegeben haben und die Schaltfläche „Weiter“ geklickt haben, können Sie die Aktionen auswählen, die beim Initialisieren des Frames auftreten sollen.

Unten zeigen wir, dass die Aktion, die wir verwenden, eine Steuerungsaktion → „Wenn… Dann“, ist, sodass:

• Wenn Role_Id gleich 1 ist (Hinweis: Role_Id ist eine Variable, die einzigartig für Multi-User-Studien ist und dem Teilnehmer seine ID zuweist).
• Dann wird Set Object Property der mouse_user_2 Objekts Visibility auf 1 gesetzt.
• Hinweis: Die Kombination dieser beiden Aktionen bedeutet im Wesentlichen: „Wenn Sie Teilnehmer 1 (Role_Id==1) sind, dann sehen Sie das Objekt mouse_user_2.“
• Hinweis: Wie wird der Role_Id == 1 im Editor spezifiziert? Verweisen Sie auf den Schritt-für-Schritt-Abschnitt unten, in dem dies detaillierter erklärt wird.

Im Else If Abschnitt machen wir dasselbe, aber für Teilnehmer 2 (Role_Id==2). Das Zielobjekt ist mouse_user_1, das den Visibility Wert von 1 haben sollte.

EREIGNIS: sendMove

Als nächstes müssen wir eine „Brücke“ zwischen den beiden Teilnehmern herstellen, sodass, wenn Sie Ihre Maus bewegen, diese Werte verfolgt/gemeldet und an den anderen Teilnehmer gesendet werden.

Auslöser

Daher wird Mouse trigger für dieses Ereignis verwendet, bei dem jede „Bewegung“, die ausgeführt wird, das Ereignis auslöst.

Aktionen

Einmal mehr ist ein Control Action → If…Then Befehl erforderlich:

Wenn Ihre Role_Id==1 ist, dann finden die folgenden Variable Actions statt:

• Set / Record a Variable: Zeigen/definieren Sie die Variable moveMouse1 und setzen Sie sie gleich dem auslögerspezifischen Wert von Mouse [X,Y] Array.
• Distribute Variable: Teilen Sie diese Variable mit Teilnehmer 2.

Andernfalls …

Dann:

• Die moveMouse2 wird das Maus-[X,Y]-Array aufzeichnen (genauso wie im vorherigen Beispiel oben), aber wir verwenden es, um die Maus-Tracking-Werte von Teilnehmer 2 zu speichern und setzen es gleich ihrem Maus-[X,Y]-Array.
• Dann verteilen Sie diese Variable an Teilnehmer 1.

Zusammenfassung - Bis hierher haben wir:

• Variablen erstellt, um das Maus-Tracking-[X,Y]-Array jedes Teilnehmers (moveMouse1 für den Cursor von Teilnehmer 1 und moveMouse2 für den Cursor von Teilnehmer 2) zu speichern
• Und eine Brücke etabliert, über die der Maus-Tracking-Wert an den anderen Teilnehmer gesendet wird, indem die Distribute Variable-Aktion verwendet wird.

EVENT: receiveMove

Als Nächstes müssen wir angeben, was mit diesen Mausverfolgungswerten geschehen soll. In diesem Fall wollen wir, dass beim Empfang der Mausbewegungen im Array-Format das Mauszeigerobjekt geändert wird, um die Bewegungen widerzuspiegeln! Mit anderen Worten, wir werden die Werte des [X,Y]-Arrays an den Mauszeiger binden, sodass er sich im Wesentlichen bewegt und zeigt, was der andere Teilnehmer auf dem Bildschirm tut! Daher werden die unten beschriebenen Trigger und Aktionen verwendet, um dies zu erreichen.

Trigger

Da die Mausverfolgungswerte in Variablen gespeichert werden, bedeutet jede Änderung dieser Variablen, dass sich die Maus bewegt. Daher können wir den Variable Value Changed trigger verwenden, um den Mauszeigerstandort auf dem Bildschirm zu aktualisieren, indem wir die beiden spezifischen Variablen auswählen, die die Mausverfolgungswerte enthalten, wie unten gezeigt:

Aktion

Als Nächstes möchten wir die Select From Array (Read) action verwenden, um die x- und y-Koordinatenwerte aus den Variablenarrays des Zeigers abzurufen, da wir vorhaben, sie zu verwenden, um die Koordinaten des Objekts festzulegen.

Daher wählen wir die moveMouse1-Variable aus, die das Array des [X,Y] von Teilnehmer 1 enthält und rufen den ersten Wert ab, der ein Fixed Index von 1 war, und speichern diesen Wert in einer numerischen Variable namens x_mouse1, da die x-Werte im Array an erster Stelle aufgeführt sind.

Wir fügen eine weitere Select From Array (Read)-Aktion hinzu und für die Fixed Index schreiben wir 2, weil wir auf den zweiten Arraywert, der die y-Koordinaten enthält, zugreifen und diesen in der y_mouse1-Variable speichern möchten.

Um das Cursorbild zu bewegen, müssen wir seine Bildkoordinaten in Echtzeit aktualisieren, indem wir ihm die x- und y-Werte zuweisen, die den x- und y-Koordinaten aus der Mausverfolgung entsprechen (die wir in den obigen Aktionen abgerufen und in den Variablen x_mouse1 und y_mouse1 gespeichert haben).

Um dies zu erreichen, müssen wir die Set Object Property-Aktion auswählen, damit die Target des mouse_user_1 (im Bild unten wird es nur als ‚Maus‘ bezeichnet, da das Dialogfeld den Titel kürzt) und seine Eigenschaft X den Wert (=) von x_mouse1+5 hat, was eine arithmetische Operation ist. Siehe diese Schritt-für-Schritt-Erklärung, wie dies eingerichtet wird.

An dieser Stelle fragen Sie sich vielleicht, warum die +5 im Eingabefeld erscheint... Das liegt daran, dass wir ein Offset erstellen müssen, da dieses Objekt tatsächlich ein Textobjekt ist, das ein eingebettetes Bild enthält (wie zu Beginn dieses Walkthroughs beschrieben). Wenn Sie Ihre Studie also so aufbauen und den Benutzern ihre eigenen angepassten Cursors anzeigen möchten, wie wir es hier tun, aber auch auf andere Objekte in der Studie klicken möchten, dann wird dies nicht möglich sein, es sei denn, Sie erstellen dieses Offset (es sei denn, Sie entscheiden sich, das Bild des Cursors wegzulassen und nur das Textlabel zu behalten).

Weiter geht's, wir wählen +Add Property und zeigen auf das gleiche Bildobjekt, wählen die Y-Eigenschaft und setzen sie gleich der Variable y_mouse1.

Wir wiederholen denselben Prozess, wählen jedoch die anderen Variablen aus, die wir für Teilnehmer 2 vorgesehen haben:

Hier zeigen wir auf das Objekt mouse_user_2 und weisen die jeweiligen Variablen zu:

Zusammen ermöglichen all diese Aktionen beiden Cursorobjekten, sich für beide Teilnehmer zu bewegen, indem sie Werte aus dem Array-Variablen lesen und diese numerischen Werte dann verwenden, um die x- und y-Werte des Objekts festzulegen.

EVENT: end

Als Nächstes erstellen wir ein Ereignis, um den Datenaufnahmeprozess offiziell zu beenden und die Daten zu speichern, indem wir einen ‚Ende‘-Button einfügen, der, wenn er als Trigger verwendet wird, zu einer Steueraktion führt, bei der die Accept/End Session-Aktion stattfindet.

Trigger

Um die Sitzung zu beenden, ist der Button-Trigger das Klicken auf die End Button, die das Ende der Sitzung auslöst.

Aktion

Die Aktion besteht darin, die Sitzung zu akzeptieren/zu beenden.

Bitte beachten Sie erneut, dass dieses Demo zu Lernzwecken dient und nur eine von vielen Methoden ist, um den Maus- und Cursorstandort in einem Mehrbenutzertest zu teilen. Ein weiteres Beispiel, wie dieser Effekt erreicht werden kann, wird in den kommenden Abschnitten beschrieben.

Ansatz 2: Einzelvariablenansatz zum Teilen von Cursorn in Mehrbenutzerstudien

In dieser anderen Demo, anstelle von Arrays, zeigen wir, wie Sie die Option haben, Einzelwerte (d. h. direkt auf die X- und Y-Koordinaten zuzugreifen) zu verwenden.

Hier ist eine vollständige Vorschau dieser Demo, einschließlich einer Vorschau der am Ende aufgezeichneten Daten:

Einzelnes Objekt für den Cursor

Diese Demo unterscheidet sich auch von der vorherigen, da anstelle von zwei Objekten für den Cursor nur eines vorhanden ist. Dieser Ansatz eignet sich hervorragend für Mehrbenutzertests, die nur zeigen möchten, wo sich der Cursor des ‚Gegners‘ oder ‚Teamkollegen‘ befindet.

Benutzerdefinierte Variablen

Dieses andere Demo umfasst die folgenden benutzerdefinierten Variablen und deren Spezifikationen. Während dieses Demo weniger Variablen hat, erfordert es mehr Ereignisse/Aktionen als das vorherige Beispiel mit Arrays.

EVENT: sendMove

Der Trigger ist die Mausbewegung:

Die Aktion besteht darin, die trigger-spezifischen Werte der X- und Y-Koordinate der Maus in zwei separaten Variablen zu erfassen, die speziell benannt sind, um Teilnehmer 1 anzuzeigen.

Die nächsten Aktionen unter dieser Bedingung „Wenn/Dann“ dienen dazu, diese beiden Werte an Teilnehmer 2 zu verteilen.

Dann fügen wir eine 'Else If'-Bedingung hinzu, um die trigger-spezifischen Werte der X-Koordinate und Y-Koordinate der Maus in zwei separate Variablen zu speichern, die speziell benannt sind, um Teilnehmer 2 anzuzeigen.

Die nächsten Aktionen werden verwendet, um diese beiden Werte an Teilnehmer 1 zu verteilen.

EREIGNIS: receiveMove1

Jetzt benötigen wir ein Ereignis, um die Mauskoordinaten zu übertragen. Wenn sich also diese spezifischen Variablenwerte, die mit Teilnehmer 1 verbunden sind, ändern, werden sie als Trigger verwendet:

Dann aktualisieren wir die Objekteigenschaft des Mauszeigers, um diese Werte mit einer Aktion zu übernehmen. Im Wesentlichen, wenn du Teilnehmer 2 bist, übernimmt das Gegner-Objekt die Koordinaten der Variablen von Teilnehmer 1:

EREIGNIS: receiveMove2

Hier machen wir dasselbe. Wenn du Teilnehmer 1 bist, übernimmt das Gegner-Objekt die Koordinaten der Variablen von Teilnehmer 2:

Fazit

Diese Demo zeigt zwei von vielen Möglichkeiten, wie Mauskoordinaten verwendet werden können, um Objekteigenschaften zu aktualisieren, um den Cursorstandort in einer Multi-User-Studie zu übertragen. Du kannst Arrays verwenden.

Demo-Details: Werte Schritt-für-Schritt eingeben

Wenn du dich noch in Labvanced zurechtfindest oder einfach eine zusätzliche Klärung benötigst, zeigen dir die folgenden Abschnitte Schritt für Schritt, wie du bestimmte Befehle implementierst und welche Schritte du unternehmen musst, um sie über die Menüs umzusetzen:

• Festlegen von Role_ID==1 in einer Anforderungsaktion
• Auswählen des Maus [X,Y]-Arrays, das in einer Variable für die Mausverfolgung aufgezeichnet werden soll
• Verwenden von arithmetischen Operationen, um eine Objekteigenschaft festzulegen

Festlegen von Role_ID==1 in einer Anforderungsaktion

In der obigen Demo erscheint diese Zeile häufig. Wie kannst du das so machen?

Zuerst +Add Action und Auswahl von Kontrollaktionen → Anforderungsaktionen (Wenn…Dann), da dies der Kontext ist, in dem sie häufig in dieser Demo erscheint.

Als Nächstes + Requirement, damit du die Wenn-Bedingung genauer spezifizieren kannst.

Für das erste Stiftsymbol (formell bekannt als Das Wertauswahlmenü) wähle Variable → Select Variable aus, um auf die Variable Role_Id zu verweisen.

Dies öffnet das Variablenmenü, in dem alle lokalen/globalen Variablen gespeichert sind. In der oberen Leiste findest du unter Global Variables die Role_Id-Variable. Wähle sie aus.

Als Nächstes musst du mit dem anderen Stiftsymbol den Wert der Rollen-ID des Teilnehmers festlegen. Gehe zu Konstantenwert → Numerisch.

Und tippe einfach die Zahl 1 ein. Ta-da!

Verwendung von arithmetischen Operationen zum Festlegen einer Objekteigenschaft

Das Festlegen des Mauszeigerstandorts geschieht durch die Verwendung der Aktion "Objekteigenschaft festlegen", wobei das Zielobjekt, seine Eigenschaft und dann der Wert der Variable, der als der neue Wert für die Objekteigenschaft verwendet werden soll, festgelegt werden.

Wähle die Objektaktion:

Für die Target klicke auf das erste none und wähle das erste Cursorobjekt mouse_user_1 aus der Liste aus. Für die zweite Liste der Objekteigenschaften wähle die X-Option:

Klicke dann auf das Stiftsymbol. Wähle Operations aus dem Menü und wähle die Arithmetic-Option:

Klicke auf das erste Stiftsymbol und wähle Variable → Select Variable aus, und ein Dialogfeld mit den Variablen wird angezeigt, aus dem du die x_mouse1-Variable auswählen kannst:

Klicke dann auf das zweite Stiftsymbol und wähle Constant Value → Numeric und gib die Zahl 5 in das angezeigte Feld ein.

Da dies sich auf die Demo bezieht, in der das Objekt eine Kombination aus einem Bild und Text ist, müssen wir den Wert um 5 Punkte verschieben, damit das darunterliegende Objekt anklickbar ist:

Klicke auf das +Add Property darunter und gib an, dass die y_mouse1-Variable der Y-Objekteigenschaft des mouse_user_1-Objekts zugewiesen wird.