Akashic Engine にて作成したニコ生向けゲームをAndroidアプリ用に移植する方法

はじめに

本記事では、実質ニコ生ゲーム用のゲームエンジンであるAkashic Engineを使用した
ゲームをアンドロイドアプリに移植したときの備忘録です。
HTML5で作られた他のエンジン製のゲームでも応用できるかと思います。
なお、Akashic Engineのマルチプレイ機能を用いたゲームは対象外です。

AkashicEngine 2.7
AndroidStudio 4.1.3

・手順

1.Akashic Engineのゲームをスタンドアローン形式で出力。

https://akashic-games.github.io/tutorial/v2/7-export.html
akashic export html --magnify --output ../mygame

2.Andoroid Studio からプロジェクトを新規作成

・Enpty Activity を選択

3.レイアウトにWevViewを載せる
スリープ防止の
android:keepScreenOn="true" を追加する

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:keepScreenOn="true"
    tools:context=".MainActivity">

    <WebView
        android:id="@+id/webView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:layout_editor_absoluteX="8dp"
        tools:layout_editor_absoluteY="8dp">
    </WebView>

</androidx.constraintlayout.widget.ConstraintLayout> 

4. Assetsフォルダを作り、1で作成したゲームを入れる

File→new→Folder→AssetsFolder

5. ローカルのページを表示する

MainActivity.java

package パッケージ名;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //レイアウトで指定したWebViewのIDを指定する。
        WebView myWebView = (WebView)findViewById(R.id.webView1);

        //リンクをタップしたときに標準ブラウザを起動させない
        myWebView.setWebViewClient(new WebViewClient());

        //ローカルのページを表示する。
        myWebView.loadUrl("file:///android_asset/mygame/index.html");

        //jacascriptを許可する
        myWebView.getSettings().setJavaScriptEnabled(true);

        // Storageの使用許可
        myWebView.getSettings().setDomStorageEnabled(true);

        // 起動直後に音を再生・効果音が途中で止まるのも防いでいるっぽい
        myWebView.getSettings().setMediaPlaybackRequiresUserGesture(false);
    }
}

6.横画面固定にする

Manifests/AndroidManifest.xml
android:screenOrientation="landscape"を追加

ついでにハードウェアアクセラレーターをtrueとする。
android:hardwareAccelerated="true"

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="パッケージ名">

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/AppTheme"
    android:hardwareAccelerated="true">
    <activity android:name=".MainActivity" android:screenOrientation="landscape">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />

            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

</manifest>

7.タイトルバーを消す

res/values/themes/themes.xmlに下記のitemを追加
"windowNoTitle"
"windowActionBar"
"android:windowFullscreen"
"android:windowContentOverlay"

style.xml

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>
    </style>

</resources>

これで大体完成です。
あとはアイコン等を追加してapkにすればストアにアップロードできるかと思います。

作ったもの

つりクッマAndroid版
https://play.google.com/store/apps/details?id=jp.hanakuso.turikumma