August 2020 donation progress: $0.00/$250 (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 August 2020

So far, approximately $0.00 has been raised out of our target of $250.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 31 August!

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!

More Game State
More Game Statemore_vert
2018-09-21T15:52:11+00:00
Post file flag
More Game State 2018-09-21T15:52:11+00:00close

It's another Object Management tutorial, covering even more game state! Specifically, we're going to save randomness, level data, and creation/destruction speed and progress.

Because level data is already contained in the level scene, we don't have to save all of it. Instead, we only care about level data that could change during play.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
More Game State

Description
A Unity Object Management tutorial about saving and loading game and level state.

URL
https://catlikecoding.com/unity/tutorials/object-management/more-game-state/

HTMLplay_arrow

https://catlikecoding.com/unity/tutorials/object-management/more-game-state/tutorial-image.jpg
New Goals 2018-09-02T11:48:19+00:00

I added two new goals!

First, at $1100 I will finally be able to replace my 6-year-old laptop. It's starting to show its age.

Second, at $1200 I will make my tutorial projects available via Bitbucket, instead of via the old unitypackage files. This way you can get the entire project, with all its settings. You can also inspect files without having to import them in a Unity project.

flag
Looking Through Water
Looking Through Watermore_vert
2018-08-30T20:14:48+00:00
Post file flag
Looking Through Water 2018-08-30T20:14:48+00:00close

Part four of the Flow series adds support for transparent water. Not satisfied with regular transparency, we include underwater fog and fake refraction effects. It is a bit awkward doing this in a surface shader, but the techniques used can also be applied to custom rendering pipelines.

I have tested this with only with OpenGL and Metal, not with Direct3D11. Let me know if you get upside-down results.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Waves

Description
Underwater Fog and Refraction Make water transparent. Sample depth and grab what's rendered. Add underwater fog. Create fake refractions. The water effects that we have created thus far are fully opaque. This works for water or other liquids that are very murky, or are covered with a layer of debris, foam, plants, or something else that blocks light.

URL
https://catlikecoding.com/unity/tutorials/flow/looking-through-water/

HTMLplay_arrow

https://catlikecoding.com/unity/tutorials/flow/looking-through-water/tutorial-image.jpg
Spawn Zones
Spawn Zonesmore_vert
2018-08-23T18:13:36+00:00
Post file flag
Spawn Zones 2018-08-23T18:13:36+00:00close

In part five of my Object Management series we're going to make spawning shapes a lot more interesting! Get ready for multiple spawn zone types, gizmos, a singleton, and communication between scenes.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Spawn Zones

Description
Level Variety Create a spawn zone and transform it. Use gizmos to visualize spawn zones. Support a different spawn zone per scene. Connect objects from different scenes. Create multiple spawn zone types. Our simple game is about spawning random shapes. The material and color of each shape are randomly chosen, and so are its position, rotation, and scale.

URL
https://catlikecoding.com/unity/tutorials/object-management/spawn-zones/

HTMLplay_arrow

https://catlikecoding.com/unity/tutorials/object-management/spawn-zones/tutorial-image.jpg
Waves
Wavesmore_vert
2018-07-26T14:54:10+00:00
Post file flag
Waves 2018-07-26T14:54:10+00:00close

In this part of the Flow series we forget about textures and instead create waves by displacing mesh vertices. We begin with a simple sine wave, then move on to a Gerstner wave, give it a direction, and combine multiple of them.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Waves

Description
Moving Vertices Animate vertices. Create Gerstner waves. Control wave direction. Combine multiple waves. Animating textures can create the illusion of a moving surface, but the mesh surface itself remains motionless. This is fine for small ripples, but cannot represent larger waves.

URL
https://catlikecoding.com/unity/tutorials/flow/waves/

HTMLplay_arrow

https://catlikecoding.com/unity/tutorials/flow/waves/tutorial-image.jpg
Multiple Scenes
Multiple Scenesmore_vert
2018-07-18T18:09:33+00:00
Post file flag
Multiple Scenes 2018-07-18T18:09:33+00:00close

Here's part four of my Object Management series! This time we're focusing on scenes. Besides putting objects in them, scenes themselves can be managed, both in the editor and during play. We create a scene dynamically, load level scenes, and have multiple scenes open in the editor. Getting that all to work flawlessly everywhere requires a little fiddling, but we can handle that.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Reusing Objects

Description
Loading Levels Create a scene in play mode. Move objects between scenes. Work with multiple scenes. Support game levels. If you've completed Reusing Objects before July, be aware that it omitted using Reclaim in BeginNewGame. That's been corrected. When many shapes are instantiated while in play mode, the scene rapidly fills with objects and the hierarchy window can get quite cluttered.

URL
https://catlikecoding.com/unity/tutorials/object-management/multiple-scenes/

HTMLplay_arrow

https://catlikecoding.com/unity/tutorials/object-management/multiple-scenes/tutorial-image.jpg
Comments (4)
user avatar
User #5110659 - 19 Jul 18 14:03
Hey, anyone else notice that the Multiple Scenes tutorial (uploaded under the name Reusing Objects) has disappeared from the site? I assume due to the naming issue but I don't know...
user avatar
catlikecoding - 19 Jul 18 14:22
It's right there... just follow the link.
user avatar
User #5110659 - 19 Jul 18 15:22
I know I can follow the link from Patreon but, for website users, they may not be able to see the tutorial, as shown in the screenshot here: https://imgur.com/a/D92sXwh
user avatar
catlikecoding - 19 Jul 18 15:46
The page has been updated yesterday. You probably have a cached older version. Try a reload/refresh.
Directional Flow
Directional Flowmore_vert
2018-06-29T18:28:53+00:00
Post file flag
Directional Flow 2018-06-29T18:28:53+00:00close

Part two of the flow series moves on to directional patterns. The idea is simple: rotate the water pattern to align with the flow direction. However, getting a good result when flow isn't uniform requires a bit more work...


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Directional Flow

Description
Tiling Liquid Align a texture with the flow direction. Partition the surface into tiles. Seamlessly blend tiles. Obfuscate visual artifacts. When distorting a texture to simulate flow, it can end up getting stretched or squashed in any direction. This means that it must look good no matter how it gets deformed.

URL
https://catlikecoding.com/unity/tutorials/flow/directional-flow/

HTMLplay_arrow

https://catlikecoding.com/unity/tutorials/flow/directional-flow/tutorial-image.jpg
Comments (1)
user avatar
User #12763689 - 6 Aug 18 05:57
Hello
Preview: Directional Flow
Preview: Directional Flowmore_vert
2018-06-24T19:30:01+00:00
Post file flag
Preview: Directional Flow 2018-06-24T19:30:01+00:00close

Coming up next is part two of Flow, and it's about aligning waves with the flow direction. That makes it possible to create more calm rippling water flows, while distortion flow is better for more erratic water movement.

Reusing Objects
Reusing Objectsmore_vert
2018-06-21T16:08:50+00:00
Post file flag
Reusing Objects 2018-06-21T16:08:50+00:00close

Part three of my Object Management series adds shape destruction, creation/destruction automation, and the recycling of shapes. It also supersedes the Object Pools tutorial. Instead of attaching the pools to prefabs (which Unity is finally going to upgrade), they're now attached to factories.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Reusing Objects

Description
Object Pools Destroy shapes. Automate creation and destruction. Build a simple GUI. Track memory allocations with the profiler. Use objects pools to recycle shapes. If we can only create shapes, then their numbers can only increase, until we begin a new game. But nearly always when something gets created in a game, it can also be destroyed.

URL
https://catlikecoding.com/unity/tutorials/object-management/reusing-objects/

HTMLplay_arrow

https://catlikecoding.com/unity/tutorials/object-management/reusing-objects/tutorial-image.jpg
Comments (2)
user avatar
User #5385478 - 21 Jun 18 18:10
Awesome! I literally just finished the tutorial that precedes this one. Perfect timing.
user avatar
catlikecoding - 21 Jun 18 19:33
Excellent!
Flow: Texture Distortion
Flow: Texture Distortionmore_vert
2018-05-30T19:54:55+00:00
Post file flag
Flow: Texture Distortion 2018-05-30T19:54:55+00:00close

The first part of my new Flow series covers distorting a texture with a flow map. It's the technique Valve used to create flowing water in Left 4 Dead 2 and Portal 2, described in SIGGRAPH2010, but I added a few things.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Texture Distortion

Description
Faking Liquid Adjust UV coordinates with a flow map. Create a seamless animation loop. Control the flow appearance. Use a derivative map to add bumps. When a liquid doesn't move, it is visually indistinguishable from a solid. Are you looking at water, jelly, or glass? Is that still pool frozen or not?

URL
https://catlikecoding.com/unity/tutorials/flow/texture-distortion/

HTMLplay_arrow

https://catlikecoding.com/unity/tutorials/flow/texture-distortion/tutorial-image.jpg
Comments (4)
user avatar
User #2405720 - 1 Jun 18 19:44
Great start! Can't wait to play with more of the series!
user avatar
catlikecoding - 4 Jun 18 10:01
So you like to play with water? Lucky you!
user avatar
User #4100180 - 30 May 18 23:39
Just browsed it for now, but looking interesting! I like this series!
user avatar
catlikecoding - 31 May 18 13:40
And were just at the first part!
Upcoming New Series
Upcoming New Seriesmore_vert
2018-05-23T19:19:30+00:00
Post file flag
Upcoming New Series 2018-05-23T19:19:30+00:00close

I'm going to make a few tutorials that cover animating flowing stuff on surfaces. Typically water, but it can be anything that's liquid. The above screenshot shows a classical displacement done with a flow map and a scrolling texture, with a few tweaks. That's going to be the next tutorial.

As I have enough material for multiple tutorials, I'm going to turn it into a series of its own, rather than make them part of Advanced Rendering.

Comments (5)
user avatar
User #4219371 - 28 May 18 19:47
Great! always wanted to dive into this! looking forward to it-
user avatar
User #5004228 - 26 May 18 22:16
Do you plan to address Unity new paradigms with ECS and data-driven approach at some point?
user avatar
catlikecoding - 27 May 18 19:59
Yes, but not yet.
user avatar
User #3706802 - 23 May 18 20:30
Wow, I was just thinking about something like this. Looking forward to it!
user avatar
User #5462188 - 23 May 18 23:36
Looking forward to it! I have learned so much from your tutorials!
Object Variety
Object Varietymore_vert
2018-05-15T16:19:39+00:00
Post file flag
Object Variety 2018-05-15T16:19:39+00:00close

Here is the second part of the new Object Management tutorial series! It extends the first part with support for multiple shapes, materials, and colors. It does this while remaining backwards compatible with the old save file format, so your old saves can still be loaded.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Object Variety

Description
Fabricating Shapes Create a factory for shapes Save and load shape identifiers. Support multiple materials and random colors. Enable GPU instancing. The goal of this tutorial is to make our game more interesting, by allowing the creation of other shapes than just white cubes.

URL
http://catlikecoding.com/unity/tutorials/object-management/object-variety/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/object-management/object-variety/tutorial-image.jpg
Upgrade Planning 2018-05-12T10:50:11+00:00

In preparation for upgrading Curves and Splines, I moved it to the Older Tutorials section. It won't be part of Basics anymore. Instead, it will become its own series.

Before I get to Curves and Splines itself, I'll first wrap up the Basics upgrade, which includes Constructing a Fractal and Frames Per Second. The Object Pools tutorials will be merged into the new Object Management series.

Thank you for your patience!

flag
Condensed Tutorial Index
Condensed Tutorial Indexmore_vert
2018-05-02T19:17:04+00:00
Post file flag
Condensed Tutorial Index 2018-05-02T19:17:04+00:00close

I have given the tutorial index page a refresh, which was overdue. The big tutorial links were fine when there weren't many, but by now required too much scrolling. Especially on mobiles.

Now the listing is much more compact. I eliminated the summaries, but kept the images. Also makes it easier to appreciate the size of the Hex Map series!


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Unity C# and Shader Tutorials

Description
A collection of tutorials for people who want to learn C# and shader programming in Unity. Useful for both novice programmers and veterans who are new to Unity.

URL
http://catlikecoding.com/unity/tutorials/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-27/tutorial-image.jpg
Comments (10)
user avatar
User #787732 - 2 May 18 19:26
Spectacular tutorial series! You have to make a game with this. A randomized multi-level Risk type game where elevation assists or hinders your odds? Terrain type (grass, snow, water) determines travel speed or available attack types. Or an online .io Risk game where you try to take over as much land as possible.
user avatar
catlikecoding - 2 May 18 20:26
No time! Too busy making more tutorials. Hey, why don't you make that game?
user avatar
User #2950296 - 2 May 18 23:52
Yeah, great tutorials, the best I've seen for Unity.
user avatar
catlikecoding - 2 May 18 20:27
I got a request for a dark theme alternative. Is there interest for this? Would you prefer dark?
user avatar
catlikecoding - 4 May 18 21:14
And now there's also a dark theme option!
user avatar
User #289908 - 2 May 18 22:24
Amazing quality and quantity of work in all those tutorials! I have watched it unfold over the years. Hope you can further monetize this asset. IMHO best resource for learning proper in-depth procedural design of Unity3D. CONGRATULATIONS...
user avatar
User #373884 - 2 May 18 22:59
Really hard to read blue link text on the backgrounds which is a bummer because I like the concept! - maybe there's a CSS drop shadow you could use to make the text pop a little more?
user avatar
catlikecoding - 3 May 18 10:04
The tutorial links are images with black blocks below them containing white title links. If not, your browser used an outdated CSS cache.
user avatar
User #373884 - 3 May 18 14:11
Oop. You were right about my CSS cache.
user avatar
catlikecoding - 3 May 18 15:29
Someone asked for little "new" tags, so I added them.
Triplanar Mapping
Triplanar Mappingmore_vert
2018-04-29T10:30:25+00:00
Post file flag
Triplanar Mapping 2018-04-29T10:30:25+00:00close

I finally cover the topic of triplanar mapping! Not only that, we're going to modify our existing include files to work both with and without regular vertex UV coordinates. We end up with an approach that's somewhat like Unity's surface shaders, in that we rely on a surface function to setup the data used for lighting.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Triplanar Mapping, a Unity Tutorial

Description
texturing arbitrary surfaces Remove dependency on UV and tangents. Support a generic surface approach. Use planar projections. Blend between three mappings. The usual way to perform texture mapping is by using the UV coordinates stored per-vertex in a mesh. But this is not the only way to do it.

URL
http://catlikecoding.com/unity/tutorials/advanced-rendering/triplanar-mapping/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/advanced-rendering/triplanar-mapping/tutorial-image.jpg
Persistable Objects
Persistable Objectsmore_vert
2018-04-18T16:10:58+00:00
Post file flag
Persistable Objects 2018-04-18T16:10:58+00:00close

I'm working on a new tutorial series about object management, and this is the first installment. It covers the fundamentals of saving and loading binary data, plus hiding some of the details from other code. The Hex Map series also included saving and loading, but this series will go deeper.

The series begins with a very simple game: just spawn random cubes. It will get more involved later, increasing the complexity of the data that we have to save and load, while remaining fully backwards-compatible.

I haven't mentioned a specific month for when the next installment will be published. I omitted it that because I might some something else in between, instead of sticking to one series until it is finished.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Persisting Objects, a Unity Tutorial

Description
creating, saving, and loading Spawn random cubes in response to a key press. Use a generic type and virtual methods. Write data to a file and read it back. Save the game state so it can be loaded later. Encapsulate the details of persisting data.

URL
http://catlikecoding.com/unity/tutorials/object-management/persisting-objects/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/object-management/persisting-objects/tutorial-image.jpg
Comments (2)
user avatar
User #289908 - 18 Apr 18 18:27
ERROR: Just before Section 2, there is an UnityPackage link that points to a random PNG.
user avatar
catlikecoding - 18 Apr 18 18:29
Fixed! Thanks.
FXAA
FXAAmore_vert
2018-03-30T20:14:11+00:00
Post file flag
FXAA 2018-03-30T20:14:11+00:00close

My latest advanced rendering tutorial goes through how FXAA works. It isn't just a bad filter that tuns images into a blurry mess. At least, not if you configure it well. You'll find that there are more options than just on-off.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
FXAA, a Unity Tutorial

Description
smoothing pixels Calculate image luminance. Find high-contrast pixels. Identify contrast edges. Selectively blend. Search for the end points of edges. Displays have a finite resolution. As a result, image features that do not align with the pixel grid suffer from aliasing. Diagonal and curved lines appear as staircases, commonly known as jaggies.

URL
http://catlikecoding.com/unity/tutorials/advanced-rendering/fxaa/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/advanced-rendering/fxaa/tutorial-image.jpg
Comments (6)
user avatar
User #4657715 - 30 Mar 18 23:47
just talked about it with a friend and said hopefully sb writes a bit more about this topic, nice timing:)! thank you~~
user avatar
catlikecoding - 31 Mar 18 09:14
You're welcome.
user avatar
User #81264 - 1 Apr 18 20:09
Small request - could you create new tutorials in Git repos containing a full Unity project, with each step as a separate commit (or several)? When going over the tutorials sometimes I reach points in which I'm just stuck, some things don't work, and it's quite hard to go over the instructions from the beginning and understanding where I went wrong. Importing the package helps to find code mistakes, but issues with creating the unity project are hard to catch without a full reference.
user avatar
catlikecoding - 1 Apr 18 20:36
Step-by-step repos are unmaintainable, I can't do that. You can import packages and compare the projects. Best is to pay close attention, it prevents the need to backtrack!
user avatar
User #8471231 - 4 Apr 18 16:05
// 0.333 - too little (faster) // 0.250 - low quality // 0.166 - default // 0.125 - high quality // 0.063 - overkill (slower) Are these numbers empirical? Or can it be calculated?
user avatar
catlikecoding - 4 Apr 18 16:57
Empirical, as far as I know. I've seen no analysis of contrast perception relative to local brightness.
Next C# Tutorials 2018-03-20T20:53:27+00:00

With the Hex Map series complete, it's time to move on to another topic.

A natural follow-up would be a series about dealing with more complex unit types. I already hinted at this possibility in the Hex Map series, but the subject isn't specific to hex maps so I kept it out.

I also have some other subjects I'd like to cover at some point and would like to know what you'd like to see as well. Let's hear it!

flag
Comments (9)
user avatar
User #81264 - 21 Mar 18 06:35
Compute shaders and the new nav mesh systems are two things that I just couldn't find any good resources on, so a tutorial might be in place.
user avatar
User #5160003 - 21 Mar 18 10:52
Yes, a tutorial about the new compute shaders would be fantastic. Saw a video of Unity's new compute shaders and multi-threaded Raycasts being used for the purpose of placing objects on a voxel map. Certainly piqued my interests!
user avatar
User #339339 - 29 Apr 18 11:01
Any chance to see Atmospheric events (volumetric clouds, rain, storms...) tutorials?
user avatar
User #8923560 - 20 Mar 18 21:08
How about streamed unity terrain and how to optimize performance?
user avatar
User #9884021 - 18 Apr 18 17:30
Maybe some IA tutorials would be great.
user avatar
User #8601528 - 20 Mar 18 21:15
Machine learning is becoming popular, Unity is coming out with ML-Agents. That could be interesting I think.
user avatar
User #3550308 - 20 Mar 18 21:20
Agreed. This is a hot topic right out of the frying pan...
user avatar
User #7674841 - 22 Mar 18 04:05
Would love to see constant velocity added to Curves and Splines
user avatar
catlikecoding - 23 Mar 18 19:55
That will happen when I upgrade that tutorial.
Hex Map 27: Wrapping
Hex Map 27: Wrappingmore_vert
2018-03-13T15:52:45+00:00
Post file flag
Hex Map 27: Wrapping 2018-03-13T15:52:45+00:00close

This final installment of my Hex Map series covers the much-anticipated topic of how to wrap your map!


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 27, Wrapping, a Unity C# Tutorial

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

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

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-27/tutorial-image.jpg
Comments (14)
user avatar
User #8329185 - 3 May 19 11:31
In tutorial Hex Map 7, there are two steps to fix road mesh flickering: Changing render queue and setting Offset. I'm trying to do similar thing using Shader Graph - Render Queue can be set directly in material, but I can't figure out if there is a way how to easily change shader's Offset. Any ideas?
user avatar
user avatar
User #7948343 - 19 Apr 18 23:50
Thanks for that. Now I have a list of each cell that a unit can move and I am currently highlighting each cell. However I was wondering at a high level how to add effects to continuous segments of the hex grid. For instance when I select a unit, I would like to have a glowing continous outline of the cells that the unit can reach. Similar to what happens in Civilization or Total War games. Just wondering if you had any high-level advice or even a tutorial on your side that covered this type of implementation.
user avatar
catlikecoding - 20 Apr 18 09:12
You can create such an outline by finding the edges between cells that are in and out of range. Finding those can be added to a search for the reachable cells. Keep track of those edges, so you can put an outline on top of them and later remove it.
user avatar
User #34950092 - 9 May 20 13:57
restarting from scratch solves the problem. thanks for your feedback.
user avatar
User #34950092 - 12 May 20 08:51
me again :-) It is again doing that. the texture is not displayed. I found that when adding a UNIT, the map is showing. It looks like the Map is always in play mode, but in edit mode. I've done nothing else than play, stop, play. Any idea that could help me ? thank you again !
user avatar
catlikecoding - 12 May 20 09:33
Yes, that sounds like the fog-of-war unexplored visualization. It's the point that the map cannot be seen. Make sure that the map is in the correct state, which includes setting the correct shader keyword.
user avatar
User #7948343 - 6 Apr 18 04:53
A question on the path-finding Search function. After I select a unit, i want to be able to display all hexes the unit can reach in a single turn based on movement cost. However HexGrid.Search is finding the shortest distance between a start and end cell. What would be required to highlight all possible cells that a unit can reach based on their remaining movement points.
user avatar
catlikecoding - 6 Apr 18 08:49
That goes back to part 15, Distances. Instead of an exhaustive search, you stop when the distance becomes too great. Each cell that gets included can be put in a list, which you then use to highlight the relevant cells.
user avatar
User #7948343 - 8 Apr 18 21:11
awesome thanks, for some reason I was only looking at part 16.
user avatar
User #34950092 - 6 May 20 17:09
Hi Japser, you tutorials are so fabulous. I have one question around the shader you've implemented. It's not compatible with IOS metal and I'm not really good at shader. what would be your advice ? Should I re-start the shader from scratch and keep it compatible with the IOS platform ? I would like to use Amplify Shader (for the ease of use...). thank you again.
user avatar
catlikecoding - 6 May 20 21:15
Which shader is not compatible how? They're all surface shaders. I expect that all logic could be reproduced in ASE, but I have no experience with it.
user avatar
User #34950092 - 8 May 20 18:11
hi Jasper. This is very strange. I don't know why but all of a sudden, the shader are not rendered anymore. in the Scene view, in the game view. i can see all the frames, it's there, but the textures are not rendered. Do you have an idea why Unity, suddenly, stopped working properly with the shaders ? thank you for your help !
user avatar
catlikecoding - 8 May 20 19:57
No, sorry. If something suddenly stopped working, then something suddenly changed and I don't know what. Fog of war got activated (in-game edit mode changed)? Some editor setting changed? You have to figure that out and if you can't check with a fresh project.
Next Advanced Rendering Tutorial? 2018-03-05T19:11:49+00:00

Any requests for the next tutorial in the advanced rendering category? Let me know what you'd like to see. Something else than compute shaders and the SRP though, because those will come later.

flag
Comments (17)
user avatar
User #8106930 - 7 Mar 18 00:39
General guide to making a beautiful scene. I.e. the small amount of work that can get 20% of results.
user avatar
User #8106930 - 7 Mar 18 00:40
A list of different overall athetics and how to achieve them
user avatar
User #2744232 - 6 Mar 18 14:42
maybe something about 3d stereo render, will be great.
user avatar
User #3550308 - 5 Mar 18 19:39
Being a game development professor, my students regularly come to me and say they want to use UE4 because "it looks so good"... and every time I have to explain to them that you can achieve the same looks, but in Unity you actually need to know what you're doing (as opposed to UE4 where the presets make it look "good" but stereotype). Could you just back us up with this, showing that the whole UE4 vs. Unity discussion should at least not be based on rendering quallity?
user avatar
catlikecoding - 11 Mar 18 20:13
I can't really say more about the issue than you do. They start out thinking shallow and you're there to help them to think deep.
user avatar
User #3550308 - 11 Mar 18 20:30
True. All I would have thought of here is a tutorial how to create a template scene (lighting, settings, etc.) in Unity in which you could just "drop your assets" and everyone would go "Wow! that looks damn good... and THATS Unity?" Something along the spirit of this https://www.youtube.com/watch?v=owZneI02YOU but with deeper technical background.
user avatar
User #2396854 - 5 Mar 18 19:24
I'd like to see some tutorials on fancy outline shaders and/or dealing with obscured objects. The outline shader that the Unity editor uses in the Scene view being a good example. It works differently depending on whether or not the selected object(s) are obscured and also factors multiple objects.
user avatar
User #46358 - 5 Mar 18 19:25
I second this!
user avatar
User #3550308 - 5 Mar 18 19:42
Good outline shaders (e.g. also working with orthographic cameras) are regularly an issue with our students. They seem to be struggling a lot with this deceivingly simple looking problem.
user avatar
User #5160003 - 5 Mar 18 20:58
Third! This would be very interesting!
user avatar
User #373884 - 6 Mar 18 02:05
Ambient occlusion would be great!
user avatar
User #6423289 - 5 Mar 18 22:29
I'd be very interested in a tutorial on techniques for volumetric lighting!
user avatar
User #6873637 - 5 Mar 18 19:16
I would love to see a dynamic snow shader. With a direction-based accumulation.
user avatar
User #2571002 - 6 Mar 18 14:26
I'd love to learn about different anti-aliasing methods, i.e. MSAA, SSAA, FXAA, maybe even TAA. I know what kind of results they produce and I have a vague idea of how they work, but I've never sat down to look at how they're actually implemented.
user avatar
User #9963373 - 6 Mar 18 10:41
I agree with @Fravic Fernando. I'm rellay interrested by Volometrics Light. Why not something with Aura (It's free and open source : https://github.com/raphael-ernaelsten/Aura )
user avatar
catlikecoding - 11 Mar 18 20:15
I might cover the volumetric light subject, but I don't cover 3rd party material.
user avatar
User #9963373 - 11 Mar 18 21:07
OK :)
Depth of Field
Depth of Fieldmore_vert
2018-02-28T22:19:57+00:00
Post file flag
Depth of Field 2018-02-28T22:19:57+00:00close

After creating a bloom post-processing effect, we can move on to depth-of-field! Again we follow the same approach as used in Unity's post effect stack v2.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Depth of Field, a Unity Tutorial

Description
bending light Determine the circle of confusion. Create bokeh. Focus and unfocus an image. Split and merge foreground and background. We perceive light because we sense photons hitting our retinas. Likewise, cameras can record light because photons hit their film or image sensor.

URL
http://catlikecoding.com/unity/tutorials/advanced-rendering/depth-of-field/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/advanced-rendering/depth-of-field/tutorial-image.jpg
Comments (2)
user avatar
User #46358 - 28 Feb 18 22:32
Wow, I actually understand what the heck Depth of Field is now :D Great tutorial!
user avatar
catlikecoding - 1 Mar 18 11:11
Now you can focus your attention!
Hex Map 26: Biomes and Rivers
Hex Map 26: Biomes and Riversmore_vert
2018-02-20T15:58:11+00:00
Post file flag
Hex Map 26: Biomes and Rivers 2018-02-20T15:58:11+00:00close

This tutorial wraps up the map generation algorithm by adding support for rivers and more complex biomes.

The rivers are created after the water cycle, so don't actually influence cell moisture. This makes it possible for them to flow through dry regions.

Biomes are assigned according to a matrix based on temperature and moisture bands. Some fine-tuning is done afterwards to add extra variety. Finally, underwater cells get some attention as well.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 26, Biomes and Rivers, a Unity C# Tutorial

Description
Biomes and Rivers Have rivers originate from high and wet cells. Create a simple temperature model. Use a biome matrix for cells, then tweak it. Rivers are a consequence of the water cycle. Basically, they're formed by runoff that dug a channel via erosion. This suggests that we could add rivers based on a cell's runoff.

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

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-26/tutorial-image.jpg
Hex Map 25: Exporation Bug Fix 2018-02-13T12:14:52+00:00

One thing I failed to mention in Hex Map 25 is that the map debug visualization interferes with the exploration system. We're using the blue channel, which is also used to indicate whether a cell's visibility is in transition. This becomes an problem when moving units around a freshly-generated map. Cells with maximum debug values of 1 refuse to become visible.

I've decided to eliminate this issue, by changing SetMapData to use a maximum of 254 instead of 255. This keeps exploration functional. Unit movement will wipe out the debug data, which is fine.

The change is an extra step after creating HexCellShaderData.SetMapData, in section 1.1 Visualizing Data.

flag
Preview: Hex Map 26
Preview: Hex Map 26more_vert
2018-02-12T18:47:01+00:00
Post file flag
Preview: Hex Map 26 2018-02-12T18:47:01+00:00close

Upcoming Hex Map features: temperature, biomes, rivers, some lakes, and a small bug fix.

The screenshot's foreground contains mostly taiga with many rivers, high-elevation tundra, snowcaps, and a small temperate forested coastline on the right. Behind it is a dry rocky and desert region on the left, and more temperate terrain in the center. Further away are tropical forests. The seafloor has some variety too.

Bloom
Bloommore_vert
2018-01-31T16:22:45+00:00
Post file flag
Bloom 2018-01-31T16:22:45+00:00close

Here is a new advanced rendering tutorial, and it's about bloom! The bloom post-processing effect can be used to make things glow, or for other artistic effects. It's been overused a lot, giving it a negative reputation, but that's not stopping you from creating something good with it.

Covering an image effect like bloom has been a longstanding request. Anything else you'd like to see covered in a future advanced rendering tutorial? Let me know!


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Bloom, a Unity Tutorial

Description
blurring light Render to a temporary texture. Blur via downsampling and upsampling. Perform progressive sampling. Apply a box filter. Add bloom to an image. The amount of light that a display can produce is limited. It can go from black to full brightness, which in shaders correspond to RGB values 0 and 1.

URL
http://catlikecoding.com/unity/tutorials/advanced-rendering/bloom/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/advanced-rendering/bloom/tutorial-image.jpg
Hex Map 25: Water Cycle
Hex Map 25: Water Cyclemore_vert
2018-01-22T16:42:18+00:00
Post file flag
Hex Map 25: Water Cycle 2018-01-22T16:42:18+00:00close

We're going to create a partial water cycle simulation on top of our generated terrain and use that to determine cell biomes. A simple simulation can already produce an interesting climate.

I've also upgraded to Unity 2017.3.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 25, Water Cycle, a Unity C# Tutorial

Description
Water Cycle Display raw map data. Evolve cell climates. Create a partial water cycle simulation. Up to this point our map generation algorithm only adjusts the elevation of cells. The biggest difference between cells is whether they are submerged or not. While we also set different terrain types, that's just a simple visualiation of elevation.

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

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-25/tutorial-image.jpg
Comments (3)
user avatar
User #5160003 - 22 Jan 18 17:55
Thank you, sir! Alas, this article does not appear to have included a link to download the .pdf.
user avatar
catlikecoding - 22 Jan 18 18:40
Alas, I forgot to include the link. But rejoice, for I have corrected that mistake!
user avatar
User #5160003 - 22 Jan 18 20:15
And all was once again right with the world. :D Thank you!
Preview: Hex Map 25
Preview: Hex Map 25more_vert
2018-01-16T16:50:53+00:00
Post file flag
Preview: Hex Map 25 2018-01-16T16:50:53+00:00close

Here's a screenshot showing the moisture level per cell, which is then used to set the terrain type. It's determined with a partial water cycle simulation, calculating evaporation, wind, precipitation, and runoff.

In this test case, the dominant wind direction is moderately northwest. The desert regions are mainly caused by rain shadows. Without a dominant wind direction, only the two largest landmasses up north would have some desert at their centers.

Comments (3)
user avatar
User #46358 - 20 Jan 18 16:09
Congrats on reaching the 1K goal! Well-deserved -- here's to the next 1K :)
user avatar
User #8927899 - 18 Jan 18 02:37
[takes out notepad]
user avatar
User #8601528 - 20 Jan 18 04:19
Congrats Jasper! Way to go! Made it to 1K! Woohoo!
Mathematical Surfaces
Mathematical Surfacesmore_vert
2018-01-10T17:50:36+00:00
Post file flag
Mathematical Surfaces 2018-01-10T17:50:36+00:00close

Part two of the Graphs upgrade has been released! It follows Building a Graph and covers the rest of what was covered in the old tutorial, except that I've included unconstrained surfaces instead of volumetric functions.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Mathematical Surfaces, a Unity C# Basics Tutorial

Description
Sculpting with Numbers Support multiple function methods. Use a delegate and enumeration. Display 2D functions with a grid. Define surfaces in 3D space. After finishing the previous tutorial, we have a line graph that shows an animated sine wave while in play mode. It is also possible to show other mathematical functions.

URL
http://catlikecoding.com/unity/tutorials/basics/mathematical-surfaces/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/basics/mathematical-surfaces/tutorial-image.jpg
Comments (2)
user avatar
User #6893897 - 11 Jan 18 03:43
nice - you the Man Catlike dude.
user avatar
catlikecoding - 11 Jan 18 10:33
Thanks.
Surface Displacement
Surface Displacementmore_vert
2017-12-24T18:06:41+00:00
Post file flag
Surface Displacement 2017-12-24T18:06:41+00:00close

After figuring out how tessellation works, the next step is to actually do something useful with it. In this tutorial, we'll combine tessellation with vertex displacement, turning an otherwise boring flat plane into an interesting surface. The idea is similar to parallax mapping, except now we're using actual triangles to create complex geometry instead of faking it.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Surface Displacement, a Unity Tutorial

Description
moving vertices Adjust vertex positions on the GPU. Tessellate shadow geometry. Skip tessellating unseen triangles. Meshes are usually made up of triangles, which are always flat. The illusion of curvature is added via vertex normals. Normal maps can be used to add the illusion of more surface irregularities, smaller than individual mesh triangles.

URL
http://catlikecoding.com/unity/tutorials/advanced-rendering/surface-displacement/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/advanced-rendering/surface-displacement/tutorial-image.jpg
Hex Map 23 Fix 2017-12-18T15:20:39+00:00

A great patron just made we aware of a bug introduced in Hex Map 23. I omitted adjusting the saving and loading code to deal with negative elevation. The result is that cells with negative elevation get stored with very high elevation instead.

I have added section 4.4 Storing Negative Elevation to Hex Map 23. Give it a look. I've chosen to offset elevation by 127 in the save data. You could also just use an integer, requiring three extra bytes per cell.

flag
Hex Map 24: Regions and Erosion
Hex Map 24: Regions and Erosionmore_vert
2017-12-14T22:12:57+00:00
Post file flag
Hex Map 24: Regions and Erosion 2017-12-14T22:12:57+00:00close

In this tutorial we continue with our procedural map generation. We add a water border around the map, cut it into separate regions, and apply a variable amount of erosion.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 24, Generating Land, a Unity C# Tutorial

Description
Regions and Erosion Add a border of water around the map. Split the map into multiple regions. Apply erosion to grind away cliffs. Move land around to smoothen the terrain. Because we're pushing up chunks of land at random, it is possible that land ends up touching the edge of the map.

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

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-24/tutorial-image.jpg
Comments (4)
user avatar
User #289908 - 16 Dec 17 20:53
Got it! Thank you...
user avatar
User #289908 - 16 Dec 17 17:55
I wanted to quickly see erosion in action, so... Load UnityPackage in new project. Play. Got error "Input Axis Rotation is not setup" so I could not reposition the map. Went to InputManager panel. Clueless about "axis rotation"! Googled with no helpful results. I am sure you covered InputManager settings for Hex Maps in earlier tutorials. You can point me there (having the std desktop keyboard/mouse with no joystick). However, deeper question is how do you debug errors involving InputAxis settings for random scripts.
user avatar
User #289908 - 16 Dec 17 18:09
In HexMapCamera.cs, I found Input.GetAxis("Rotation") to call AdjustRotation. Could just comment it out! Looked again at the InputManager panel. Clueless!!! Don't see 'Rotation' setting anywhere! Unity doc also does not mention "Rotation" in InputManager. And, Unity Answers are also unhelpful. Any suggestions?
user avatar
catlikecoding - 16 Dec 17 19:40
It's for the rotation of the camera, added in Hex Map 5, section 2.3 Rotating. As the aside there mentions: "The input settings are project-wide settings. As such, they are not included in unity packages. Fortunately, it is easy to add it yourself. If you don't, you'll get an exception complaining about a missing input axis."
Tessellation
Tessellationmore_vert
2017-11-30T16:01:55+00:00
Post file flag
Tessellation 2017-11-30T16:01:55+00:00close

Now that we can conveniently show the wireframe of rendered triangles, we move on to subdividing them on the GPU. While conceptually straightforward, tessellation is a complicated process for the GPU to pull off, requiring multiple stages that we have to program.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Tessellatino, a Unity Tutorial

Description
subdividing triangles Create hull and domain shaders. Subdivide triangles. Control how things get tessellated. Tessellation is the art of cutting things into smaller parts. In our case, we're going to subdivide triangles so we end up with smaller triangles that cover the same space.

URL
http://catlikecoding.com/unity/tutorials/advanced-rendering/tessellation/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/advanced-rendering/tessellation/tutorial-image.jpg
Comments (5)
user avatar
User #5004228 - 22 May 18 21:18
Hello catlike, I have a question, if I want to do tesselation on a big terrain, so my terrain is seperated on different meshes, how do I keep the coherence between the different meshes, in order to avoid seams and holes? By the way, your work is amazing, thank you!
user avatar
catlikecoding - 23 May 18 19:11
As long as you use the same data and approach, you get the same tessellation factor. So make sure that the vertices are aligned and you're tessellating based on edge length and view distance.
user avatar
User #5004228 - 24 May 18 11:31
Oh, I get it thanks.
user avatar
User #5004228 - 26 May 18 22:20
Works like a charm, many thanks to you. Would you recommend a reference in the practical cookbook style for shaders and rendering pipeline in unity ? I am working in small simplified grand strategy game and I am currently tackling the map rendering: textured terrain with mountains and elevation, but also borders and map overlay (political, diplomatic etc... ). I've done all your tutorials on rendering and also leared a lot about shader with open gl, but what I need is like... a way to find "best practices" ?
user avatar
catlikecoding - 27 May 18 20:01
There are no one-size-fits-all best practices. Try to do as little as possible as cheaply as possible.
Hex Map 23: Generating Land
Hex Map 23: Generating Landmore_vert
2017-11-24T20:17:17+00:00
Post file flag
Hex Map 23: Generating Land 2017-11-24T20:17:17+00:00close

We're moving on to procedural map generation! The first step is to push some land up from the ocean floor.

Note that the land in this tutorial is rougher than in the screenshots of the last preview post. That's because those maps had erosion applied to them. I left that out of Hex Map 23, because it got too big. The foundation of land proved to be plenty material for one tutorial.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 23, Generating Land, a Unity C# Tutorial

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

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

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-23/tutorial-image.jpg
Comments (8)
user avatar
User #7948343 - 8 Dec 17 01:46
Awesome to be able to auto generate maps. One thing, I found it a pain to add a river to the auto generated terrain. I set the river box to yes but i always forget to change the elevation slider so the river gets added but the terrain elevation changes when I do not mean for it to do so. Is there a way add a river without having to ensure the elevation slider is correct? i.e. just add the river without changing anything else to the cell like elevation etc
user avatar
catlikecoding - 8 Dec 17 16:02
You can change the check for whether elevation should be adjusted, so it only does this when river-editing is disabled.
user avatar
User #8601528 - 30 Nov 17 03:11
This tutorial series is great! I'm wondering if I wanted to generate a hexagonal shaped map instead of a rectangular map, some reading I found stated using x+y+z=0 would achieve this. I'm just not sure how to apply it.
user avatar
catlikecoding - 30 Nov 17 11:28
You can create an hexagonal map by only creating cells within a certain distance to the center cell. Skip the creation of all cells that would lie beyond that. You'll have to add a few extra null checks when connecting neighbors, when saving and loading, etc.
user avatar
catlikecoding - 30 Nov 17 11:30
In your other message you mentioned hexagonal chunks, not maps. Using hexagonal chunks would complicate the map-creation process somewhat but won't make a much difference beyond that.
user avatar
User #8601528 - 30 Nov 17 12:26
I was exploring either situation, wasn't sure how to approach it. But you've given me a starting point to try, thanks!
user avatar
User #8734837 - 6 Dec 17 10:57
Loving this tutorials, specially because of the great coding style. Any plans for a round map where if we reach the end we will start seeing the begining again? (Civilization style)
user avatar
catlikecoding - 7 Dec 17 10:34
A wrapping map is one of the last things I'd like to cover, yes.
Preview: Hex Map 23
Preview: Hex Map 23more_vert
2017-11-19T13:12:41+00:00
Post file flag
Preview: Hex Map 23 2017-11-19T13:12:41+00:00close

The next Hex Map tutorial is going into procedural terrain generation. We'll generate random terrain elevation, controlled by a bunch of settings. The above screenshot contains four maps to give you an idea of what kind of terrain we will create.

Comments (1)
user avatar
User #6873637 - 20 Nov 17 15:46
Nice!
Building a Graph
Building a Graphmore_vert
2017-11-13T14:30:54+00:00
Post file flag
Building a Graph 2017-11-13T14:30:54+00:00close

I decided to create an upgrade of the old Graphs tutorial. It fits nicely after Game Objects and Scripts. I split it in two parts. This is the first one, introducing enough to visualize a single animating graph. The next part will cover multiple functions and higher dimensions.

The new version doesn't use a particle system. Cubes are used for points instead. Instantiating objects is more fundamental and generally useful. Also, Unity's particle system has become so complex that it deserves its own tutorial at some point.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Building a Graph, a Unity C# Basics Tutorial

Description
Visualizing Math Create a prefab. Instantiate a line of cubes. Show a mathematical function. Create a custom shader. Make the graph move. A good understanding of mathematics is essential when programming. At its most fundamental level math is the manipulation of symbols that represent numbers.

URL
http://catlikecoding.com/unity/tutorials/basics/building-a-graph/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/basics/building-a-graph/tutorial-image.jpg
Comments (10)
user avatar
User #5565170 - 20 Jan 18 03:58
Hey, I have just become a patron of your work. Absolutely amazed by the first tutorial. I found some typos on the second one: "Does this guaranteed..." -> "Does this guarantee" "No, all it does it..." -> "No, all it does is"
user avatar
catlikecoding - 20 Jan 18 19:59
Thanks and thank you! I fixed the typos.
user avatar
User #2998159 - 13 Nov 17 21:56
Thank you so much for going back to simple concepts. I really want to be able to make my way up to your hex grid series and more of these beginner to intermediate tutorials would be amazing. One question: (As a beginner) it's not immediately obvious how I would practically apply what I'm learning here. Would you mind explaining with a few examples please? Thanks, Jasper. (Sorry, I know this sounds dumb, but I'm not a programmer so it takes it bit more to get it through my thick skull.)
user avatar
catlikecoding - 14 Nov 17 12:22
Once you can use geometry to show a graph, you can apply the same approach to any collection of geometry that has to be positioned procedurally, like moving platforms, or elevators, or morphing terrain, or music visualization, etc.
user avatar
User #4994041 - 13 Nov 17 17:35
I'd love to see voxel's with the particle system. Is that possible? I've always had the idea of making a point cloud sit above the geometry of an environment and allow the user to push the particles as they walked.
user avatar
catlikecoding - 14 Nov 17 12:18
The old Graphs tutorial uses particles to build a crude voxel volume, but it's not practical for anything large. What you describe isn't a voxel system, but a regular particle system that interacts with physics, which is possible in Unity.
user avatar
User #8402900 - 19 Nov 17 20:06
Can you please make a tutorial for this?
user avatar
catlikecoding - 20 Nov 17 11:50
I'll likely do a new particle system tutorial at some point. Whether that'll involve physics, I don't know yet.
user avatar
User #8402900 - 21 Nov 17 03:46
Question about your Patreon tiers? Why do you only have 1 or 2 slots for Super and Mega Patreon. I wanted to donate more, but couldn't :)
user avatar
catlikecoding - 21 Nov 17 11:05
You can set a custom amount to pledge. So you can donate more! The rewards tiers are merely suggestions. I've limited the higher ones because experience taught me they are highly volatile when unrestricted. I prefer a bit more predictable patronage.
Flat and Wireframe Shading
Flat and Wireframe Shadingmore_vert
2017-10-25T14:28:56+00:00
Post file flag
Flat and Wireframe Shading 2017-10-25T14:28:56+00:00close

This is the first tutorial in the Advanced Rendering category. It's about how to apply flat shading and a wireframe effect to any mesh. The main point is to introduce screen-space derivatives and geometry shaders. Besides that, it's a stepping stone to tessellation, which will be the next topic.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Flat and Wireframe Shading, a Unity Tutorial

Description
derivatives and geometry Use screen-space derivatives to find triangle normals. Do the same via a geometry shader. Use generated barycentric coordinates to create a wireframe. Make the wires fixed-width and configurable. Meshes consist of triangles, which are flat by definition. We use surface normal vectors to add the illusion of curvature.

URL
http://catlikecoding.com/unity/tutorials/advanced-rendering/flat-and-wireframe-shading/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/advanced-rendering/flat-and-wireframe-shading/tutorial-image.jpg
Comments (3)
user avatar
catlikecoding - 25 Oct 17 18:10
I forgot to reduce the barycentric coordinates interpolator to a float2. Got pointed out on twitter. Made that change.
user avatar
User #8322143 - 3 Nov 17 19:47
I just became a Patreon today. Really, thank you for making these. They've opened up a whole world to me. I'm a lawyer, and I just started playing with Unity after realizing how much I loved running a D&D campaign over the last year, and making more and more of my own content. The way you have selected critical, complex concepts and broken them down into inviting, easy-to-understand lessons is masterful. Also, these are way more appealing to my learning style than YouTube videos. Hope you keep it up!
user avatar
catlikecoding - 5 Nov 17 11:02
Great to hear! Thanks to your support, I will keep it up.
CG Documentation Links 2017-10-18T18:32:28+00:00

I just noticed that the CG documentation can again be found on the NVIDIA website, via http://developer.download.nvidia.com/cg/. I have adjusted the shader function links in tutorials accordingly.

flag
Hex Map 22: Advanced Vision
Hex Map 22: Advanced Visionmore_vert
2017-10-14T14:36:24+00:00
Post file flag
Hex Map 22: Advanced Vision 2017-10-14T14:36:24+00:00close

This time we're going to enhance our vision! First, we'll make the transition between visible and invisibile cell states gradual instead of immediate. After that, we'll use cell elevation to create more realistic and strategically interesting vision rules. Then we'll make the map edge permanently hidden, to have it fade out and allow rivers, roads, and units to seemingly exit the map.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 22, Advanced Vision, a Unity C# Tutorial

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

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

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-22/tutorial-image.jpg
Comments (5)
user avatar
User #7948343 - 26 Oct 17 23:24
You said in this tutorial, "I decided to not have features impact vision, but you could for example have dense forests or walls add effective elevation to a cell." I was just wondering at a high level what would be needed to block vision for dense forest etc.
user avatar
catlikecoding - 27 Oct 17 08:35
You could treat the forest level as extra cell elevation, perhaps only for the highest level. Or skip adding a cell's neighbors if it's a dense forest, so the forest itself remains visible but blocks view.
user avatar
User #7948343 - 14 Nov 17 23:26
Ok thanks. I added a simple line for testing to HexGrid.GetVisibleCells within the searchFrontier while loop. This seems to work when I edit the terrain first and then add a unit. However if I add a unit first, then add plantlevel, then this doesn't seem to work. i.e. I can still see the hexes beyond the trees. Do I need to refresh visibility of the units after setting the plantlevel of a hexcell? if (current.PlantLevel > 0) { continue; }
user avatar
catlikecoding - 15 Nov 17 10:09
Yes, when plant level affects visibility, changing it must trigger a visibility reset, just like elevation.
user avatar
User #7948343 - 15 Nov 17 19:49
Oh of course, thank you. Sorry I am still very new to unity and programming in general. Just for completeness (if other people read these comments later), I created a clone of the ShaderData.ViewElevationChanged() as below. Obviously it would make more sense to have a single function that both elevation and plantLevel call. However for testing I just wanted to keep what I do totally seperate form your code until I am sure it (more or less) works. :) Thanks again. Love this tutorials on hexmaps. public void ViewPlantLevelChanged() { needsVisibilityReset = true; enabled = true; } Then simply called that when the HellCell PlantLevel was set. public int PlantLevel { get { return plantLevel; } set { if (plantLevel != value) { plantLevel = value; ShaderData.ViewPlantLevelChanged(); //I ADDED THIS LINE RefreshSelfOnly(); } } }
Advanced Rendering Topics? 2017-10-03T14:54:15+00:00

Now that the Rendering series is finished, we can move beyond what's covered by Unity's standard shader and rendering pipeline. This is your chance to let me know what you'd like to see covered!

flag
Comments (11)
user avatar
User #339339 - 3 Oct 17 16:47
AI?
user avatar
User #7071696 - 3 Oct 17 15:15
Tessellation would be awesome
user avatar
User #373884 - 3 Oct 17 15:31
As someone who has done work in signed distance fields I feel like you'd have really valuable notes!! - otherwise it could be interesting to break down common screen effects like bloom and ambient occlusion.
user avatar
User #3009218 - 3 Oct 17 21:42
What about geometry shades? Or writing customs Anti Aliasing?
user avatar
User #3668376 - 3 Oct 17 15:02
How about alpha masking?
user avatar
User #7367424 - 3 Oct 17 15:12
What about tessellation and/or advance water shaders?
user avatar
User #3555728 - 3 Oct 17 15:13
Compute shaders, maybe coupled with Data visualization/manipulation with millions of particles
user avatar
User #289908 - 4 Oct 17 02:52
Instead of using parallax mapping to create realistic brick walls for video games, what about using parallax mapping and related rendering/shader techniques for data visualization showing complex relationships - something useful...
user avatar
User #3668376 - 4 Oct 17 18:56
"Something useful" is pretty subjective. I personally have zero need for data visualization (though it IS cool), but while developing a game, parallax mapping for "brick walls for video games" is certainly far more valuable. YMMV...
user avatar
User #952953 - 3 Oct 17 15:07
Hi, love your tutorials! Maybe something about compute shaders?
user avatar
User #3114982 - 3 Oct 17 14:58
I suppose Image Effects would be the natural next topic?
Rendering 20: Parallax
Rendering 20: Parallaxmore_vert
2017-09-30T17:00:37+00:00
Post file flag
Rendering 20: Parallax 2017-09-30T17:00:37+00:00close

The last effect that we add to our custom shader is parallax mapping. First, we duplicate the same parallax approach that the standard shader supports. Then we'll move beyond that and use raymarching to create a more convincing effect.

This tutorial is the last part of the rendering series, covering the fundamentals of shading and Unity's rendering pipeline. Now we can move on to more advanced and specialized techniques.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Rendering 20, Parallax, a Unity Tutorial

Description
Parallax Shift texture coordinates based on view direction. Use a height field to create the illusion of depth. Trace a ray through a height field. Approximate or search for an intersection point. Due to perspective, the observed relative position of things that we see changes when we adjust our point of view.

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

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/rendering/part-20/tutorial-image.jpg
Preview: Rendering 20
Preview: Rendering 20more_vert
2017-09-26T17:37:54+00:00
Post file flag
Preview: Rendering 20 2017-09-26T17:37:54+00:00close

Here's a screenshot of a single quad for the next rendering installment. We're going to cover the last big thing of the standard shader that we don't support yet, and improve it a little.

Comments (4)
user avatar
User #6873637 - 26 Sep 17 18:02
Displacement map?
user avatar
catlikecoding - 27 Sep 17 08:26
Yes, one of variants of parallax mapping.
user avatar
User #3063751 - 27 Sep 17 02:17
Parallax Mapping?
user avatar
catlikecoding - 27 Sep 17 08:26
Indeed!
Hex Map 21: Exploration
Hex Map 21: Explorationmore_vert
2017-09-21T14:08:22+00:00
Post file flag
Hex Map 21: Exploration 2017-09-21T14:08:22+00:00close

After adding support for visibility, we take it one step further and support exploration as well.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 21, a Unity C# Tutorial

Description
Exploration See everything while editing. Keep track of explored cells. Hide what's yet unknown. Have units avoid unexplored regions. The idea of exploration is that cells that have not yet been seen are unknown, and thus invisible. Instead of darkening those cells, they shouldn't be shown at all.

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

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-21/tutorial-image.jpg
Preview: Hex Map 21
Preview: Hex Map 21more_vert
2017-09-11T15:34:29+00:00
Post file flag
Preview: Hex Map 21 2017-09-11T15:34:29+00:00close

Something has been lost... or hasn't been found yet.

Comments (3)
user avatar
User #7367424 - 11 Sep 17 15:54
I really like your Hex Map Series. What is the roadmap of this tutorial? What about advance shaders`? For example to use tessellation in order to get sand dunes and hills? Or more advance river/water shaders?
user avatar
catlikecoding - 12 Sep 17 11:00
After exploration I'll likely move on to procedural map generation. Advanced shaders for water and such is something to cover separately, after the Rendering series is complete. Tessellation is also for a separate series.
user avatar
User #7367424 - 12 Sep 17 11:12
Procedural Map Generation is also a very interesting topic. I'm looking forward to read it! And having another tutorial series about advance shaders is also very good.
New Upgrade Goals 2017-09-11T10:46:37+00:00

I added two tutorial upgrade goals to potentially make them more interesting. At $800, I'll add constant movement to Curves and Splines. At $1000, I'll add a hash function and seed to Noise. Many people have been asking for those features, so let's make it happen!

flag
Comments (4)
user avatar
User #7763286 - 20 Sep 17 09:44
I'm also a supporter of you, and I hope you get better and better I use translation software translation
user avatar
catlikecoding - 21 Sep 17 14:05
I hope the automatic translation works good enough. Some people have made translated versions of some of my tutorials, but I cannot guarantee their quality.
user avatar
User #7674841 - 13 Sep 17 02:38
Became a patron today to help get the constant movement tutorial released. Thanks for your work!
user avatar
catlikecoding - 13 Sep 17 10:29
Thank you too!
Game Objects and Scripts
Game Objects and Scriptsmore_vert
2017-09-08T15:30:35+00:00
Post file flag
Game Objects and Scripts 2017-09-08T15:30:35+00:00close

I have upgraded the old Clock tutorial! It is now known as Game Objects and Scripts. This is part of my overall upgrade process for the older tutorials. I put that on hold until Unity 2017 was firmly established.

You already know all the stuff it covers, right? Still, you could give it a look to see what has changed. It will also contain a link to the old tutorial for a while, so you can compare them if you like.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Game Objects and Scripts, a Unity C# Basics Tutorial

Description
Creating a Clock Build a clock with simple objects. Write a C# script. Rotate the clock's arms to show the time. Animate the arms. Open Unity and create a new 3D project. You don't need any extra asset packages and you also don't need analytics.

URL
http://catlikecoding.com/unity/tutorials/basics/game-objects-and-scripts/

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/basics/game-objects-and-scripts/tutorial-image.jpg
Comments (14)
user avatar
User #6958682 - 8 Sep 17 18:10
The original clock tutorial was the first meaningful thing i did in unity, it was a massive help.
user avatar
catlikecoding - 11 Sep 17 10:33
It's kind-of a classic at this point. I hope its upgrade will help many more people for a long time.
user avatar
User #289908 - 8 Sep 17 16:44
THANK YOU!!! It has been hard for me to follow recent tutorials, especially the rendering series. There are a lot of basic skills in Clock for which I need a refresh! I will crawl thru the new Clock paragraph by paragraph! PS - still remember the particle viz tutorial. Can you bump it higher on your upgrade list?
user avatar
catlikecoding - 11 Sep 17 10:31
You're welcome! The Graphs tutorial is very old and not on my upgrade list. I might make a spiritual successor at some point, though.
user avatar
User #2359989 - 20 Sep 17 03:58
I'm more or less a beginner programmer but I'm able to work through the tutorials if I do them slowly. Just went through the mesh series and it's been massively rewarding! No need to dumb anything down imo.
user avatar
catlikecoding - 21 Sep 17 14:05
Good to hear!
user avatar
User #2998159 - 9 Sep 17 04:38
Hey Jasper. I'm really looking forward to you updating your old tutorials. I'm a beginner programmer so like Richard said above I haven't been able to follow your recent stuff. I really hope you can get to your games like the runner and tube racing thing. Thanks for the awesome work.
user avatar
catlikecoding - 11 Sep 17 10:34
More upgrades are coming! Do let me know if you get stuck somewhere.
user avatar
User #2998159 - 11 Sep 17 10:50
Thanks, man. I know there's pressure from more experienced programmers to do advanced tutorials instead of for beginner/intermediate folk like myself but having some up-to-date tutorials to smooth the gap between beginner to intermediate to advanced would be so amazing. I found the current difficulty ramp of your saw a massive spike and it all started going way over my head. I really enjoyed those first few tutorials and they taught me so much and I'd love to get back to learning through your stuff. I know this isn't much of an incentive, but I would happily back you again.
user avatar
catlikecoding - 11 Sep 17 11:36
What's your judgment on the complexity of the Mesh Basics, Noise, and Marching Squares series?
user avatar
User #2998159 - 13 Sep 17 23:50
Hey Jasper! Sorry it took me so long to get back to you, I've been sick. (Also, sorry this is a bit long.) They're both things I'd love to know but (for me personally) they get pretty heavy, pretty quick. I *think* it's because they go straight into building something from literally nothing. Creating vertices and dealing with mesh renderers, textures etc was very overwhelming and it became an exercise of copying code instead of understanding it. I found the length of those tutorials quite daunting as a beginner, although I'm sure that's not an issue for more advanced programmers because they'd understand larger chunks of code so they'd breeze through it. Maybe it's as simple as limiting the scope of each tutorial with a beginner focus (and maybe even making a series instead)? Doubling down on one concept and keeping it as lean as possible might be the way to ease us newbies into the more advanced topics. That may or may not be the right answer but that's what's going through my head as a possible solution.
user avatar
User #6893897 - 14 Dec 17 08:44
Hello sir, I tried to use the Custom Shader we made in the Graph Tutorial in the Fractal tutorial and is enabling via a bool i setup. Problem is batching doesnt work, is this because this shader produces a different effect based on xy coords? Any help appreciated. I joined because I am finding your tutorials awesome.
user avatar
catlikecoding - 14 Dec 17 10:21
What the shader does in its pass is irrelevant. Dynamic batching only works under limited conditions. There are multiple constraints, including the following. It only works for objects that share the same material instance (adjusting an object's material properties via script creates a copy). Batching only works on the base pass, it doesn't work with multiple lights. And batching is limited to small meshes, it doesn't work with the default sphere for instance.
user avatar
User #6893897 - 28 Dec 17 00:05
ok, Thank you for explaining that
Rendering 19: GPU Instancing
Rendering 19: GPU Instancingmore_vert
2017-08-31T12:02:08+00:00
Post file flag
Rendering 19: GPU Instancing 2017-08-31T12:02:08+00:00close

This time we're going to make it possible to render many objects efficiently! There's already static and dynamic batching for that, but we can also support GPU instancing. It requires more effort to support, but it's a powerful batching technique.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Rendering 19, GPU Instancing, a Unity Tutorial

Description
GPU Instancing Render a boatload of spheres. Add support for GPU instancing. Use material property blocks. Make instancing work with LOD groups. Instructing the GPU to draw something takes time. Feeding it the data to do so, including the mesh and material properties, takes time as well.

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

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/rendering/part-19/tutorial-image.jpg
Comments (2)
user avatar
User #6873637 - 31 Aug 17 13:13
Your Rendering series continues to make my games prettier and more efficient. Thanks!
user avatar
catlikecoding - 31 Aug 17 14:34
Excellent!
Hex Map 20: Fog of War
Hex Map 20: Fog of Warmore_vert
2017-08-24T14:43:01+00:00
Post file flag
Hex Map 20: Fog of War 2017-08-24T14:43:01+00:00close

Fog of war is a feature in high demand, and now we're going to add it! And we won't use a semitransparent plane. We'll do it by feeding cell data to the shader via a texture, sidestepping triangulation. We'll have to go through some refactoring to get there, but the same technique can also be used to skip triangulation when only editing the terrain type. And we still have room to add more data in this way in the future.


Embed data

Provider
Catlikecoding

Provider URL
Catlikecoding

Subject
Hex Map 20, a Unity C# Tutorial

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

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

HTMLplay_arrow

http://catlikecoding.com/unity/tutorials/hex-map/part-20/tutorial-image.jpg
Comments (7)
user avatar
User #2365404 - 24 Aug 17 15:12
Hooray for Fog of War! Thank you so much!
user avatar
catlikecoding - 24 Aug 17 18:13
You're welcome!
user avatar
User #8329185 - 4 Nov 17 18:05
In section 4.1 Feature Shader With Visibility you highlight new shader property _GridCoordinates but you don't highlight its sampler2D variable. It's easily missed as it's on the same line with _MainTex sampler, took me some time to figure out why I am getting compiler errors...
user avatar
catlikecoding - 5 Nov 17 11:09
Added the missing highlight. Thanks for pointing it out!
user avatar
User #6958682 - 24 Aug 17 14:47
Looks awesome, will it have the ability to completely mask the view?
user avatar
catlikecoding - 24 Aug 17 18:15
You can't see what you haven't explored yet, right?
user avatar
User #6958682 - 25 Aug 17 06:06
Yeah, completely black or something, but i had not read the post when making that comment, i was just looking at the image.
Preview: Hex Map 20
Preview: Hex Map 20more_vert
2017-08-07T16:07:35+00:00
Post file flag
Preview: Hex Map 20 2017-08-07T16:07:35+00:00close

Can you see what's new? Or is it something that's missing?

Comments (5)
user avatar
User #810309 - 7 Aug 17 16:52
Fog of war!!
user avatar
User #7198452 - 8 Aug 17 00:41
nice :D
user avatar
User #2365404 - 7 Aug 17 16:58
I've been looking forward to this!
user avatar
User #7280581 - 12 Aug 17 04:55
It really is the best tutorial on internet ;)
user avatar
catlikecoding - 21 Aug 17 18:44
Good to hear you enjoy it!
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.
Upload

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