UDN
Search public documentation:

GFxCreateCursorJP
English Translation
中国翻译
한국어
Interested in the Unreal Engine?
Visit the Unreal Technology site.

Looking for jobs and company info?
Check out the Epic games site.

Questions about support via UDN?
Contact the UDN Staff

UE3 ホーム > ユーザーインターフェイスと HUD > 「Scaleform GFx」 > マウスカーソルの作成方法

マウスカーソルの作成方法

概要

中級レベルの本チュートリアルでは、既存の HUD に、切り替え可能なマウスカーソルを追加する方法について解説します。マウスカーソルは、Flash ファイルのステージには存在しません。ライブラリだけに存在することになります。ユーザーがキーボード上で左シフトキーを押して保持したままにすると、マウスカーソルは、インスタンス化され、UnrealScript によって実行時に _root の Flash タイムラインにアタッチされます。

ALERT! 注意 : このメソッドを使用する場合、UI コンテンツ (例 : ボタン、ドロップダウン、チェックボックスなど) はすべて (マウスカーソルを除いて)、_root に生きているコンテナムービークリップの内部に置くのが最善です。マウスカーソルも _root で活きていることになります。これによって、ポップアップ UI 要素 (ドロップダウンメニュー ウィジェットにあるようなもの) が開いている時でも、マウスが一番上に来るようになります。通常、これらのポップアップ要素は、実行時に動的に作成される場合に、あらゆるものの上に来るように設定されています。ポップアップ ウィジェットは、コンテナのムービークリップ内になければ、マウスカーソルよりも上に表示されることになります。

Flash

  • HUD FLA ファイルを開き、ビットマップ画像を使用するか Flash 描画ツールを使用して、新たなマウスカーソル グラフィックをステージ上に作成します。通常のカーソルのように、先端部が左上隅を指すようにします。
  • 次に、カーソル グラフィックを選択し、右クリックして、Convert to Symbol (シンボルに変換) を選びます。
  • Name フィールドで MouseContainer を入力します。
  • Type は Movie Clip にします。
  • Registration (登録) は、top-left (左上) にセットします。
  • Export for ActionScript と Export in frame 1 を有効にします。
  • Identifier (識別子) フィールドで MouseContainer を入力します。
  • [OK] をクリックします。
  • 次に、ステージ上のカーソルをダブルクリックして、MouseContainer ムービークリップを入力します。
  • グラフィックを再び選択して、右クリックし、再度 Convert to Symbol (シンボルに変換) を選択します。
  • MouseImage と名付けます。
  • ここでも Type は Movie Clip にします。
  • ここでも Registration (登録) は top-left (左上) にします。
  • [OK] をクリックします。
  • ステージ上でカーソルムービークリップを選択し、mouseCursor_mc というインスタンス名を付けます。
  • これで、次のような階層ができます。
    • MouseContainer movieclip (インスタンス名なし)
      • MouseImage movieclip (インスタンス名は、mouseCursor_mc)
        • マウスカーソル ビットマップ画像
  • このムービークリップ (mouseCursor_mc) に好きなフィルターを追加します。(例 : ドロップシャドウ フィルター)。
  • ここで、mouseCursor_mc の選択を解除して、新たなレイヤーをタイムライン (MouseContainer 内部のタイムライン) に追加し、actions と名付けます。
  • actions レイヤーの frame 1 上で、以下のコードを入力します。

ActionScript 
import flash.external.ExternalInterface;

Mouse.hide();

var mouseListener:Object = new Object();

mouseListener.onMouseMove = function ()
{
  mouseCursor_mc._x = _root._xmouse;
  mouseCursor_mc._y = _root._ymouse;

  ExternalInterface.call("UpdateMousePosition", _root._xmouse, _root._ymouse);

  updateAfterEvent();
};

Mouse.addListener(mouseListener);

  • ここで、Flash ファイルの _root タイムラインに戻り、ステージからカーソル ムービークリップ (MouseContainer) を削除します。ライブラリには存在するので心配いりません。補足 : ライブラリには 2 つのムービークリップがあります。すなわち、MouseContainer & MouseImage とマウスカーソル ビットマップ画像です。
  • 編集された HUD ファイルを保存、パブリッシュして、UDK にインポートします。

UnrealScript - HUD クラスの変更 (GFxMoviePlayer を拡張)

まず、以下の変数を HUD クラス (GFxMoviePlayer を拡張したもの) に追加します。 

// Standard Flash Objects
var GFxObject RootMC, MouseContainer, MouseCursor;

var array<ASValue> args;

次のコードを Start() または Init() 関数に追加します。 

RootMC = GetVariableObject("_root");
AddFocusIgnoreKey('LeftShift'); // Tells HUD to ignore Left Shift keyboard presses

以下の関数をクラスに追加します。 

event UpdateMousePosition(float X, float Y)
{
  local MouseInterfacePlayerInput MouseInterfacePlayerInput;

  MouseInterfacePlayerInput = MouseInterfacePlayerInput(GetPC().PlayerInput);
  if (MouseInterfacePlayerInput != None)
  {
    MouseInterfacePlayerInput.SetMousePosition(X, Y);
  }
}

/** Toggles mouse cursor on/off */
function ToggleCursor(bool showCursor, float mx, float my)
{
  if (showCursor)
  {
    MouseContainer = CreateMouseCursor();
    MouseCursor = MouseContainer.GetObject("my_cursor");
    MouseCursor.SetPosition(mx,my);
    MouseContainer.SetBool("topmostLevel", true);
  }
  else
  {
    MouseContainer.Invoke("removeMovieClip", args);
    MouseContainer = none;
  }

  bIgnoreMouseInput = !showCursor;
}

function GFxObject CreateMouseCursor()
{
  return RootMC.AttachMovie("MouseContainer", "MouseCursor");
}

CreateMouseCursor 関数は、MouseContainer という識別子 (Identifier) をもつ Flash ファイル内のムービークリップを、_root タイムライン (Stage) にアタッチするとともに、そのムービークリップに MouseCursor というインスタンス名を付けます。

defaultproperties に次を含めます。 

defaultproperties
{
  bIgnoreMouseInput = true
}

UnrealScript - HUD ラッパークラスの変更

まず、以下の変数を HUD クラス (上記の HUD クラスをインスタンス化したクラス) に追加します。 

var GFxObject HudMovieSize;
var MouseInterfacePlayerInput MouseInterfacePlayerInput;
var float MouseX, MouseY;

次に、以下の行のコード (赤) を PostBeginPlay() 関数に追加します。 

simulated function PostBeginPlay()
{
  Super.PostBeginPlay();

  // Your HUD instantiation code here...

  // Stage.originalRect contains the original width and height of the SWF file.
  // Replace HudMovie with the name of your instantiated HUD.
  HudMovieSize = HudMovie.GetVariableObject("Stage.originalRect");

  MouseInterfacePlayerInput = MouseInterfacePlayerInput(PlayerOwner.PlayerInput);
}

さらに、以下の関数を追加します。この関数は、ユーザーが左のシフトキーを押した時にアクティベートされます (実行されます)。この関数は、HUD クラスの ToggleCursor() 関数を呼び出し、左のシフトキーが押された場合に true を渡し、リリースされた場合に false を渡します。また、マウスの X および Y の位置を渡します。 

exec function SetShowCursor(bool showCursor)
{
  // Replace HudMovie with the name of your instantiated HUD.
  HudMovie.ToggleCursor(showCursor, MouseX, MouseY);
}

ここで、次の行のコードを PostRender() イベント関数に追加します。場所は、HudMovie.TickHud(0) 呼び出しのすぐ上です。この 2 行のコードは、マウスカーソルの X および Y の現在位置を取得するためのものです。 

event PostRender()
{
  super.PostRender();

  MouseX = MouseInterfacePlayerInput.MousePosition.X;
  MouseY = MouseInterfacePlayerInput.MousePosition.Y;

  // Tick HUD
  if (HudMovie != none)
  {
    HudMovie.TickHud(0);
  }
}

UnrealScript - MouseInterfacePlayerInput クラス

以下の新たなクラスを作成して、MouseInterfacePlayerInput.uc として保存します。必ず、SFHudWrapper の全インスタンスを、HUD ラッパークラスに換えるようにします。 

class MouseInterfacePlayerInput extends PlayerInput;

// Stored mouse position. Set to private write as we don't want other classes to modify it, but still allow other classes to access it.
var PrivateWrite IntPoint MousePosition;
var SFHudWrapper SFHudWrapper;
var float HudX, HudY;

event PlayerInput(float DeltaTime)
{
  GetHudSize();

  if (myHUD != None)
  {
    // Add the aMouseX to the mouse position and clamp it within the viewport width
    MousePosition.X = Clamp(MousePosition.X + aMouseX, 0, HudX);
    // Add the aMouseY to the mouse position and clamp it within the viewport height
    MousePosition.Y = Clamp(MousePosition.Y - aMouseY, 0, HudY);
  }

  Super.PlayerInput(DeltaTime);
}

// This function gets the original width and height of the HUD SWF and stores those values in HudX and HudY.
function GetHudSize()
{
  // First store a reference to our HUD Wrapper and get the resolution of the HUD
  SFHudWrapper = SFHudWrapper(myHUD);
  HudX = SFHudWrapper.HudMovieSize.GetFloat("width");
  HudY = SFHudWrapper.HudMovieSize.GetFloat("height");
}

function SetMousePosition(int X, int Y)
{
  GetHudSize();

  if (MyHUD != None)
  {
    MousePosition.X = Clamp(X, 0, HudX);
    MousePosition.Y = Clamp(Y, 0, HudY);
  }
}

defaultproperties
{
}

UnrealScript - PlayerController クラスの変更

PlayerController クラスの defaultproperties に次の行を追加します。 

defaultproperties
{
  InputClass=class'MouseInterfacePlayerInput'
}

Config ファイル

次に、DefaultInput.ini ファイルに以下の行を加えます。 コード: 

.Bindings=(Name="LeftShift",Command="SetShowCursor true | Onrelease SetShowCursor false")

  • スクリプトを保存してコンパイルします。
  • ゲームを起動して、新たに作成したカーソルをテストしてください!