WoWS MODつくるよ（開発環境構築＆チュートリアル編）

WoWS MODつくるよ（開発環境構築＆チュートリアル編）

WoWSとはWarGaming社が提供するオンラインゲームWorld of WarShipsのことです
MODはゲームプレイにおいてユーザに許可された改造機能の総称で、外観変更や音声変更、支援情報の表示ということができます。
日本語で検索すると出てくる情報には、見た目を変更するテクスチャ系MOD、音声を変更するMODなどありますが、情報支援型のGUI系MODの作成情報はほぼありません。

リリース7年経過したゲームであり
MODの開発環境がPython2 + Flash（AIR/ActionScript3）+ XMLという現在トレンドからはずれ、SDKは本家のサポートもはずれており
いずれロストテクノロジーと化すであろうことから個人的な忘備録として記載します。

この記事開発環境は「開発はできる」が「最適解でない」ことは片隅にいれておいてください
よって以後更新される場合があります
## 1.環境構築編
開発環境は仮想マシンで用意するのがよいです
現在使用中の環境に、異端な環境を構築すると他の開発時にしなくてもよい苦労に見舞われます
よって仮想マシンを立ち上げましょう

https://www.globalgate.co.jp/blog/exec-windows-in-windows-using-hyperv

## ２．必要なソフトの用意
以下表のソフトをダウンロードします
<style>
.smalltable > table, .smalltable > th, .smalltable > td {
   font-size: 30%;
}
</style>
<div class="smalltable"> 

| No. | Name |Link |subscript |
|:-:|:-:|:-:|:-:|
|１| Flashdevelop  |[Flashdevelop](https://www.flashdevelop.org/ "flashdevelop") でダウンロードまたはhttps://github.com/fdorg/flashdevelop よりソースコードを取得しビルドします   |VisualStudio2022でビルド出来ています   |
|２|AIR   | https://airsdk.harman.com/download |License Agreementにチェックを入れ[AIR SDK for Windows]をダウンロードします。ActionScriptのコンパイラとなります。<img width="60%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231632/87881dea-a72e-5822-339f-d923891d7676.png">
|３   | Flex SDK  |https://flex.apache.org/installer.html   |Sourceをダウンロード<img width="60%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231632/78c71264-d5c4-df3a-1864-0adb307458fe.png">  |
|４   | Java|https://www.java.com/ja/download/manual.jsp   | Flex実行に必要  |
|５   | wows_library.swc  |https://github.com/qMBQx8GH/mxmeter/commit/43e7786693aea1378d248f7fee877c82f652eae4  | WoWS用ActionScript3 ライブラリ  |
|６   | MODのベース |https://forum.worldofwarships.com/topic/174245-modapi-contentsdk/	  | リンク先のModsSDK_ver.zipおよびxml2as.zipを取得  |

## ３. 環境のセットアップ
以降は仮想環境内で作業します	

    ・AIRを任意の場所に展開し、環境変数のPathに ～binを登録
    → $ adl が実行できること
    ・Flex SDKを任意の場所に展開し、環境変数のPathに ～binを登録
    → $ fcsh が実行できること
    
    ・Flex SDKフォルダのenv.template.propertyのバックアップを作成
	・env.template.propertyをenv.propertyにリネーム
	・env.property内の変数AIR_HOMEにAIRを展開したパスを記述し保存
    	#AIR_HOME → AIR_HOME=D:\\AIR
	

## ４.チュートリアルの実装
WoWSのGUIはゆるいMVCモデルで大まかに「C」がPython「V」をFlashが担当しています
「C」と「V」をつなぐI/Fをwows_library.swcが担っています
「M」はゲームクライアント内で取得できるデータが規定されておりユーザがそれ以外の情報を取得することはできないようになっているので今回は考えません。
取得できる情報はMOD APIの解説ページにある内容で全てです。
https://forum.worldofwarships.com/topic/174161-modapi-documentation/?tab=comments#comment-4093916
ゆるいと述べたのは「V」側のFlashで与えられたパラメタを元にした計算結果を描画することができ、この箇所でユーザへの情報支援を制御できます

---
##### Pythonコード
チュートリアルのPythonコードをコピペして適当な名前で保存します
```Main.py
API_VERSION = 'API_v1.0'
print ('Hello World!')
```

##### Flash（SWFファイル）
・チュートリアルプロジェクトをAS3で作成
<img width="60%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231632/7fb4734c-a89a-2eb1-89d5-dcce5b78d6bf.png">
・プロジェクトと同フォルダにwows_library.swcをコピー
・[Project] -> [Property]を設定します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231632/443d8849-5210-a173-93f1-3695ab7d045c.png)
・[Compiler Option] -> [SWC Include Libraries]にwows_library.swcを配置したディレクトリを設定
<img width="60%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231632/1265eee5-4c9a-f53d-7d61-37b2b9ae3b26.png">
・AIRとFlexをSDKとして登録
[SDK]->[Manage]->[AS3Context]->[Installed Flex SDKs]
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231632/f3a7dd6b-326b-4ef0-2a8d-57ad17915e67.png)

・プロジェクトにActionScriptソースコードを作成
```Main.as
package
{
    import lesta.api.ModBase;
    import flash.text.TextField;
    import flash.text.TextFormat;
    public class Main extends ModBase
    {
        private var tf:TextField = new TextField();
        public function Main()
        {
            super();
        }
        override public function init():void
        {
            super.init();
            var format:TextFormat = new TextFormat();
            format.size = 40;
            gameAPI.stage.addChild(tf);
            tf.defaultTextFormat = format;
            tf.text = "Hello World!";
            tf.textColor = 0xFF0000;
            tf.width = 250;
        }
        override public function fini():void
        {
            super.fini();
        }
        override public function updateStage(width:Number, height:Number):void
        {
            super.updateStage(width, height);
        }
    }
}
```
この時点でFlashDeveloperでのプロジェクトツリーは以下のようになっています
<img width="20%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231632/ebdf0c46-8490-53f3-3d0b-99318fcb5ed8.png">
・ビルドします
<img width="20%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231632/df1e3a32-10b9-5a65-3552-a948cbea2e37.png">

Main.swfが生成されます。（違う名前で生成した場合はMODフォルダコピー時にリネームすること）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231632/2f82967e-f9bb-90bb-d6fa-f15b184c41c8.png)

    エラーが出る場合
    	エラーメッセージを確認してください
		・AIRかFlexのパスが通っていないか
		・プロジェクトのPropertyが誤っていないか
		大体これに集約します
		
## ５．チュートリアルMODの動作テスト
先行してModStationなりAslainなりで情報支援系のMODを入れてください
諸々必要なファイル群がセットされます
次に2か所に作成したファイルを配置します

・PnFMods

    /bin/一番大きい数字/res_mod/PnFMods 内に新規MODのフォルダを作成し
	前項で作成したpython,swfファイルを配置します。
    双方の拡張子以外の名前は同じである必要があります
<img width="40%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231632/08f33432-49c0-5db3-5d3b-41f7fc7dee25.png">

・Unbound

	/bin/一番大きい数字/res_mod/gui/unbound
	上記PnfModからフォルダ毎このフォルダ内に作成したMODを配置します
<img width="40%" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231632/a3b6e6cc-69c6-a640-737a-8e5649ff74ef.png">

#### クライアントの起動
WoWSクライアントを起動し、MODが動作しているかを確認します
・pythonの確認
profile/python.log より作成したMODの文字列を検索してください
[ERROR]となっていなければ、認識成功・クライアントで読み取りできたということになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231632/6be6fdad-24d7-e0a5-69a0-deb92bde7874.png)
※Warningはでていますがswf foundということで認識できています

・swfの確認
今回のチュートリアルでは画面上に文字列を常に表示するというものです
クライアント画面左上にActionScriptでセットした文字列’Hello World’が表示されます
![MOD-enable.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/231632/b82d1abe-043f-fc18-a9ec-daef86db96fe.jpeg)

## まとめ
まずはGUI MODのベース部分が動くようになりました
今後ここから機能を追加していきます