Download

Making A Cropped Texture Material

INTRO

Good day everyone, I’m Ranz, Aaron in real life. I’m quite new here but I’m no means a beginner nor an expert in EU4. And this would be my first post so please be nice to me :slight_smile:

Without further adue, I would like to share to you a guide on how to make a croppable texture material. So, I’ve been looking for a way to crop a texture for some time ever since I examine the contents of Tappy Chicken. A we know, it uses sprite sheets in the development of its contents specially the UI. So I looked further on its contents and found out how they did it.

This material can crop the texture
8d77e08dc8631b2651d0c0fcd274c34616c06bf8.jpeg

As we can see, the algorithm for cropping textures is limited for square shapes, although you could make a rectangle shape crop by simply editing the TexCoord’s U and V tiling, but I’m still looking for more flexibility in it while making it easy to modify properties. So what I’m going to do is to modify this material and add features that will make it easier to crop textures within this material.

THE IMPORTANT PARTS

  1. Rows - this determines the number of divisions for your texture. This is used as a reference of the material’s computation to make a crop.
  2. FrameNumber - based on Rows, it determines which part of the texture will be cropped.
  3. TexCoord - this determines the size of the image that will be cropped, this is also dependent on Rows.[/LIST]

Basically, if we are to crop a texture in a sprite sheet, we want to determine where to crop and how big is the crop. So here we are lacking inputs that could help us crop our texture the way we want it but let’s take a look on what we currently have.

  • Rows, as my definition says, we can make this as a reference for the overall size of our texture, say if our texture is 512 x 512, then we could be set the divisions 512.
  • FrameNumber, with tests that I tried, if I increase this parameters value, say 1, it moves to the next image, so we can use this to set the crop’s X coordinate.
  • TexCoord, increasing its U and V Tiling value increases the display in the material, therefore we could assume that this can handle the crop’s width and height.

So what we’re missing now is a way to determine the crop’s Y coordinate so we’ll try to add that.

MAKING THE MATERIAL
So, we are going to modify the material now so make sure you duplicate the material to avoid modifying the original contents of Tappy Chicken, or Migrate this material to your project. For this guide, we actually don’t need that FadeAmount flow so to avoid confusion with the guide, we’ll remove that.

Also, we are going to rename the parameters so that it’ll make sense with what we want to happen:

  • Rows → Texture Width
  • FrameNumber → Texture X
  1. Let’s add a Scalar Parameter and name it Texture Y, then multiply this to Texture Width.
  2. Connect the result to the Divide node where Texture X was originally connected.

Ok, so that actually takes care of the crop’s X and Y coordinate requirement but we’re going to push this a little further. Although we could set the crop’s width and height through TexCoord, but if we are talking about MaterialInstances this isn’t enough. So remember that our goal is to make us a material that can crop any texture just by giving the crop’s X, Y, Width, and Height.

  1. We’ll add two more Scalar Parameters and name it Width and Height.
  2. Multiply Width to Mask (R) and Height to Mask (G).
  3. Connect the result to the Multiply node were Mask (R) originally was. Do the same with Mask (G).

What this does is that we have now an access to modify TexCoord’s U and V Tiling. Just make sure that you leave TexCoord’s U and V Tiling to 1 so avoid any inconsistent results. Of course, don’t forget to change Texture Width to the size of texture that you used for this material, otherwise it won’t work smoothly.

CONCLUSION
As a sample here are my results,

This is the image I used, take note that this is originally 1024 x 1024 in my project.
43f5d3132e3eadc45405daf25edc3406a5670612.jpeg

This is the overview of the material in use. The parameters are set to: Texture Width = 1024; Texture X = 0; Texture Y = 680; Width = 200; Height = 341.

And here’s the result in my project.

This is very interesting but some images are too small to be useful. :slight_smile:

@OP if you don’t want to redo the images - just go into the editor and copy all the nodes the (?) graph (if there are more than one, just copy and paste each separately), paste it here in a


 tag and then everyone will be able to easily replicate the setup. (The nodes in the editors are copy/pastaed around via plain text in the clipboard - clever.) At least, that's the case with Blueprints and I think it should work the same with material nodes.

The nodes may end up being wrong due to referring to an asset that the person pasting them in doesn't have, but that's not a big deal as they can just fix it or make a new node of the same type and easily recreate it.

This article was useful to me. Thanks a lot!

I make my version of Tappy Chicken. For the beginner the “math” of graphs looks weird.
I asked how they attach meshes to the image parts of the background, but they did it with special imports. I tried to make it work without importing procedure, just by creating new UE meshes and applying the materials. Your explanation of “cropping” method helps a lot! Thanks!

Does anyone have Tappy Chicken and would be willing to paste the code for the custom UV portion mentioned here?

I do not see Tappy Chicken on the Learning tab any more. :frowning:

**@Ranz This worked for me. Thanks!

I would like to point out that the blank white node is actually a “constant” which has had its dropdown expanded. Using the dropdown/color preview is unnecessary (for those learning the material editor). Also, I’m not able to read which input you are casting to, for the final material it looks like “xxxxUV⌐”. For me, I just plugged in the final value of the “add” to the “UV” input of the textureObjectParameter.**