すべての人をクリエイターに電子工作します!

【UE4】 4.18 HTML5 support for WebAssembly (WASM). について

5/27の4.16正式リリースでは、WASMがサポートされたものの、githubからソースコードを落として、チェックボックスをチェックできるように修正しないと出力できませんでした

4.18 Previewの時にチェックボックスが外れていたので、4.18からWASMで出力できるようになりました

4.16の時に313MBだったのが、4.18では113MBになったので、約3分の1のサイズになりました

【目次】



スポンサードリンク

4.18でWASMがデフォルト設定化"#"

4.18でWASMがデフォルト設定化されたので、どれくらいサイズが小さくなるのか試してみました

image

Landscapeのクラッシュするバグが直っている記述があったので、試してみました
image

【検証してみたバリエーション】

デフォルト設定
http://denshikousakubu.com/WebGL/HTML5_418_Default\HTML5/ThirdPerson_4_18_0-HTML5-Shipping.html

Compress files during shipping packagingチェック有り
http://denshikousakubu.com/WebGL/HTML5_418_Compress/HTML5/ThirdPerson_4_18_0-HTML5-Shipping.html

デフォルト設定 Create compressed cooked packageチェックあり
http://denshikousakubu.com/WebGL/HTML5_418_Default\HTML5/ThirdPerson_4_18_0-HTML5-Shipping.html

Compress files during shipping packaging + Create compressed cooked package
http://denshikousakubu.com/WebGL/HTML5_418_Compress2/HTML5/ThirdPerson_4_18_0-HTML5-Shipping.html

Landscape
http://denshikousakubu.com/WebGL/HTML5_418_CompressLandscape/HTML5/ThirdPerson_4_18_0-HTML5-Shipping.html

Landscape 小さいサイズ
http://denshikousakubu.com/WebGL/HTML5_418_CompressLandscapeSmall/HTML5/ThirdPerson_4_18_0-HTML5-Shipping.html

前回の記事 4.16"#"

WASMについては前回の記事を参考にしてください

【UE4】 4.16で導入 HTML5 support for WebAssembly (WASM). について
http://denshikousakubu.com/2017/05/06/20170506_AboutWASM/

Shipping用のBuild設定"#"

プロジェクト | パッケージ化"#"

項目
Build Configuration Shipping
Full Rebuild チェック

image

プラットフォーム | HTML5"#"

asm.jsをWASMで出力するかのチェックボックス自体がなくなりました

image

Compress files during shipping packagingというチェックボックスが気になったので、チェックを付けて書き出してみました
image

Compress files during shipping packagingにチェックを付けると、以下のファイルを圧縮したファイルが増えています

  • ThirdPerson_4_18_0.data
  • ThirdPerson_4_18_0.data.js
  • UE4Game-HTML5-Shipping.js
  • UE4Game-HTML5-Shipping.js.symbols
  • UE4Game-HTML5-Shipping.wasm
  • Utility.js

HTML5でパッケージ化"#"

ファイル > プロジェクトをパッケージ化 > HTML5
パッケージを出力するフォルダを設定
image

動作確認"#"

パッケージ化したファイルをサーバーにアップして動作を確認しました

image

デフォルト設定
http://denshikousakubu.com/WebGL/HTML5_418_Default\HTML5/ThirdPerson_4_18_0-HTML5-Shipping.html

Compress files during shipping packagingチェック有り
http://denshikousakubu.com/WebGL/HTML5_418_Compress/HTML5/ThirdPerson_4_18_0-HTML5-Shipping.html

Compress files during shipping packagingチェック有りの方がゲーム開始までの時間が速かったです

Create compressed cooked packageの設定は有効か"#"

算数ゲームでパッケージのサイズ縮小で一番効果が高かった、[Create compressed cooked package]にチェックを付けて出力した場合どのようになるか検証してみました

プロジェクト | パッケージ化

項目
Create compressed cooked package チェック

image

Create compressed cooked packageにチェックを付けると、ThirdPerson_4_18_0.dataのサイズが約1/3に圧縮されました
image

デフォルト設定
http://denshikousakubu.com/WebGL/HTML5_418_Compress2/HTML5/ThirdPerson_4_18_0-HTML5-Shipping.html

デフォルト設定 Create compressed cooked packageチェックあり
http://denshikousakubu.com/WebGL/HTML5_418_Default\HTML5/ThirdPerson_4_18_0-HTML5-Shipping.html

サイズは小さくなるものの、Create compressed cooked packageが無い方が開始が速いです

HTML5の設定で、Create compressed cooked packageにチェックを付けた状態だと、圧縮したThirdPerson_4_18_0.dataに圧縮するので、ThirdPerson_4_18_0.datagzのサイズがCreate compressed cooked packageのチェックを付けなかった設定より大きくなってしまいました

image

Compress files during shipping packagingのみ http://denshikousakubu.com/WebGL/HTML5_418_Compress/HTML5/ThirdPerson_4_18_0-HTML5-Shipping.html

Compress files during shipping packaging + Create compressed cooked package
http://denshikousakubu.com/WebGL/HTML5_418_Compress2/HTML5/ThirdPerson_4_18_0-HTML5-Shipping.html

ほとんど同時なので、Windows用のExeを書き出した時のようなメリットが薄れています

Windows Exeで書き出したプロジェクトをHTML5で書き出して公開したい時に、Create compressed cooked packageのチェックを付けたままでも影響ないというところでしょうか

LandscapeがHTML5で動くのか"#"

Landscapeがクラッシュするのが直ったという記述があったので、そうなんだと思いながら動くか確認してみました
image

Launching engine…から先に進みません
image

Landscapeを1番小さいサイズで作成してパッケージ化して確認してみます
image

小さくしても先に進まないので、動いたら更新します

Landscape
http://denshikousakubu.com/WebGL/HTML5_418_CompressLandscape/HTML5/ThirdPerson_4_18_0-HTML5-Shipping.html

Landscape 小さいサイズ
http://denshikousakubu.com/WebGL/HTML5_418_CompressLandscapeSmall/HTML5/ThirdPerson_4_18_0-HTML5-Shipping.html


スポンサードリンク
【UE4】 4.18 Clothing Toolsの更新

  1. 1. 4.18でWASMがデフォルト設定化"#"
  2. 2. 前回の記事 4.16"#"
  3. 3. Shipping用のBuild設定"#"
    1. 3.1. プロジェクト | パッケージ化"#"
    2. 3.2. プラットフォーム | HTML5"#"
    3. 3.3. HTML5でパッケージ化"#"
    4. 3.4. 動作確認"#"
  4. 4. Create compressed cooked packageの設定は有効か"#"
  5. 5. LandscapeがHTML5で動くのか"#"