koobas.hobune.stream
Having Trouble with Texture Tiling and offset values. Very specific case.
My case is very specific so I'll try to make it as clear as possible. I'm making a minimap for a randomly generated dungeon. As the scene loads, I use Setpixel on a 200x200 image to generate a map of the level. But, I am doing a fog of war affect, so I have 400 10x10 images laid out in a 20x20 grid that take in a material with the map image attached (the shader is unlit/transparent). All of the 10x10 images then use a script to create their own clone of the material, and set the offset using this method : void Start(){ mine = GetComponent<Image>(); trans = GetComponent<RectTransform>(); var zop = new Material(mine.material); mine.material = zop; mine.material.mainTextureOffset = new Vector2(trans.anchoredPosition.x / 200f, trans.anchoredPosition.y / 200f);
The images are laid out in such a way that the bottom left image has a RectTransform of posx 5, pos y 5. The top right image has the transform posx 195, posy 195. incrementing by 10 in each direction. The material has tiling set to (0.05x, 0.05y) [my thinking here was 10x10 images so 10/200] So my thinking was that dividing each multiple of 5 (the positions of the images) Would create the proper offset value (0.025 * image position in the 20x20 grid ie: bottom left has offset (0.025, 0.025) and top right has offset (0.975, 0.975). I've never tried something like this but my values are slightly off. The grid of images does recreate the map layout nearly perfectly, but the position is off somehow. What seems especially odd to me is that using 205 instead of 200 seems to produce the most accurate result, but still not a 100% match and the minimap will show the player inbetween rooms at times a s a result.
I don't know anything about tiling textures like this or even if it is a good way to do things... but when using the original image instead of the grid, the movement of the player matches perfectly to the minimap. But when using this grid of images with the above settings it's really close, but sometimes the icon representing the player ends up past the floor area on the minimap and inbetween rooms. This never happens when just using the original image so I know my math is off somehow... Anyone know what I'm doing wrong here? Or how I can get an exact 200x200 match with this method? 
Hey there,
just a simple thought: when you have the bottom left at 5/5 and the top right at 195 that only makes 19 tiles doesn't it? So ofc your result should be the best when you have 205 as the top right corner. but your posiiton is probably a little bit off since you do not compensate for the little translation that you do. -> player position on tile 0/0 should be 5/5 in your $$anonymous$$imap.
Can't see any other obvious problems on first glance.
Nah, that still totals 20 tiles.
005 015 025 035 045
055 065 075 085 095
105 115 125 135 145
155 165 175 185 195
That said, if the pivot points of all of the blocks' RectTransforms are moved from (0.5, 0.5) to (0, 0), then it won't be necessary to have all those half-tile (5) offsets, either.
I think what he meant was not 20 Tiles in total but 20 tiles each side so 400 in total. (See provided images in the OP - there is a scale at the side) And from 5 to 195 is only 190 -> divided by 10 makes 19 Tiles i think.
...if i'm not mistaken, texture coords are from TOP left corner of the texture as well as the image. so if you're taking "anchoredPosition" of the images, it doesn't line up properly with what tiling and offset expects.
with tiling and offset 0, 0, top left corner of your image take the top left pixel of your texture, and bottom right corner of your image takes bottom left pixel of your texture, which is (within the shader) always at 1,1.
the general equation is:
sourcePixelPosition = (destinationPixelPosition * tiling) + offset
i know I didn't help in solving the issue, but I hope I at least clarified a bit about how the mapping of the texture works?
Looking things over again, it sounds like your material offsets might be off. Since your total image is a 20x20 grid, that makes each one's scale (0.05, 0.05).
Then, each one's offset should be relative to the same 0.05 scale as well as to the scale of your UI units. Since you said you're using RectTransform.anchoredPosition in multiples of 10 as your basis for determining the offset, it should look something like this:
material.mainTextureOffset = rectTransform.anchoredPosition / 200.0f;
// Or, accounting for the current 5 offset...
material.mainTextureOffset = (rectTransform.anchoredPosition - Vector2.one * 5) / 200.0f;
yeah basically I just needed to set the pivots like you said haha. since you answered now I'll accept yours =P
it's funny how its always something super simple that solves an issue that feels super hard lol.
It happens. It also gives you a chance to look at things from another perspective: "How can I make this easier for myself?"
OK! So as @Eno-Khaon said "That said, if the pivot points of all of the blocks' RectTransforms are moved from (0.5, 0.5) to (0, 0), then it won't be necessary to have all those half-tile (5) offsets, either."
I set the pivots of all the images to 0,0 which indeed fixed my issue! So the final solution was to use the calculation I was already using: mine.material = zop; mine.material.mainTextureOffset = new Vector2(trans.anchoredPosition.x / 200f, trans.anchoredPosition.y / 200f); And to set the pivot of each image to (0,0) instead of the default (0.5,0.5)! Thank you all for replying =P @sh_code @Captain_Pineapple @Eno_Khaon
