参加者のカーソルを表示: マルチユーザーデモ
概要
リアルタイムで複数の参加者が実験に参加するマルチユーザー実験では、参加者のカーソルを互いに見えるようにしたい場合があります。このデモでは、その設定方法をお見せします。
実装に関する注意
Labvancedでは、このカーソル位置の共有を実現するためのいくつかのアプローチがあります。プラットフォームは柔軟性があるため、アプローチを決定する前に実験デザインを考慮することが重要です。
この点を明確にするために、これを達成するための2つのアプローチを紹介します:
- アプローチ 1: カーソル位置を配布するための配列を利用するデモ
- アプローチ 2: さらに下のセクションで、 x座標とy座標の単一値を使用するデモについても説明します。
アプローチ 1: マウストラッキングと配列を使用したカーソル表示
このデモには、2つのオブジェクト（各ユーザーに1つのマウス）が含まれており、オブジェクトパネルのサイドパネルにリストされています。このアプローチは、2人以上の参加者がいるマルチユーザー研究に使用できます。
オブジェクト
以下は、すべての視覚スタイリングを管理できるオブジェクトプロパティパネルです。現在、両方のカーソルのVisibilityは1（これは不透明度=100%を意味します）となっています。
このデモでは、Visibilityを0に変更します。後で、実験が始まったときには、1つのカーソルを表示します。つまり、参加者1の場合、参加者2のカーソルオブジェクトがここに表示され、逆も同様です。これは下にあるイベント:Initセクションで説明されています。
カーソル用に2つのオブジェクトを持たない場合は、このセクションを参照して、単一のカーソルオブジェクトだけの代替方法を見ることができます。
カスタム変数
ここでは、このデモの目的のために作成されたすべてのカスタム変数をリストしています。これらは、事前に作成するか、実験を構築しながらエディタ内で作成できます。
イベント概要
イベントを追加するには、[+] フレームイベント（このフレームのみ）をクリックします。
このデモには、以下のイベントがあります:
- イベント:Init: 他の参加者のマウスを表示
- イベント:sendMove: マウス座標を送信
- イベント:receiveMove: マウス座標を受信
以下に、各イベントの構造を説明します。
イベント: init
このイベントは、フレームが開始したときに何が起こるかを指定します。この場合、私たちの目標は参加者1が参加者2のマウスを見て、逆もまた同様です。
トリガー
イベントのトリガーはOn Frame Initです。フレームが初期化されるとすぐにカーソルオブジェクトの可視性を設定したいためです。
アクション
これを指定し、「次へ」ボタンをクリックした後、フレーム初期化時に発生するアクションを選択できます。
以下に、私たちが使用するアクションは制御アクション→「If... Then」です。したがって:
Role_Idが1に等しい場合（注: Role_Idは、マルチユーザー研究に特有の変数で、参加者にIDを割り当てます）。- その場合、
mouse_user_2オブジェクトのVisibilityを1に設定します。 - 注: これら2つのアクションの組み合わせは、基本的に「あなたが参加者1（Role_Id==1）であれば、mouse_user_2オブジェクトを見ることができる」ということを意味します。
- 注:
Role_Id == 1はエディタでどのように指定されますか？ 手順の詳細セクションを参照してください。
Else Ifセクションでは、参加者2（Role_Id==2）について同じことを行います。ターゲットオブジェクトはmouse_user_1で、Visibilityの値は1である必要があります。
イベント: sendMove
次に、マウスを動かすときに2人の参加者の間に「ブリッジ」を確立する必要があります。つまり、マウスを動かすと、その値がトラッキングされ、他の参加者に送られます。
トリガー
したがって、マウストリガーがこのイベントに使用され、マウスの動きがイベントをトリガーします。
アクション
また、制御アクション → If…Thenコマンドが必要です:
もしあなたのRole_Id==1なら、以下の変数アクションが発生します:
もしあなたのRole_Id==2なら…
その場合:
moveMouse2はマウス[X,Y]配列を記録します（前の例と同様ですが）が、参加者2のマウストラッキング値を保存し、彼らのマウス[X,Y]配列に等しく設定します。- その後、この変数を参加者1に配布します。
要約-ここまでで、私たちは:
- 各参加者のマウストラッキング[X,Y]配列を保存するための変数を作成しました（参加者1のカーソルはmoveMouse1、参加者2のカーソルはmoveMouse2）
- そして、Distribute Variableアクションを使用して、マウストラッキング値が他の参加者に送信されるブリッジを確立しました。
イベント: receiveMove
次に、これらのマウストラッキング値で何が起こるかを指定する必要があります。この場合、配列形式でマウスの動きを受信する際に、マウスカーソルオブジェクトをその動きに反映させたいのです！言い換えれば、[X,Y]配列を使用して、それらの値をマウスカーソルに結びつけ、それが本質的に動くようにし、他の参加者の動きを画面上に表示するのです！したがって、これを実現するために、以下のトリガーとアクションが使用されます。
トリガー
マウストラッキング値は変数に保存されているため、これらの変数が変更されるたびにマウスが動いているということになります。したがって、変数値変更トリガーを使用して、以下のようにマウスの動きを画面上で更新します。
アクション
次に、配列から選択（読み取り）アクションを使用して、カーソルの変数配列からxおよびy座標の値を取得します。これらの値を使用してオブジェクトの座標を設定する予定です。
したがって、私たちは参加者1の[X,Y]の配列があるmoveMouse1変数を選択し、最初の値をFixed Indexの1で呼び出し、その値を数値変数x_mouse1に格納します。x値は配列の最初にリストされています。
次に、別の配列から選択（読み取り）アクションを追加し、Fixed Indexに2と記入して、2番目の配列値であるy座標を呼び出し、それをy_mouse1変数に格納します。
カーソル画像を動かすためには、マウスのトラッキング（私たちが取得して変数に保存したx_mouse1とy_mouse1の値）に対応するx値とy値をリアルタイムで取得して、オブジェクトの画像座標を更新する必要があります。
これを実現するために、オブジェクトプロパティを設定アクションを選択し、mouse_user_1のターゲット（以下の画像では、短縮されたタイトルのため「mouse」と書かれています）と、そのプロパティXがx_mouse1+5の値（算術演算）を持つように設定します。この手順の詳細な説明を参照してください。
ここで、なぜ+5が入力フィールドに表示されるのか疑問に思われるかもしれません…これは、このオブジェクトが実際にはテキストオブジェクトであり、埋め込まれた画像を含んでいるため、オフセットを作成する必要があるからです（このウォークスルーの冒頭で説明されています）。したがって、研究を構築し、ユーザーがここで示すように自身のカスタマイズされたカーソルを確認しつつ、研究内の他のオブジェクトをクリックする必要がある場合、オフセットを作成しなければなりません（カーソルの画像を省略し、テキストラベルのみを維持することを選択しない限り）。
次に、+プロパティを追加を選択し、同じ画像オブジェクトを指定し、Yプロパティにy_mouse1変数を等しく設定します。
同様のプロセスを繰り返しますが、参加者2のために用意した他の変数を選択します:
ここでは、オブジェクトmouse_user_2を指定し、それぞれの変数を割り当てます:
これらすべてのアクションにより、参加者の両方のカーソルオブジェクトが、配列変数から値を読み取り、これらの数値を使用してオブジェクトのxおよびy値を設定することにより、動くようになります。
イベント: end
次に、データ記録プロセスを正式に終了し、データを保存するためのイベントを作成します。endボタンを挿入すると、クリックされたときにセッションを終了するトリガーになります。
アクション
そのアクションは、Accept/End Sessionです。
もう一度注意してください。このデモは学習目的のものであり、マルチユーザー研究設定におけるマウスとカーソルの位置を共有するための多くの方法のうちの1つです。この効果を達成するための別の例が、次のセクションで説明されます。
アプローチ 2: マルチユーザー研究におけるカーソル共有のための単一変数アプローチ
この別のデモでは、配列ではなく、単一値（つまり、x座標およびy座標を直接呼び出す）を使用するオプションを示します。
このデモの完全なプレビュー、データ記録のプレビューも含まれています:
カーソル用の単一オブジェクト
このデモは、2つのカーソルオブジェクトの代わりに1つのオブジェクトを持つという点でも前のものと異なります。このアプローチは、「対戦相手」または「チームメイト」のカーソルの位置を示したいマルチユーザー研究に最適です。
カスタム変数
この別のデモには、以下のカスタム変数とその仕様が含まれています。このデモは変数が少ないですが、配列のある前の例に比べて、より多くのイベント/アクションが必要です。
イベント: sendMove
トリガーはマウスの動きです:
そのアクションは、マウスのx座標とy座標のトリガー特有の値を2つの別々の変数に記録することです、それらは参加者1を示すために名前が付けられています。
次のアクションは、if/then条件の下で、これら2つの値を参加者2に配布します。
次に、Else If条件を追加して、マウスのx座標とy座標のトリガー特有の値を参加者2を示すために名前が付けられた2つの別々の変数に記録します。
次のアクションは、これら2つの値を参加者1に配布します。
イベント: receiveMove1
次に、マウス座標を送信するイベントが必要です。つまり、参加者1に関連する特定の変数値が変更されると、それがトリガーとして使用されます:
次に、これらの値を使用して、カーソル位置のオブジェクトプロパティを更新するアクションを使用します。本質的に、あなたが参加者2であれば、Opponentオブジェクトは参加者1の変数の座標を取得します:
イベント: receiveMove2
ここでも同じことを行います。あなたが参加者1であれば、Opponentオブジェクトは参加者2の変数の座標を取得します:
結論
このデモは、マウス座標をオブジェクトプロパティに更新してマルチユーザー研究設定でカーソル位置を伝達するために使用できる多くの方法のうちの2つを示しています。配列を利用することができます。
デモの詳細: 値の入力手順
Labvancedの使い方に慣れていない場合や、追加の明確さが必要な場合は、以下のセクションで特定のコマンドを実装する方法と、それらを実装するために行う必要のある手順をステップバイステップで示します:
- 要件アクションでの
Role_ID==1の指定 - マウスの[X,Y]配列を記録するための変数の選択
- オブジェクトプロパティを設定するための算術演算の使用
要件アクションでのRole_ID==1の指定
上記のデモでは、この行が頻繁に表示されますが、どのようにして見つけることができますか？
まず、+アクションを追加を選択し、制御アクション→要件アクション（If…Then）を選択します。これは、このデモで頻繁に表示される文脈です。
次に、+要件を選択して、If条件をより詳細に指定します。
最初の鉛筆アイコン（正式には値選択メニューと呼ばれます）で、変数→変数を選択を選択して、Role_Id変数を指します。
これにより、すべてのローカル/グローバル変数が保存されている変数メニューが開きます。上部パネルにあるグローバル変数の下に、Role_Id変数が見つかります。それを選択します。
次に、他のペンアイコンで参加者の役割IDの値を指定する必要があります。したがって、定数値→数値に移動します。
そして、単に数字の1を入力します。タダ！
オブジェクトプロパティを設定するための算術演算の使用
カーソル位置を設定するには、オブジェクトプロパティを設定アクションを使用して、ターゲットオブジェクトとそのプロパティを指定し、次にオブジェクトプロパティの新しい値として使用する変数値を指定します。
オブジェクトアクションを選択します:
ターゲットの最初のnoneをクリックし、リストから最初のカーソルオブジェクトmouse_user_1を選択します。次に、オブジェクトプロパティの2番目のリストからXオプションを選択します:
次に、ペンアイコンをクリックします。メニューから演算子を選択し、算術オプションを選択します:
最初のペンアイコンをクリックし、変数→変数を選択を選択します。変数のダイアログボックスが表示され、x_mouse1変数を選択できます。
次に、2番目のペンアイコンをクリックし、定数値→数値を選択し、表示されるフィールドに数字の5を入力します。
これは、オブジェクトが画像とテキストの組み合わせに関連するデモであるため、対象の下にあるオブジェクトがクリック可能になるように、5ポイントオフセットを作成する必要があります。
下にある+プロパティを追加をクリックし、y_mouse1変数がmouse_user_1オブジェクトのYオブジェクトプロパティに割り当てられることを示します。