Implementing a retro-style game using Jetpack Compose

Jetpack Compose is the new native declarative UI framework for Android. But with Compose for Desktop it's available on other platforms, too. So why not take a look?

In this talk we learn about key concepts like composable functions, state, and recomposition. And we'll do so in a fun way: we'll write a game. A retro-style game, that is. So, expect a brief reminiscence of the home computer era of the early 1980s.

Here's a short outline:
Showing character - how early games were made
A Jetpack Compose primer
Moving around
Simple game physics

The game is called Compose Dash. You can find its source code on GitHub: https://github.com/tkuenneth/compose_dash

Transcript

1. https://unsplash.com/photos/YSEp8dLK8K8
2. • Showing character (What are home computers??) • Moving around • Simple game physics https://unsplash.com/photos/MdmcpX2ofRk
3. thomas@thomaskuenneth.eu @tkuenneth @tkuenneth https://thomaskuenneth.eu/ @tkuenneth https://github.com/tkuenneth/compose_dash https://dev.to/tkuenneth/series/13392
4. • Showing character (What are home computers??) • Moving around • Simple game physics https://unsplash.com/photos/MdmcpX2ofRk
5. • 8 Bit CPU • Clock Speed < 4MHz • < 1 MIPS (PS4: 200000) • RAM <= 64 KB • Usually programmed in BASIC
10. Graphics modes • Hi Res Graphics • Character-based Graphics
11. Hi Res Graphics • Usually 320 x 200 pixels or less • Typically 2 or 4 colors • Painting was slow • Usually wasn‘t used for games Later home computers were more powerful
12. Character-based Graphics (Block Graphics)
13. https://unsplash.com/photos/qVgOxgXfPsQ Base address + …
15. • Showing character (What are home computers??) • Moving around • Simple game physics https://unsplash.com/photos/MdmcpX2ofRk
17. Jetpack Compose Mini Primer New native Android UI toolkit Based on Kotlin functions Declarative Define UI the way it should be at some point in time No need to modify component trees Updates occur when they are needed
18. Composable functions • Building blocks for a Compose UI • Annotated with @Composable • Invoke other composables • Can be previewed using @Preview
21. Where to move around
22. State Data that changes over time Can be used in composable functions Changes in state trigger a recomposition
27. • Showing character (What are home computers??) • Moving around • Simple game physics https://unsplash.com/photos/MdmcpX2ofRk
29. Autonomous movements using coroutines • We used coroutines to • move the player • let rocks and gems fall • Using launch rather simplistic • More complex scenarios can behandled using Flows • Must be coupled with lifecycle
32. Movement and game physics • Based on SnapshotStateList • Element changes trigger recompositions • Easy conversion between index and x, y • Coroutines for autonomous movements
33. Tips • Recompositions can happen very often • Composables must be fast • No heavy computations • No network • No I/O
34. @tkuenneth @tkuenneth @tkuenneth Thanks a lot for listening https://github.com/tkuenneth/compose_dash https://dev.to/tkuenneth/series/13392