Code Monkey home page Code Monkey logo

twandroid's Introduction

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."

Project Creation Step 1

Step 2

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

Project Creation Step 2

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.

Java Directory

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

Right-Click on Package Folder

Select "New" and then choose "Java class."

Create Java Class

Name it "MainActivity."

Name 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."

Create Android Resource Directory

You will be directed to the following screen:

Resource Directory Settings

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:

image

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

Create Layout Resource File

Set the file name to "activity_main" and click "OK."

Name Layout Resource File

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

Access Layout Code

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:

Export TurboWarp Project

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."

Create Assets Folder

In this screen, simply click "finish."

Finish Creating Assets Folder

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

Open Assets Folder 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!!

Rename Game HTML

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.

image

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!

twandroid's People

Contributors

supertavor avatar

Stargazers

Guy Tavor avatar  avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.