「UIを開く・閉じる」の編集履歴（バックアップ）一覧はこちら
UIを開く・閉じる - (2019/03/30 (土) 12:54:12) の１つ前との変更点
追加された行は緑色になります。
削除された行は赤色になります。
#contents
* UIを開く・閉じる
このチュートリアルではとりあえずSkyrim内で閉じるボタンを開いて、クリックしたらゲームに戻ることができるものを作ります。
ここでは以下の内容ができるようになります。
・SkyUIのリソースを取り込んだ編集ファイルを構築する
・Action Scriptを利用したUI用オブジェクトを作成できるようにする
・UIをSkyrimのゲーム内で開く/閉じることができるようにする
#region(close,Flash関連ファイル)
本チュートリアルのFlashに関連するファイルを置いておきます。
[[UIを開く・閉じるファイル>https://drive.google.com/open?id=1K_vFyGEHpz9A3kmZUXSh3_UTZhRLgQUh]]
|ファイル名|説明|
|01test.fla|Adobe Flashで開く編集ファイルです。|
|01test.swf|コンパイルして作成した開く・閉じるインターフェースです。CKのスクリプトで読み込むことで開くことができます。|
|myButton.as|閉じるボタン用のスクリプトのソースです。|
#endregion
**前準備
***新規の編集ファイルを作成する
Adobe Flash CS6を開いた後、ファイル→新規から新規ドキュメントの作成を行います。
幅と高さは1280x720、背景色は何でもいいですがSkyUIの状態に習って#333333にしておきます。
#image(ここに画像のURL)
***フォルダ環境を整える
Flashの[ファイル]→[名前を付けて保存]から、新規ドキュメントを名前を付けて適当なフォルダに保存します。
ここでは保存先のフォルダは前準備で作成した00project、ファイル名は01test.flaとしています
#image(ここに画像のURL)
***クラスパスを設定する
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のデフォルトフォルダ|
#image(ここに画像のURL)
**ボタンの作成
ここからはボタンの形の作成を行います。
***ボタンとして扱うオブジェクトを配置する
ツールバーから[矩形ツール]を選びます。
ツールバーがない場合は[ウィンドウ]→[ツール]で出てきます。
#image(ここに画像のURL)
選んだ後は画面上に適当にクリック&ドラッグを行い四角形を配置します。
#image(ここに画像のURL)
ツールバーから[選択ツール]#image(ここに画像のURL)を選び、配置した四角形を選びます。
プロパティの所に「位置とサイズ」と「塗りと線」が表示されます。
プロパティがない場合は[ウィンドウ]→[プロパティ]で出てきます。
#image(ここに画像のURL)
位置とサイズは選択中のオブジェクトの座標や大きさを変更できます。
大きさを整えて中央に設置するため、「位置とサイズ」を以下のようにしましょう。
|パラメータ|値|内容|
|X|480|四角形のX座標（左上基準）|
|Y|280|四角形のY座標（左上基準）|
|W|320|箱の横幅|
|H|160|箱の縦幅|
全体的な配置の確認は拡大率の所から見れます。
[ステージ全体を表示]を選べば1280x720の範囲をすべて確認できます。
#image(ここに画像のURL)
次は[塗りと線]のところで、塗りつぶしの色を#00CCFFにします。
線は変更しません。
#image(ここに画像のURL)
***ボタンの説明をつける
これでボタンとなるオブジェクトが配置されましたが、何のボタンか分からないので「Close」という文章を同時に表記しましょう。
ツールバーから[テキストツール]を選びます。プロパティの所に設定が出てきますが、画像のようにします。
#image(ここに画像のURL)
ボタンの上をクリックし、「Close」という文字を打ち込みます。
その後は[選択ツール]を選び、適当に真ん中あたりに文字を持っていきます。
#image(ここに画像のURL)
***ムービークリップへの変換
これでボタンとその説明ができましたが、この状態だとボタンの四角形と説明のテキストが1つのものとしてまとまっていません。
これらを合わせて1つのオブジェクトとして取り扱うため、ムービークリップというものに変換します。
[選択ツール]からクリック&ドラッグで矩形とテキストの両方を選択した後、右クリック→[シンボルに変換]を選択します。
#image(ここに画像のURL)
「シンボルに変換」ウィンドウが出てきますが、画像のように設定します。
#image(ここに画像のURL)
OKボタンを押したら四角形とテキストが1つのムービークリップとして扱われるようになります。
#region(close, ムービークリップについて)
ムービークリップとはテキストや図形、別のムービークリップといったものを合わせた1つのオブジェクトです。
CKでいうFormみたいなもので、例えばCKで武器1つを作るにしても「nifのモデル」や「名前」、「攻撃力」といったパラメータを1つにまとめて作ります。
そして作成された武器にはFormIDがついて、1つのオブジェクトとしてActorに持たせたり箱の中に入れたり、ということが可能になります。
Flashでも同じようにボタンを作るために「ボタンの形」「テキスト」というような物品を1つにまとめる必要があり、そのまとめた物体をムービークリップと呼びます。
こうしてまとめたムービークリップは、作成された武器をActorに持たせたり箱の中に入れたりするのと同様に、ドラッグ&ドロップでステージ上に無数に配置できるようになります。
#image(ここに画像のURL)
そして同じアイテムにしてもWeaponとかArmorとかMiscとかいろいろと区分がありますが、これらは元をたどるとすべてFormというオブジェクトから派生したものです。
Flashではこの「元となるオブジェクト」を「ムービークリップ」という名前で扱っています。
※「シンボルに変換」ウィンドウの中で「種類」の選択肢に「ボタン」や「グラフィック」などがありますが、SkyrimのUIはすべて「ムービークリップ」を使います。
また、ムービークリップというオブジェクトに変換しないとActionScriptという、CKで言うPapyrusスクリプトみたいなものを関連付けることができません。
ムービークリップはCKの.pscのように外部ファイルにて関連付けができますが、外部ファイルにて関連付けられるスクリプトは1つのみで、「シンボルに変換」ウィンドウの「クラス」で設定した単語に「.as」拡張子を付けた物がスクリプトファイルになります。
#endregion
**ボタンのスクリプト作成
ここからはFlashは一度置いておいて、作成したボタンのムービークリップに対して、クリックされたときにゲームに戻る（swfを閉じる）スクリプトを関連付けます。
この作業はFlashは不要です。
***スクリプトファイル作成
flashのファイルがあるフォルダ内に.asファイルを作成します。
ファイル名は先ほどの「シンボルに変換」ウィンドウの[クラス]の項目に記述した名前である必要があるため、「myButton.as」とします。
ここではFlashDevelopのmyProjectを右クリックし、[新規作成]から作成しています。
#image(ここに画像のURL)
***スクリプトファイルへの記述
スクリプトファイルへ以下の内容を記述します。
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"という名前で開くため、この名前のメニューを閉じるようにします。|
public function myButton()はコンストラクタといい、PapyrusのOnInit()と似たような感じです。
private function onLoad()は、コンストラクタとは違い「ステージ上にそのオブジェクトがインスタンス化（生成）されてから」動作するものです。
ここで、ムービークリップで定義されているonPress（このオブジェクトがクリックされたとき）というイベントハンドラにmousePressed関数を登録しています。
こうすることでボタンがクリックされたらmousePressed関数が動作するようになります。
#region(close, コンストラクタとonLoad)
コンストラクタを実行したときは、まだオブジェクトがインスタンス化されていない（画面上に表示されていない）状態にあります。
どういうことかというと、仮にコンストラクタに「this.onPress = this.mousePressed;」の記述をした場合、this(自分自身を指すインスタンス)がまだ存在していないためこの命令は失敗してしまいます。
onLoadはオブジェクトがインスタンス化された後で実行される関数なので、こちらの方で上記命令を実行した場合はthisがすでに存在しているため正常に動作します。
UIを作成するにあたり、この問題はよく発生すると思いますので注意しましょう。
#endregion
**コンパイル
Flashのオブジェクトとスクリプトが出来上がったのでswfファイルを作成します。
[ファイル]→[パブリッシュ]から.flaファイルがある場所にswfファイルが出来上がります。
swfファイルの出力場所を変更する場合は[パブリッシュ設定]から場所を指定できます。
**Mod環境の構築
swfファイルが完成したため、CKのPapyrusを用いて起動するModを作成します。
この例ではゲーム中に特定のキーを押したらUIを開くようにします。
なお、この処理には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や諸々のスクリプトファイルも保存しています。
#image(ここに画像のURL)
**動作確認
作成Modを導入してゲームを起動後、[Insert]キーを押して動作を確認します。
Closeボタンが出現し、ボタンをクリックしてゲームに戻れば成功です。
#image(ここに画像のURL)
#contents
* UIを開く・閉じる
このチュートリアルではとりあえずSkyrim内で閉じるボタンを開いて、クリックしたらゲームに戻ることができるものを作ります。
ここでは以下の内容ができるようになります。
・SkyUIのリソースを取り込んだ編集ファイルを構築する
・Action Scriptを利用したUI用オブジェクトを作成できるようにする
・UIをSkyrimのゲーム内で開く/閉じることができるようにする
#region(close,Flash関連ファイル)
本チュートリアルのFlashに関連するファイルを置いておきます。
[[UIを開く・閉じるファイル>https://drive.google.com/open?id=1K_vFyGEHpz9A3kmZUXSh3_UTZhRLgQUh]]
|ファイル名|説明|
|01test.fla|Adobe Flashで開く編集ファイルです。|
|01test.swf|コンパイルして作成した開く・閉じるインターフェースです。CKのスクリプトで読み込むことで開くことができます。|
|myButton.as|閉じるボタン用のスクリプトのソースです。|
#endregion
**前準備
***新規の編集ファイルを作成する
Adobe Flash CS6を開いた後、ファイル→新規から新規ドキュメントの作成を行います。
幅と高さは1280x720、背景色は何でもいいですがSkyUIの状態に習って#333333にしておきます。
#image(ここに画像のURL)
***フォルダ環境を整える
Flashの[ファイル]→[名前を付けて保存]から、新規ドキュメントを名前を付けて適当なフォルダに保存します。
ここでは保存先のフォルダは前準備で作成した00project、ファイル名は01test.flaとしています
#image(ここに画像のURL)
***クラスパスを設定する
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のデフォルトフォルダ|
#image(ここに画像のURL)
**ボタンの作成
ここからはボタンの形の作成を行います。
***ボタンとして扱うオブジェクトを配置する
ツールバーから[矩形ツール]を選びます。
ツールバーがない場合は[ウィンドウ]→[ツール]で出てきます。
#image(ここに画像のURL)
選んだ後は画面上に適当にクリック&ドラッグを行い四角形を配置します。
#image(ここに画像のURL)
ツールバーから[選択ツール]#image(ここに画像のURL)を選び、配置した四角形を選びます。
プロパティの所に「位置とサイズ」と「塗りと線」が表示されます。
プロパティがない場合は[ウィンドウ]→[プロパティ]で出てきます。
#image(ここに画像のURL)
位置とサイズは選択中のオブジェクトの座標や大きさを変更できます。
大きさを整えて中央に設置するため、「位置とサイズ」を以下のようにしましょう。
|パラメータ|値|内容|
|X|480|四角形のX座標（左上基準）|
|Y|280|四角形のY座標（左上基準）|
|W|320|箱の横幅|
|H|160|箱の縦幅|
全体的な配置の確認は拡大率の所から見れます。
[ステージ全体を表示]を選べば1280x720の範囲をすべて確認できます。
#image(ここに画像のURL)
次は[塗りと線]のところで、塗りつぶしの色を#00CCFFにします。
線は変更しません。
#image(ここに画像のURL)
***ボタンの説明をつける
これでボタンとなるオブジェクトが配置されましたが、何のボタンか分からないので「Close」という文章を同時に表記しましょう。
ツールバーから[テキストツール]を選びます。プロパティの所に設定が出てきますが、画像のようにします。
#image(ここに画像のURL)
ボタンの上をクリックし、「Close」という文字を打ち込みます。
その後は[選択ツール]を選び、適当に真ん中あたりに文字を持っていきます。
#image(ここに画像のURL)
***ムービークリップへの変換
これでボタンとその説明ができましたが、この状態だとボタンの四角形と説明のテキストが1つのものとしてまとまっていません。
これらを合わせて1つのオブジェクトとして取り扱うため、ムービークリップというものに変換します。
[選択ツール]からクリック&ドラッグで矩形とテキストの両方を選択した後、右クリック→[シンボルに変換]を選択します。
#image(ここに画像のURL)
「シンボルに変換」ウィンドウが出てきますが、画像のように設定します。
#image(ここに画像のURL)
OKボタンを押したら四角形とテキストが1つのムービークリップとして扱われるようになります。
#region(close, ムービークリップについて)
ムービークリップとはテキストや図形、別のムービークリップといったものを合わせた1つのオブジェクトです。
CKでいうFormみたいなもので、例えばCKで武器1つを作るにしても「nifのモデル」や「名前」、「攻撃力」といったパラメータを1つにまとめて作ります。
そして作成された武器にはFormIDがついて、1つのオブジェクトとしてActorに持たせたり箱の中に入れたり、ということが可能になります。
Flashでも同じようにボタンを作るために「ボタンの形」「テキスト」というような物品を1つにまとめる必要があり、そのまとめた物体をムービークリップと呼びます。
こうしてまとめたムービークリップは、作成された武器をActorに持たせたり箱の中に入れたりするのと同様に、ドラッグ&ドロップでステージ上に無数に配置できるようになります。
#image(ここに画像のURL)
そして同じアイテムにしてもWeaponとかArmorとかMiscとかいろいろと区分がありますが、これらは元をたどるとすべてFormというオブジェクトから派生したものです。
Flashではこの「元となるオブジェクト」を「ムービークリップ」という名前で扱っています。
※「シンボルに変換」ウィンドウの中で「種類」の選択肢に「ボタン」や「グラフィック」などがありますが、SkyrimのUIはすべて「ムービークリップ」を使います。
また、ムービークリップというオブジェクトに変換しないとActionScriptという、CKで言うPapyrusスクリプトみたいなものを関連付けることができません。
ムービークリップはCKの.pscのように外部ファイルにて関連付けができますが、外部ファイルにて関連付けられるスクリプトは1つのみで、「シンボルに変換」ウィンドウの「クラス」で設定した単語に「.as」拡張子を付けた物がスクリプトファイルになります。
#endregion
**ボタンのスクリプト作成
ここからはFlashは一度置いておいて、作成したボタンのムービークリップに対して、クリックされたときにゲームに戻る（swfを閉じる）スクリプトを関連付けます。
この作業はFlashは不要です。
***スクリプトファイル作成
flashのファイルがあるフォルダ内に.asファイルを作成します。
ファイル名は先ほどの「シンボルに変換」ウィンドウの[クラス]の項目に記述した名前である必要があるため、「myButton.as」とします。
ここではFlashDevelopのmyProjectを右クリックし、[新規作成]から作成しています。
#image(ここに画像のURL)
***スクリプトファイルへの記述
スクリプトファイルへ以下の内容を記述します。
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"という名前で開くため、この名前のメニューを閉じるようにします。|
public function myButton()はコンストラクタといい、PapyrusのOnInit()と似たような感じです。
private function onLoad()は、コンストラクタとは違い「ステージ上にそのオブジェクトがインスタンス化（生成）されてから」動作するものです。
ここで、ムービークリップで定義されているonPress（このオブジェクトがクリックされたとき）というイベントハンドラにmousePressed関数を登録しています。
こうすることでボタンがクリックされたらmousePressed関数が動作するようになります。
#region(close, コンストラクタとonLoad)
コンストラクタを実行したときは、まだオブジェクトがインスタンス化されていない（画面上に表示されていない）状態にあります。
どういうことかというと、仮にコンストラクタに「this.onPress = this.mousePressed;」の記述をした場合、this(自分自身を指すインスタンス)がまだ存在していないためこの命令は失敗してしまいます。
onLoadはオブジェクトがインスタンス化された後で実行される関数なので、こちらの方で上記命令を実行した場合はthisがすでに存在しているため正常に動作します。
UIを作成するにあたり、この問題はよく発生すると思いますので注意しましょう。
#endregion
**コンパイル
Flashのオブジェクトとスクリプトが出来上がったのでswfファイルを作成します。
[ファイル]→[パブリッシュ]から.flaファイルがある場所にswfファイルが出来上がります。
swfファイルの出力場所を変更する場合は[パブリッシュ設定]から場所を指定できます。
**Mod環境の構築
swfファイルが完成したため、CKのPapyrusを用いて起動するModを作成します。
この例ではゲーム中に特定のキーを押したらUIを開くようにします。
なお、この処理には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や諸々のスクリプトファイルも保存しています。
#image(ここに画像のURL)
**動作確認
作成Modを導入してゲームを起動後、[Insert]キーを押して動作を確認します。
Closeボタンが出現し、ボタンをクリックしてゲームに戻れば成功です。
#image(ここに画像のURL)
表示オプション
横に並べて表示：
変化行の前後のみ表示：
