breakout clone and small apks

Breakout v1 : strategic but complicated

I find the concept of the breakout game fascinating. It's so simple and open, and can be extended in all sorts of directions.

It also helps that it's visually intersting, non violent and doesn't make my girlfriend sick as 3D games do. We spent a lot of time playing with the excellent LBreakoutHD this summer and I really wanted to make a version of my own.

My first attempt sticked to the classic formular, where the ball bounces around and drops fall slowly to be picked up by the player. I tried to make most drop a real choice : each negative status effect would simultaneously boost the score multiplier.

I added many different drop types, increasing the density of drops over time as the user progresses past many levels. I decided to also reveal drops from the start, instead of randomly spawning some when the brick broke, to encourage strategic play.

I found this a bit too complex and not very approachable for beginners, requiring a lot of explanation.

Breakout v2 : you phone is the controller

My second attempt simplified the game mechanic (no more status effects, only simple coin drops) but enabled split screen play. You could play 2 players with a keyboard, or remote control the puck using your phone as a game pad, AirConsole-style.

Breakout v3 : coins explosions

The third version focuses on game feel and "juice". I added more brick colors to enable more interesting levels. Each color makes a different note when hit, so the ball bouncing around plays a sort of melody. I made sure that each level would spawn plenty of points (500 coins per level).

Wrapping a web app in a very small APK

I found that the browser experience was a bit inconsistent, particularily around fullscreen behaviour and sounds. Therefore, I wanted to wrap this very small game (66kb, 22kb compressed) into an equally small APK file.

This tutorial was very helpful, but a bit out of date, as I also needed to comment out the compose = true bit in build.gradle.kts.

I made an vector icon out of a small svg add added a full screen webview that displays the content of app/src/main/assets

package me.lecaro.breakout
import android.os.Bundle
import android.util.Log
import android.view.Window
import android.view.WindowManager
import android.webkit.ConsoleMessage
import android.webkit.WebChromeClient
import android.webkit.WebView
class MainActivity : android.app.Activity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        window.setFlags(
            WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN
        );
        val webView = WebView(this)
        webView.settings.javaScriptEnabled = true
        webView.settings.domStorageEnabled = true
        webView.loadUrl("file:///android_asset/index.html")
        webView.webChromeClient = object : WebChromeClient() {
            override fun onConsoleMessage(consoleMessage: ConsoleMessage): Boolean {
                Log.d(
                    "WebView", "${consoleMessage.message()} -- From line " +
                            "${consoleMessage.lineNumber()} of ${consoleMessage.sourceId()}"
                )
                return true
            }
        }
        setContentView(webView)
    }
}

All in all, the file size is now really reasonable, adding 10kb to the web version :

You can find the apk file here : breakout-release.apk