Korge’s views works like AS3’s DisplayObject or the HTML DOM. It is intended for 2D rendering, though you can create custom views with 3D content rendering with KorAG.

Table of contents:


It is a tree structure where View has a parent, and Container has other View as children.

Then when KorAG performs the rendering, it starts drawing from the bottom to the top. Just like Painter’s Algorithm.


Basic Properties

  • x, y
  • scaleX, scaleY
  • rotation: Angle
  • skewX, skewY
  • visible
  • alpha
  • blendingMode
  • speed: Double – controls the view’s updating speed (being a ratio where 1 is 1x, 0.5 is 0.5x and 2 is 2x the speed)
  • colorMul: RGBA

Computed Properties

  • globalX, globalY
  • globalMatrix

Blending Modes

KorGE supports NORMAL, ADD, MULTIPLY and SUBTRACT blending modes.


Each view might have components attached. Each component is attached to a View.

interface Component {
    val view: View
fun <T : Component> T.attach() = this.apply { this.view.addComponent(this) }
fun <T : Component> T.detach() = this.apply { this.view.removeComponent(this) }

And there are several kind of Components that can hook View’s behaviour. You can create components that implement several Component interfaces:

Handling Updating

interface UpdateComponentWithViews : Component {
    fun update(views: Views, ms: Double)

interface UpdateComponent : Component {
    fun update(ms: Double)

Handling Resizing

interface ResizeComponent : Component {
    fun resized(views: Views, width: Int, height: Int)

Handling Events

interface EventComponent : Component {
    fun onEvent(event: Event)

Handling Input Events

interface TouchComponent : Component {
    fun onTouchEvent(views: Views, e: TouchEvent)

interface MouseComponent : Component {
    fun onMouseEvent(views: Views, event: MouseEvent)

interface KeyComponent : Component {
    fun onKeyEvent(views: Views, event: KeyEvent)

interface GamepadComponent : Component {
    fun onGamepadEvent(views: Views, event: GamePadButtonEvent)
    fun onGamepadEvent(views: Views, event: GamePadStickEvent)
    fun onGamepadEvent(views: Views, event: GamePadConnectionEvent)

The lifecycle of that component is associated to the View. So when the View and the Component are no longer referenced, they will be collected by the GC.

For example, a Component that would reposition views when the viewport is rezied would be like this:

fun <T : View> T.dockedTo(anchor: Anchor) = DockingComponent(this, anchor).attach()

class DockingComponent(override val view: View, var anchor: Anchor) : ResizeComponent {
	override fun resized(views: Views, width: Int, height: Int) {
		view.x = views.actualVirtualLeft.toDouble() + (views.actualVirtualWidth) *
		view.y = views.actualVirtualTop.toDouble() + (views.actualVirtualHeight) *