Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Sprite Sheets Problem - Weird sheet intersection borders
Started by carloshritzmann Dec 21 2018 07:21 PM

3 replies to this topic
graphics sprite sheets texture coordinates

Best Answer carloshritzmann , 22 December 2018 - 01:34 PM

Hmm well, i hate when i post something, and a day or two later i realize what i was doing wrong, but..

 

 

You see, the reason why this is happening is because the sprites are being loaded with the "linear" texture filter, which means that the image processing, converting the image from the file (png) to the screen (corona simulator) is currently doing this weird borders with small sprites (32x32 px). But i did said that i set the configurations to "nearest", but what i did wrong was set it in the wrong place.

 

What i did before was setting the minTextureFilter and magTextureFilter to nearest after call graphics.newImageSheet(), so, after testing it, it really had some implication in the image rendered by the display API, which is something i didn't know until now. I thougth that you should call the display.setDefault() before the display API, not before the graphics API.

 

 

So, yeah, my code is correct and works just fine, but you will have to change the display.setDefault() calls to the beggining of the file just before calling graphics.newImageSheet(), then it will display correctly.

[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

carloshritzmann

[GLOBAL: userInfoPane.html]
carloshritzmann
  • Observer

  • 9 posts
  • Corona SDK

Hi, I have this problem for a long time already, but it was never fixed, at least for me.

 

So, every time i try to display an image sheet, if the sheets inside the image are not separeted by some transparent borders of 1 or 2 pixel widths, then the texture coordinates between the near sheets will overwrite the actual frame and will show a line of 1 or 2 pixels width of the other frame's texture.

 

Example:

 

      Imagine all letters are 1 pixel inside the image:

 

      image: = {oooaaaxxx}

 

      If i would separate the image as a sprite sheet, using the graphics.newImageSheet() i would do like this:

 

            local sheet = graphics.newImageSheet("filename.png",

                  {

                        width = 3, height = 1,

                        sheetContentWidth = 9, sheetContentHeight = 1,

                        numFrames = 3,

                  }

            )

 

      Now, after this, if i call the display.newImage(group, sheet, 2), the correct answer would be to render this:

 

            aaa

 

      But what shows in my screen is normally one of those options:

 

            1. oaa

            2. aax

            3. oax

 

In another words, for some reason the texture coordinates (as i believe) are being recorded incorrectly, genrerating a weird result at the screen.

 

The results get better, and sometimes vanish when i resize the corona simulator screen size.

 

Currently, my window configurations are all default:

      size:

            width: 320

            height: 480

 

Ah, i use windows 10, but after a build to android and test it on a samsung j7 pro, the bug still persists.

 

I am trying to display the image with these default settings:

 

      display.setDefault("minTextureFilter", "nearest")
      display.setDefault("magTextureFilter", "nearest")
 
But i already tried with "linear" and the results are the same.
 
 
 
 
I'm attaching some of my code here, alongside with the images im working with.
In my Windows.lua file, the function i'm using here is the: W:shadow()
      Currently the function is incomplete, but calling it like this shows what im talking about:
 
            W:shadow(someGroup, W/2, H/2, 100, 100, 30, 15)
 
Attached File  Windows.txt   6.2KB   2 downloads
Attached File  lightSegment2.png   1.87KB   0 downloads
 
 
In the screenshot it (taken from the android device) shows the error i'm talking about.
Attached File  Screenshot_20181222-001305.jpg   184.77KB   0 downloads
 
PS: I already know i can solve this problem like this: "add a 1 or 2 pixel border around every frame inside the image sheet", but i wanted to know if it is some issue with the API or my own noob problem as always. I already tried to fix this exporting the image sheet by the texture packer, but the problem still persists.
 
If someone can help me with this, thanks! It's a pain to fix all the sprites i created with this method i described above in the 'PS'.


[TOPIC: post.html]
#2

carloshritzmann

[GLOBAL: userInfoPane.html]
carloshritzmann
  • Observer

  • 9 posts
  • Corona SDK

  Best Answer

Hmm well, i hate when i post something, and a day or two later i realize what i was doing wrong, but..

 

 

You see, the reason why this is happening is because the sprites are being loaded with the "linear" texture filter, which means that the image processing, converting the image from the file (png) to the screen (corona simulator) is currently doing this weird borders with small sprites (32x32 px). But i did said that i set the configurations to "nearest", but what i did wrong was set it in the wrong place.

 

What i did before was setting the minTextureFilter and magTextureFilter to nearest after call graphics.newImageSheet(), so, after testing it, it really had some implication in the image rendered by the display API, which is something i didn't know until now. I thougth that you should call the display.setDefault() before the display API, not before the graphics API.

 

 

So, yeah, my code is correct and works just fine, but you will have to change the display.setDefault() calls to the beggining of the file just before calling graphics.newImageSheet(), then it will display correctly.



[TOPIC: post.html]
#3

SGS

[GLOBAL: userInfoPane.html]
SGS
  • Corona Geek

  • 1,960 posts
  • Corona SDK

Use texture packer (or similar programs) and you can get it to automatically add a 1px border/padding to all your assets.  I have many atlases and never have this problem using TP.

 

You should never have to change texture filtering really.



[TOPIC: post.html]
#4

carloshritzmann

[GLOBAL: userInfoPane.html]
carloshritzmann
  • Observer

  • 9 posts
  • Corona SDK

Thanks for the reply.

 

Hmm, as I used texture packer i while ago, I saw that when exporting sprite sheet image, the file.lua that contains the sprite settings where a little bigger.

 

Ah I remember now, it was almost 1 year ago.. I got this problem a year ago with a set of spritesheets I had created. The entire imagesheet was already created, then when I exported using texture packer, I didn't replaced the with image exported by program, because at the time I didn't see any differences.

 

Thanks that really helps to understand that mistake now.




[topic_controls]
[/topic_controls]

Also tagged with one or more of these keywords: graphics, sprite sheets, texture coordinates