$30 off During Our Annual Pro Sale. View Details »

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

Thomas Künneth

September 30, 2021
Tweet

More Decks by Thomas Künneth

Other Decks in Technology

Transcript

  1. https://unsplash.com/photos/YSEp8dLK8K8

    View Slide

  2. • Showing character (What are home computers??)
    • Moving around
    • Simple game physics
    https://unsplash.com/photos/MdmcpX2ofRk

    View Slide

  3. [email protected]
    @tkuenneth
    @tkuenneth
    https://thomaskuenneth.eu/
    @tkuenneth
    https://github.com/tkuenneth/compose_dash
    https://dev.to/tkuenneth/series/13392

    View Slide

  4. • Showing character (What are home computers??)
    • Moving around
    • Simple game physics
    https://unsplash.com/photos/MdmcpX2ofRk

    View Slide

  5. • 8 Bit CPU
    • Clock Speed < 4MHz
    • < 1 MIPS (PS4: 200000)
    • RAM <= 64 KB
    • Usually programmed in BASIC

    View Slide

  6. View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. Graphics modes
    • Hi Res Graphics
    • Character-based Graphics

    View Slide

  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

    View Slide

  12. Character-based Graphics
    (Block Graphics)

    View Slide

  13. https://unsplash.com/photos/qVgOxgXfPsQ
    Base address + …

    View Slide

  14. View Slide

  15. • Showing character (What are home computers??)
    • Moving around
    • Simple game physics
    https://unsplash.com/photos/MdmcpX2ofRk

    View Slide

  16. View Slide

  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

    View Slide

  18. Composable
    functions
    • Building blocks for a Compose UI
    • Annotated with @Composable
    • Invoke other composables
    • Can be previewed using
    @Preview

    View Slide

  19. View Slide

  20. View Slide

  21. Where to move around

    View Slide

  22. State Data that changes over time
    Can be used in composable functions
    Changes in state trigger a recomposition

    View Slide

  23. View Slide

  24. View Slide

  25. View Slide

  26. View Slide

  27. • Showing character (What are home computers??)
    • Moving around
    • Simple game physics
    https://unsplash.com/photos/MdmcpX2ofRk

    View Slide

  28. View Slide

  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

    View Slide

  30. View Slide

  31. View Slide

  32. Movement and game
    physics
    • Based on SnapshotStateList
    • Element changes trigger recompositions
    • Easy conversion between index and x, y
    • Coroutines for autonomous movements

    View Slide

  33. Tips
    • Recompositions can happen very often
    • Composables must be fast
    • No heavy computations
    • No network
    • No I/O

    View Slide

  34. @tkuenneth
    @tkuenneth
    @tkuenneth
    Thanks a lot for listening
    https://github.com/tkuenneth/compose_dash
    https://dev.to/tkuenneth/series/13392

    View Slide