Componency

Componency

A simple, declarative UI library built from the ground up for use in any environment.

Inspiration

Componency is roughly based on 3 other things:

• Elementa's design
• Figma's naming conventions
• Ktor's DSL design

I used concepts taken from all 3 of these projects to create a simple, declarative UI library that can be used in any environment.

Disclaimer

This library is primarily designed for Kotlin, though it does have some additional support for Java.

All the examples from here on out will be in Kotlin, but the library can be used in Java as well.

Set up

Repository

maven {
    name = "Deftu Snapshots"
    url = "https://maven.deftu.dev/snapshots"
}

maven(url = "https://maven.deftu.dev/snapshots") {
    name = "Deftu Snapshots"
}

Dependency

modImplementation "dev.deftu:componency:<VERSION>"

implementation("dev.deftu:componency:<VERSION>")

Usage

Engine

To use the library at all, you need to create your Componency engine. The engine is responsible for providing Componency with any data it needs and giving it the ability to interact with your rendering system of choice.

package com.example

import dev.deftu.componency.engine.Engine
import dev.deftu.componency.engine.InputEngine
import dev.deftu.componency.engine.RenderEngine
import java.awt.Color

class MyEngine : Engine {

    override val inputEngine: InputEngine by lazy {
        MyInputEngine()
    }

    override val renderEngine: RenderEngine by lazy {
        MyRenderEngine()
    }

}

class MyInputEngine : InputEngine {

    override val mouseX: Float = 0f

    override val mouseY: Float = 0f

}

class MyRenderEngine : RenderEngine {

    override val viewportWidth: Int = 0

    override val viewportHeight: Int = 0

    override val animationFps: Int = 144 // Recommended to be no more than 300

    override fun startFrame() {
        // Start rendering frame (apply any transformations, etc.)
    }

    override fun endFrame() {
        // End rendering frame (apply any transformations, etc.)
    }

    override fun fill(x1: Float, y1: Float, x2: Float, y2: Float, color: Color, radius: Float) {
        // Fill a rectangle with a color and a radius
    }

}

Your UI

Now that you have your engine set up, you can start creating your UI.

object Main {
    
    @JvmStatic
    fun main(args: Array<String>) {
        val engine = MyEngine()
        val ui = MyUI(engine)
        
        // Inside your render loop, you can simply call `ui.render()` to render your UI.
        ui.render() // (This is a placeholder for your actual render loop)
    }
    
}

class MyUI(engine: Engine) {
    
    // Common practice is to use a frame as your root component
    private val frame = FrameComponent().configure {
        // In Componency, we define properties inside their own scope when configuring.
        // The majority of the most commonly used properties have extension variables and functions to make them easier to access.
        properties {
            width = 100.percent
            height = 100.percent
        }
    }.makeRoot(engine) // Finally, we make the frame the root component of this UI by giving it the engine.
    
    private val box = RectangleComponent().configure {
        properties {
            x = 25.percent
            y = 25.percent
            width = 50.percent
            height = 50.percent
            color = Color.RED.asProperty
        }
    }.attachTo(frame) // We make the box a child of the frame.
    
    // From here, you can add more components to the frame or the box.

    // Finally, we provide an external means of rendering our frame.
    fun render() {
        frame.handleRender()
    }

}

Further examples

For more examples, you can check out the basic examples directory. (Java, Kotlin)

Or, if you'd like to implement for LWJGL3, you can check out the LWJGL3 example directory.

Setting up in Minecraft

Both modern and legacy Minecraft versions still require the user of the repository defined in the Set up section. The version number is the same for the Minecraft artifacts as it is for the main library.

Modern Minecraft (1.16.5 and above)

It's as simple as defining the dependency in your build script to use the Componency Minecraft engine in modern Minecraft versions.

modImplementation "dev.deftu:componency-minecraft-<MINECRAFT VERSION>-<MOD LOADER>:<VERSION>"

implementation("dev.deftu:componency-minecraft-<MINECRAFT VERSION>-<MOD LOADER>:<VERSION>")

Legacy Minecraft (1.12.2 and 1.8.9)

We require additional setup for legacy Minecraft versions, as we need to use a dependency management tweaker to ensure that the latest version of Componency is loaded.

Not only does it handle the version of the library, but it also forces Minecraft to use LWJGL 3 to load NanoVG and STB so that our engine can use both for rendering.

Additional instructions for use alongside other tweakers can be found inside the class file itself.

dependencies {
    modImplementation "dev.deftu:componency-minecraft-<MINECRAFT VERSION>-<MOD LOADER>:<VERSION>"
    modImplementation "dev.deftu:componency-minecraft-tweaker-<MINECRAFT VERSION>-<MOD LOADER>:<VERSION>"
}

jar {
    manifest {
        attributes(
            "TweakClass": "dev.deftu.componency.minecraft.tweaker.ComponencyTweaker"
        )
    }
}

dependencies {
    implementation("dev.deftu:componency-minecraft-<MINECRAFT VERSION>-<MOD LOADER>:<VERSION>")
    implementation("dev.deftu:componency-minecraft-tweaker-<MINECRAFT VERSION>-<MOD LOADER>:<VERSION>")
}

tasks.jar {
    manifest {
        attributes(
            "TweakClass" to "dev.deftu.componency.minecraft.tweaker.ComponencyTweaker"
        )
    }
}

Credits

• nea89o / HypixelDev
  • Dependency management tweaker for Forge 1.8.9 & 1.12.2. (ForgeModAPI - nea89o)
• nextdayy / xtrm / Polyfrost
  • Inspiration for the way the engine is set up. (polyui-jvm - nextdayy)
  • LWJGL 3 bootstrapper for legacy Minecraft versions. (lwjgl3-bootstrap - xtrm)

Coming soon!

• Debugger

This project is licensed under LGPL-3.0
© 2024 Deftu