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
   

   View Slide

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

   View Slide

3. thomas@thomaskuenneth.eu
   @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