Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Implementing a retro-style game using Jetpack Compose

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

6233177bc63ec02060206adef9108601?s=128

Thomas Künneth

September 30, 2021
Tweet

More Decks by Thomas Künneth

Other Decks in Technology

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
  6. None
  7. None
  8. None
  9. None
  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 + …

  14. None
  15. • Showing character (What are home computers??) • Moving around

    • Simple game physics https://unsplash.com/photos/MdmcpX2ofRk
  16. None
  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
  19. None
  20. None
  21. Where to move around

  22. State Data that changes over time Can be used in

    composable functions Changes in state trigger a recomposition
  23. None
  24. None
  25. None
  26. None
  27. • Showing character (What are home computers??) • Moving around

    • Simple game physics https://unsplash.com/photos/MdmcpX2ofRk
  28. None
  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
  30. None
  31. None
  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