TWAndroid

Exporting TurboWarp Projects to Android - A Guide

Prerequisites

• Android Studio

Creating the Project

Step 1

Begin by launching Android Studio and initiating a new project. Ensure you select “No Activity” as your project template and proceed by clicking “Next.”

Step 2

Upon clicking “Next,” you will be directed to the following screen:

Here’s a brief overview of the elements on this screen:

• Name: Enter your app’s display name in this field.
• Package Name: This serves as a unique identifier for your app. Use the following format: com.YourName.GameName.
• Save Location: Specify where your project will be saved.

Fill in your game name, desired package name, and make sure to select Java as your programming language. Then, click “Finish.”

Creating MainActivity

Step 1

Start by displaying the contents of the Java directory.

Next, right-click on the folder named after your package name (excluding those with “(test)” or “(androidTest)” in their names).

Select “New” and then choose “Java class.”

Name it “MainActivity.”

Step 2

Paste in the following code, but don’t forget to replace the sample package name at the top with your actual package name. Don’t worry about compilation errors; They will be resolved once we set up our layout.

package your.package.name;

import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {

    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        webView = findViewById(R.id.webView);
        setupWebView();
    }

    private void setupWebView() {
        webView.setWebViewClient(new WebViewClient());
        WebSettings webSettings = webView.getSettings();
        webSettings.setJavaScriptEnabled(true);
        webSettings.setDomStorageEnabled(true);
        webView.loadUrl("file:///android_asset/game.html");
    }
}

Adding Our Layout

Step 1

First, right-click the res folder and select “Android Resource Directory.”

You will be directed to the following screen:

Set the directory name to “layout” and the resource type to “layout” as well. Now, click “OK.” Here’s how the final resource directory options should look:

Right-click on the newly created folder and create a Layout Resource File.

Set the file name to “activity_main” and click “OK.”

Double-click the newly created file to access the layout screen, then click on the “code” button at the top right corner.

Paste in the following code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</RelativeLayout>

Importing Your TurboWarp Game

Step 1

Export your TurboWarp project as HTML. If you want your game resolution to fit a vertical mobile screen, I recommend using 360x640. Additionally, I recommend using this option:

Step 2

Now, return to Android Studio. In the top left corner of the IDE, right-click the “app” folder and create a new “Assets Folder.”

In this screen, simply click “finish.”

Now, right-click our newly created “assets” folder and open it in Explorer.

Place your exported TurboWarp game in there and rename it to “game.html”.

NOTE: NOT RENAMING THE HTML FILE WILL CAUSE THE APP TO CRASH!!

Setting up AndroidManifest.xml

In your project, open the ‘manifests’ folder and double-click “AndroidManifest.xml.” Paste this code in, BUT!

• In line 4, replace the sample package name with your app’s package name.
• In line 14, replace the sample app name with your app’s name (not package name, just the name).
• In line 17, replace your.package.name.MainActivity with your actual package name followed by .MainActivity.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="your.package.name">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.YourAppName"
        tools:targetApi="31">
        <activity
            android:name="your.package.name.MainActivity"
            android:label="@string/app_name"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>

</manifest>

Building

To build, click the hammer icon.

To find your output APK, open your project in file explorer. The final build should be in build\outputs\apk\debug.

Conclusion

That concludes our guide! To further enhance your app with features like icons or advertisements, feel free to follow any Android app tutorials available. If you found this guide helpful, kindly leave a star!