Afficher les Curseurs des Sujets : Démo Multi-Utilisateur

Aperçu

Dans une expérience multi-utilisateur où plusieurs participants prennent part à l'expérience en temps réel, vous pouvez souhaiter rendre leurs curseurs visibles les uns aux autres. Dans cette démo, nous allons vous montrer comment configurer cela.

Remarque sur l'Implémentation

Veuillez noter qu'il existe plusieurs approches pour mettre en œuvre le partage des emplacements des curseurs de plusieurs participants dans Labvanced, car la plateforme est flexible et il est donc important de considérer votre conception expérimentale avant de vous engager dans une approche.

Pour clarifier ce point, nous allons présenter deux approches pour accomplir cela :

• Approche 1 : une démo qui utilise des tableaux pour répartir la position du curseur
• Approche 2 : dans une section plus bas, nous discuterons d'une démo où des valeurs uniques pour les coordonnées x et y peuvent également être utilisées

Approche 1 : Affichage des Curseurs Utilisant le Suivi de Souris et des Tableaux

Cette démo comprend deux objets (une souris par utilisateur) qui sont listés dans le panneau latéral dans le panneau Objet. Cette approche peut être utilisée pour des études multi-utilisateurs où il y a 2+ participants.

Objets

En dessous se trouve le Object Properties panneau où tous les styles visuels peuvent être gérés. Actuellement, les deux curseurs ont un Visibility de 1 (ce qui signifie opacité =100%) comme montré ci-dessous :

Pour cette démo, nous allons changer le Visibility pour qu'il soit 0, comme montré ci-dessous. Plus tard, lorsque l'expérience commencera, nous rendrons l'un des curseurs visibles. c'est-à-dire, si vous êtes le Participant 1, alors vous verrez l'objet curseur ici du Participant 2 et vice versa. Cela est décrit dans la section Événement : Init ci-dessous.

Si vous ne souhaitez pas avoir deux objets pour les curseurs. Référez-vous à cette section pour voir une méthode alternative avec juste un seul objet curseur.

Variables Personnalisées

Ici, nous listons toutes les variables personnalisées qui ont été créées à des fins de cette démo. Vous pouvez les créer à l'avance ou dans l'éditeur pendant la construction de votre expérience.

Aperçu des Événements

Pour ajouter un événement, cliquez sur le [+] Frame Event (on this frame only).

Nous avons les événements suivants dans cette démo :

1. Événement : Init : Rendre la souris de l'autre participant visible
2. Événement : sendMove : Envoyer les coordonnées de la souris
3. Événement : receiveMove : Recevoir les coordonnées de la souris

Ci-dessous, la structure de chacun des événements est décrite.

ÉVÉNEMENT : init

Cet événement spécifie ce qui se passera lorsque le cadre est initié. Dans ce cas, notre objectif est que le Participant 1 voie la souris du Participant 2 et vice versa.

Déclencheur

Le déclencheur pour l'événement est On Frame Init car nous voulons assigner la visibilité de l'objet curseur dès que le cadre s'initialise.

Action

Après avoir spécifié cela et cliqué sur le bouton 'Suivant', vous pouvez sélectionner les actions qui se produiront lors de l'Initialisation du Cadre.

Ci-dessous, nous montrons que l'action que nous utilisons est une Action de Contrôle → 'Si... Alors', donc :

• Si Role_Id est égal à 1 (Remarque : Role_Id est une variable qui est unique aux études multi-utilisateurs et attribue au participant son ID).
• Alors, Set Object Property de l'objet mouse_user_2 à 1.
• Remarque : La combinaison de ces deux actions signifie essentiellement : "Si vous êtes le Participant 1 (Role_Id==1), alors vous verrez l'objet mouse_user_2."
• Remarque : Comment le Role_Id == 1 est-il spécifié dans l'éditeur ? Référez-vous à la section étape par étape ci-dessous où cela est expliqué en détail.

Sous la section Else If nous faisons la même chose mais pour le participant 2 (Role_Id==2). L'objet cible est mouse_user_1 qui devrait avoir la valeur Visibility de 1.

ÉVÉNEMENT : sendMove

Ensuite, nous devons établir un 'pont' entre les deux participants où si vous déplacez votre souris, ces valeurs sont suivies/enregistrées et envoyées à l'autre participant.

Déclencheur

Ainsi, le Mouse trigger est utilisé pour cet événement où tout 'Déplacement' qui est effectué déclenchera l'événement.

Actions

Encore une fois, une commande Control Action → If…Then est nécessaire :

Où si votre Role_Id==1, alors les Variable Actions suivants prennent place :

• Set / Record a Variable : Pointer / définir la variable moveMouse1 et la définir pour qu'elle soit égale à la valeur spécifique au déclencheur de Mouse [X,Y] Array.
• Distribute Variable: Partager cette variable avec le Participant 2.

Sinon si votre Role_Id==2 …

Alors :

• Le moveMouse2 enregistrera le tableau de souris [X,Y] (tout comme dans l'exemple précédent ci-dessus) mais nous l'utiliserons pour stocker les valeurs de suivi de la souris du Participant 2 et le définirons pour qu'il soit égal à leur tableau de souris [X,Y].
• Ensuite, distribuez cette variable au participant 1.

Résumé - Jusqu'à présent, nous avons :

• Créé des variables pour stocker le tableau de suivi de la souris [X,Y] de chaque participant (moveMouse1 pour le curseur du Participant 1 et moveMouse2 pour le curseur du Participant 2)
• Et établi un pont où la valeur de suivi de la souris est envoyée à l'autre participant en utilisant l'action de Distribuer Variable.

ÉVÉNEMENT : receiveMove

Ensuite, nous devons spécifier ce qui va se passer avec ces valeurs de suivi de la souris. Dans ce cas, à la réception des mouvements de la souris sous forme de tableau, nous voulons changer l'objet du curseur de la souris pour refléter les mouvements ! En d'autres termes, en utilisant le tableau [X,Y], nous lierons ces valeurs au curseur de la souris afin qu'il se déplace essentiellement, montrant ce que fait l'autre participant à l'écran ! Ainsi, pour accomplir cela, le déclencheur et les actions décrits ci-dessous seront utilisés.

Déclencheur

Puisque les valeurs de suivi de la souris sont stockées dans des variables, chaque fois que ces variables changent, cela signifie que la souris se déplace. Ainsi, nous pouvons utiliser le Variable Value Changed déclencheur pour mettre à jour la position du curseur à l'écran en sélectionnant les deux variables spécifiques qui contiennent les valeurs de suivi de la souris comme montré ci-dessous :

Action

Ensuite, nous voulons utiliser l’Select From Array (Read) action pour obtenir les valeurs des coordonnées x et y des tableaux de variables du curseur parce que nous prévoyons de les utiliser pour définir les coordonnées de l'objet.

Ainsi, nous sélectionnons la variable moveMouse1 qui a le tableau des [X,Y] du participant 1 et appelons la première valeur qui était un Fixed Index de 1 et stockons cette valeur dans une variable numérique appelée x_mouse1 parce que les valeurs x sont listées en premier dans le tableau.

Nous ajoutons une autre Select From Array (Read) action et pour le Fixed Index écrivons 2 car nous voulons appeler la deuxième valeur de tableau qui sont les coordonnées y et les stocker dans la variable y_mouse1.

Pour faire bouger l'image du curseur, nous devons mettre à jour ses coordonnées d'image en temps réel en lui faisant prendre les valeurs x et y qui sont équivalentes aux coordonnées x et y du suivi de la souris (que nous avons récupérées et stockées dans les variables x_mouse1 et y_mouse1 dans les actions ci-dessus).

Pour cela, nous devons choisir l'action Set Object Property afin que Target de mouse_user_1 (dans l'image ci-dessous, elle est juste écrite comme ‘souris’ parce que la boîte de dialogue abrège le titre) et sa propriété X a une valeur (=) de x_mouse1+5 qui est une opération arithmétique. Référez-vous à cette explication étape par étape de la façon dont cela est configuré.

À ce stade, vous vous demandez peut-être pourquoi le +5 apparaît dans le champ d'entrée… C'est parce que nous devons créer un décalage puisque cet objet est en réalité un objet de texte qui inclut une image intégrée (comme décrit au début de ce guide). Donc, si vous devez construire votre étude et faire en sorte que les utilisateurs voient leurs propres curseurs personnalisés comme nous le faisons ici mais aussi cliquer sur d'autres objets de l'étude, alors cela ne sera pas possible à moins que vous ne créiez ce décalage (à moins que vous choisissiez d'omettre l'image du curseur et de garder simplement l'étiquette de texte).

Pour continuer, nous choisissons +Add Property et désignons le même objet d'image, sélectionnons la propriété Y et la définissons égale à la variable y_mouse1.

Nous répétons le même processus mais sélectionnons simplement les autres variables que nous avons dédiées pour le participant 2 :

Ici, nous désignons l'objet mouse_user_2 et assignons les variables respectives :

Ensemble, toutes ces actions font en sorte que les deux objets de curseur se déplacent pour les deux participants en lisant des valeurs à partir de la variable de tableau et en utilisant ensuite ces valeurs numériques pour définir les valeurs x et y de l'objet.

ÉVÉNEMENT : end

Ensuite, nous créons un événement pour mettre officiellement fin au processus d'enregistrement des données et stocker les données en insérant un bouton ‘fin’ qui, lorsque utilisé comme déclencheur, mènera à une action de contrôle où l’action Accept/End Session a lieu.

Déclencheur

Pour mettre fin à la session, le déclencheur du bouton consiste à cliquer sur le End Button pour déclencher la fin de la session.

Action

L'action est d'Accepter/Fin de session.

Encore une fois, veuillez noter que cette démonstration est à des fins d'apprentissage et n'est qu'une méthode parmi tant d'autres pour partager la souris et l'emplacement du curseur dans un cadre d'étude multiparticipante. Un autre exemple de la façon dont cet effet peut être accompli est décrit dans les sections à venir.

Approche 2 : Méthode de Variable Unique pour Partager les Curseurs dans les Études Multiparticipantes

Dans cette autre démonstration, au lieu de tableaux, nous montrons comment vous avez la possibilité d'utiliser des valeurs uniques (c'est-à-dire de faire appel directement aux coordonnées X et Y).

Voici un aperçu complet de cette démonstration, y compris un aperçu des données enregistrées à la fin :

Objet Unique pour le Curseur

Cette démonstration diffère également de la précédente en ce sens qu'au lieu de deux objets pour le curseur, il n'y en a qu'un seul. Cette approche est idéale pour les études multiparticipantes qui souhaitent simplement montrer où se trouve le curseur de 'l'adversaire' ou 'du coéquipier'.

Variables Personnalisées

Cette autre démonstration inclut les variables personnalisées suivantes et leurs spécifications. Bien que cette démonstration ait moins de variables, elle nécessite plus d'événements/actions étant utilisés par rapport à l'exemple précédent avec des tableaux.

ÉVÉNEMENT : sendMove

Le déclencheur est le mouvement de la souris :

L'action consiste à enregistrer les valeurs spécifiques au déclencheur des coordonnées X et Y de la souris dans deux variables distinctes qui sont spécifiquement nommées pour indiquer le participant 1.

Les actions suivantes sous cette condition si/alors servent à distribuer ces deux valeurs au participant 2.

Puis nous ajoutons une condition "Else If" pour enregistrer les valeurs spécifiques au déclencheur des coordonnées X et Y de la souris dans deux variables distinctes, qui sont nommées spécifiquement pour indiquer le participant 2.

Les prochaines actions sont utilisées pour distribuer ces deux valeurs au participant 1.

ÉVÉNEMENT : receiveMove1

Maintenant, nous avons besoin d'un événement pour transmettre les coordonnées de la souris. Ainsi, si ces valeurs de variables spécifiques associées au participant 1 changent, elles seront utilisées comme déclencheur :

Ensuite, nous mettons à jour la propriété d'objet de l'emplacement du curseur pour adopter ces valeurs en utilisant une action. En essence, si vous êtes le participant 2, alors l'objet Opponent prend les coordonnées des variables du participant 1 :

ÉVÉNEMENT : receiveMove2

Nous faisons la même chose ici. Si vous êtes le participant 1, alors l'objet Opponent prend les coordonnées des variables du participant 2 :

Conclusion

Cette démonstration montre deux des nombreuses façons dont les coordonnées de la souris peuvent être utilisées pour mettre à jour les propriétés d'objet afin de transmettre l'emplacement du curseur dans une configuration d'étude multi-utilisateur. Vous pouvez utiliser des tableaux

Détails de la démo : Saisie des valeurs étape par étape

Si vous avez encore du mal à vous retrouver dans Labvanced ou avez juste besoin d'un peu plus de clarification, les sections ci-dessous vous montrent, étape par étape, comment mettre en œuvre certaines commandes et les étapes que vous devez suivre en utilisant les menus pour les réaliser :

• Spécifier Role_ID==1 dans une action de condition
• Sélectionner le tableau de souris [X,Y] à enregistrer dans une variable pour le suivi de la souris
• Utiliser des opérations arithmétiques pour définir une propriété d'objet

Spécifier Role_ID==1 dans une action de condition

Dans la démo ci-dessus, cette ligne apparaît fréquemment, comment pouvez-vous l'obtenir comme ça ?

Tout d'abord +Add Action et sélectionner les actions de contrôle → Actions de condition (Si...Alors) parce que c'est le contexte dans lequel elle apparaît fréquemment dans cette démonstration.

Ensuite, + Requirement pour que vous puissiez spécifier la condition Si de manière plus détaillée.

Pour la première icône de crayon (formellement connue sous le nom de Menu de sélection de valeur), choisissez Variable → Select Variable afin de pointer vers la variable Role_Id.

Cela ouvrira le menu des variables où toutes les variables locales/globales sont stockées. Dans le panneau supérieur, sous Global Variables vous trouverez la variable Role_Id. Sélectionnez-la.

Ensuite, sur l'autre icône de crayon, vous devez spécifier la valeur de l'ID de rôle du participant. Donc, allez à Valeur constante → Numérique.

Et tapez simplement le numéro 1. Voilà !

Utiliser des opérations arithmétiques pour définir une propriété d'objet

La définition de l'emplacement du curseur est effectuée en utilisant l'action Définir la propriété d'objet, en spécifiant l'objet cible, sa propriété, puis en spécifiant la valeur de la variable qui sera utilisée comme nouvelle valeur pour la propriété de l'objet.

Sélectionnez l'action objet :

Pour le Target cliquez sur le premier none et sélectionnez le premier objet curseur mouse_user_1 dans la liste. Pour la deuxième liste des propriétés de l'objet, sélectionnez l'option X :

Ensuite, cliquez sur l'icône de crayon. Choisissez Operations dans le menu et sélectionnez l'option Arithmetic :

Cliquez sur la première icône de crayon et choisissez Variable → Select Variable et une boîte de dialogue des variables apparaîtra d'où vous pourrez sélectionner la variable x_mouse1 :

Ensuite, cliquez sur la deuxième icône de crayon et choisissez Constant Value → Numeric et tapez le numéro 5 dans le champ qui apparaît.

Parce que cela concerne la démonstration où l'objet est une combinaison d'une image plus du texte, nous devons décaler la valeur de 5 points afin que l'objet en dessous soit cliquable :

Cliquez sur le +Add Property en dessous et indiquez que la variable y_mouse1 sera assignée à la propriété Y de l'objet mouse_user_1.