L-systems were introduced and developed by Aristid Lindenmayer back in 1968 and are often used to produce fractals or images of flowers, as the repeating nature of some flowers is very easy to reproduce using L-systems. L-systems consist of four parts: variables, constants, Axiom, and rules. The rules describe how the axiom, or start expression, evolves from iteration to iteration.

Let’s look at a classical example:

• Variables: L
• Constants: +, −
• Axiom: L
• Rules: L => L-L++L-L

How the different symbols are interpreted is entirely up to us, but in this example, we define:

• L to mean “draw line forward”
• + to mean “turn left”
• − to mean “turn right”

So the algorithm is a simple search and replace. We go through the axiom or start string L and replace it according to the rule, resulting in the following strings:

• Iteration 1: L => L-L++L-L
• Iteration 2: L-L++L-L => L-L++L-L-L-L++L-L++L-L++L-L-L-L++L-L
• Iteration 3: L-L++L-L-L-L++L-L++L-L++L-L-L-L++L-L => L-L++L-L-L-L++L-L++L-L++L-L-L-L …

and we can keep going for as many iterations as we like, but as we can already see, the resulting string grows very raptly because of the “long” rule for L. If the rule for L was simpler, the resulting string of cause wouldn’t grow as fast.

Repeatedly applying the rules increases structure and complexity.

But enough theory; If you want more information, you can read an in-depth explanation of L-systems on Wikipedia.

Implementing the L-system.

We’ll be use strings for variables, constants, and axiom, a StringBuilder for building up the result, and a simple Map<string, string> for the rule(s), defining the string to search for and what to replace it with.

First we define the RuleSet:

@Serializable
data class RuleSet(val rules: Map<String, String>, val axiom: String)

As simple as can be, simple data class containing the axiom and the Map containing the rules.
We need the annotation @Serializable as we will be reading the rules from a JSON file.

{
  "rules": {
    "L": "L-L++L-L"
  },
  "axiom": "L"
}

This is the simple rule for creating the image displayed above.

The simple constructor for the LSystem class is only taking a RuleSet as parameter:

class LSystem(private val ruleSet: RuleSet)

The generate function takes in the number of iterations to run and calls the generateExpression that number of time. It also times how long each generation takes in nanoseconds.

fun generate(iterations: Int) {
    expression.append(ruleSet.axiom)
    
    var startTime: Long
    var endTime: Long
    
    for (i in 0 until iterations) {
        startTime = System.nanoTime()
        expression = generateExpression(expression)
    
        endTime = System.nanoTime()
        println("Time to generate iteration ${i + 1}${endTime-startTime}ns - With a size of ${expression.length}")
    }
}

The generateExpression function is the heart of the L-System. It goes through the current expression character by character and tries to match up the rules with the upcoming characters using the matchesPattern helper function. When a match is found, the resulting string from the rule is appended to the new expression. If no match is found, the current character is appended to the new expression. This approach avoids the need for rules that don’t replace anything, such as “-” => “-“.

private fun generateExpression(expression: StringBuilder) : StringBuilder {
    val newExpression = StringBuilder()
    
    var position = 0
    while (position < expression.length) {
        var matched = false
    
        // Check each pattern in order
        for (pattern in ruleSet.rules) {
            if (position + pattern.key.length <= expression.length && // check we are not matching outside the expression
                matchesPattern(this.expression, position, pattern.key)
            ) {
                matched = true
                position += pattern.key.length // Move the position forward after matching
                newExpression.append(ruleSet.rules[pattern.key])
                break
            }
        }
    
        if (!matched) {
            newExpression.append(expression[position])
            position++ // Move to the next position if no pattern matched
        }
    }
    
    return newExpression
}

The helper function matchesPattern goes through the characters in the pattern and tries to match them with the next characters in the input StringBuilder. This is a greedy approach, so the order of the rules matters. For instance, if we have the two rules “-” => “L” and “–” => “L” in that order, the second rule will never be applied because the first rule always matches first. Therefore, place the longer rules first.

We could pre-sort the rules, but for this introduction, we just have to keep the order in mind.

  private fun matchesPattern(input: StringBuilder, position: Int, pattern: String): Boolean {
    for (index in pattern.indices) {
        if (input[position + index] != pattern[index]) {
            return false // Return false if any character doesn't match
        }
    }
    
    return true // Return true if all characters match
}

Implementing the Visualizer

So now we have a long string of characters, but we need to interpret in some way. This is where the visualizer comes in.
We started by defining the variables and constants –, +, and L, so now we just have to draw from the expression.

The Visualizer constructor takes a few parameters:

• expression, the expression to be interpreted
• imageSize, the size for the output image
• padding, the padding around the figure to the edge of the image, in pixels
• filename, the filename for the output file.

class Visualizer(
    private val expression: StringBuilder,
    private val imageSize: Vector2,
    private var padding: Float,
    private var filename: String
) 

Let’s start with the rules and the drawing function doTurtleAction. But for that to make sense, we’ll also have to look at the SystemState data class.

data class SystemState(
    var position: Vector2,
    var angle: Float,
    var length: Float,
)

fun doTurtleAction(c: Char, state: SystemState, canvas: Canvas? = null, draw : Boolean = true) {
    when (c) {
        'L' -> drawLine(state, canvas, aPen, draw)
        '+' -> state.angle += 45
        '-' -> state.angle -= 45
    }
}

The SystemState class keeps track of the current position of the pen drawing the figure, the current angle in degrees, and the length. This can be extended to keep a stack of positions that can be pushed and popped so that when drawing, it can store a position, draw something, and return to that position. However, this isn’t implemented in this simple version.

In doTurtleAction, using Kotlin’s when function makes interpreting the character very straightforward. Here, we define what we want the different variables and constants to do. We use 45 degrees for + and – because this will create a nice Koch fractal, but you can set it to whatever you like. L draws a line based on the length and angle in state.

I added some extra steps in the Visualizer to help always output a nice image of the whole figure. That is, I go through the entire algorithm without drawing anything; I only log the minimum and maximum positions. This allows me to scale the lines to draw and set the starting position so the figure is centered and fills the given image size, excluding the padding.

Calculating the area of the figure with the line at size 1 is done using the calcArea function.

private fun calcArea(): Rectangle {
    val state = SystemState(
        angle = 0f,
        length = 1f,
        position = Vector2(0f, 0f)
    ) hosted 
    
    expression.toString().forEach { c ->
        doTurtleAction(c, state, null,false)
        updateAreaData(state)
    }
    
    val x = floor(minXPosition)
    val y = floor(minYPosition)
    val w = ceil(maxXPosition) - x
    val h = ceil(maxYPosition) - y
    return Rectangle(x.toInt(), y.toInt(), w.toInt(), h.toInt())
}

When outputting the image, we start by getting the area and performing some calculations to get the scale and the starting point to use.

private fun outputAsImage(maxImageSize: Vector2, filename: String) {
    val area = calcArea()
     
    val xScale = (maxImageSize.x - padding) / area.width
    val yScale = (maxImageSize.y - padding) / area.height
    val scale = if (xScale < yScale) xScale else yScale
    
    val state = SystemState(
        angle = 0f,
        length = scale,
        posi hosted tion = Vector2(minXPosition * (-scale) + (padding / 2), minYPosition * (-scale) + (padding / 2))
    )

Now we setup the canvas to draw on. Here we use the Kotlin wrapper for the Skia 2d graphics library called skiko.

    val surface = Surface.makeRaster(ImageInfo.makeN32(maxImageSize.x.toInt(), maxImageSize.y.toInt(), ColorAlphaType.OPAQUE))
    
    // Get the canvas from the surface
    val canvas = surface.canvas
    // Clear the canvas with a white background
    canvas.clear(Color.TRANSPARENT)

Note: The Kotlin wrapper for Skia doesn’t use the same naming for classes and functions, which makes it challenging to use the documentation for Skia. After a lot of searching, I got it working, but without a deeper understanding of why, so I’m not sure if it’s the right way of using it. But it works.

Now we draw the figure and output the image to a file.

    expression.toString().forEach { c -> doTurtleAction(c, state, canvas) }
    
    // Get the snapshot of the surface
    val image = surface.makeImageSnapshot()
    
    // Encode the image as a PNG
    val data = image.encodeToData(EncodedImageFormat.PNG, 100)
    
    // Save the PNG to a file
    File("$filename.png").writeBytes(data!!.bytes)
}

That’s it!
I’ve added the full project code here, for free download.

Thoughts:

However, nothing says we must use repetitive rules; we can do whatever we want. We could alternate between differenthosted rules, shift rules when a specific pattern is seen, reverse parts based on other triggers, or use any approach that could yield an interesting result. I like to add randomness to the constants, so instead of turning exactly 90 degrees, we turn 90 degrees plus or minus some small random value to introduce variation. Create different weighted rules, allowing multiple rules for the same pattern with different probabilities! “Barney Codes” has already implemented this, as seen in YouTube video.

Since the last blog post, I have published my small racing game Strazer to Google Play store. 

After updating the graphics, I’m pretty happy with it. It wasn’t meant to be a AAA game

After that I worked for a few weeks on a game about depression, but there was a bug in Unity (OnTriggerEnter2D) that kept giving me problems, so I put it on hold. The bug was fixed in the Unity 4.5 release, so maybe I’ll go back to that again… Later.

And the there are a lot of small POC as always

Save ’em all:

GauntletX:

Forever: 

DefendYourself:

Defend4x8:

All small POC that I might go back and work on in the future.

At the moment I’m working on a game for two friends, one want me to make a zombie game, and the other a platformer, so it is going to be a zombie platformer game

Right now I trying to get some graphics done for the game, it’s coming along but not as fast as I would like, and not as good either.  

This is the melee attack of the zombie. It still is missing shadows and highlights.

So have done a lot, just haven’t blogged about it. I’ve started using twitter a lot more, I like the positive atmosphere and the nice people always there to help.

Have a great day, now go make games!

– Henning

I saved them all in a sub-directory in the directory I’m going to use for the Spriter project. Spriter looks to be using the same project directory structure as Unity.

I have now assembled the crab within Spriter. I know Spriter is a work in progress, but some simple features I found missing was, copy of multiple objects within the scene. I have 3 left legs, that looks a lot like the 3 right legs. Would have loved to be able to just copy them all in one go, and mirror them. Probably just me not know how. And moving objects in the Z-order windows was a drag, no pun, intended, but it wasn’t possible to select all the leg parts and drag them all at once, and as I had to drag them all all the way to the bottom, it was not optimal. It should be possible to hold ctrl+up/down to move them up and down in the list, but it didn’t work (found out, it does work, the window just isn’t updating). Well it was still easy to set up my crab.

Looks almost like the original. Almost.. But again, this is just a cold run, to show how easy Spriter is to learn and use.

To add the skeleton I did have to look at a tutorial, not that it’s hard to do, I just couldn’t find out how to add a single bone.. Found out, you have to hold down the Alt key, after watching the video.. How should I know

I followed this video:

Once again they have made everything SO easy. But did had a few problems. This time it was selecting the small legs when assigning the sprites to the bones, but I did find out that I could assign sprites to bones in the Hierarchy window. Maybe I have used too small sprites or there are some setup somewhere I don’t know of, but it worked and now I can animate… Don’t expect to much

And that’s it An animated crab in a bit over an hour I already know where to use it.

Conclusion:

There where a few glitches throughout the Spriter experience, but nothing compared with the frustration of trying to work with Synfig. When exporting the animation to PNG’s some of the images had the previous frames in the background. Something that I’m sure will be fixed in future versions.

That was my first experience with Spriter, and I still like it a lot! It’s so easy to use. There are a lot of things that could be done better and small bugs, but $25 i cheap for a tool so powerful.

Features I would like to have include curves in the animation/key frame window, being able to drag multiple objects in the z-ordering windows, spritesheet output and that’s about it.

Go buy Spriter, NOW! And then, go make games

– Henning

So I’ve use a few weeks making this small puzzle idea into a working mini-game. It popped into my mind over the Christmas holiday. I thought that it would be a fun little game, and I was sure that I would learn a thing or two. So here is what I did, and learned

The basic idea:
A top-down game where you have to build a bridge to save some small cute creatures. But as always the idea changed over time and turned into something else.

The different planks used to build the bridge would be rotating and changing length at different speeds and amount. I figured that 5 different planks would be a fine.

Getting started:
So I started out by looking at the plank dynamics, I wanted to add planks at the end of the previous plank and in the same angle. But first, ONE, plank Keep it simple, right?

First run of Left

Ok, that worked So now, adding more planks.

Getting planks to align, and stay there:

Getting the planks to appear at the end of the previous plank wasn’t  a problem, except for one out of about 10 planks, so it was very hard to debug.

But after recording a video of the game, I could see the planks was placed at the correct position, but was then pushed in the first frame.. Ah, the physics engine! Problem identified
All the planks have a collider and a rigid body to be able to collide with the walls, the goal and to be able to be use the it for the death sequence, where all the planks fall to the ground. So I couldn’t just remove the rigid body from the planks.

The solution:

I simply chose to lock the position and rotation every frame. Well, simple but wasn’t easy to implement because of the way I had implemented the plank control, but it worked. And then every thing was locked into the right place

What did I learn:

• 2d and 3d physics engine doesn’t act the same. Colliding rules are different, follow link and see section “Collision action matrix” which works for 3d, but (and now I can’t remember the other link, sorry) this isn’t true for 2d.
• Dynamic loading of levels
• Got better at using animations instead of moving logos in code
• Deploy to OUYA and very basic OUYA input control (one button).

Things to do better:

• If I want my POCs to be playable, make some simple object relation layout BEFORE coding a single line
• Use more object pools, instead of creating objects on the fly.
• Find a better way to handle the growing switch/case section in the game manager.
• Graphics.. I started looking at blender again. Did the beautiful stars in it
• Write posts on the way instead of having to remember what I did after the fact.

Hope you enjoy the 10 levels of this mini-game “Left” (named as such, as  you have a tendency to turn left).

Now, go make games!

– Henning

Screenshot of main screen, the 10 levels and the game completed screen.

This means that I have to find some music, sound effects, make some better looking graphics, and what I find hardest of all – make the menu system! I’ll keep it as simple as possible.

After I did the DNH game for the GIG 2013, I will not be making an online highscore list. I might do a cookie based one, so the players best score will remain between sessions, but that’s it.

One thing I would really like, is a better player controller. As mentioned in “Player movement script for the 3×3 POC” the motion is done in steps and you can’t move diagonal or change direction while moving. This I need to do better. And I will

Lets see where the game takes me.

– Henning

New things added:

• New texture. I only use one for all surfaces.
• Rotation to selected box, to make it visible to the player what box is selected.
• More states to the box objects, to make possible removal animation aso.
• Color click logic, basic game mechanics .

The plan is to make the game run on my old HTC Desire, to learn the mobile part of unity. So for now I’m trying to keep everything to a minimum as not to drive the Desire to it’s knees.

Next things to add:

• Mobile input part, to see if I can’t get the click and swipe part to work.
• Light bound to the box, to illuminate the boxes in the distance, and I might remove the current spotlight..

Future things to add:

• Sound effects.
• Music.
• Score system. How fast you remove boxes, or something like that, have to think about a good way to differentiate different users abilities.

Here you can play version 4, and as before, click to remove blocks and navigate using wasd.

– Henning

I added some game states but only use playing and dead for now.

Next I would like to make the color selection part to only allow you to remove boxes of same color, so if you click a blue box you can only remove another blue box. If you click another colored box the first selected color will change to this color.

Here you can play version 3, click to remove blocks and navigate with wasd.

– Henning

Play the first proof of concept, it has only a simple wasd control and that’s about it.

I have to do more tests to see if this would be a fun.

– Henning

So I had to try to make something even simpler, and at the same time I could test a simple character 2D controller After a couple of hours I had this.

And yes I did all the graphics myself

If you really want, you can play the game here.

– Henning