Portfolio

Josephine Johnzon

About

Work

Trailer for final experience

Anthervoid

My Role: Develop whole project
Tools: Unity, Visual Studio, Houdini, Photoshop

Anthervoid, named after the flower part anther, features a procedural generated environment with growing flowers, where the player controls the rules of the plant growth to build a lush and dreamy flower world. This is a personal project, where I built the game system, tools for procedural generation and UI interactions in Unity, made procedural models in Houdini, and additional 2D assets in Photoshop.

My process began with research to build the vision and concept for the experience, which provided the basis for decisions later on in the development phase. The vision was to make a lush, dreamy, and somewhat mysterious flower environment, with flowers growing all around the player and where no plant looks the same. I also wanted the player to interact with and be able to affect the flower growth. The main issue in this project was how to generate dynamic and interactable plants in a natural looking way. After considering a few options I decided to use a mix of auto generated model libraries from Houdini and procedural mesh generation in Unity. Much of the development of this project is centered around procedural mesh generation and vector mathematics, which I used to calculate vertex positions for the meshes to simulate growing plants. The procedural mesh generation tool lets the player control plant parameters such as radius, length, rotation, bend, scale, curvature, and the rule sets for how to stack those parameters and create branching.

Examples of different plants that was generated with the procedural plant generation tool

Slideshow showing flower diversity

Examples of different plants that was generated with the procedural plant generation tool

Slideshow showing flower diversity

Examples of different plants that was generated with the procedural plant generation tool

Slideshow showing flower diversity

Examples of different plants that was generated with the procedural plant generation tool

Slideshow showing flower diversity

Examples of different plants that was generated with the procedural plant generation tool

Slideshow showing flower diversity

Examples of different plants that was generated with the procedural plant generation tool

Slideshow showing flower diversity

Examples of different plants that was generated with the procedural plant generation tool

Slideshow showing flower diversity

Examples of different plants that was generated with the procedural plant generation tool

Slideshow showing flower diversity

Examples of different plants that was generated with the procedural plant generation tool

Slideshow showing flower diversity

Examples of different plants that was generated with the procedural plant generation tool

Slideshow showing flower diversity

Examples of different plants that was generated with the procedural plant generation tool

Slideshow showing flower diversity

Examples of different plants that was generated with the procedural plant generation tool

Slideshow showing flower diversity

Examples of different plants that was generated with the procedural plant generation tool

Slideshow showing flower diversity

Anthervoid

My Role: Develop whole project
Tools: Unity, Visual Studio, Houdini, Photoshop

Anthervoid, named after the flower part anther, features a procedural generated environment with growing flowers, where the player controls the rules of the plant growth to build a lush and dreamy flower world. This is a personal project, where I built the game system, tools for procedural generation and UI interactions in Unity, made procedural models in Houdini, and additional 2D assets in Photoshop.

My process began with research to build the vision and concept for the experience, which provided the basis for decisions later on in the development phase. The vision was to make a lush, dreamy, and somewhat mysterious flower environment, with flowers growing all around the player and where no plant looks the same. I also wanted the player to interact with and be able to affect the flower growth. The main issue in this project was how to generate dynamic and interactable plants in a natural looking way. After considering a few options I decided to use a mix of auto generated model libraries from Houdini and procedural mesh generation in Unity. Much of the development of this project is centered around procedural mesh generation and vector mathematics, which I used to calculate vertex positions for the meshes to simulate growing plants. The procedural mesh generation tool lets the player control plant parameters such as radius, length, rotation, bend, scale, curvature, and the rule sets for how to stack those parameters and create branching.

I made an inventory for the player to control the plant growth, which consists of a 2D layer and a 3D layer. The inventory stores picked anthers, which uses scriptable objects to manage the growth data that the player can influence. In the UI menu I was configuring functionality for regular UI elements such as toggles, buttons, sliders, dropdowns, meters, and tooltips, which the player interacts with using a hand ray.

Read more about the process

Research

I started off by gathering research in a Miro board including moodboard, flowchart, storyboard, notes and sketches. Here I developed the idea of a lush flower landscape growing in realtime, where no plants seem to be the same. The player would start in a rather dark setting, and the core gameplay would be to affect growpatterns by interacting with the flowers with the goal to build a lush and dreamy flower world. I got hooked on anthers when studying flower parts, and decided to give them a central role and named the project Anthervoid.

Moodboard defining the style and giving the basis for concept

Research

I started off by gathering research in a Miro board including moodboard, flowchart, storyboard, notes and sketches. Here I developed the idea of a lush flower landscape growing in realtime, where no plants seem to be the same. The player would start in a rather dark setting, and the core gameplay would be to affect growpatterns by interacting with the flowers with the goal to build a lush and dreamy flower world. I got hooked on anthers when studying flower parts, and decided to give them a central role and named the project Anthervoid.

Base setting

I made the base setting in Unity featuring a black sea, sparkeling under the rise and set of two suns on a black sky to give a mystic extraterrestrial impression. As background audio I used a looping river sound together with a mystic ambient one to enhance the atmosphere. The water is a custom shader on a high poly plane (objects far from the player is deactivated to improve performance). I made the water shader in shadergraph, where I distorted the positions in the fragment function over time to get the moving waves, and played with refraction, depth color, and moving normals for the fragment function. The final touch with sparkles was made with post processing.

Base setting made in Unity with a dark, mysterious atmosphere

Base setting

I made the base setting in Unity featuring a black sea, sparkeling under the rise and set of two suns on a black sky to give a mystic extraterrestrial impression. As background audio I used a looping river sound together with a mystic ambient one to enhance the atmosphere. The water is a custom shader on a high poly plane (objects far from the player is deactivated to improve performance). I made the water shader in shadergraph, where I distorted the positions in the fragment function over time to get the moving waves, and played with refraction, depth color, and moving normals for the fragment function. The final touch with sparkles was made with post processing.

Procedural modelling

In Houdini I was working with procedural modelling to create a few tools for flower parts and leaves. Unfortunately, Houdini is not made for real time alterations of parameters. Instead I choose to export model libraries for the leaves and flowers using a python script, where I randomized some parameters I’ve detected for modelling variations, to generate full libraries of unique models. For the leaves and petals I was using blend shapes to be able to give them a bit of extra variation in Unity. I built a tool in Unity to randomly put together flower parts and materials to further increase the flower selection. I gave the materials gradient properties to be able to assign each plant a different color combination within a preset color palette.

Tools for flower parts made in Houdini, with fbx libraries exported via a Python script with randomized parameters

Procedural modelling

In Houdini I was working with procedural modelling to create a few tools for flower parts and leaves. Unfortunately, Houdini is not made for real time alterations of parameters. Instead I choose to export model libraries for the leaves and flowers using a python script, where I randomized some parameters I’ve detected for modelling variations, to generate full libraries of unique models. For the leaves and petals I was using blend shapes to be able to give them a bit of extra variation in Unity. I built a tool in Unity to randomly put together flower parts and materials to further increase the flower selection. I gave the materials gradient properties to be able to assign each plant a different color combination within a preset color palette.

Procedural mesh tool

For stems and roots Houdini offers a great tool called L-systems, which is constructed to mimic the natural growth of plants using sets of rules. L-systems offers the possibility build beautiful plants, but I was stuck with the issue of how to grow them procedurally in Unity in a natural looking way with infinite variations. Inspired by L-systems, I decided to develop my own plant generating mesh tool in Unity. I generated mesh in Unity by adding vertices and triangles to a Mesh component, and I applied vector mathematics, angle-axis rotations, trigonometry, and did some general thinking to develop the tool. I put time into constructing the system with different rules and parameters that would define and variate the mesh, for example: sides, radius, length, tapering, rotation, bending, curvature and randomization. The parameters are stacked into rule sets which determines how the plant should grow once initialized. In the end I managed to develop a dynamic plant generator, where plants could be generated and grow during runtime, with parameters and rules that could be modified by a player to create different plants. Since the tool could generate stems and roots with any size and shape I made a tri-planar projection shader to avoid the issue of calculating good looking uv:s for such dynamic model.

Mesh tool under construction, here testing in Unity which parameters and rules are relevant for building diverse plants

Procedural mesh tool

For stems and roots Houdini offers a great tool called L-systems, which is constructed to mimic the natural growth of plants using sets of rules. L-systems offers the possibility build beautiful plants, but I was stuck with the issue of how to grow them procedurally in Unity in a natural looking way with infinite variations. Inspired by L-systems, I decided to develop my own plant generating mesh tool in Unity. I generated mesh in Unity by adding vertices and triangles to a Mesh component, and I applied vector mathematics, angle-axis rotations, trigonometry, and did some general thinking to develop the tool. I put time into constructing the system with different rules and parameters that would define and variate the mesh, for example: sides, radius, length, tapering, rotation, bending, curvature and randomization. The parameters are stacked into rule sets which determines how the plant should grow once initialized. In the end I managed to develop a dynamic plant generator, where plants could be generated and grow during runtime, with parameters and rules that could be modified by a player to create different plants. Since the tool could generate stems and roots with any size and shape I made a tri-planar projection shader to avoid the issue of calculating good looking uv:s for such dynamic model.

Inventory

For the player to control the plant growth I made an inventory, which stores the anthers the player picked. Since most flowers will be to far above the player to reach, the player can pick them with a ray instead by pointing towards a flower, and press the activate button when it is highlighted. I was using events to hover a flower and pick the anthers. The anthers contain all data for the flower using a scriptable object. When picking an anther the antherdata is sent to the inventory. There are currently 6 types of anthers, and if the inventory already contains the picked anther type, it will be stacked to that slot but it wont affect the antherdata in the slot. If the anther can’t be stacked, but there is a free slot, the anther will be sent there along with its antherdata. If the inventory is full, the anther will just be thrown away. When picking an anther the player also collect anthergy, which is an energy needed to alter the antherdata.

Anthers are selected by pointing towards a flower, and the flower will be highlighted if it has anthers to pick

The second level of the inventory is where the player can alter grow data for the selected anther. When the inventory is open, you open the second layer by pressing the y-button and a ui menu for the selected anther is displayed. The player can select anthers by spinning the circle of anthers with left joystick. In the ui menu the player can change values for different grow properties by using anthergy. Changing properties will fill the splice meter, and when full the player can merge the growth rules for the anther with another anther to create new growth rule sets. The menu also contains a toggle for tooltips, which gives information of a feature when hovering an ui element. In the ui menu I was setting up functionality for different ui elements including toggles, buttons, meters, sliders and dropdowns, which the player interacts with using the right hand ray.

Process of making the inventory includes research, sketches and quick prototyping in Unity with tests in VR

I was eager to make a fun inventory by combining 2D and 3D, and it ended up being glowing in pink with a sci-fi/fantasy inspired theme. I made all sprites for the UI elements in photoshop and found a fitting font. The inventory have two layers. You open layer one with the x-button on the left controller, which will display a circle of small 3D anthers in the left hand with a text with the quantity above. From here, the player can pick any anther with the right hand and toss it into the world and a plant will grow. I used an onCollision event to detect when to instantiate an anther and made it follow the hand as long the activate button was pressed, then added the velocity of the xr controller when letting go of the activate button to throw away the anther.

Final inventory in Unity, with hand held rotatable 3D inventory, and 2D menu for controlling growth parameters and rules for stacked anthers

Inventory

For the player to control the plant growth I made an inventory, which stores the anthers the player picked. Since most flowers will be to far above the player to reach, the player can pick them with a ray instead by pointing towards a flower, and press the activate button when it is highlighted. I was using events to hover a flower and pick the anthers. The anthers contain all data for the flower using a scriptable object. When picking an anther the antherdata is sent to the inventory. There are currently 6 types of anthers, and if the inventory already contains the picked anther type, it will be stacked to that slot but it wont affect the antherdata in the slot. If the anther can’t be stacked, but there is a free slot, the anther will be sent there along with its antherdata. If the inventory is full, the anther will just be thrown away. When picking an anther the player also collect anthergy, which is an energy needed to alter the antherdata.

I was eager to make a fun inventory by combining 2D and 3D, and it ended up being glowing in pink with a sci-fi/fantasy inspired theme. I made all sprites for the UI elements in photoshop and found a fitting font. The inventory have two layers. You open layer one with the x-button on the left controller, which will display a circle of small 3D anthers in the left hand with a text with the quantity above. From here, the player can pick any anther with the right hand and toss it into the world and a plant will grow. I used an onCollision event to detect when to instantiate an anther and made it follow the hand as long the activate button was pressed, then added the velocity of the xr controller when letting go of the activate button to throw away the anther.

The second level of the inventory is where the player can alter grow data for the selected anther. When the inventory is open, you open the second layer by pressing the y-button and a ui menu for the selected anther is displayed. The player can select anthers by spinning the circle of anthers with left joystick. In the ui menu the player can change values for different grow properties by using anthergy. Changing properties will fill the splice meter, and when full the player can merge the growth rules for the anther with another anther to create new growth rule sets. The menu also contains a toggle for tooltips, which gives information of a feature when hovering an ui element. In the ui menu I was setting up functionality for different ui elements including toggles, buttons, meters, sliders and dropdowns, which the player interacts with using the right hand ray.

Watch the making of Anthervoid to see the process from ideation to final experience, important decisions, how I solved issues on the way, final result, and ideas for further development

I began the project by researching on what to do, which led to the idea of a lush and dreamy flower landscape growing in runtime. Here is the final moodboard.

I was developing the story further by making a storyboard and a flowchart. They describe how the experience will start and how the player is introduced to the story and game play, plus the progression into game play state and objectives.

I made the base setting for the game in Unity, where the ground is covered by a black sea all the way to the horizon, sparkling under a black sky with two suns. The suns have different orbits and day length, which gives irregular sunrises and sunsets. The water is made in shader graph with distorted vertex positions and normals over time to mimic moving waves.

Inspired by the moodboard, I made a tool for procedural mesh generation in Unity with different parameters and rules that could be controlled by the player to grow different kinds of flowers. I made tools to generate flower parts and leaves with different looks. In the end experience no flowers looks the same.

Flower growth is controlled through an inventory consisting of both 3D and 2D elements. Here are sketches and research for the inventory, combining fantasy and sci-fi theme.

I’ve tried a few different ideas in Unity for the inventory design, combining 2D and 3D in different ways before coming up with the final design. In the final version the player can grab anthers directly from the 3D part of the inventory and toss them into the world. Properties are controlled through a 2D menu.