How To Creating a Game With Jetpack Compose

After learning enough Jetpack Compose to rebuild my PlayStore app Pibuddy, I wanted to try something totally different to further develop my Compose skills and also learn more about animations and canvas, I decided to have a go at building a retro-style game similar to Pacman but with a few simplifications to make it achievable. The full source code can be found on my GitHub here but if you want a more detailed summary then please read on further :). This is not a full walkthrough on how to create the game but will show the key elements of putting it all together.

Creating The UI

I wanted to implement a basic UI similar to a retro arcade screen, The layout would be a title with the name of the game followed by the Canvas which the game elements will be drawn onto, and then a simple directional pad for controls followed by a simple Start/Stop button.

The implementation of the UI and game elements can be seen in this class here.

Laying out the Game

I started off with a simple box with a red border and some padding, I then added a canvas to fill the max size of the box, I then drew two paths around the canvas to provide an area for the game elements to be placed in. I also drew a small box in the center where the enemies will be placed.


Drawing the food items was the next step I decided to tackle, there are two types of food in my simplified version of the Pacman game, the first type (ordinary food) is placed randomly over the canvas, and once all of them are eaten by the character the player then wins the game. The second food item (I decided to call these bonus food) when eaten will cause the enemies to go into "reverse mode" and return to the enemy box which will give the player some breathing space.

I decided I would have 100 ordinary food items placed randomly on the Canvas plus 4 bonus food items in each corner. In order to do this, I created a Kotlin data class called "PacFood" model which contains the needed values to plot the food on the screen, these are the X-axis position, Y-axis position, and the size (bonus Pacfood is double the size of ordinary food items). In the "init" block of this class, I execute two functions to create the lists for the bonus and ordinary food with the desired X and Y values and also the size. This list can then be accessed from our composable in order to draw out the items, These values are passed as mutable state and are initialized in a "remember" block so the values are retained during recomposition.


```>  val borderPath = Path()

 borderPath.apply {
                // border
                lineTo(size.width, 0f)
                lineTo(size.width, size.height)
                lineTo(0f, size.height)
                lineTo(0f, 0f)

                // second border
                moveTo(50f, 50f)
                lineTo(size.width - 50f, 50f)
                lineTo(size.width - 50f, size.height - 50f)
                lineTo(50f, size.height - 50f)
                lineTo(50f, 50f)

                // enemy box
                moveTo(size.width / 2 + 90f, size.height / 2 + 90f)
                lineTo(size.width / 2 + 90f, size.height / 2 + 180f)
                lineTo(size.width / 2 - 120f, size.height / 2 + 180f)
                lineTo(size.width / 2 - 120f, size.height / 2 + 90f)


            }

 drawPath(
                path = borderPath,
                color = PacmanMazeColor,
                style = Stroke(
                    width = 6.dp.toPx(),
                ),

                )
A similar approach is then used to create the four barriers, the only difference being the location of the paths and also that the path is filled in, this provides a solid shape.


```val barrierPath = Path()

 barrierPath.apply {
                /*
                     barriers
                  __________
                 |___    ___|
                     |__|
                 */
                //left  top corner barrier
                moveTo(size.width / 4 + 60f, size.height / 4)
                lineTo(size.width / 4 - 20f, size.height / 4) // bottom
                lineTo(size.width / 4 - 20f, size.height / 4 - 60f) // left
                lineTo(size.width / 4 - 90f, size.height / 4 - 60f) // left angle
                lineTo(size.width / 4 - 90f, size.height / 4 - 120f) // left upward line to top
                lineTo(size.width / 4 + 120f, size.height / 4 - 120f) // top line
                lineTo(size.width / 4 + 120f, size.height / 4 - 60f) // line down to right
                lineTo(size.width / 4 + 50f, size.height / 4 - 60f) // line right to center
                lineTo(size.width / 4 + 50f, size.height / 4) // bottom line

                // right  top corner barrier
                moveTo(size.width / 1.5f + 60f, size.height / 4)
                lineTo(size.width / 1.5f - 20f, size.height / 4) // bottom
                lineTo(size.width / 1.5f - 20f, size.height / 4 - 60f) // left
                lineTo(size.width / 1.5f - 90f, size.height / 4 - 60f) // left angle
                lineTo(size.width / 1.5f - 90f, size.height / 4 - 120f) // left upward line to top
                lineTo(size.width / 1.5f + 120f, size.height / 4 - 120f) // top line
                lineTo(size.width / 1.5f + 120f, size.height / 4 - 60f) // line down to right
                lineTo(size.width / 1.5f + 50f, size.height / 4 - 60f) // line right to center
                lineTo(size.width / 1.5f + 50f, size.height / 4) // bottom line

                // right bottom corner barrier
                moveTo(size.width / 1.5f + 60f, size.height / 1.15f)
                lineTo(size.width / 1.5f - 20f, size.height / 1.15f) // bottom
                lineTo(size.width / 1.5f - 20f, size.height / 1.15f - 60f) // left
                lineTo(size.width / 1.5f - 90f, size.height / 1.15f - 60f) // left angle
                lineTo(
                    size.width / 1.5f - 90f,
                    size.height / 1.15f - 120f
                ) // left upward line to top
                lineTo(size.width / 1.5f + 120f, size.height / 1.15f - 120f) // top line
                lineTo(size.width / 1.5f + 120f, size.height / 1.15f - 60f) // line down to right
                lineTo(size.width / 1.5f + 50f, size.height / 1.15f - 60f) // line right to center
                lineTo(size.width / 1.5f + 50f, size.height / 1.15f) // bottom line

                //left  bottom corner barrier
                moveTo(size.width / 4 + 60f, size.height / 1.15f)
                lineTo(size.width / 4 - 20f, size.height / 1.15f) // bottom
                lineTo(size.width / 4 - 20f, size.height / 1.15f - 60f) // left
                lineTo(size.width / 4 - 90f, size.height / 1.15f - 60f) // left angle
                lineTo(size.width / 4 - 90f, size.height / 1.15f - 120f) // left upward line to top
                lineTo(size.width / 4 + 120f, size.height / 1.15f - 120f) // top line
                lineTo(size.width / 4 + 120f, size.height / 1.15f - 60f) // line down to right
                lineTo(size.width / 4 + 50f, size.height / 1.15f - 60f) // line right to center
                lineTo(size.width / 4 + 50f, size.height / 1.15f) // bottom line

            }

   drawPath(
                path = barrierPath,
                color = PacmanMazeColor,
                style = Fill,
            )

```data class PacFood( val foodList: ArrayList = ArrayList(), val bonusFoodList: ArrayList = ArrayList() // bonus food which reverses the enemy path back to their box ) { init { initPacFoodList() initBonusPacFoodList() }

private fun initPacFoodList() {
    foodList.clear()


                                    //100  
    for (i in 0 until GameConstants.FOOD_COUNTER) {
        val food = PacFoodModel(
            xPos = Random.nextInt(85, 850),
            yPos = Random.nextInt(85, 1200),
            size = 0.5f
        )
        Log.w("food", "${food.xPos}")
        foodList.add(food)

    }
}

private fun initBonusPacFoodList() {
    bonusFoodList.clear()

    // topLeft
    bonusFoodList.add(
        PacFoodModel(
            xPos = 90,
            yPos = 85,
            size = 1f
        )
    )

    // top right
    bonusFoodList.add(PacFoodModel(
        xPos = 825,
        yPos = 85,
        size = 1f
    ))

    // bottom left
    bonusFoodList.add(PacFoodModel(
        xPos = 90,
        yPos = 1150,
        size = 1f
    ))

    // bottom Right
    bonusFoodList.add(PacFoodModel(
        xPos = 825,
        yPos = 1150,
        size = 1f
    ))


}

fun initRedraw() {
    initPacFoodList()
    initBonusPacFoodList()
}

}

data class PacFoodModel( var xPos: Int, var yPos: Int, var size: Float )


Instead of drawing the enemies using custom paths, I decided to simply draw the Images from a PNG file, I just needed to make sure the images were the same size and that their starting position should be in the enemy box with a bit of adjustment to ensure all enemies are visible. This is the first time we can see state being used in this project, I find this one of the most powerful things when building UIs in Jetpack Compose.

The enemies will be drawn with a different image depending on whether the game is in reverse mode or not, the position of the enemies will also change automatically as we are passing a mutable offset value to the "topLeft" parameter, whenever this value changes the enemy will get redrawn to the new position (more on this later, for now, we are just focusing on drawing out the game).


```            drawImage(
                image = if(gameStatsModel.isReverseMode.value){
                    ImageBitmap.imageResource(res = resources, reverseEnemyDrawable)
                } else {
                    ImageBitmap.imageResource(res = resources, redEnemyDrawable)
                },
                topLeft = enemyMovementModel.redEnemyMovement.value

            )
            drawImage(
                image = if(gameStatsModel.isReverseMode.value){
                    ImageBitmap.imageResource(res = resources, reverseEnemyDrawable)
                } else {
                    ImageBitmap.imageResource(res = resources, orangeEnemyDrawable)
                },
                topLeft = enemyMovementModel.orangeEnemyMovement.value

            )

Conclusion

I hope this article can show you just how easy building simple games and creating animations can be with Jetpack Compose, this was the first game I created and I am relatively new to Android Development in general, what really helped me in this process was the detailed google documentation and also the wide range of great community projects to learn from. If you have any questions or would like to contribute to this game please reach out to me on Twitter below.

Thanks for reading.

metooo.io/u/622649292693e6242adc9a38

Chizumi Ishizawa's blog

Chizumi Ishizawa's blog

How To Creating a Game With Jetpack Compose