【チュートリアル】Liberappにアプリを投稿しよう!Part2-1【EgretPro編】

チュートリアルPart2では肝心のゲームデータの作り方を解説していきます。

今回はEgretPro編です

まずはビルド!…と行きたい所ですが…

さて、兎にも角にもビルドしなければ始まりません。
しかしながらEgretProのエディタ画面にはビルドの項目が存在していません。

メニューにもビルドの項目が一切見当たりません

EgretProでビルドするには、

コマンドプロンプトにコマンドを打ち込んでビルドする必要があります。

では、さっそく手順を見ていきましょう。

コマンドプロンプトを操作してビルドしよう!

今回はWindowsを対象として記載します。

MacOSの場合はコマンドによっては Sudo を追記する必要があります

今回の対象のプロジェクトのパスは

"C:\Users\ユーザー名\Downloads\Desktop\H5G\TestProject"

であることを前提として読み進めてください。

実際は、このパスは各々がEgretProのプロジェクトを作成したパスになります。

あくまでも具体例として見ていただければと思います。

1.まずは操作するディレクトリをビルドしたいプロジェクトに設定してください。

以下のコマンドを打ち込みます

cd "C:\Users\ユーザー名\Downloads\Desktop\H5G\TestProject"
ユーザー名の部分は赤ペンで塗りつぶしています。

2.ビルドに必要な環境をインストールします

以下のコマンドを打ち込みます

npm install

以下の様な表示が出ていれば成功です。

ユーザー名の部分は赤ペンで塗りつぶしています。

3.テスト用に静的サーバーをインストールします

以下のコマンドを打ち込みます

npm install static-server -g

以下の様な表示が出ていれば成功です。

ユーザー名の部分は赤ペンで塗りつぶしています。

4.ビルド!

以下のコマンドを打ち込みます

npm run bake

以下の様な表示が出ていれば成功です。

ユーザー名の部分は赤ペンで塗りつぶしています。

その後、以下のコマンドを打ち込みます

npm run build:web

以下の様な表示が出ていれば成功です。

ユーザー名の部分は赤ペンで塗りつぶしています。

画像では警告が出ていますが、これはサンプルプロジェクトをそのままビルドしている関係上、サイズが大きすぎるためです。
あくまでもデータ量の警告のため、ビルド自体は問題なくできています。
1からリソースサイズ等に気を付けて作っていれば、このような警告は表示されません。

この時点で、対象のプロジェクトのフォルダに

dist

という名前のフォルダが出来ています。
これがビルドの出力先です。

中にはゲームデータが入っています

5.ビルド結果を実際に動かして確認したい場合

以下のコマンドを打ち込みます

static-server ./dist

以下の様な表示が出ていれば成功です。

ユーザー名の部分は赤ペンで塗りつぶしています。

その後、お好みのWebブラウザのURL欄に以下のURLを打ちめば動作チェックが可能です

http://localhost:9080

ここまでできれば、後は提出用データとしてパッケージにしてしまいましょう!

ここまで出来たら…?

Part1で説明したフォーマットに合わせて、

【icon.png】【cover.png】【app.json】

この3つを用意してください。

もし、どのようなフォーマットかわからない、そもそもPart1を見ていないという方は以下のリンクからご確認ください。

それでは、先ほどビルドしたプロジェクトのdistフォルダ内のデータをコピーし、
一つのフォルダの同じ階層に配置してください

このような形になります。

あとは、このデータ群をZipに圧縮すれば完成です!

ここで注意!

Zip化した際に、直下にデータ群が来る状態でなければなりません。

このように直接、データを選択してZip化すれば問題ありません。

データが入っているフォルダではなく、データ自体を選択してZip化します。

これで、提出するデータの準備ができました!

以上が、EgretProでゲームを作成した際のビルドからPackage作成までの手順でした。

あとはLiberappにゲームを提出するだけです!