■2024-08-17 (土) ウディタ作品ブラウザ化＆Androidスマホアプリ化！▼
急激に話が進みましたのでご報告です！
なおブラウザウディタはruka様のプロジェクトです！
私は横から見てるだけで、技術的にどうやっているのかなどについてはよく分かっていません。
【ウディタ作品のブラウザ化、実現！】
2024年8月10日、ruka様がウディタのブラウザ化プロトタイプを公開されました！
【ブラウザウディタ:プロトタイプ版を公開】
https://ci-en.net/creator/12702/article/1207619
なんとこちらで公開されているファイルをサーバーに
アップするだけでブラウザゲームとして動作！ すごい簡単！
ちなみに「ブラウザ化で何できるの？」って話ですが、
単純に【ダウンロードしなくてもすぐゲームが遊べる】ようになります！
フリーゲームをDLして遊ぶのって地味にハードル高いですからこれは一つ大きな利点！
さらに大きいのが、【スマホ上】でもブラウザを開いてウディタ作品が遊べるようになります！
たとえば、私の持ってるスマホ「Pixel 6a」で『片道勇者（無印版）』が動くのを確認済みです！
気になる点といっても「インターネット接続機能が使えない」、
「ごく一部の挙動がPC版と違う気がする」くらいで、
「他は全部Windows版通りに動作」し
「普通に安定して60fps（100%の動作速度）」が出ました！
安定性だけでなくてパフォーマンスもすでにかなり高い完成度！
もちろんまだまだ動作しない部分や、こうなって欲しいなあ～という部分なども
あると思いますが、プロトタイプでこのポテンシャルなら十分すぎると思います！
【ブラウザ化の簡単な注意点】
『ブラウザウディタ』の使い方自体は上の記事から
ダウンロードできるZipファイルにも書いてありますが、
ウディタ本体開発者から見た利用時の注意点は以下の4点！
●プロトタイプのZipに入ってるpublicフォルダをそのままサーバーにアップするだけでとりあえず同梱のサンプルゲームが動きます！
→ それが大変な人は、K-Shin07様の「Wodistant」というツールを使えば、サーバーにアップしなくてもブラウザ版のテストが可能です！
●「Data.wolf」を自前で用意したものに上書きすれば自分のゲームが動きます！
→ ただしゲームデータの「BasicData」フォルダ内に、ブラウザウディタに入ってる「BrowserWoditor.dat」を入れてから暗号化する必要がありますので、そこはご注意を。
●ブラウザウディタのpublicフォルダには作品名などを設定するテキストファイル「settings.js」も用意されているので、できればそれもいじっておくといいと思います。そこで設定されているゲーム名はセーブデータの認識用に使われてるそうです。
●私とサポートしてる人が違うので、色んなご都合でサポートが止まる可能性があります。
利害が一致しそうな人はよければ少しでも活動続けられるようにruka様にチップあげてくださるとみんなWin-Winだと思います！！ 私も少しですが入れさせていただきました！
さらにAndroidスマホアプリ化もできた！
この『ブラウザウディタ』、「.wasm」というファイル形式のエンジンやJavaScriptなどによってHTML上で動いているものなのですが、なんといろいろ変換すればスマホアプリにできます！
私はAndroidスマホ化に成功しましたが、その作業途中でコマンドを変えればiOS用にも変換できるらしいので、たぶんiOS用アプリも作れると思います。
（ただその場合、macを持ってて、かつApp Storeに出すための権利をお金払って持ってないといけない？ らしいです）
Android化に成功してスマホ上で撮影した画面 ↓
【 #ブラウザウディタ でAndroidスマホアプリ化成功！】
— SmokingWOLF＠片道勇者2開発中/ゲーム開発者 (@WO_LF) August 11, 2024
試してみたらブラウザウディタのデータをAnrdoidスマホ化することができました！
（apk作成に使ったのはIonicさんちのCapacitorとAndroid Studio）
ウディタ作品をスマホ化できる足がかりが見えてこれは夢が広がります！ ウヒョー！ https://t.co/fU7ZtuSwaT pic.twitter.com/8MlrcSnj8F
Androidアプリ化のやり方はちょっと長いですが以下の通り！
コマンドプロンプトとか使うのでちょっと大変ですよ。
ブラウザウディタをAndroidアプリ化する方法！
ざっくりですが『ブラウザウディタ』のデータをAndroidアプリ化する方法メモを掲載しておきます！
まだメモ状態なのでスクリーンショットなどはありませんが、参考にできる人は参考にしてみてください。
【1. Node.jsをインストール】
1-1. Node.jsのあるhttps://nodejs.org/en/download/package-manager
のサイトを開き、「Prebuilt Installer」のタブを開き、インストーラーをダウンロード
(今どきのWindowsなら選択肢は「最初に出てるバージョン」「Windows」「x64」を選んでダウンロードすればいいと思います。万が一32bitのWindowsなら最後は「x86」を選んでください）
1-2.DLしたファイルを実行し、インストールを進める。
途中の「I accept the terms in the Liecense Agreement」はチェックを当然入れる。
全部「Next」。（追加のChocolatey？がどうとか言うのはインストールしなくても動きました）
【2. Ionic CLIをインストールします】
Windowsの「コマンドプロンプト」を開き、以下のコマンドを実行します。
（npmはNode.jsをインストール後に使えるコマンドです）
npm install -g @ionic/cli
【3. Capacitor用のまとめフォルダと作品フォルダを作ります】
Capacitor（スマホアプリ用データを作るソフト）用のまとめフォルダを作ります。ここでは「Cドライブ」の「Capacitor-apps」フォルダを作るとします。
この中に、作品ごとのフォルダが新たに作られます。
Windowsの「コマンドプロンプト」を開いて以下を実行してください（Windowsの検索窓を開いて「cmd」と入れてもでてきます）。
cd C:\
mkdir Capacitor-apps
cd Capacitor-apps
npm init @capacitor/app
※「\」はコマンドプロンプト中で「＼」と出るかもしれませんが意味は同じです
ここまで実行すると初回だけ
「Need to install the following packages:
@capacitor/create-app@0.3.0
Ok to proceed? (y)」
と出るのでyを押してEnterする
ここからは作品ごとのフォルダ作成フェイズ。
次に「? What is the name of your app? 」と出たらゲーム名を入れる。
何か入れないといけないみたいなのでここでは「SampleGame」と入れたことにします。
「? What directory should be used for your app?」は作成するフォルダ名を指定。
ここでは何も入れずにただ「Enter」して「my-app」フォルダを作った前提で進めていきます。
「 ? What should be the App ID for your app?」でAppID入れるらしいですけど知らないので何も入れずに「com.example.app」のままEnterして進めたとします。
これで準備完了！ 「Capacitor-apps」フォルダの中に「my-app」フォルダが作られ、その中に色々ファイルが作られています！
これらの質問で打ち込んだ内容は「my-app」フォルダ内の「capacitor.config.json」ファイルに書かれているので、後の手順でまた修正します。
【4.Capacitorフォルダの中にAndroid用のプロジェクトを作成】
コマンドプロンプトで以下を実行し、Androidプロジェクト作成処理をします。
【さっき作った「my-app」フォルダ内に移動】してから色々インストールしてるのが分かりますね。
cd c:\Capacitor-apps\my-app\
npm install @capacitor/core @capacitor/cli
npm install @capacitor/android
npx cap add android
※初回だけ「? Share anonymous usage data? » (Y/n)」と出るかもしれないのでその場合は「Y」か「n」を入力。
(「匿名で利用データを送るか？」 なのでイヤな人は「n」でいいです）
【5.wwwフォルダを作ってブラウザウディタのファイルを入れる】
5-1.
作ったフォルダが「my-app」の場合、その中に以下のファイル構成で「www」フォルダを作り、「ブラウザウディタ用ゲームデータ」のファイルを入れます。
my-app/
├── android/
├── src/
├── node_modules/
├── www/ ← ★このフォルダを新たに作成し、ブラウザウディタの
│ │ 「public」フォルダ内の全ファイルを入れます
│ ├──→ index.htmlやwoditor.wasm ← つまりここに入ります
│ └── Data.wolf ←★あなたのゲームのData.wolfを上書き。
│ ※ただしBasicData内に「BrowserWoditor.dat」を入れる必要あり
├── capacitor.config.json
└── package.json など
5-2.「my-app」下の「capacitor.config.json」をむりやりメモ帳などで開いて（メモ帳にドラッグ＆ドロップでできます）、必要ならちょっと書き換えます。
このファイルには、「スマホアプリ化されるときのアプリ情報」や「(my-appフォルダ内の)どのフォルダをスマホアプリ化するか」が記載されています。
{
"appId": "com.example.app", ←動かすだけならこのままで可
"appName": "SampleGame", ←ここがスマホ内でアプリアイコンの下に表示されるゲーム名
"webDir": "www", ←★ブラウザウディタの入ってるフォルダ、"dist"などになってたら"www"に書き換えてください！！
"plugins": {
"SplashScreen": {
"launchShowDuration": 0
}
}
}
※"webDir"が"dist"のままだと、後にapkを作ってもCapacitorの紹介画面しか出てこなかったりしますので注意して下さい。1回やらかしました。
※5-1で作ったゲームデータ用フォルダ、「www」フォルダでなく最初から「dist」フォルダを作っておいたらよくない？ って感じはしますが、いちおうこのjsonファイル内で指定してるんだよってのを示すために「www」にしました。それに将来の初期フォルダが「dist」フォルダじゃなくなるかもしれない。
※appIdとappNameはアプリの識別に使ってるようです。たとえばスマホにapkを再インストールしたとき、この2つが前と同じだとアプリを上書きするか聞いてくれます。
【6.Android Studioをインストール（ここは1回やれば以後やる必要なし）】
6-1.
https://developer.android.com/studio?hl=ja
で「Android Studio Koalaをダウンロード」をクリック（2024/08/11時点）
1.2GBくらいあります。DLしたらインストールしてください。
→ インストール時は全部「Next」とか「Finish」でいいです。
→ インストール後に英語でなんか出てきますが「前のデータ読み込むか」とか「匿名のデータ送信」なので「Do not import settings(設定をインポートしない)」とか「Send usage satistics to Google(Googleに送る）」とか選んでおけばいいと思います。
6-2.
Android Studioを起動、インストールするとセットアップウィザードが始まる。
選択肢は「Standard」でいいと思います。その後「Next」。
「License Agreement」画面まで来たら「Accept」を選んで、最後は「Finish」。
なお「Starting Downloading...」 から全然進まないように見えますがちゃんと進んでたので信じて待つこと。
なんか質問が出たり管理者モード質問でたらとにかく「Yes」とか「はい」をしていきます。。
終わったら「Finish」。
【7. Android Studioを起動してビルド】
7-1. 以下のコマンドをコマンドプロンプトで実行します（フォルダ名はあなたの作ったものに合わせて変更してください）
この手順は「www」フォルダ内のData.wolfを最新にするたびに実行が必要です。
cd C:\Capacitor-apps\my-app\
npx cap sync android
7.2.Android Studioを起動して「Open」を選び、「C:\Capacitor-apps\my-app\android\」を選択します。
※「android」フォルダ側を選ぶのが重要です！
→「settings.gradle(.kts)」ファイルが存在するフォルダを開かないとビルドできません。
まちがえて「my-app」の方のフォルダを開いて何もできなかったことがありました。
→ 選んだ後、途中で「Trust and Open Project 'my-app'?」と出てきた場合は「Trust Project」を選択
→ プロジェクトが開いたら左上の「三」メニューから
「Build」→「Build App Bundles(s) / APK(s)」→「Build APK(s)」を選択
→ 初回だけ終わるまですごい時間かかる気がしますので待ちましょう。2回目からは数秒で終わります。
もし途中でなにかが足りないってでてきたら適宜インストールやらアップデートしてください。
7.3.処理が終わったら
C:\Capacitor-apps\my-app\android\app\build\outputs\apk\debug
あたりにdebug用のAPKファイルが出力されています。
7.4. そのapkファイルをなんとかしてAndroidスマホで読ませてインストールすると、スマホ上で実行できます。
その辺りの手順は紹介しないので、調べてがんばってみてください。私は「Google Drive」にアップしたapkファイルをスマホでダウンロードしています。
※なお、スマホ側の設定で「野良APKを許可する」的な設定をオンにする必要がある場合があります。
私だとGoogle Drive上でapkファイルをクリックすると「不明なアプリのインストール」みたいな画面が出てくるので「許可する」を選ぶ、という手順が必要でした。
※今回作ったapkファイルはdebug(デバッグ)版です。アプリストアに公開するなら他にも色々設定してrelease(リリース)版を作れるところまでがんばらないといけないそうですが、今回は調べてません。
【8. 今後、新しいData.wolfを作った場合は？】
もし後でData.wolfを新しくした場合は、以下の手順だけを行えばOKです！
8-1.「www」フォルダ内に新しいData.wolfを上書き
8-2.「コマンドプロンプト」で以下を実行する
cd C:\Capacitor-apps\my-app\
npx cap sync android
8-3. Android Studioで「Build」→「Build App Bundles(s) / APK(s)」→「Build APK(s)」を選択
以上です！
もしかしたらインストールしたてのWindowsパソコンでやると
他にインストールが必要なファイルなども出てくるかもしれませんが、
私のパソコンだとこの手順でなんとかなりました。
もし自分のゲームをAndroidスマホアプリとして
動かしてみたいという人がいらっしゃいましたらぜひお試しください。
（ちなみに今回の作業4(Android用のプロジェクトを作成)あたりからアレンジすればiOS用の基礎ファイルもそのまま作れるらしいです、Capacitorすごい。
ただしiOSのスマホアプリ用データ作成には、macOS上でのみ起動できる「Xcode」というソフトや、年100ドル(約1.5万円)かかるApple Developer Programへの登録などが必要だそうです）
ということで、夢が広がるブラウザ化がとても良い感じに進んでいます！
そして第16回ウディコンの審査期間ももうすぐ終了！
一般審査締め切りは8/20の23:59、結果発表は8/24(土)あたりにおこなう予定です！
もしブラウザ版もバッチリ使えるのでしたら、
次回ウディコンでは作品一覧に「ブラウザ版」へのリンクも
掲載していいかもしれません。
そしたらスマホからでもウディコン作品が遊べちゃいますよ！
今のところ問題の方が多そうなので実現できるかは分かりませんが！
（仮によそのサイトにアップするにしてもそこのトップページからの流入が
あると不公平になったりするので悩ましいとか、
自前サーバーにアップしても通信帯域がすぐオーバーしちゃうとか）
それでもみなさまのすばらしいゲームの数々がいろんな人に
遊んでもらえるチャンスが増えるに越したことはないので、
やれそうな範囲でめざしていきたいですね！
2024-08-17 (土) 
カテゴリ: ウディタ
カテゴリ: ウディタ
