Skip to main content

Global Game Jam 2017

It has taken me longer than I wanted to write a short blurb about my latest social (thats right, real people were involved) experience at the Global Game Jam 2017 in George, South Africa. The event in George was hosted by Fuzzy Logic, a local Game Development Firm who have built some neat Augmented Reality Games to date.

For those who don’t know what a Global Game Jam is, it is basically a global event where those interested in all aspects of Game development gather at registered sites to build games based around a theme provided by the overall organizer of the event GlobalGameJam.org.

The event runs for 3 days over the course of a weekend. This one happened back in January from the 20th to the 22nd and was my first game jam so I wasnt exactly sure what to expect.

I learned of the event by chance through the Make Games SA Forum which is a bustlingly active South African Game Development Community.

The Theme this year was Waves which means you have to build your game around the concept of Waves, that could range from water waves, to Sound waves to even waving at a crowd.

Upon learning the theme, groups then form around alternate ideas which are refined and once a consensus has been met, development begins for the remainder of the weekend to meet an upload deadline.

The group I was part of had this idea of controlling the boat from the legend of Charon who brings souls of the recently deceased across the river of Hades. With this concept we kept the overall project fairly manageable for the allowed time frame, and we satisfied the Waves theme.

I was tasked with working on shaders and effects. Not the easiest of tasks considering I hadn’t really worked with Unity before and their shaders are somewhat different to the raw GLSL I am used to working with through the Kanzi UI.

This is part of what a game jam is all about, getting pushed slightly out of your comfort zone in order to learn some new tools and techniques. It didnt take me long to learn that Unity has this concept of Shaderlab which basically brings the pixel and vertex shader into one program and using some hligh level functions to get the same effect. You can still of course write an individual Pixel and Vertex shader if you like but it seems that most examples online have embraced the ShaderLab ideology, So I decide to be a sheep and follow suit.

Typically its at this point that I search the net for examples of what I am about to achieve, This is considerably easier that building something from scratch and since this is a Game Jam I have limited time to achieve what I would call acceptable results.

After finding some shaders to work from (I will reference to them below) I start putting together the pieces I need and focus on Look Development.

Water Shader with Ripple Effect

The basic idea behind an effective visual representation (not physically accurate or collision aware) of water is using displacement on a fairly Highpoly grid mesh (or a tesselated medium poly mesh). The displacement which is typically a white and black heightmap passed to the shader will provide for movement on the waters surface with a whiter color pushing the vertices higher and a darker color pushing the vertices lower. once this heightmap is scrolled along the grids UV’s you get a nice representation of movement or surface displacement.

Using a multiplyier you can then control the strength of the displacment effect on a mesh. This is more or less what a grid mesh looks like with a basic scrolling heightmap applied to manipulate and offset the mesh’s vertices

You can then use a normal map which will give the water a more water look and to reflect light on some parts to give the illusion of refection on the surface. Grabbed this one from the net somewhere because I didn’t have the time to sculpt one in ZBrush.

I pipe the normal color into the albedo here so you can see it.

Then we use a standard cubemap for reflecting more realistic colors. We will also expose some other uniforms to control the color, specular and overall reflective color.

There is another map we use called a flowmap which dictates the direction of the water.
I used the following tool to make flow maps.

Its far from a perfect implementation of water but with the time constraints and my total newbness when coming to the Surface shaders in Unity I couldn’t manage better. My next task was to try and make a ripple effect on the water to signify a click by a user on the waters surface which would in turn push our boat onwards down the river.

I then took a completely diferent shader and collision script that focused soley on a ripple effect and hacked it into our somewhat nice looking water shader. The result looks like this when we use a bouncing ball to simulate a user click on the surface.

If i had more time I would have gotten around to implementing this in the game but alas it wasn’t to be. The ripples work by creating multiple arrays to hold the location, wave amplitude and distance. Some crazy math are then sued to make ripples and this is plugged into the displacement. In the above gif i lowered the noise displacement so you could see the ripples. Both do work well together.

That’s pretty much it. You can grab the whole water ripple unity package here and check out how it works 🙂

You could also grab the game from our teams games Global Game Jam Page.
The games source can also be found on Github.

More than anything I really enjoyed the sense of community and gathering at the Game Jam in George, The folks there were super nice and really make an effort to include everyone and make it a fun experience.

Already looking forward to next year 🙂

References

Ripple Shader
Animated Water Shader