ゲームとUI間でデータをやり取りする
このチュートリアルではSkyrimでのプレイヤー名をUI上で表示し、その名前を別のものに変更して承認ボタンを押したら、ゲーム内のプレイヤー名が変わるものを作ります。
ここでは以下の内容ができるようになります。
- CLIKコンポーネントを利用する
- ゲームからUIにデータを送る
- UIからゲームにデータを送る
| + | Flash関連ファイル |
必要なオブジェクトを作る
Flashを用いて名前の入力域、名前変更を承認する「Submit」ボタン、名前の変更をキャンセルする「Cancel」ボタンを作ります。
画面では、黒い領域に「New name is ...」と表示し、下の「name」の所にプレイヤー名を表示します。
この「name」の領域はこちらの入力を受け付けるようにし、ここに名前を入力して「Submit」ボタンを押すことでプレイヤー名が変更できるという構造です。
ファイル・フォルダ構造について、制作者の環境ではプロジェクトのファイル名は02test.flaとし、「UIを開く・閉じる」のプロジェクトファイルと同じ場所に新しく02testフォルダを作成し、そこに保存しております。
この「name」の領域はこちらの入力を受け付けるようにし、ここに名前を入力して「Submit」ボタンを押すことでプレイヤー名が変更できるという構造です。
ファイル・フォルダ構造について、制作者の環境ではプロジェクトのファイル名は02test.flaとし、「UIを開く・閉じる」のプロジェクトファイルと同じ場所に新しく02testフォルダを作成し、そこに保存しております。
各オブジェクトの作成
UIを開く・閉じるで行ったように、名前を表示する領域、承認ボタン、キャンセルボタンの3つのボタンを作成します。
必要なオブジェクトとテキストを配置します。
各設定パラメータは以下のようにしています。
必要なオブジェクトとテキストを配置します。
各設定パラメータは以下のようにしています。
- 名前領域・ボタンの位置/大きさ/色
| 名前領域 | 承認ボタン | キャンセルボタン | |
| X | 440 | 340 | 680 |
| Y | 200 | 400 | 400 |
| W | 400 | 260 | 260 |
| H | 160 | 120 | 120 |
| 塗りつぶし色 | #000000 | #CCCCCC | #CCCCCC |
- テキストのフォント/サイズ/入力可否
| New name is... | name | Submit | Cancel | |
| フォントファミリー | MS UI Gothic | |||
| サイズ | 48.0 | 64.0 | 32.0 | 32.0 |
| 選択可否 | false | true | false | |
テキストエリアについて、選択可能かどうかは以下の画像の部分で設定します。グレーの状態が選択できる状態です。
名前を表示する場所（「name」としているテキストボックス）はユーザーが変更できるようにするため、選択可能な状態にしておきます。
名前を表示する場所（「name」としているテキストボックス）はユーザーが変更できるようにするため、選択可能な状態にしておきます。
名前を表示するテキストボックスは、<インスタンス名>の部分を「textField」にします。
ここのインスタンス名は絶対にこの名前である必要があります（理由は後述）。大文字小文字にも注意しましょう。
ここのインスタンス名は絶対にこの名前である必要があります（理由は後述）。大文字小文字にも注意しましょう。
[埋め込み...]というボタンからフォントの埋め込みを行います。
Flash上で変更の可能性があるテキストボックスはswf自体にフォントを埋め込む必要があるようです。
文字の範囲について、「大文字」～「日本語 漢字」あたりまでチェックが入ればいいと思います。
Flash上で変更の可能性があるテキストボックスはswf自体にフォントを埋め込む必要があるようです。
文字の範囲について、「大文字」～「日本語 漢字」あたりまでチェックが入ればいいと思います。
ムービークリップへの変換
①名前領域と②承認ボタンと③キャンセルボタンをそれぞれ別々のムービークリップとして変換します。
ここでは名前、識別子、クラスを以下のように設定します。
ここでは名前、識別子、クラスを以下のように設定します。
| 名前領域 | 承認ボタン | キャンセルボタン | |
| 名前 | NameArea | SubmitButton | CancelButton |
| 識別子 | |||
| クラス | gfx.controls.TextInput | gfx.controls.Button | |
クラスの所がそれぞれ謎のテキストになっていますが、これはskyuiリソースに入っているCLIKフォルダ以下のパスを示しています。
名前領域はCLIK\gfx\controls\TextInput.as、ボタン二つはCLIK\gfx\controls\Button.asが適用されます。
名前領域はCLIK\gfx\controls\TextInput.as、ボタン二つはCLIK\gfx\controls\Button.asが適用されます。
| + | CLIKについて |
ライブラリの項目に3つのムービークリップシンボルができていたらOKです。
すべてをまとめて1つのムービークリップにする
ステージ上の3つのムービークリップについて、インスタンス名を以下のように設定します。
| 名前領域 | nameArea |
| 承認ボタン | submitButton |
| キャンセルボタン | cancelButton |
この3つのムービークリップをすべて選択し、[シンボルへ変換]を実行して1つのムービークリップにします。
シンボルに変換ウィンドウの名前、識別子、クラスはすべてMainPanelにします。
また、これによって作成したムービークリップのインスタンス名はmainPanelにします。
シンボルに変換ウィンドウの名前、識別子、クラスはすべてMainPanelにします。
また、これによって作成したムービークリップのインスタンス名はmainPanelにします。
こうする理由は、以降のスクリプトファイルの編集時に、MainPanel.asだけを用いて名前領域、承認ボタン、キャンセルボタンの3つを設定できるようにする。
スクリプトファイルの作成
スクリプトファイル「MainPanel.as」を作成し、以下の内容を記述します。
import gfx.controls.TextInput;
import gfx.controls.Button;
import Shared.GlobalFunc;
class MainPanel extends MovieClip
{
/* PRIVATE Variables */
private var MENU_NAME :String;
/* SHORTEND Variables */
public var _optionText: TextField;
/* STAGE ELEMENTS */
public var nameArea: TextInput;
public var submitButton: Button;
public var cancelButton: Button;
public function MainPanel()
{
super();
MENU_NAME = "CustomMenu";
_optionText = nameArea.textField;
}
// @override MovieClip
private function onLoad()
{
super.onLoad();
nameArea.addEventListener("focusIn", this, "startInput");
nameArea.addEventListener("focusOut", this, "endInput");
submitButton.addEventListener("click", this, "onSubmitPress");
cancelButton.addEventListener("click", this, "onCancelPress");
}
private function startInput()
{
_optionText.type = "input";
Selection.setFocus(_optionText);
Selection.setSelection(0,0);
skse.AllowTextInput(true);
}
private function endInput()
{
_optionText.type = "dynamic";
skse.AllowTextInput(false);
}
private function onCancelPress()
{
skse.CloseMenu(MENU_NAME);
}
private function onSubmitPress()
{
if (_optionText.text != ""){
skse.SendModEvent("TEST_setName", _optionText.text);
skse.CloseMenu(MENU_NAME);
}
}
public function startMenu(name: String)
{
GlobalFunc.MaintainTextFormat()
_optionText.SetText(name);
}
}
| + | ソースコードの説明 |
コンパイル
Flashからコンパイルを行い、.swfファイルを作成します。
Mod環境の構築
CKを用いてModを作成します。
CKからUIを起動するMod環境を作る
UIを開く・閉じると同じように、新規mod環境を作成し、適当なQuestを作り、スクリプトとして以下の内容を追加します。
;CONSTANTS
string property MENU_NAME = "CustomMenu" AutoReadonly
int property MENU_KEY = 210 AutoReadonly
string property MENU_ROOT = "_root.mainPanel" AutoReadonly
Event OnInit()
RegisterKey()
EndEvent
Function OnGameReload()
RegisterForModEvent("TEST_setName", "OnSetName")
EndFunction
Function RegisterKey()
RegisterForKey(MENU_KEY)
EndFunction
Event OnKeyDown(int KeyCode)
if (KeyCode == MENU_KEY && !UI.IsMenuOpen(MENU_NAME))
UI.OpenCustomMenu("02test", 0)
UI.InvokeString(MENU_NAME, MENU_ROOT + ".startMenu", Game.GetPlayer().GetBaseObject().GetName())
endif
EndEvent
Event OnSetName(string eventName, string strArg, float numArg, Form sender)
Game.GetPlayer().GetBaseObject().SetName(strArg)
EndEvent
また、Aliasをプレイヤーで設定し、Aliasのスクリプトとして以下の内容を追加します。
aaaMyQuest Property QuestScript Auto ;「aaaMyQuest」はQuestのScriptとして追加したスクリプト名を使います。 Event OnInit() QuestScript.OnGameReload() EndEvent Event OnPlayerLoadGame() QuestScript.OnGameReload() EndEvent
ここで注目するのはOnGameReloadで実行している「RegisterForModEvent」と、OnKeyDown内で実行している「UI.InvokeString」、そして「OnSetName」です。
ソースコードを見れば大体わかると思いますが、以下のような構造でゲームとUI上でデータのやりとりをしています。
ソースコードを見れば大体わかると思いますが、以下のような構造でゲームとUI上でデータのやりとりをしています。
| + | ソースコードの説明 |
動作確認
作成したModを導入し、swfファイルも配置して動作を確認します。
UI表示時にプレイヤーの名前が出ており、そこを編集してSubmitボタンを押したらプレイヤー名が変更されていれば成功です。
UI表示時にプレイヤーの名前が出ており、そこを編集してSubmitボタンを押したらプレイヤー名が変更されていれば成功です。
