Freja's Journey: an exciting side-scrolling action adventure game

Sketch by Mads Dam Jackobsen​

Freja’s Journey is an exciting side-scrolling action adventure game set in a magical viking world based on the Nordic Mythology.
The game, developed by TinySaurus, combines combo based fighting and armor/weapon upgrades with platforming elements, quests and more.

Hi guys,
I’m one of the 4 people currently working on our little game and on this page I will share some of my contribution to the project. In the future other team members might contribute to this thread as well.

Since we’re so few each of us has to deal with several areas of the production. I’m doing part of the modeling, shader work, effects and I’m supervising the lighting.
Is this diversity that makes working in Freja’s Journey a joy, so much that I want to share with other people how the game is evolving.

For time being I’ll keep this personal production blog focused on asset production and less (if at all) focused on gameplay or game mechanics.
One last thing, as we’re very early in the production, many of what I’ll post can – and will – change before the final release.

I'll try to keep this thread as updated as possible but I usually find it a bit hard to post many images on forums so I made Personal Production Blog that allows me a bit more customization:

http://www.adrianlazar.com/frejas-journey/

Hope you’ll like it,
-Adrian

 

Hi,
I thought it would make sense to start this personal production blog with the first level we start working on:
L05 – The Tiny Village (working title).

As I said in the first post, I find it a bit hard working with many images on forums so you can see this post on my Personal Production Forum as well where I can customize the layout a bit more: http://www.adrianlazar.com/2013/07/22/frejas-journey-l05-environment-art-wip-01/

Look Development
This is the second iteration we did on the environment, the first one being used to prototype the player locomotion, some basic fighting mechanics and the quest system (yes, we’re going to have quests in our side scrolling adventure).
More tweaks to the lighting and set dressing are to be done after the level will be textured and the final gameplay implemented.





In the new version we completely redid the lighting, going this time for a cozier morning mood and we also improved some of the effects.









We paid special attention to contrast and diversity inside the level, making sure each area has it’s own distinct look.











Effects Work
Fog planes played a big role in shaping the overall atmosphere but also to create depth by separating the foreground, middle ground and the background.
This approach is fast and flexible and it eliminates the need to use depth of filed which is expensive on the mobile platforms.







There was a nice surprise to see that we could use real time reflections on the lake water shader on an iPad 2 and still get 50+ fps.





Contribution Gallery
- I did part of the modeling, the effects, and I supervised the lighting.
- Mads Jackobsen did the concept art, rigging and animation and some of the modeling.
- Silvia Lazar did the set dressing, lighting and the environment effects.


Full image gallery for this post here: http://www.adrianlazar.com/2013/07/22/frejas-journey-l05-environment-art-wip-01/

In the end I would like to mention that since we’re so early in production anything could change and most probably will since we’re constantly refining the gameplay and the visuals.

Hope you fund it interesting,
-Adrian

 

Looks really great!!! Love it.
Great to see the color palette's as well.

Keep up the fantastic work!

 

Wow this looks really neat! I'm digging the art style and the proportions of the character

 

Beautiful looking game. Even though is not textured, I would still play it

 

Thanks a bunch guys, such a motivating welcome!
More to come soon!

 

Freja's Journey will take the player in a magical viking land, so when it comes to the visual side of our little game, environment diversity is a top priority for us.
Here's something a bit different than what I previously posted: The Graveyard

I find it a bit hard working with many images on forums so you can see this post on my Personal Production Forum as well where I can customize the layout a bit more: http://www.adrianlazar.com/2013/07/25/frejas-journey-the-graveyard-environment-art/

(since this post focuses on the environment, the enemy AI is disabled in the video)

Look Development
The Graveyard is not a full level yet. Currently we have built only a small piece of the environment to do the look exploration and while this is just the 1st iteration we liked it enough to share it with you guys.





As Freja's adventure progresses through Midgard - the land where the first episode takes place - the areas she travels will change as well. If the quest starts in her cozy, little village at the edge of the woods, towards the end of the journey she will explore less welcoming places like The Graveyard.
While the mood and the characters she encounter will vary, it is important for us to keep the cozy, friendly look throughout the game - and at times that can be a challenge









With The Graveyard we knew from the beginning that we don't want to go with grey or to use very desaturated colors since we tried to avoid any chances of the place looking scary or even worse, creepy.
So we settled on a fairly saturated green that we then balanced with some cozy, warm yellow / orange light from the candles. The atmospheric effects played a big role in making the place look mysterious and I'll talk more about the effects a bit bellow.



















Effects Work
As I was saying above, the environment effects - especially the mist and fog - played a crucial role in making the Graveyard a mysterious place.
While the generic fog-planes would have been enough for an Ok result we knew we could do better so I spent a bit of time working on a Ground Mist Effect that needed to be fast, flexible and easy to work with.





At it's base is a vertex shader that uses the individual RGB channels of a texture to define the look: the Red channel is used for the static mask while the Green and Blue channels have the two scrolling "diffuse" maps. There's of-course some overlapping between the channels but it works fine for this soft, wispy look.
The shader can also do some "wave" vertex animation but for the Graveyard we kept that to a minimum.





Attention to detail is something that we pride ourself with so I thought might be a nice touch to make the candles that are close to the main path react when the characters are running close.
It's not something that will stand out but I'm convinced that together with other similar small touches will create a living environment that the player will be attracted to.

So I made a simple C# script that detects when a character passes by and it uses it's direction and speed to modify the properties of a particle system, in this case the velocity and the emission rate. Bellow you can see the system modifying two particle effects that Silvia created.

The Graveyard environment also offered the chance to explore a bit how the Ghosts will look.
To work on the shaders and effects I used the goblins that Mads made, but the Ghosts will be based on another class of characters - the goblins are only used as a mesh placeholder.
The look is very much work in progress and I'll post new updateds as we'll refine it in the future. Bellow is the 1st iteration:

Contribution Gallery
- I did part of the modeling, part of the effects, the shader work and I supervised the lighting.
- Mads Jackobsen did the concept art, rigging, animation and some of the modeling.
- Silvia Lazar did the set dressing, lighting and the particle effects.


Full image gallery for this post here: http://www.adrianlazar.com/2013/07/25/frejas-journey-the-graveyard-environment-art/

In the end I would like to mention that since we’re so early in production anything could change and most probably will since we’re constantly refining the gameplay and the visuals.

Thanks for following,
-Adrian

 

This is one of those games, where a single look is enough to make it clear that it will go far.
Congratulations.
Flawless work.

 

I watched the first video and glanced over the pictures quickly, didnt feel like reading a whole lot of text, but from what ive seen looks great! the artstyle and colours look really nice! the scenery and foliage reminds me of LittleBigPlanet which i absolutely loved! Keep up the great work!

 

really like the look of this, looks great

 

Many thanks guys, we're really happy that our work is appreciated. I'll keep you updated with the development

 

Hey,
Recently I've done some exploration on the environment shaders for Freja's Journey.

As I said in the first post, I find it a bit hard working with many images on forums so you can see this post on my Personal Production Forum as well where I can customize the layout a bit more: http://www.adrianlazar.com/2013/08/05/frejas-journey-shader-look-exploration/

We knew pretty much from the beginning the general direction on how our game should look so the test was more about curiosity and finding possible variations rather than a change of style.
We won't use normal maps or specular shaders for the environment so what I'm looking for is a more general purpose shader that can work well on all kind of surfaces, being rock, wood or metal and serve the artstyle we need.

Here is just the first test in an area that requires a lot more research so we weren't able to draw any definitive conclusions but I thought it might be interesting to share the findings.

For my test I've used a few props that Alina and Mads textured, kept the set-dressing, lighting and effects and changed only the shaders.
These are really, really quick tests and some of the shaders made especially for this are a bit rough around the edges so it's possible to see a few artifacts. While the possibilities are almost endless, I limited this test to only 3 shaders, Unlit, Rim-Light and Fake BRDF.







Unlit Shader

Below is the default version, an Unlit Shader that supports lightmaps.
This shader is completely neutral, with only the diffuse texture and the lightmaps affecting the final look of the props.
Even though we're using a very simple shader, the scene looks cozy because most of the props are textured and Silvia put a lot of effort in lighting, using not just Global Illumination but also many rim and fill lights that we generated lightmaps from.
It shows that even a basic shader can deliver good results if the props and lighting are done with care.







Rim-Light Shader

Here is a Rim-light Shader that I made to be used mainly on effects and special props.
It can tint differently the base texture and the view-depended rim-light color, and used here it adds a soft look to the environment by brightening a bit the edges of the objects, thus reducing contrast.
A similar effect could've been done in lighting as well but it would require a lot of work in placing the rim lights. The implementation would also be quite rigid, for example if you move the props to tweak the set-dressing you'll need to move all the rim-lights as well. We anyway have to do that but on a very small scale compared to if we would try to simulate in lighting the same result as below.

Something to notice with the Rim-Light Shader is that it can reduce the overall color diversity in the final image since the rim-light can have only one color. If we compare the color palette for this version with the one from the unlit we can see this happening.
Another effect to be aware of is brightening / over-exposing the image and that's because the rim-light of the shader is additive to the diffuse texture and lightmaps.
The Unlit version is placed next for comparison.









Fake BRDF Shader Var 01

Next I made a basic Fake BRDF Shader that offers an extra layer of control.
This fragment shader combines the diffuse texture with the lightmaps and uses a custom lighting function which takes a lookup texture to define how the light affects the object - the lookup texture usually being two gradients, one running vertically while the other is horizontal. The lighting function takes into account both the viewing direction and the light direction thus offering more flexibility to define the final color output of the shader.

As opposed the rim-light shader, using a Fake BRDF in the typical way will most likely result in an increase of hues in the image since now we have better control over the how shader reacts to both view and lighting direction. Of course making the gradient completely one color will produce an almost mono tone result.
Since it has such a deep effect on lighting, a Fake BRDF Shader can radically change the way the scene looks and having this extra layer of controlling the final image can be both a blessing and a curse.
Between textures, lighting, environment effects and complex shaders, it's easy to get lost in all the components that are affecting how the game will look. So if we're going to use a Fake BRDF Shader on the environment for Freja's Journey will most likely be as a final touch, adding just a little extra to the scene.

In the example below you can see that using this shaders adds a cyan and an orange hue to the color palette, compared to the unlit one. It also does a good job in simulating more color bouncing happening in the scene.
Again, the Unlit shader is placed next for comparison.









Fake BRDF Shader Var 02

Below is the same Fake BRDF Shader but with a different gradient. This time I used a more monochromatic texture with brown as the dominant color and now it has the opposite effect, instead of creating a more colorful result it creates one with less color diversity.
Everything else in the scene is exactly the same as in the Unlit version.









Fake BRDF Shader Var 03

Since the Fake BRDF Shader can affect the final image in so many ways I had to make one more variation, this time going for something a bit more surreal by adding a slight tint of red.
It's not a result that I particularly like since I believe it breaks the color scheme but it shows how different you can make the image by changing only the gradient texture used by the shader.









Toon Shader

Out of pure curiosity I've tested the scene with a Toon Shader. I don't think it looks bad at all but it's definitely not something we want for our game
Still, shows that by just changing the shader you can radically alter the look of a game.









And here are all the shaders used in this short test together for an easy comparison.



















As I was saying in the beginning, finding a suited shader for the environment is a task that will require many tests and this is just the first step so no decision could have been taken now.
There are unlimited possibilities but we must find a good balance between ease of use, flexibility and performance.

Hope you found it interesting,
- Adrian

 

Whichever you go with, the combination of low poly with high quality lighting is a win in my opinion.

 

This is just oozing style. Excellent work and thanks for sharing your in-development shader and lighting tests. I can't wait to see the further development of this art style, and some more gameplay. Are you guys doing a Kickstarter?

 

Glad you like it guys!
I always enjoyed dev. blog or BTS from where I learned quite a few things so I'll try to keep mine as updated and informative as possible
Regarding Kickstarter, I think at the point we prefer to use our energy on building more of game but who know what the future will bring.
-Adrian

 

Any news on the game ?

 

Yeah, whatever happened with this game? I googled around and didn't see anything. Is it on hold?

 

Wow, Talk about a blast from the past. This project was great back when it was first announced. I too would love to know its current state if possible

 

What happened to this game?! Have the developers gone solo?

 

Lovely style