guiy-compose icon indicating copy to clipboard operation
guiy-compose copied to clipboard

Jetpack compose UI for Minecraft

Guiy

Maven Contribute

A Minecraft UI library for PaperMC, built on the Jetpack Compose compiler.

Compose is commonly used in Android (and cross-platform) development, so many resources are available online to learn the basics. It makes it much easier to work with changing UI state and has built in support for Kotlin Coroutines.

[!NOTE] Guiy is in active development as we continue to try new use-cases in our plugins. We can't promise api stability yet, but try to follow semver for breaking changes.

Examples

See the guiy-example package for a full demonstration of project setup and different features.

Entry

guiy {
    ExampleMenu(player)
}

Chest menu

@Composable
fun ExampleMenu(player: Player) {
    val owner = LocalGuiyOwner.current
    // Guiy will dynamically update players, title, or height if you use a state.
    Chest(setOf(player), title = "Example", height = 4, onClose = { owner.exit() /*owner.reopen()*/ }) {
        ToggleButton()
    }
}

Toggle button

val RED = ItemStack(Material.RED_WOOL)
val GREEN = ItemStack(Material.GREEN_WOOL)

@Composable
fun ToggleButton() {
    var enabled by remember { mutableStateOf(false) }
    val display = if (enabled) GREEN else RED
    Item(display, Modifier.clickable {
        enabled = !enabled
    })
}

Modifiers

We use a similar modifier system to Jetpack Compose.

// Entry to modifiers, though you are encouraged to pass a modifier parameter into your composables.
Modifier
    // Set the width of an element (can use min/max constraints, or .size to set width and height)
    .width(3)
    // Fill based on parent constraints like Jetpack
    .fillmaxHeight()
    // Padding in # of blocks
    .padding(vertical = 1)
    // Place at an offset
    .offset(x = 1, y = 5)
    // Do actions on click
    .clickable { doSomething() }

Alignment

Guiy provides Row, Column, and Box components based on Jetpack's, these come with Arrangement and Alignment too. We also provide our components like Vertical/Horizontal Grids optimized for common Minecraft uses.

// A horizontal row of 10 items, with 1 space between each.
Row(horizontalArrangement = Arrangement.spacedBy(1)) {
    repeat(4) {
        Item(...)
    }
}

// Same but vertical
Column { ... }

// Two rows on top of each other
Column {
    Row { ... }
    Row { ... }
}

// Items aligned left to right, top to bottom, wrapped to be smaller than width, useful for pages of items!
VerticalGrid(Modifier.width(3)) {
    repeat(7) {
        Item(...)
    }
}
/* Result:
    III
    III
    I--   */

Coroutines

LaunchedEffect support, same as in Jetpack Compose:

fun TimedToggle() {
    var enabled by remember { mutableStateOf(false) }
    val display = if (enabled) GREEN else RED
    Item(display)

    LaunchedEffect(Unit) {
        // Button will flash 10 times, with 1 second intervals
        repeat(10) {
            toggled = !toggled
            delay(1000)
        }
    }
}

Real world use

We are using this project internally, so you should be able to find up-to-date usage in our main project.

Usage

Gradle

build.gradle.kts

plugins {
    // Match version in guiy's build.gradle.kts
    id("org.jetbrains.compose") version "1.x.x"
}

repositories {
    maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
    maven("https://repo.mineinabyss.com/releases")
}

dependencies {
    compileOnly("com.mineinabyss:guiy-compose:x.y.z")
}

settings.gradle.kts

pluginManagement {
    repositories {
        google()
        gradlePluginPortal()
        maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
    }
}

Server setup

Guiy does not package the Kotlin runtime, it depends on our helper plugin Idofront using Paper's isolated dependency system.

  • Download and install Guiy into your plugin folder.
  • Download Idofront, a required dependency.
  • Depend on Guiy in a paper-plugin, this will give you access to Guiy and any libraries in Idofront in an isolated manner.

Thanks

  • Google for creating Jetpack Compose.
  • JetBrains for making it easy to use the compiler plugin outside of Android.
  • A lot of the inital code to set up the Jetpack Compose environment comes from https://github.com/JakeWharton/mosaic.