UIを開く・閉じる - SkyrimMOD作成wiki

UIを開く・閉じる

このチュートリアルではとりあえずSkyrim内で閉じるボタンを開いて、クリックしたらゲームに戻ることができるものを作ります。

ここでは以下の内容ができるようになります。

• SkyUIのリソースを取り込んだ編集ファイルを構築する
• Action Scriptを利用したUI用オブジェクトを作成できるようにする
• UIをSkyrimのゲーム内で開く/閉じることができるようにする

Flash関連ファイル

本チュートリアルのFlashに関連するファイルを置いておきます。Adobe Flashを所持している方はこれ抜きでチュートリアルを進めても問題ありません。
ソフトを持ってなかったりするけど動作は見てみたい、というような方はご利用ください。
UIを開く・閉じるファイル

ファイル名	説明
01test.fla	Adobe Flashで開く編集ファイルです。
01test.swf	コンパイルして作成した開く・閉じるインターフェースです。CKのスクリプトで読み込むことで開くことができます。
myButton.as	閉じるボタン用のスクリプトのソースです。

前準備

新規の編集ファイルを作成する

Adobe Flash CS6を開いた後、ファイル→新規から新規ドキュメントの作成を行います。
幅と高さは1280x720、背景色は何でもいいですがSkyUIの状態に習って#333333にしておきます。

フォルダ環境を整える

Flashの[ファイル]→[名前を付けて保存]から、新規ドキュメントを名前を付けて適当なフォルダに保存します。
ここでは保存先のフォルダは前準備で作成した00project、ファイル名は01test.flaとしています

クラスパスを設定する

Flashの[ファイル]→[ActionScript 設定]から、.asファイル（papyrusと同じようなスクリプトファイル）を読み込む場所を指定します。
SkyUIのライブラリや自分で作成する.asファイルを読み込ませるために必要な設定になります。

[+]ボタンでパスを追加し、skyuiの中のCommonとCLIKフォルダ及び、「.」「$(LocalData)/Classes」の4つを設定しましょう。

ここでは以下のように設定しています。

設定するパス	内容
../Common	skyui-master\src内にあったCommonフォルダ（相対パス）
../CLIK	skyui-master\src内にあったCLIKフォルダ（相対パス）
.	自身の.flaがあるフォルダ
$(LocalData)/Classes	ActionScriptのデフォルトフォルダ

ボタンの作成

ここからはボタンの形の作成を行います。

ボタンとして扱うオブジェクトを配置する

ツールバーから[矩形ツール]を選びます。
ツールバーがない場合は[ウィンドウ]→[ツール]で出てきます。

選んだ後は画面上に適当にクリック&ドラッグを行い四角形を配置します。

ツールバーから[選択ツール]を選び、配置した四角形を選びます。

プロパティの所に「位置とサイズ」と「塗りと線」が表示されます。
プロパティがない場合は[ウィンドウ]→[プロパティ]で出てきます。

位置とサイズは選択中のオブジェクトの座標や大きさを変更できます。
大きさを整えて中央に設置するため、「位置とサイズ」を以下のようにしましょう。

パラメータ	値	内容
X	480	四角形のX座標（左上基準）
Y	280	四角形のY座標（左上基準）
W	320	箱の横幅
H	160	箱の縦幅

全体的な配置の確認は拡大率の所から見れます。
[ステージ全体を表示]を選べば1280x720の範囲をすべて確認できます。

次は[塗りと線]のところで、塗りつぶしの色を#00CCFFにします。
線は変更しません。

ボタンの説明をつける

これでボタンとなるオブジェクトが配置されましたが、何のボタンか分からないので「Close」という文章を同時に表記しましょう。
ツールバーから[テキストツール]を選びます。プロパティの所に設定が出てきますが、以下の画像のようにします。

ボタンの上をクリックし、「Close」という文字を打ち込みます。
その後は[選択ツール]を選び、適当に真ん中あたりに文字を持っていきます。

ムービークリップへの変換

これでボタンとその説明ができましたが、この状態だとボタンの四角形と説明のテキストが1つのものとしてまとまっていません。
これらを合わせて1つのオブジェクトとして取り扱うため、ムービークリップというものに変換します。
[選択ツール]からクリック&ドラッグで矩形とテキストの両方を選択した後、右クリック→[シンボルに変換]を選択します。

「シンボルに変換」ウィンドウが出てきますが、以下の画像のように設定します。

OKボタンを押したら四角形とテキストが1つのムービークリップとして扱われるようになります。

ムービークリップについて

ムービークリップとはテキストや図形、別のムービークリップといったものを合わせた1つのオブジェクトです。

CKでいうFormみたいなもので、例えばCKで武器1つを作るにしても「nifのモデル」や「名前」、「攻撃力」といったパラメータを1つにまとめて作ります。
そして作成された武器にはFormIDがついて、1つのオブジェクトとしてActorに持たせたり箱の中に入れたり、ということが可能になります。

Flashでも同じようにボタンを作るために「ボタンの形」「テキスト」というような物品を1つにまとめる必要があり、そのまとめた物体をムービークリップと呼びます。
こうしてまとめたムービークリップは、作成された武器をActorに持たせたり箱の中に入れたりするのと同様に、ドラッグ&ドロップでステージ上に無数に配置できるようになります。

そして同じアイテムにしてもWeaponとかArmorとかMiscとかいろいろと区分がありますが、これらは元をたどるとすべてFormというオブジェクトから派生したものです。
Flashではこの「元となるオブジェクト」を「ムービークリップ」という名前で扱っています。
※「シンボルに変換」ウィンドウの中で「種類」の選択肢に「ボタン」や「グラフィック」などがありますが、SkyrimのUIはすべて「ムービークリップ」を使います。

また、ムービークリップというオブジェクトに変換しないとActionScriptという、CKで言うPapyrusスクリプトみたいなものを関連付けることができません。
ムービークリップはCKの.pscのように外部ファイルにて関連付けができますが、外部ファイルにて関連付けられるスクリプトは1つのみで、「シンボルに変換」ウィンドウの「クラス」で設定した単語に「.as」拡張子を付けた物がスクリプトファイルになります。

ボタンのスクリプト作成

ここからはFlashは一度置いておいて、作成したボタンのムービークリップに対して、クリックされたときにゲームに戻る（swfを閉じる）スクリプトを関連付けます。
この作業はFlashは不要です。

スクリプトファイル作成

flashのファイルがあるフォルダ内に.asファイルを作成します。
ファイル名は先ほどの「シンボルに変換」ウィンドウの[クラス]の項目に記述した名前である必要があるため、「myButton.as」とします。
ここではFlashDevelopのmyProjectを右クリックし、[新規作成]から作成しています。

スクリプトファイルへの記述

スクリプトファイルへ以下の内容を記述します。

class myButton extends MovieClip 
{
	private var MENU_NAME :String;
	
	public function myButton()
	{
		super();
		MENU_NAME = "CustomMenu"
	}
	
	// @override MovieClip
	private function onLoad()
	{
		super.onLoad();
		
		this.onPress = this.mousePressed;
	}
	
	private function mousePressed()
	{
		skse.CloseMenu(MENU_NAME);
	}
}

クラス名はmyButtonです。これはFlashで設定した[クラス]の項目と同じです。myButtonはムービークリップ型であるため、ムービークリップの性質を受け継ぐために「extends MovieClip」を付けています。

var MENU_NAME: Stringは変数の宣言です。Papyrusと違い変数の宣言はAS2ではすべて「var 変数名」で行い、変数の型については後で「:型名」を付けます。

privateとpublicという名称は、その変数や関数が外部のスクリプト等から参照できるかどうかです。publicは参照可能、privateは参照不可になります。

関数の説明は以下のようになります。

関数名	説明
myButton	クラス名と同じ名前の関数はコンストラクタといい、PapyrusのOnInit()と似たような動作をします。
onLoad	コンストラクタとは違い「ステージ上にそのオブジェクトがインスタンス化（生成）されてから」動作するものです。onPressというのはムービークリップが持つイベントハンドラで、「クリックされたら」という挙動に対して、何の関数を実行するかを登録できます。今回はmousePressed関数を登録しています。
mousePressed	ムービークリップが押されたときに動作する関数です。skyui\Common\skse.asで定義されているCloseMenu関数を実行しています。これは引数として指定した文字列に該当するメニューを閉じるもので、Papyrusスクリプトからオリジナルのメニューを開く場合は基本的に"CustomMenu"という名前で開くため、この名前のメニューを閉じるようにします。

コンストラクタとonLoad

コンストラクタを実行したときは、まだオブジェクトがインスタンス化されていない（画面上に表示されていない）状態にあります。
どういうことかというと、仮にコンストラクタに「this.onPress = this.mousePressed;」の記述をした場合、this(自分自身を指すインスタンス)がまだ存在していないためこの命令は失敗してしまいます。

onLoadはオブジェクトがインスタンス化された後で実行される関数なので、こちらの方で上記命令を実行した場合はthisがすでに存在しているため正常に動作します。
UIを作成するにあたり、この問題はよく発生すると思いますので注意しましょう。

コンパイル

Flashのオブジェクトとスクリプトが出来上がったのでswfファイルを作成します。
Adobe Flashに戻り、[ファイル]→[パブリッシュ]を実行し、.flaファイルがある場所にswfファイルを出力します。
swfファイルの出力場所を変更する場合は[パブリッシュ設定]から場所を指定できます。

Mod環境の構築

swfファイルが完成したため、CKのPapyrusを用いてswfファイルを起動するModを作成します。
この例ではゲーム中に特定のキーを押したらUIを開くようにします。
UIに関するPapyrusの操作はSKSEが必要になります。

CKからUIを起動するMod環境を作る

CKを起動し、Skyrim.esmをマスターファイルとして新規mod環境を作成します。
適当なQuestを作り、スクリプトとして以下の内容を追加します。

string property MENU_NAME = "CustomMenu" autoreadonly
int property MENU_KEY = 210 autoreadonly

Event OnInit()
	RegisterKey()
EndEvent

Function RegisterKey()
	RegisterForKey(MENU_KEY)
EndFunction

Event OnKeyDown(int KeyCode)
	if (KeyCode == MENU_KEY && !UI.IsMenuOpen(MENU_NAME))
		UI.OpenCustomMenu("01test", 0)
	endif
EndEvent

MENU_NAMEは自作メニュー名として設定される「CustomMenu」にします。
MENU_KEYは自作のメニューを開くためのキーコードです。今回は[Insert]キーに対応するキーコード210としています。
（キーコードはこちらから確認できます。）
https://www.creationkit.com/index.php?title=Input_Script#DXScanCodes

RegisterForKey関数で該当のキーが押された場合OnKeyDownイベントが呼び出されるようにします。
キーコードが[Insert]キーに該当するものであり、UI.IsMenuOpenでCustomMenuが開いていない状態であることを確認した後、UI.OpenCustomMenuによって01test.swfを呼び出します。
OpenCustomMenu関数は第一引数で開くファイルを指定しますが、拡張子を書く必要はないです。また第二引数は特に意味は無く、0で問題ありません。

swfファイルの配置

data\interface以下に作成した01test.swfを配置します。今回の例ではMOのmodsフォルダ以下にテスト用フォルダを構築しています。
画像では、5.1のespや諸々のスクリプトファイルも保存しています。

動作確認

作成Modを導入してゲームを起動後、[Insert]キーを押して動作を確認します。
Closeボタンが出現し、ボタンをクリックしてゲームに戻れば成功です。