Trees, Trees, Trees!

Creativity Overflow
5 min readFeb 26, 2017

--

Welcome to our monthly devblog of Banyan!

Last month we were busy working on our new website, the animations for our panther and procedural tree generation for our jungle biome. Let’s start with the trees.

Procedural Tree Generation

We decided that we needed procedural trees because it wasn’t reasonable for two programmers to draw as many trees as we need for a good looking jungle. So we went to the drawing board and looked for methods to procedurally generate them. Our solution was to basically take a line as tree crone target and generate the branches from bottom to top approaching this line. The branches are getting shorter the higher they grow. After a certain threshold they get connected to the crone. The path they take is randomly determined so that the trees are never the same. The main tree is now generated but there also needs to be platforms on different heights. Otherwise the tree would be boring. The end result was something like this:

Now that we had the basic structure we needed to fill the lines with something good looking. To achieve that we created meshes around the line and an ellipse as crown as you can see below.

Meshes Forming the Tree
First Iteration of the Final Tree

The tree is done now but for a jungle there need to be a lot of trees. So we placed 7! layers of trees behind each other and looked for the results. It was quite disappointing.

First Try at a Forest

It’s not looking like a jungle. More akin to a shallow forest than an overgrown thousand year old jungle. Now the question was: what makes a jungle look like a jungle ? Overgrowth is important but it should also be dense. If you are in a jungle you can’t see very far so the visibility should be limited as well. Now to translate this into our game. The visibility limits the layers to 2 or 3. The denseness and humidity looks like mist in our game which lets the color of the trees approach the background color over distance. The overgrowth is not yet fully realized in our game but we intend to add different ground covers like bushes and the like. Furthermore there’ll be lianes hanging from the trees and different highlights like Maya temples and much more. The result so far:

Performance Optimization

With big forests comes big performance optimization needs. In our case it wasn’t different. Because of a bug we had at times 10.000 trees in the scene! The result was, it crashed on every device… After fixing this bug and a nasty memory leak we were nevertheless down to 40FPS on our mobile devices (Nexus 5). Which is not really good because we aimed for 60FPS as locked framerate. Our solution to this problem was to make not every tree unique but specify the number of them. Furthermore we scaled down the resolution of the trees further away which is not noticeable. After all of this we were back at 60FPS, yeay!

Art Update

Last month our artist was working on the animations of our main character. It is not yet finished but here is the rough walk cycle sketch for the main character.

Rough Walk Cycle Sketch

The final animation is now in progress and will be presented in the next blog post.

Website

Since a few weeks we’re working on our new website. As you already know, we decided to share our project progress via Twitter and Medium, so the website will be focused on the presentation of our game. Our plan is to give visitors an introduction into the story and drag them into the world of Banyan.

As you can see we’re planning to provide a futuristic but clean look and feel, which supports the content with a consistent stylistic concept. Beside the Banyan showcase, we’re going to add a timeline, which will link to our Medium blog entries. Visitors find updates on the projects milestones and progress here.

In order to provide the best experience on any device, we’re using different scaling and rearrangement techniques. The goal is to avoid different versions for different devices, like a special mobile version, but to allow seamless viewport scaling.
We also add a share function, which allows visitors to directly forward links to our content via their favorite social network. Since mobile browsers already have a very good social media integration, the links will only be available on larger devices, which will further keep the website clean.

That’s it for today. You can follow us here or on Twitter to get the latest info on our game. See you next time!

--

--

Creativity Overflow

We are a small independent game studio from Karlsruhe Germany and are currently working on our first mobile game Banyan. http://www.creativity-overflow.de/