A Step-by-Step Guide to Creating an Immersive Mobile Game

Article Cover [Download Game Here]

Game Source Code Overview Diagram

Setting the Stage with Jetpack Compose Theming

Photo by Pawel Czerwinski on Unsplash

In Flappy Musketeer, creating the right atmosphere and visual aesthetics is essential to the player’s experience. Let’s take a closer look at how it’s done.

1. The AppTheme Composable

The heart of our theming system lies in the AppTheme composable. This composable takes care of applying the chosen color scheme to the entire game’s UI. Here’s what it looks like —

@Composable
fun AppTheme(
    colorScheme: ColorScheme = twitter,
    content: @Composable () -> Unit
) {
    val view = LocalView.current
    if (!view.isInEditMode) {
        SideEffect {
            val window = (view.context as Activity).window
            window.statusBarColor = colorScheme.primary.toArgb()
            window.navigationBarColor = colorScheme.primary.toArgb()
        }
    }

    MaterialTheme(
        colorScheme = colorScheme,
        content = content
    )
}

The AppTheme composable is responsible for configuring the color scheme and applying it to the status bar and navigation bar of the Android device. This ensures a consistent visual experience throughout the game.

2. Custom Color Schemes

Flappy Musketeer offers a wide range of themes and color schemes for players to choose from. Here’s a glimpse of some of the available options —

Game Theme Colors

• Space.X.Mars — Inspired by the rust-colored terrain of Mars.
• Twitter.Doge — A playful theme featuring the Dogecoin mascot.
• Twitter.White — A clean and minimalist design with a white color scheme.
• Space.X.Moon — A dark theme inspired by the moon’s serene beauty.

These themes are defined as ColorScheme objects in the code, allowing for easy customization and application to different parts of the game’s UI.

val spaceX = darkColorScheme(
    primary = spacePurple,
    secondary = Color.Black,
    tertiary = Color.Black
)

val twitter = darkColorScheme(
    primary = earthYellow,
    secondary = twitterBlue,
    tertiary = Color.Black
)

By providing players with a variety of themes, Flappy Musketeer offers a personalized gaming experience.

3. Theme Backgrounds

In addition to color schemes, Flappy Musketeer also provides various backgrounds that match the chosen color scheme. These backgrounds add depth and immersion to the game environment. We use the GameBackground enum class to maintain the collection of backgrounds.

Photo by malith d karunarathne on Unsplash

enum class GameBackground(val url: String) {
    TWITTER_DOGE("https://source.unsplash.com/qIRJeKdieKA"),
    SPACE_X("https://source.unsplash.com/ln5drpv_ImI"),
    SPACE_X_MOON("https://source.unsplash.com/Na0BbqKbfAo"),
    SPACE_X_MARS("https://source.unsplash.com/-_5dCixJ6FI")
}

These background images are loaded dynamically based on the selected theme, ensuring that the game’s visuals align with the player’s preferences.

4. Switching Themes in the Game

To make the theme selection process seamless, Flappy Musketeer provides a getGameTheme function that takes a theme name as input and returns the corresponding ColorScheme. Here’s how it works —

fun getGameTheme(gameId: String?): ColorScheme {
    return when (gameId) {
        GameBackground.SPACE_X.name -> spaceX
        GameBackground.TWITTER.name -> twitter
        // ... (other theme mappings)
        else -> twitter
    }
}

Now that we’ve covered the basics of theming with Jetpack Compose, let’s shift our focus to the game’s navigation. Flappy Musketeer utilizes the Navigation Component to seamlessly transition between different screens and game states.

1. The App Composable

At the core of our navigation system is the App composable. This composable sets up the game’s navigation using Jetpack Compose’s Navigation Component. Here’s what it looks like —

@Composable
fun App() {
    val navController = rememberNavController()
    NavHost(navController = navController, startDestination = AppRoutes.MENU.name) {
        composable(AppRoutes.MENU.name) {
            AppTheme(colorScheme = menuTheme) {
                GameMenu(navController)
            }
        }
        composable("${AppRoutes.GAME.name}/{gameId}") {
            val gameId = it.arguments?.getString("gameId")
            val gameTheme = getGameTheme(gameId)

            AppTheme(colorScheme = gameTheme) {
                GameScreen(navController, gameId)
            }
        }

        composable(AppRoutes.GAME_OVER.name) {
            XLottie(navController)
        }
    }
}

This code sets up the navigation graph, defining the flow of the game. Let’s break it down —

• The App composable initializes the NavController that manages navigation within the game.
• We start with the MENU screen as the initial destination.
• Inside the NavHost, we define composable functions for each screen, such as the game menu and game screen.
• We apply the appropriate theme using AppTheme for each screen to maintain visual consistency.

2. Navigation Destinations

Navigation Destinations

Photo by SwapnIl Dwivedi on Unsplash

The game menu is often the first interaction point for players, setting the tone for the entire gaming experience. In Flappy Musketeer, the game menu is designed to be visually engaging and user-friendly. Let’s take a closer look at how it’s implemented —

1. The GameMenu Composable

The GameMenu composable is the entry point to Flappy Musketeer. It provides players with access to various game themes and essential links. Here’s the code snippet that defines the GameMenu —

Game Menu

@Composable
fun GameMenu(navController: NavController) {
    val uriHandler = LocalUriHandler.current

    // ... (Theme setup)

    Column(modifier = Modifier.fillMaxSize()) {
        // ... (Top bar styling)

        Column(
            modifier = Modifier
                .wrapContentHeight()
                .fillMaxWidth()
                .background(Color(0xFF0E2954)),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            // ... (Logo and app name)

            Spacer(modifier = Modifier.height(10.dp))

            Row {
                // ... (About App button)

                Spacer(modifier = Modifier.width(12.dp))

                // ... (Creator button)
            }
        }

        Row(
            modifier = Modifier
                .fillMaxSize()
                .horizontalScroll(rememberScrollState(), enabled = true)
                .background(
                    brush = Brush.verticalGradient(
                        listOf(
                            Color(0xFF0E2954),
                            Color(0xFF1F6E8C)
                        )
                    )
                ),
            horizontalArrangement = Arrangement.Center,
            verticalAlignment = Alignment.CenterVertically
        ) {
            Spacer(modifier = Modifier.width(30.dp))

            GameBackground.values().forEach {
                MenuItem(
                    navController,
                    backgroundUrl = it.url,
                    name = it.name.replace("_", ".").uppercase(),
                    originalName = it.name
                )
                Spacer(modifier = Modifier.width(30.dp))
            }
        }
    }
}

Quick Explaination —

• The game’s logo is displayed as an IconButton that opens a link when clicked. This adds a touch of interactivity to the menu screen.
• The app name is styled using buildAnnotatedString, allowing for customized font weights and styles.
• The menu is implemented as a horizontal scrollable row, allowing players to swipe through different themes. Each theme is represented as a MenuItem composable, with its background image and name.

2. MenuItem Composable

@Composable
fun MenuItem(
    navController: NavController,
    backgroundUrl: String,
    name: String,
    originalName: String
) {
    // ... (Menu item content)
}

The GameScreen composable is the central component responsible for managing the game play logic in the Flappy Musketeer game. This code file defines the behavior of the game during game play, including handling user input, updating the game state, and rendering game elements.

Let’s break down the GameScreen composable step by step and explain each part of the code with relevant code snippets —

1. State Initialization

// Game state and scores initialization
var gameState by remember { mutableStateOf(GameState.NOT_STARTED) }
var score by remember { mutableLongStateOf(0L) }
var lastScore by remember { mutableLongStateOf(preferencesManager.getData("last_score", 0L)) }
var bestScore by remember { mutableLongStateOf(preferencesManager.getData("best_score", 0L)) }
var birdOffset by remember { mutableStateOf(0.dp) }
var birdRect by remember { mutableStateOf(Rect(0f, 0f, 64.dp.value, 64.dp.value)) }

In this section, we initialize various game state variables such as gameState, score, lastScore, bestScore, birdOffset, and birdRect. These variables are used to track the game’s progress and the position of the bird.

2. Pipe (Obstacles) Dimensions Initialization

Pipe Dimensions

var pipeDimensions by remember {
    mutableStateOf(Triple(0.1f, 0.4f, 0.5f))
}

Here, we initialize pipeDimensions as a Triple to store the weights of the top, gap, and bottom pipes. These weights determine the relative sizes of the pipes.

3. Update Score Callback

// Callback function to update the score
val updateScoreCallback: (Long) -> Unit = {
    score += it
}

updateScoreCallback is a callback function used to update the game’s score whenever necessary.

4. Bird Falling Animation

Bird Falling

LaunchedEffect(key1 = birdOffset, gameState) {
    while (gameState == GameState.PLAYING) {
        delay(16)
        birdOffset += 4.dp
    }
}

In this section, we use a LaunchedEffect to continuously update the birdOffset and simulate the bird falling when the game is in the PLAYING state.

5. Update Bird and Pipe Rectangles

// Callback function to update the bird's rectangle
val updateBirdRect: (birdRect: Rect) -> Unit = {
    birdRect = it
    pipeDimensions = getPipeDimensions(it, screenHeight)
}

These callback functions are responsible for updating the bird’s and pipes’ rectangles. These rectangles are crucial for collision detection between the bird and pipes.

6. Collision Detection

// Callback function to update the pipe's rectangle
val updatePipeRect: (pipeRect: Rect) -> Unit = {
    if (!it.intersect(birdRect).isEmpty) {
        // Handle collision with pipes
        // ...
    }
}

// Tap Gesture Handling
Box(
    modifier = Modifier
        .fillMaxSize()
        .pointerInput(Unit) {
            detectTapGestures(
                onTap = {
                    if (gameState == GameState.PLAYING) {
                        // Handle bird jump
                        coroutineScope.launch {
                            var offsetChange = 80.dp
                            while (offsetChange > 0.dp) {
                                birdOffset -= 2.dp
                                delay(2L)
                                offsetChange -= 2.dp
                            }
                        }
                    }
                }
            )
        }
)

Box(
    modifier = Modifier.fillMaxSize()
) {
    // ...
}

Background()

Pipes(
    updatePipeRect = updatePipeRect,
    updateScoreCallback = updateScoreCallback,
    gameState = gameState,
    pipeDimensions = pipeDimensions.copy()
)

when (gameState) {
    // ...
}

Bird(birdOffset, updateBirdRect)

Play(onPlayCallback)

Ground("Flappy Score", score, enablePause = true, onPauseCallback)

In this section, we’ll dive deeper into the game layout of our Flappy Musketeer game. We’ll explore the following essential components that make up the game screen —

1. Bird

Sourced from Lottie Files (SVGenius)

@Composable
fun Bird(birdOffset: Dp, updateBirdRect: (Rect) -> Unit) {

    val bird = when (MaterialTheme.colorScheme.primary) {
        spaceX.primary, spaceXMars.primary, spaceXMoon.primary -> {
            R.drawable.space
        }

        twitterDoge.primary -> {
            R.drawable.doge
        }

        else -> R.drawable.bird
    }

    bird.let {
        Box(
            modifier = Modifier
                .size(64.dp)
                .offset(y = birdOffset)
                .padding(5.dp)
                .onGloballyPositioned {
                    updateBirdRect(it.boundsInRoot())
                }
        ) {
            when (MaterialTheme.colorScheme.primary) {
                spaceX.primary, spaceXMoon.primary, spaceXMars.primary -> {
                    Image(painterResource(id = it), contentDescription = "rocket")
                }

                else -> {
                    if (MaterialTheme.colorScheme.primary == twitterDoge.primary) {
                        Image(painterResource(id = it), contentDescription = "doge rocket")
                    } else {
                        Icon(
                            painterResource(id = it),
                            tint = MaterialTheme.colorScheme.secondary,
                            contentDescription = "bird"
                        )
                    }
                }
            }
        }
    }
}

The Bird composable in the Flappy Musketeer game is responsible for rendering the player’s character, often referred to as the “bird,” that the player controls to navigate through the pipes. Let’s break down the key aspects of this composable —

• birdOffset — This parameter represents the vertical offset of the bird, indicating its position on the screen. It is updated based on player input and gravity to simulate the bird’s flapping and falling.
• updateBirdRect— A callback function that updates the position and dimensions of the bird for collision detection.

Inside the composable —

1. The bird variable is assigned an image resource based on the current theme’s primary color. The game provides different bird images depending on the selected theme, such as “spaceX”, “spaceXMars” “spaceXMoon” or “twitterDoge”
2. A Box composable is used to contain the bird image. It has a fixed size of 64×64 density-independent pixels (dp) and is positioned vertically based on the birdOffset.
3. The onGloballyPositioned modifier is used to detect the bird’s position on the screen and invoke the updateBirdRect callback with its bounds.
4. The content of the Box varies based on the theme —

• For space-themed themes (spaceX, spaceXMars, spaceXMoon), it displays an Image with the rocket image representing the bird.
• For the “twitterDoge” theme, it displays an Image with a doge-themed rocket image.
• For other themes, it displays an Icon with the bird image, with the icon’s color tinted to match the secondary color of the current theme.

This composable allows the bird character to be rendered differently based on the game’s theme, giving players a visual experience that matches the selected theme.

2. Pipes (Obstacles)

Twitter Pink

A) The Main Composable —

The Pipes composable is responsible for rendering and managing the pipes that the player must navigate through in the game. It also handles the logic for generating and moving the pipes based on game events.

Key Points —

• updatePipeRect— A callback function that updates the position and dimensions of the pipes for collision detection.
• updateScoreCallback— A callback function to update the player’s score.
• gameState— Represents the current state of the game (e.g., playing, completed).
• pipeDimension — A tuple representing the weights of the top, gap, and bottom pipes.

The Pipes composable manages the creation and movement of pipes based on the game state and time elapsed.

B) The Pipe Data Class —

data class Pipe(
    val width: Dp = 100.dp,
    val topPipeWeight: Float,
    val gapWeight: Float,
    val bottomPipeWeight: Float,
    var position: Dp,
)

• Pipe is a data class representing a single pipe in the game. It contains properties such as width, weights for top, gap, and bottom pipes, and its position on the screen.

C) Pipe Generation Logic —

if (System.currentTimeMillis() - PipeTime.lastPipeAddedTime >= 2000L) {
    // Generate a new pipe and add it to the list
    // ...
    // adding logic
    val addToList = if (pipes.isNotEmpty()) {
        abs(pipes.last().position.minus(newPipe.position).value) > 500f
    } else {
        true
    }

    if (addToList) {
        pipes = pipes + newPipe
        updateScoreCallback(10)
        PipeTime.lastPipeAddedTime = System.currentTimeMillis()
    }
}

• The game checks if it’s time to generate a new pipe based on the time elapsed since the last pipe was added and if the distance from the last shown pipe is big enough. If the conditions are met, a new pipe is created and added to the list of pipes.
• The updateScoreCallback function is called to update the player’s score when a new pipe is generated.

D) Pipe Movement —

// move pipes from right to left
LaunchedEffect(key1 = pipes.size, gameState) {
    while (gameState == GameState.PLAYING) {
        delay(16L)
        pipes = pipes.map { pipe ->
            val newPosition = pipe.position - pipeSpeed
            pipe.copy(position = newPosition)
        }.filter { pipe ->
            pipe.position > (-pipeWidth) // remove from list when off the screen
        }
    }
}

• The pipes are moved from right to left on the screen using a LaunchedEffect. The effect runs as long as the game is in the “playing” state.
• The delay(16L) ensures that the pipes are moved at a consistent rate, providing smooth animation.
• The pipes list is updated by mapping each pipe’s position, subtracting the pipe’s speed (pipeSpeed). Pipes that go off the screen (position < -pipeWidth) are removed from the list.

E) The GapPipe Composable —

@Composable
fun GapPipe(pipe: Pipe, updatePipeRect: (Rect) -> Unit) {
    // ...
}

• The GapPipe composable is responsible for rendering an individual pipe and its gap.

.onGloballyPositioned {
    val pipeRect = it.boundsInRoot()
    updatePipeRect(pipeRect)
}

• It takes a Pipe object and a callback function updatePipeRect for collision detection.

F) Pipe Dimensions Calculation —

fun getPipeDimensions(
    birdPosition: Rect,
    screenHeight: Dp
): Triple<Float, Float, Float> {
    // ...
}

• The getPipeDimensions function calculates the weights (relative heights) of the top, gap, and bottom pipes based on the position of the bird and the screen height.
• It ensures that the generated pipe weights are within certain limits to create challenging but fair game play.

3. Ground and Score Display

The Ground composable in the Flappy Musketeer game is responsible for rendering a ground area that displays game-related information. Here’s an explanation of this composable —

Ground and Score Display

@Composable
fun Ground(
    label: String,
    score: Long,
    enablePause: Boolean = false,
    onPauseCallback: () -> Unit = {}
) {
    // ...
}

Key Points —

• label— A string that represents the label or title for the ground area.
• score— A long integer representing the player’s score.
• enablePause— A boolean indicating whether to enable a pause button. It’s set to false by default.
• onPauseCallback— A callback function that is invoked when the pause button is clicked. It’s an empty function by default.

The Ground composable creates a visual ground area that displays the label, score, and an optional pause button. It’s used to provide information and interactions related to the game’s progress.

4. Play Button

Play Button

@Composable
fun Play(onPlayCallback: () -> Unit) {
    // ...
}

Photo by Kelly Sikkema on Unsplash

This article was previously published on proandroiddev.com