Jose Moreno Profile picture
Coffee, math and game lover. Senior Technical Artist at @remedygames. Prev. Metroid Dread @nintendo @mercurysteam, @sabergames, @labcave and @calendulagame.

Sep 28, 2022, 13 tweets

At the end of the first thread, we set the same value for all cells in the Grid2D. Now we are going to make something more interesting. #ue5 #niagara

(2/13) Let's create a scratch pad in the Simulation Stage. In this one, we are going to use the node "Execution Index", that assigns an integer for each cell, and set as the value of the cell. Previously, we normalize it using the dimensions of our Grid2D.

(3/13) For debugging tasks, it is useful ticking the "Preview Attributes" flag in the Grid2D definition. When you enable it, you should see something like the second image. In this case, I've chosen a low number cells so that we can see clearly the differences between cells.

(4/13) If we add a second float value to the Grid2D, leaving the debug mode on we have another "minitexture" that shows the value of the variable declared as "Second Value".

(5/13) We've used an useful node called "Execution Index to Grid Index" which converts from Linear Index (cell 0, 1, 2, ..., 63) to Grid Index or "matrix index" ([0,0], [0,1], ..., [8,8]). This conversion is essential when you need some kind of spatial relation between the cells.

(6/13) Later, we'll add to the Grid2D other types of variables as Vector2 or Vector4. For these cases, you'll visualize each "float channel", what it tells us (maybe) something about how Niagara works under the hood: non-float variables are just for us, insignificant humans.

(7/13) Following "the drawing examples", we are tryiing to draw a moving circle in the Grid2D. This is very similar as you would do in a material: you take the UV's of your square, substract (0.5,0.5) to center, compute the length and a little "step" and...voilà!

(8/13) Ah, ok! I move the circle adding a small "circular motion offset" (cos(t), sin(t)). Furthermore, I've used a new node called "Execution Index to Unit" which converts from Linear Index to UV (basically what we did in the previous example).

(9/13) We should see something like the following gif. At first, we have a resolution for the Grid2D of 8x8. Later, 128x128. I forgot to metion that I muted "My Pad" scratch pad, so there is only one (float) channel in the grid (and in the debug).

(10/13) At this point, your body asks you (maybe) for some "persistence" or trace effect in the last dynamics. So, it's time to introduce other member of our node's family: GetPreviousFloat node which gathers the previous (in this case float) variable of our grid.

(11/13) If we add the previous value of our grid, scaled down a little bit, to the current value we should see something like the gif.

(12/13) The scratch pad looks like the images. This is very much like at what you'd do in material.

(13/13) This is the end of our second thread :)

Share this Scrolly Tale with your friends.

A Scrolly Tale is a new way to read Twitter threads with a more visually immersive experience.
Discover more beautiful Scrolly Tales like this.

Keep scrolling