Skip to main content Skip to docs navigation

Document not reviewed yet, might be outdated. Please, let us know if you find something invalid here.
On this page

while (true) + delay

One way of animation in KorGE is to just make a loop and place a delay. This method allows you to define complex logic inside the loop and define state machines just by code. (Have in mind that this approach is likely to have some kind of stuttering.)

launchImmediately {
    while (true) {
        delay(16.milliseconds) // suspending

addFixedUpdater and addHrUpdater

One way of performing animations with KorGE is by attaching an updater component to a view. While the view is visible that updater will be executed from time to time.

If you want a code to be executed a number of times per second, you can use addFixedUpdater. (Have in mind that this approach is likely to have some kind of stuttering.)

view.addFixedUpdater(60.timesPerSecond) {

And if your code is designed to support arbitrary time deltas, you can use an updater:

view.addHrUpdater { dt -> // dt contains the delta time using as a HRTimeSpan inline class instance
    val scale = dt / 16.66666.hrMilliseconds
    x += 2.0 * scale


Korge integrates tweens and easings, and it is fully integrated with coroutines for your coding pleasure.

Games require tweening visual properties in order to be appealing. Korge provides a simple, yet powerful interface for creating tweens.

Simple interface

View has an extension method called View.tween that allows you to do the magic. And has the following definition:

suspend fun View?.tween(vararg vs: V2<*>, time: Int, easing: Easing = Easing.LINEAR, callback: (Double) -> Unit = { })

You have to use bound callable references to define properties that will change. And Korge provides some extension methods to bound callable references to generate tween parameters.

If you want to linearly interpolate view.x from 10.0 to 100.0 in one second you would write:

view.tween(view::x[10.0, 100.0], time = 1000.milliseconds)

Tip: import com.soywiz.korge.tween.get for this to compile. In IntelliJ place the caret in the [ and press ALT+enter.

delay + duration + easing

You can control the start time, duration and easing per interpolated property by chaining them in the parameter call, using these V2 extensions:

V2.delay(timeMs:TimeSpan):V2, V2.duration(timeMs:TimeSpan):V2, V2.easing(easing:Easing):V2

    view::y[0.0, 200.0].delay(50.milliseconds),
    time = 1000.milliseconds

If you want to apply one easing for all subtweens defined in the paramters, just add an extra easing parameter to the tween call:

    easing = Easing.EASE_IN

Implementation details

The tween execution will be attached as a component to the receiver View that holds the tween method. That means that the view has to be in the stage or be manually updated. Also means that any View.speed changes in that view or ancestors will affect the tween.

PRO Tip: You can even interpolate the View.speed property to get some cool time effects.


You can also use an animator, which is almost as potent as the tweens. Check the animate sample here

animate {
    parallel {
        view.moveToWithSpeed(500.0, 500.0, 300.0, Easing.EASE_IN_OUT)
        view.scaleTo(5.0, 5.0)
    parallel {
        view.moveTo(0.0, 0.0)
    block {


Korge provides an Easing class with the most common easings. And allows you to create your own easings.

Easings.EASE_IN Easings.EASE_OUT Easings.EASE_IN_OUT Easings.EASE_OUT_IN


Korge supports SWF Adobe Flash/Animate files and can support other custom formats through extensions/plugins. For example it would be possible to create an exporter for After Effects or Apple Motion.

Korge defines a custom ANI file format for animations. Atlas based with sound support.

You can preview ANI/SWF files (as they will look in runtime) right in intelliJ, using Korge’s intelliJ plugin (that uses Korge itself for rendering!):


Was this article useful?