September 2020 donation progress: $0.00/$400 (0%). Click to learn more...
close
Hello! Thank you for using yiff.party!

We hope you enjoy using it. yiff.party operates on a non-profit basis, and as such, all the server expenses are paid by our users. We don't want to run ads or infect you with crypto miners. We depend on users like you to keep the site running, and to preserve years and terabytes of amazing content—some of which is no longer available from its original creators!

Because of the nature of the site, many users are reluctant to donate. That's OK! yiff.party was created so everyone can enjoy the content we host without any restrictions or paywalls. But if you value the service we provide, and are able to, we—and our users—would be tremendously grateful if you considered making a donation.

Donation progress for September 2020

So far, approximately $0.00 has been raised out of our target of $400.00. We're about 0% of the way there! Please note: this tracker is updated manually—don't worry if your donation doesn't show up immediately!

yiff.party's server costs are due on the last day of each month. So, we need to meet this goal before 30 September!

How to donate?

At this time, yiff.party can only accept donations in numerous cryptocurrencies. Please select a currency below to display the relevant donation address.

Bitcoin (BTC)
Bitcoin Cash (BCH)
Ethereum (ETH)
Ethereum Classic (ETC)
Litecoin (LTC)
Why can't I donate through other means (eg. PayPal)?

Due to the nature of sites like yiff.party, it is very difficult to find payment processors who will accept clients like us. If we were to accept donations via PayPal, it wouldn't take more than a day for someone to submit an abuse report and get our account frozen. Until a viable way of accepting monetary donations becomes available, cryptocurrency will remain the only option.

There are many resources available on how to purchase crypto. For Bitcoin, check out bitcoin.org's page on buying Bitcoin for a list of methods. For beginner Bitcoin users, yiff.party recommends using an escrow service such as LocalBitcoins.

close
Enjoying catlikecoding's content?

Creators like catlikecoding work hard to produce the content you are viewing on yiff.party for free. If you like what you see, consider supporting catlikecoding on Patreon to encourage them to create more great content!

Rendering 18: Realtime GI, Probe Volumes, LOD Groups
Rendering 18: Realtime GI, Probe Volumes, LOD Groupsmore_vert
2017-07-30T16:57:20+00:00
Post file flag
Rendering 18: Realtime GI, Probe Volumes, LOD Groups 2017-07-30T16:57:20+00:00close

After covering static global illumination, it's time to tackle realtime GI. Then we move on to offer better light probe support for large objects, via proxy volumes. We finish by investigating LOD groups and supporting cross-fading between LOD levels.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Rendering 18, Realtime GI, Probe Volumes, LOD Groups, a Unity Tutorial

Description
Realtime GI, Probe Volumes, LOD Groups Support Realtime Global Illumination. Animate emissive light contribution to GI. Work with light probe proxy volumes. Use LOD groups in combination with GI. Cross-fade between LOD levels. Baking light works very well for static geometry, and also pretty well for dynamic geometry thanks to light probes.

URL
http://catlikecoding.com/unity/tutorials/rendering/part-18/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/rendering/part-18/tutorial-image.jpg
Comments (1)
user avatar
User #5594748 - 31 Jul 17 02:22
Great!
Hex Map 19: Animating Movement
Hex Map 19: Animating Movementmore_vert
2017-07-22T15:56:03+00:00
Post file flag
Hex Map 19: Animating Movement 2017-07-22T15:56:03+00:00close

In this tutorial we're going to replace unit teleportation with actual movement. Our units are going to travel across the map! And we also fix a bug.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 19, a Unity C# Tutorial

Description
A Unity C# scripting tutorial in which you will create a hex map, part 19.

URL
http://catlikecoding.com/unity/tutorials/hex-map/part-19/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-19/tutorial-image.jpg
Comments (4)
user avatar
User #3128699 - 22 Jul 17 20:16
Thanks again for the awesome tutorials! Any idea yet what "other aspects of strategy games" you might be covering in #20?
user avatar
catlikecoding - 22 Jul 17 20:35
I do, but it's a surprise for you! Actually, I haven't made up my mind about the exact order of the following few subjects, so I kept it vague. You'll know when I post the next preview.
user avatar
User #812181 - 17 Aug 17 19:21
Hey dude, any chance you might include some proc Gen tutorials for your hex map series? I've been trying to get perlin noise to work for filling in the elevation and colour to no avail. Also maybe some help with generating LODs for each hex chunk?
user avatar
catlikecoding - 21 Aug 17 18:43
Procedural map generation is indeed a future subject. I also want to cover a zoomed-out map view with less detail.
Preview: Hex Map 19
Preview: Hex Map 19more_vert
2017-07-13T15:12:53+00:00
Post file flag
Preview: Hex Map 19 2017-07-13T15:12:53+00:00close

Here you can see an impression of a unit traveling along a path. The sphere gizmos give you an idea of its movement and velocity.

Rendering 17: Mixed Lighting
Rendering 17: Mixed Lightingmore_vert
2017-06-30T11:26:38+00:00
Post file flag
Rendering 17: Mixed Lighting 2017-06-30T11:26:38+00:00close

Now that we know how to bake lights, lets combine both baked and realtime lighting. This can be done in various ways, either to enhance performance or realism. However, because mixed lighting is quite new, we are bound to encounter some bugs that we have to work around.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Rendering 17, Mixed Lighting, a Unity Tutorial

Description
Mixed Lighting Bake only indirect light. Mix baked and realtime shadows. Deal with code changes and bugs. Support subtractive lighting. Lightmaps allow us to compute lighting ahead of time. This reduces the amount of work that the GPU has to do in realtime, at the cost of texture memory.

URL
http://catlikecoding.com/unity/tutorials/rendering/part-17/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/rendering/part-17/tutorial-image.jpg
Comments (2)
user avatar
User #5684376 - 5 Jul 17 09:27
Good!
user avatar
User #5594748 - 2 Jul 17 08:31
Epic
Hex Map 18: Units
Hex Map 18: Unitsmore_vert
2017-06-23T20:22:09+00:00
Post file flag
Hex Map 18: Units 2017-06-23T20:22:09+00:00close

Now that we know how to find our way around a map, we're going to add units so we have something to move around. This tutorial is limited to a single generic unit type that teleport. It lays the foundation for units. In the future, we'll support multiple unit types and actually move them along paths.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 18, a Unity C# Tutorial

Description
A Unity C# scripting tutorial in which you will create a hex map, part 18.

URL
http://catlikecoding.com/unity/tutorials/hex-map/part-18/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-18/tutorial-image.jpg
Preview: Hex Map 18
Preview: Hex Map 18more_vert
2017-06-16T09:45:40+00:00
Post file flag
Preview: Hex Map 18 2017-06-16T09:45:40+00:00close

An invasion! Here's a screenshot of the first units on the map.

Rendering 16: Static Lighting
Rendering 16: Static Lightingmore_vert
2017-05-31T10:32:57+00:00
Post file flag
Rendering 16: Static Lighting 2017-05-31T10:32:57+00:00close

We've finally arrived at lightmapping! I've been postponing it until Unity offered a reasonably stable solution after introducing Enlighten. Version 5.6 is good enough. In this tutorial, we'll focus exclusively on baked static lighting. This is the most basic and also the most limited form of lightmapping. Once we have that down, we can move on to more advanced modes in the future.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Rendering 16, Static Lighting, a Unity Tutorial

Description
Static Lighting Sample from and render to lightmaps. Make baked light work with normal maps. Use a light probe group. Performing lighting calculations is expensive. Deferred rendering allows us to use many lights, but shadows are still a limiting factor. If our scene is dynamic, then we cannot avoid performing these calculations.

URL
http://catlikecoding.com/unity/tutorials/rendering/part-16/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/rendering/part-16/tutorial-image.jpg
Hex Map 17: Limited Movement
Hex Map 17: Limited Movementmore_vert
2017-05-24T15:07:38+00:00
Post file flag
Hex Map 17: Limited Movement 2017-05-24T15:07:38+00:00close

This time, we'll cover a few more topics related to pathfinding. We'll make movement discrete, cutting it up into turns. Then we'll search more efficiently, arriving at a true A* implementation. Finally, we'll optimize the display of the path, as well as how we clean it up.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 17, a Unity C# Tutorial

Description
A Unity C# scripting tutorial in which you will create a hex map, part 17.

URL
http://catlikecoding.com/unity/tutorials/hex-map/part-17/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-17/tutorial-image.jpg
Rendering 15: Deferred Lights
Rendering 15: Deferred Lightsmore_vert
2017-04-30T15:58:17+00:00
Post file flag
Rendering 15: Deferred Lights 2017-04-30T15:58:17+00:00close

You already know how to fill the G-buffers. Now you'll also render your own deferred lights, instead of leaving that to Unity.

From now on, the Rendering series is also created with Unity 5.6. This has introduced a few changes, but you should be able to handle that.

Also, Nvidia's Cg documentation has been taken offline. So standard shader functions, like normalize and tex2D, now link to Microsoft's MSDN search for HLSL. Weren't you aware that those were links? Now you are!


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Rendering 15, Deferred Lights, a Unity Tutorial

Description
Deferred Lights Use a custom light shader. Decode LDR colors. Add lighting in a separate pass. Support directional, spotlight, and point lights. Manually sample shadow maps. We added support for the deferred rendering path in Rendering 13, Deferred Shading. All we had to do was fill the G-buffers.

URL
http://catlikecoding.com/unity/tutorials/rendering/part-15/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/rendering/part-15/tutorial-image.jpg
Comments (6)
user avatar
User #373884 - 30 Apr 17 18:27
Have you seen Inside's implementation of custom deferred lights? https://youtu.be/RdN06E6Xn9E I swore there was a blog post about it a while back but I cant find it....
user avatar
catlikecoding - 30 Apr 17 20:07
They used a source code license of Unity and created their own rendering pipeline specific for their needs. The most notable is the way they accumulate lighting, which allows them to mess around with it more freely. It looks good for their fuzzy style, but is far removed from physical reality. Once Unity gets a fully programmable pipeline, it might be possible to do that without source code access.
user avatar
User #5160003 - 30 Apr 17 16:11
Thank you for another great tutorial! Heads up, though. The .pdf download link for your most recent tutorial links to "Hex-Map-15.pdf" instead of "Rendering-15.pdf". Be well!
user avatar
catlikecoding - 30 Apr 17 16:32
Thanks, I fixed the link.
user avatar
User #373884 - 30 Apr 17 17:17
The Cg documentation is one of my favorite references : ( I haven't seen that many other references explain the math behind each function. It's sad to see it go. Do you know of any offline version?
user avatar
catlikecoding - 30 Apr 17 20:02
I don't have an offline version, but you can use the wayback machine: https://web.archive.org/web/20160716151207/http://http.developer.nvidia.com:80/Cg/index_stdlib.html
Hex Map 16: Pathfinding
Hex Map 16: Pathfindingmore_vert
2017-04-19T11:35:13+00:00
Post file flag
Hex Map 16: Pathfinding 2017-04-19T11:35:13+00:00close

Not satisfied with just knowing distances, we move on to find the shortest paths between cells.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 16, a Unity C# Tutorial

Description
Pathfinding Highlight cells. Pick a search destination. Find the shortest path. Create a priority queue. To search for a path between two cells, we first have to select these cells. It's no longer a matter of selecting a single cell and watching the search spread through the map.

URL
http://catlikecoding.com/unity/tutorials/hex-map/part-16/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-16/tutorial-image.jpg
Comments (3)
user avatar
User #6223959 - 20 May 17 15:10
Looking forward to the next episode!!!
user avatar
User #6223959 - 20 May 17 15:07
You have a bug in the code. Everything freezes when the starting and the destination cell are the same. Fix it by changing the line when selecting the starting cell to: else if (Input.GetKey(KeyCode.LeftShift) && currentCell != searchToCell) {
user avatar
catlikecoding - 21 May 17 10:33
Good catch, thanks. I fixed it.
Preview: Hex Map 16
Preview: Hex Map 16more_vert
2017-04-12T14:34:49+00:00
Post file flag
Preview: Hex Map 16 2017-04-12T14:34:49+00:00close

Here you can see the result of a pathfinding action.

Rendering 14: Fog
Rendering 14: Fogmore_vert
2017-03-31T15:53:56+00:00
Post file flag
Rendering 14: Fog 2017-03-31T15:53:56+00:00close

Fog is a common effect, used to add a sense of depth to a scene. It can be added to a forward shader, but requires a separate pass for deferred shading. We'll use an image effect for that.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Rendering 14, Fog, a Unity Tutorial

Description
Fog Apply fog to objects. Base fog on either distance or depth. Create an image effect. Support deferred fog. Up to this point, we've always treated light rays as if they traveled through a vacuum. This might be accurate when your scene is set in space, but otherwise light has to travel through an atmosphere or liquid.

URL
http://catlikecoding.com/unity/tutorials/rendering/part-14/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/rendering/part-14/tutorial-image.jpg
Comments (2)
user avatar
User #5257007 - 1 Apr 17 08:20
I like video tutorials, but well written articles are so much better! It is much easier to re-read difficult parts and skip those I do not need. Real time saver. Hope he gets a lot of patrons! :)
user avatar
catlikecoding - 1 Apr 17 11:24
Exactly! I hope for more patrons too.
Hex Map 15: Distances
Hex Map 15: Distancesmore_vert
2017-03-26T11:42:53+00:00
Post file flag
Hex Map 15: Distances 2017-03-26T11:42:53+00:00close

Now that we can create nice maps, let's focus on figuring out how long it would take to travel across it. In this tutorial, we'll figure out the shortest distance from all cells to a selected cell.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 15, a Unity C# Tutorial

Description
A Unity C# scripting tutorial in which you will create a hex map, part 15.

URL
http://catlikecoding.com/unity/tutorials/hex-map/part-15/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-15/tutorial-image.jpg
Comments (4)
user avatar
User #7251509 - 16 Feb 19 09:18
Why are rivers not blocked? Is that part of a later tutorial? Are they special in some way?
user avatar
catlikecoding - 16 Feb 19 10:55
You mean rivers not blocking movement? They represent small rivers that are easily crossed. Because we put them in the center of tiles, a unit isn't on a specific side of a river, so it's not possible to pinpoint a place where a river gets crossed. At best, we could make the whole tile with a river in it not navigable, but it's better to just use a submerged tile for that.
user avatar
User #4994041 - 12 Apr 17 05:09
Hi Jasper, I'm having problems with the texture. Water works fine, but importing these packages results in the terrain not having the texture there. Looking at the wireframe, the terrain is there and the height and geometry can be adjusted. It's not not visible. What may be causing this?
user avatar
catlikecoding - 12 Apr 17 09:15
Not visible? Make sure that you're using at least Unity 5.5.0. And I'll switch to 5.6 for the next one.
Preview: Hex Map 15
Preview: Hex Map 15more_vert
2017-03-08T22:17:37+00:00
Post file flag
Preview: Hex Map 15 2017-03-08T22:17:37+00:00close

Here's some preliminary work done on travel costs.

Rendering 13: Deferred Shading
Rendering 13: Deferred Shadingmore_vert
2017-02-27T19:40:44+00:00
Post file flag
Rendering 13: Deferred Shading 2017-02-27T19:40:44+00:00close

So far, we've only used the forward rendering path. But Unity also supports deferred shading. This tutorial investigates how that works.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Rendering 13, Deferred Shading, a Unity Tutorial

Description
Deferred Shading Explore deferred shading. Fill Geometry Buffers. Support both HDR and LDR. Work with Deferred Reflections. Up to this point we've always used Unity's forward rendering path. But that's not the only rendering method that Unity supports. There's also the deferred path.

URL
http://catlikecoding.com/unity/tutorials/rendering/part-13/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/rendering/part-13/tutorial-image.jpg
Comments (2)
user avatar
User #5330759 - 13 Mar 17 18:37
I tried contacting you for help and I couldn't get in touch with your domain. How exactly do I send a message to you?
user avatar
catlikecoding - 13 Mar 17 23:00
Various ways, this being one of them! I had to reboot my server, so my domain would've been unavailable for a short while.
Hex Map 14: Terrain Textures
Hex Map 14: Terrain Texturesmore_vert
2017-02-23T17:33:33+00:00
Post file flag
Hex Map 14: Terrain Textures 2017-02-23T17:33:33+00:00close

People have been asking for it a long time, and here it is! How to texture your terrain. We're going to use a texture array to blend between an arbitrary amount of terrain types.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 14, a Unity C# Tutorial

Description
A Unity C# scripting tutorial in which you will create a hex map, part 14.

URL
http://catlikecoding.com/unity/tutorials/hex-map/part-14/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-14/tutorial-image.jpg
Comments (2)
user avatar
User #4833282 - 2 Apr 17 21:00
Great tutorial! I learned something new today with texture arrays.
user avatar
catlikecoding - 3 Apr 17 14:30
Texture arrays can be quite useful!
Preview: Hex Map 14
Preview: Hex Map 14more_vert
2017-02-20T21:43:29+00:00
Post file flag
Preview: Hex Map 14 2017-02-20T21:43:29+00:00close

Coming soon: texturing your terrain!

Comments (2)
user avatar
User #810309 - 21 Feb 17 22:37
Great work as always! If I may make a suggestion, it would be very nice to have a shader allowing to highlight hexes edges/faces.
user avatar
catlikecoding - 22 Feb 17 21:43
I'll add a grid overlay texture next time, when we look a navigation.
Rendering 12: Semitransparent Shadows
Rendering 12: Semitransparent Shadowsmore_vert
2017-01-31T12:13:10+00:00
Post file flag
Rendering 12: Semitransparent Shadows 2017-01-31T12:13:10+00:00close

After supporting semitransparent surfaces, now it's time to support their shadows! Cutout shadows are not that hard. It's the semitransparent ones that are problematic. We have to use a trick to approximate them.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Rendering 12, Semitransparent Shadows, a Unity C# Tutorial

Description
Semitransparent Shadows Support cutout shadows. Use dithering. Approximate semitransparent shadow. Toggle between semitransparent and cutout shadows. Currently, the shadows of our transparent materials are always cast as if they were solid, because that's what our shader assumes. As a result, the shadows might appear very strange, until you realize that you're seeing the shadows of a solid object.

URL
http://catlikecoding.com/unity/tutorials/rendering/part-12/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/rendering/part-12/tutorial-image.jpg
Hex Map 13: Managing Maps
Hex Map 13: Managing Mapsmore_vert
2017-01-27T15:20:35+00:00
Post file flag
Hex Map 13: Managing Maps 2017-01-27T15:20:35+00:00close

Have you enjoyed the ability to save your map? This time, we'll make it possible to save to custom map files. This allows you to create a whole collection of maps! We'll also support multiple map sizes, so you can make them as small or as large as you want.

This is the first tutorial of 2017, and I've advanced to Unity version 5.5.0.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 13, a Unity C# Tutorial

Description
A Unity C# scripting tutorial in which you will create a hex map, part 13.

URL
http://catlikecoding.com/unity/tutorials/hex-map/part-13/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-13/tutorial-image.jpg
Rendering 11: Transparency
Rendering 11: Transparencymore_vert
2016-12-31T12:23:58+00:00
Post file flag
Rendering 11: Transparency 2016-12-31T12:23:58+00:00close

In the last tutorial of 2016, we'll cover semitransparent rendering. Unity's standard shaders support four rendering modes. They are opaque, cutout, fade, and transparency. Until now, we've always rendered in opaque mode. Now we'll add support for the other three modes. And just like the standard shaders, our single shader will support all four modes.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Rendering 11, Transparency, a Unity C# Tutorial

Description
Transparency Cut holes with a shader. Use a different render queue. Support semitransparent materials. Combine reflections and transparency. To create a transparent material, we have to know the transparency of each fragment. This information is most often stored in the alpha channel of colors.

URL
http://catlikecoding.com/unity/tutorials/rendering/part-11/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/rendering/part-11/tutorial-image.jpg
Hex Map 12: Saving and Loading
Hex Map 12: Saving and Loadingmore_vert
2016-12-22T16:59:44+00:00
Post file flag
Hex Map 12: Saving and Loading 2016-12-22T16:59:44+00:00close

Many people have been asking for the ability to save and load maps. This tutorial delivers! We'll dive into the low-level world of binary data streams, to efficiently push our maps into small files.

This tutorial is all about code. There are only a few images. If something is unclear, let me know. I might add a diagram to better explain it.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 12, a Unity C# Tutorial

Description
Saving and Loading Keep track of terrain type, instead of color. Create a file. Write data to a file, then read it. Serialize cell data. Reduce file size. When saving a map, we do not need to store all the data that we keep track of a run time.

URL
http://catlikecoding.com/unity/tutorials/hex-map/part-12/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-12/tutorial-image.jpg
Rendering 10: More Complexity
Rendering 10: More Complexitymore_vert
2016-11-30T11:30:10+00:00
Post file flag
Rendering 10: More Complexity 2016-11-30T11:30:10+00:00close

Our materials weren't complex enough, really. So this time we'll add support for occlusion maps and detail masks. Now we can create some messy materials! And that's more reastic, because reality is messy.

Besides that, we'll also take care of multi-material editing. While that's already somewhat possible, the keywords need a bit of extra work.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Rendering 10, More Complexity, a Unity C# Tutorial

Description
More Complexity Bake self-shadowing into a material. Add details to part of a surface. Support more efficient shader variants. Edit multiple materials at once. Even through we can create materials that appear complex, it is just an illusion. The triangles are still flat.

URL
http://catlikecoding.com/unity/tutorials/rendering/part-10/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/rendering/part-10/tutorial-image.jpg
Hex Map 11: More Features
Hex Map 11: More Featuresmore_vert
2016-11-20T19:56:49+00:00
Post file flag
Hex Map 11: More Features 2016-11-20T19:56:49+00:00close

Some essential features were still missing. Wall towers, bridges, and huge special stuff! This installment takes care of that.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 11, a Unity C# Tutorial

Description
A Unity C# scripting tutorial in which you will create a hex map, part 11.

URL
http://catlikecoding.com/unity/tutorials/hex-map/part-11/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-11/tutorial-image.jpg
Preview: Hex Map 11
Preview: Hex Map 11more_vert
2016-11-14T17:11:39+00:00
Post file flag
Preview: Hex Map 11 2016-11-14T17:11:39+00:00close

There are some new features hidden in this screenshot!

Rendering 9: Complex Materials
Rendering 9: Complex Materialsmore_vert
2016-10-31T15:58:13+00:00
Post file flag
Rendering 9: Complex Materials 2016-10-31T15:58:13+00:00close
http://catlikecoding.com/unity/tutorials/rendering/part-9/

We're going to power up our shader's GUI. After that, we add support for metallic, smoothness, and emission maps. This adds a lot of flexibility to our shader. You can create complex materials, like glowing lava or a circuit board with lights. Or ajack-o'-lantern!


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Rendering 9, Complex Materials, a Unity C# Tutorial

Description
Complex Materials Create a custom shader GUI. Mix metals and nonmetals. Use nonuniform smoothness. Support emissive surfaces. Up to this points, we've been using Unity's default material inspector for our material. It is serviceable, but Unity's standard shader has quite a different look. Let's create a custom inspector for our own shader, mimicking the standard shader.

URL
http://catlikecoding.com/unity/tutorials/rendering/part-9/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/rendering/part-9/tutorial-image.jpg
Preview: Rendering 9
Preview: Rendering 9more_vert
2016-10-18T16:47:04+00:00
Post file flag
Preview: Rendering 9 2016-10-18T16:47:04+00:00close

A few more configuration options allows us to create materials like these two.

Comments (2)
user avatar
User #3114982 - 18 Oct 16 17:05
Gradient mapping and emission, at a guess?
user avatar
catlikecoding - 19 Oct 16 19:14
You got emission right! Beyond that, it are textures, as usual.
Hex Map 10: Walls
Hex Map 10: Wallsmore_vert
2016-10-14T12:55:38+00:00
Post file flag
Hex Map 10: Walls 2016-10-14T12:55:38+00:00close
http://catlikecoding.com/unity/tutorials/hex-map/part-10/

This part covers a single big terrain feature. Walls!

Walled cells get a wall around the edges they share with a non-walled cell. As they're placed on edges, walls have to play nice with with rivers, roads, terraces, and cliffs.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 10, a Unity C# Tutorial

Description
Walls Wall off cells. Build walls along cell edges. Let rivers and roads go through. Avoid water and connect with cliffs. To support walls, we have to know where to place them. We'll put them in between cells, along the edges that connects them.

URL
http://catlikecoding.com/unity/tutorials/hex-map/part-10/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-10/tutorial-image.jpg
Preview: Hex Map 10
Preview: Hex Map 10more_vert
2016-10-10T16:31:04+00:00
Post file flag
Preview: Hex Map 10 2016-10-10T16:31:04+00:00close

Can you spot the new features?

Comments (4)
user avatar
User #220664 - 10 Oct 16 17:49
Looks like you're building a Wall. XDD
user avatar
catlikecoding - 11 Oct 16 09:09
Indeed I am. Those darn kids should keep of my lawn!
user avatar
User #2343558 - 10 Oct 16 17:01
Is it the fences, walls around the cells
user avatar
catlikecoding - 11 Oct 16 09:09
That's right!
Rendering 8: Reflections
Rendering 8: Reflectionsmore_vert
2016-09-30T20:31:50+00:00
Post file flag
Rendering 8: Reflections 2016-09-30T20:31:50+00:00close
http://catlikecoding.com/unity/tutorials/rendering/part-8/

Shading is all about reflections. Ironically, mirrors are one of the hardest things to get right. In real life, light bounces all over the place. Mirrors just work. Seemingly infinite bounces aren't a problem at all. Two mirrors facing each other? Photons race back and forth without complaining. Unfortunately, Unity can't cope with that. But here's what we can do, using reflection probes.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Rendering 8, Reflections, a Unity C# Tutorial

Description
Reflections Sample the environment. Use reflection probes. Create rough and smooth mirrors. Perform box projection cube map sampling. Blend between reflection probes. Currently, our shader colors a fragment by combining the ambient, diffuse, and specular reflections on a surface. This produces seemingly realistic images, at least as long as the surfaces are dull.

URL
http://catlikecoding.com/unity/tutorials/rendering/part-8/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/rendering/part-8/tutorial-image.jpg
Comments (4)
user avatar
User #289908 - 30 Sep 16 21:59
Amazing tutorial! I was just starting to feel good about my knowledge of Unity, but then I read this tutorial. Feel like an Unity newbie again. Thank you for a big healthy dose of humility!
user avatar
catlikecoding - 2 Oct 16 12:41
Haha, you're welcome! I'm glad I got you to reflect on your knowledge.
user avatar
User #265510 - 2 Oct 16 03:06
Looks amazing!
user avatar
catlikecoding - 2 Oct 16 12:41
I did my best to creating something shiny this time.
Hex Map 9: Terrain Features
Hex Map 9: Terrain Featuresmore_vert
2016-09-23T19:16:47+00:00
Post file flag
Hex Map 9: Terrain Features 2016-09-23T19:16:47+00:00close
http://catlikecoding.com/unity/tutorials/hex-map/part-9/

This is it. People have discovered the fertile lands. Trees make way for farmland, which in turn gets displaced by urban development. At least, that's a possible scenario with this new Hex Map installment.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 9, a Unity C# Tutorial

Description
A Unity C# scripting tutorial in which you will create a hex map, part 9.

URL
http://catlikecoding.com/unity/tutorials/hex-map/part-9/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-9/tutorial-image.jpg
Preview: Development and Vegetation
Preview: Development and Vegetationmore_vert
2016-09-07T16:49:18+00:00
Post file flag
Preview: Development and Vegetation 2016-09-07T16:49:18+00:00close

We're not going to limit ourselves to only a single type of feature! In this screenshot, the red cubes represent development of the land. Housing and such. The green cubes represent vegetation. Shrubbery and trees. These features are painted onto the map, and controlled with sliders, just like elevation.

The features have density levels. None, low, medium, and high. Cells with higher densities will contain more and bigger features. Cells can contain both types at the same time, which results in a feature mix.

Preview: Hex Map 9
Preview: Hex Map 9more_vert
2016-09-06T16:28:56+00:00
Post file flag
Preview: Hex Map 9 2016-09-06T16:28:56+00:00close

Curious about the new terrain features? Here's a sneak peek of them, in their most basic form.

Rendering 7: Shadows
Rendering 7: Shadowsmore_vert
2016-08-30T20:21:26+00:00
Post file flag
Rendering 7: Shadows 2016-08-30T20:21:26+00:00close
http://catlikecoding.com/unity/tutorials/rendering/part-7/

It has been very sunny weather lately. I had to look for the shade, so I could write this tutorial.

Shadows complicate the rendering process a lot. In this tutorial, we'll first investigate the work needed to render shadows for directional lights. Then we'll add support for such shadows to our own shader. Once that's done, we'll move on to spotlights and directional lights.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Rendering 7, Shadows, a Unity C# Tutorial

Description
Shadows Investigate how Unity renders shadows. Cast directional shadows. Receive directional shadows. Add support for spotlight and point light shadows. While our lighting shader produces fairly realistic results by now, it evaluates each surface fragment in isolation. It assumes that a ray of light from every light source eventually hits every fragment.

URL
http://catlikecoding.com/unity/tutorials/rendering/part-7/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/rendering/part-7/tutorial-image.jpg
Preview: Rendering 7
Preview: Rendering 7more_vert
2016-08-25T20:14:09+00:00
Post file flag
Preview: Rendering 7 2016-08-25T20:14:09+00:00close

Here's a demo scene that I'll use for the next Rendering installment. It's about shadows.

Hex Map 8: Water
Hex Map 8: Watermore_vert
2016-08-23T21:19:26+00:00
Post file flag
Hex Map 8: Water 2016-08-23T21:19:26+00:00close
http://catlikecoding.com/unity/tutorials/hex-map/part-8/

With all those rivers bringing in fresh water, lakes had to appear at some point. Water bodies can exist at various elevations, and rivers can flow in and out of them.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 8, a Unity C# Tutorial

Description
A Unity C# scripting tutorial in which you will create a hex map, part 8.

URL
http://catlikecoding.com/unity/tutorials/hex-map/part-8/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-8/tutorial-image.jpg
Preview: Hex Map 8
Preview: Hex Map 8more_vert
2016-08-14T11:38:03+00:00
Post file flag
Preview: Hex Map 8 2016-08-14T11:38:03+00:00close

My next Hex Map tutorial will be about water tiles. The cells have gained a water level. When their water level is higher than their surface level, cells are submerged.

Comments (1)
user avatar
User #3382325 - 14 Aug 16 11:57
Oo exciting starting to look legit
Rendering 6: Bumpiness 2016-07-31T11:03:59+00:00
http://catlikecoding.com/unity/tutorials/rendering/part-6/

Part 6 of the Rendering series will be a bumpy ride. Because we're going to mess with normal vectors!

flag

Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Rendering 6, Bumpiness, a Unity C# Tutorial

Description
Bumpiness Perturb normals to simulate bumps. Compute normals from a height field. Sample and blend normal maps. Convert from tangent space to world space. We can use albedo textures to create materials with complex color patterns. We can use normals to adjust the apparent surface curvature.

URL
http://catlikecoding.com/unity/tutorials/rendering/part-6/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/rendering/part-6/tutorial-image.jpg
Hex Map 7: Roads
Hex Map 7: Roadsmore_vert
2016-07-25T10:55:59+00:00
Post file flag
Hex Map 7: Roads 2016-07-25T10:55:59+00:00close
http://catlikecoding.com/unity/tutorials/hex-map/part-7/

After tackling rivers, it is time to add a road network to our map. And of course rivers and roads have to play nice.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 7, a Unity C# Tutorial

Description
Roads Add support for roads. Triangulate roads. Combine roads and rivers. Give roads a rugged appearance. Like rivers, roads go from cell to cell, through the middle of cell edges. The big difference is that roads don't have flowing water, so they're bidirectional.

URL
http://catlikecoding.com/unity/tutorials/hex-map/part-7/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-7/tutorial-image.jpg
Rendering 5: Multiple Lights
Rendering 5: Multiple Lightsmore_vert
2016-06-30T14:24:38+00:00
Post file flag
Rendering 5: Multiple Lights 2016-06-30T14:24:38+00:00close
http://catlikecoding.com/unity/tutorials/rendering/part-5/

Going from a single to multiple dynamic lights adds a lot of complexity. We'll have to combine pixel lights, vertex lights, and spherical harmonics.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Rendering 5, Multiple Lights, a Unity C# Tutorial

Description
Multiple Lights Render multiple lights per object. Support different light types. Use light cookies. Compute vertex lights. Include spherical harmonics. Too add support for multiple lights to our shader, we'll have to add more passes to it. These passes will end up containing nearly identical code.

URL
http://catlikecoding.com/unity/tutorials/rendering/part-5/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/rendering/part-5/tutorial-image.jpg
Hex Map 6: Rivers
Hex Map 6: Riversmore_vert
2016-06-21T12:50:04+00:00
Post file flag
Hex Map 6: Rivers 2016-06-21T12:50:04+00:00close
http://catlikecoding.com/unity/tutorials/hex-map/part-6/

It is summer! What about hanging out by a river? Don't have any rivers nearby? No worries! You can now add them to your hex map!


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 6, a Unity C# Tutorial

Description
Rivers Add river data to cells. Support dragging to draw rivers. Create river channels. Use more than one mesh per chunk. Make a generic pool for lists. Triangulate and animate flowing water. There are three ways to add rivers to a hex grid. The first approach is to let them flow from cell to cell.

URL
http://catlikecoding.com/unity/tutorials/hex-map/part-6/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-6/tutorial-image.jpg
Comments (2)
user avatar
User #289908 - 22 Jun 16 02:35
Crazy! Crazy! I will never view another river again without thinking about all the code involved! This is not a tutorial. It is a concert!
user avatar
catlikecoding - 22 Jun 16 12:14
A symphony of rivers!
Preview: Hex Map 7?
Preview: Hex Map 7?more_vert
2016-06-09T15:56:42+00:00
Post file flag
Preview: Hex Map 7? 2016-06-09T15:56:42+00:00close

Hex Map 6 will be about rivers, but roads are in the future too. As we'll draw both roads and rivers through cell centers, they get in each other's way. This screenshot shows a test to make sure that they play nice. Now that I have confirmed that everything works as it should, I can start writing part 6.

Preview: Hex Map 6
Preview: Hex Map 6more_vert
2016-06-05T17:13:23+00:00
Post file flag
Preview: Hex Map 6 2016-06-05T17:13:23+00:00close

Here's some work in progress on Hex Map 6. Cell triangulation is becoming even more complex. But it's worth it, because you get flowing rivers!

Comments (2)
user avatar
User #3506166 - 16 Jun 16 19:22
Hello Catlike Coding! I really love your tutorials, and I'm super impatient about hex map part 6 and part 7, I was wondering if you can send me a draft of your work at its current progress? I'm already experienced with Unity..
user avatar
catlikecoding - 17 Jun 16 09:32
You'll have to be a bit more patient. Part 6 will arrive soon!
Rendering 4: The First Light
Rendering 4: The First Lightmore_vert
2016-05-31T21:39:32+00:00
Post file flag
Rendering 4: The First Light 2016-05-31T21:39:32+00:00close
http://catlikecoding.com/unity/tutorials/rendering/part-4/

The fourth rendering tutorial makes sure that you're no longer in the dark about light. It begins with transforming normals to world space, and ends with physically-based shading.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Rendering 4, The First Light, a Unity C# Tutorial

Description
The First Light I have changed the previous tutorials somewhat, to improve compatibility. I also introduced shader structures in part 2, instead of delaying that until this tutorial. Transform normals from object to world space. Work with a directional light. Compute diffuse and specular reflections. Enforce energy conservation. Use a metallic workflow.

URL
http://catlikecoding.com/unity/tutorials/rendering/part-4/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/rendering/part-4/tutorial-image.jpg
Hex Map 5: Larger Maps
Hex Map 5: Larger Mapsmore_vert
2016-05-24T13:13:53+00:00
Post file flag
Hex Map 5: Larger Maps 2016-05-24T13:13:53+00:00close
http://catlikecoding.com/unity/tutorials/hex-map/part-5/


It is time to get big! By splitting the terrain into multiple chunks, we're no longer constrained by Unity's mesh limitations. And once you have a larger map, you find that you need camera controls and larger brush sizes as well. This tutorial takes care of all that.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 5, a Unity C# Tutorial

Description
Larger Maps Split the grid into chunks. Control the camera. Paint color and elevation separately. Use a larger cell brush. We cannot make our grid too large, because we run into the limits of what can fit in a single mesh. The solution? Use more than one mesh.

URL
http://catlikecoding.com/unity/tutorials/hex-map/part-5/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-5/tutorial-image.jpg
Preview: Hex Map 5
Preview: Hex Map 5more_vert
2016-05-17T19:03:23+00:00
Post file flag
Preview: Hex Map 5 2016-05-17T19:03:23+00:00close

The next Hex Map tutorial is in the pipeline! Can you spot the new stuff?

Comments (6)
user avatar
User #2343558 - 17 May 16 21:03
I am thinking the elevations look more crisp and the map is slightly larger, that's all I notice. be it right or not I am loving learning this from your tutorials.
user avatar
User #220664 - 18 May 16 04:29
Ah, yeah, maybe that's why I thought it looked better... more crisp elevation levels...
user avatar
catlikecoding - 18 May 16 15:10
Camera rotation is one of the new features. You're seeing the map from a different angle, which results in different lighting. This shot is looking towards the light, so contrasts are stronger and there are specular highlights.
user avatar
User #220664 - 17 May 16 20:46
Ooh, "painting" different elevations and colors, with variable brush size? Also, I'm guessing it's just me, but the graphics look more polished... Although, tweaking the shader in the middle of a section about editor mechanics seems rather out of left field, so I'm guessing it's just the composition of the thumbnail that gives the impression of a more complex shader...
user avatar
catlikecoding - 18 May 16 15:13
Yes, brush size is new. And you can choose to paint only color or elevation, instead of always both.
user avatar
User #220664 - 18 May 16 16:27
Nice. :)
Rendering 3: Combining Textures
Rendering 3: Combining Texturesmore_vert
2016-04-29T15:45:16+00:00
Post file flag
Rendering 3: Combining Textures 2016-04-29T15:45:16+00:00close
http://catlikecoding.com/unity/tutorials/rendering/part-3/


The third rendering tutorial is here. We've already used one texture in a shader. Now it's time for more!


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Rendering 3, Combining Textures, a Unity C# Tutorial

Description
Combining Textures Sample multiple textures. Apply a detail texture. Deal with colors in linear space. Use a splat map. Textures are nice, but they have limitations. They have a fixed amount of texels, no matter at what size they are displayed. If they are rendered small, we can use mipmaps to keep them looking good.

URL
http://catlikecoding.com/unity/tutorials/rendering/part-3/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/rendering/part-3/tutorial-image.jpg
Hex Map 4: Irregularities
Hex Map 4: Irregularitiesmore_vert
2016-04-19T21:26:03+00:00
Post file flag
Hex Map 4: Irregularities 2016-04-19T21:26:03+00:00close
http://catlikecoding.com/unity/tutorials/hex-map/part-4/

Part four of the Hex Map series messes things up, in a good way!


This is also the first time I'm using separate markers for inserted and deleted code. If a line of code is removed without replacement, it will show up commented out, with a line through it.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 4, a Unity C# Tutorial

Description
Irregulatity Sample a noise texture. Perturb vertices. Keep cells flat. Subdivide cell edges. To add irregularities, we need randomization. But not true randomness. We want things to stay consistent whenever we edit our map. Otherwise, things would jump around each time we made a change. So we need a form of reproducible pseudorandom noise.

URL
http://catlikecoding.com/unity/tutorials/hex-map/part-4/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-4/tutorial-image.png
Preview: Hex Map 4
Preview: Hex Map 4more_vert
2016-04-03T19:19:18+00:00
Post file flag
Preview: Hex Map 4 2016-04-03T19:19:18+00:00close

Think the Hex Map terrain is too regular? Then you'll love Hex Map 4! Here's a preview screenshot showing off the upcoming features.

Rendering 2: Shader Fundamentals
Rendering 2: Shader Fundamentalsmore_vert
2016-03-29T16:13:44+00:00
Post file flag
Rendering 2: Shader Fundamentals 2016-03-29T16:13:44+00:00close
http://catlikecoding.com/unity/tutorials/rendering/part-2/

Part two of my Rendering series has arrived! This is about covering the fundamentals of writing a shader. So it starts off very basic, just placing vertices and applying a color, then sampling a texture. With this foundation is place, we can move on to increasingly more exciting stuff. But that's for next month!


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Rendering 2, Shader Fundamentals, a Unity C# Tutorial

Description
Shader Fundamentals Transform vertices. Color pixels. Use shader properties. Pass data from vertices to fragments. Inspect compiled shader code. Sample a texture, with tiling and offset. When you create a new scene in Unity, you start with a default camera and directional light.

URL
http://catlikecoding.com/unity/tutorials/rendering/part-2/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/rendering/part-2/tutorial-image.png
Hex Map 3: Elevation and Terraces
Hex Map 3: Elevation and Terracesmore_vert
2016-03-21T11:45:16+00:00
Post file flag
Hex Map 3: Elevation and Terraces 2016-03-21T11:45:16+00:00close
http://catlikecoding.com/unity/tutorials/hex-map/part-3/

It's springtime! To celebrate, we'll add elevation to our hex map. And because slopes aren't interesting enough, let's put in some terraces as well!


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 3, a Unity C# Tutorial

Description
Elevation Add elevation to cells. Triangulate slopes. Insert terraces. Merge terraces and cliffs. We have divided our map into discrete cells, to cover a flat area. Now we'll give each cell its own elevation level as well. We'll use discrete elevation levels, so store it in an integer field in HexCell.

URL
http://catlikecoding.com/unity/tutorials/hex-map/part-3/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-3/tutorial-image.png
Comments (4)
user avatar
User #4736808 - 5 Jul 17 01:10
Could you add a reference to dynamic float in the last part of 1.1? I'm re-doing the tutorials after not poking Unity for a couple years and remember having problems here the first time, too.
user avatar
catlikecoding - 6 Jul 17 11:19
What do you mean with a reference to dynamic float?
user avatar
User #4736808 - 8 Jul 17 02:15
The functions available to buttons and sliders are broken up into dynamic and static. With the buttons, there's no chance for confusion because they are only on the static list. There is no mention of dynamic/static that I saw in the tutorial and took an hour troubleshooting why SetElevation had a parameter I could set in the On Value Changed window before I realized the function was listed twice.
user avatar
catlikecoding - 8 Jul 17 10:16
Ok, I pointed out the need to use the dynamic version.
Upload

This creator doesn't have any shared files yet. You can add some by clicking Upload.