next »

[rayteoactive]

I'm a little scared posting this, since the problems mentioned in other topics all sounded much deeper. Anyway, I posted these problems earlier in my "devlog"...

So I'm working on a game -Tobe's Vertical Adventure, as... well, every role except music and programming. Anyway, now my programmers and I are facing some issue, and I'm hoping someone here can help me out with.

1) Title Safe : I understand that the game GUI has to be restricted within 70% of the game to display on a smaller TV. But putting the current interface within the 70% area just make the game so damn ugly and blocks up every important element of the game. Is there a work around to this? Or should I just ignore whoever that's playing it on a small screen?

2) White Line : Oddly, there's some player white line thing surrounding the player's sprite. Everything else is fine though. My programmer thinks it got to do with the fact that the player sprite sheet might be too big, but I suspect that might not be the reason. I've attach a zoom in, so you guys can have a better look.


For those interested to know how the game looks like,
http://forums.tigsource.com/index.php?topic=8468.0

[Eclipse]

that line is caused by texture filtering, disable it or use color key instead of alpha blending

[Ishi]

I'm a little scared posting this, since the problems mentioned in other topics all sounded much deeper. Anyway, I posted these problems earlier in my "devlog"...

Don't be silly now!

So I'm working on a game -Tobe's Vertical Adventure, as... well, every role except music and programming. Anyway, now my programmers and I are facing some issue, and I'm hoping someone here can help me out with.

1) Title Safe : I understand that the game GUI has to be restricted within 70% of the game to display on a smaller TV. But putting the current interface within the 70% area just make the game so damn ugly and blocks up every important element of the game. Is there a work around to this? Or should I just ignore whoever that's playing it on a small screen?

My solution was to just do an option that allows the user to scale the screen down to their preferred size. It's nice if you can get away with just moving the HUD further in but since you have the wraparound the player will need to see right to the edge of the level, so the whole screen will need scaling down. (see Johnny Platform if you want an example )

Options for doing this are either setting the transform on the spritebatch.Begin() to scale stuff down, or if you're rendering the game to a texture first, just draw that smaller on the screen. (Watch out with the spritebatch method though, as then all the sprites get individually scaled and you can get the white outlines problem. The second method is cleaner).

2) White Line : Oddly, there's some player white line thing surrounding the player's sprite. Everything else is fine though. My programmer thinks it got to do with the fact that the player sprite sheet might be too big, but I suspect that might not be the reason. I've attach a zoom in, so you guys can have a better look.

Yeah like Eclipse said this is texture filtering. It's a bit strange that the player is getting filtered but the scenery isn't. Looks like the scenery is getting drawn at exactly 2x scale, but the player must be slightly off scale, or the texture coordinates are a bit off, or possibly the position the player sprite is being drawn at isn't an integer (for example (100.2, 91.3) which should be rounded down to (100, 91) before drawing).

[Eclipse]

it's not strange that the scenery doesn't suffer from it, it doesn't because those tiles doesn't use alpha blending.

Oh and if you look closely to that ice tile you can see the pixels in the border are actually smaller than normal, is it the tile or the UVs are a bit off?



anyway the stuff on the character happens because the background of your texture is white.
Even if you saved it using 100% transparency the pixel are still white (they have a value of r 255 g 255 b 255 a 255 for example) this way when the black of the character outline mixes with the transparent pixel it interpolates the values (because bilinear filtering is on) so you'll end up with pixels that are between rgba 0,0,0,0 and rgba 255,255,255,255 because the filtering smoothing them, and they will appear like a grey semitransparent outline

to get rid of it there are two solutions:

- disable bilinear filtering

or

- save the character sheet with a black background, then add the alpha channel, this way the outline will blend from black to black and you'll have a sort of free antialias too.

As you're going for pixel art i recommend the first solution, if you were using painted sprites the second one

[BlueSweatshirt]

I recommend trying both suggestions by Eclipse. Just to see how they look.

Also Eclipse, I think it's just the tile. Looking at the player, the smaller left-column of pixels on the tile seems to match the pixel size of the player. I'm guessing the tile is just blocky.
It's possible that the sprites are being drawn at a different aspect ratio, and something could actually be wrong. But I don't think this is the case.

[Eclipse]

yes now i see, i took a look to the game devlog page and it looks like the only sprite being scaled is the character one, all the sprites around the level like the red gems are not, or at least not with filtering

[moi]

This stuff can happen when you have drawn the character on a white or clear background with a soft brush, so when cutting out the texture, the sprite retained some information of the background on its border. Or something like that.

[j0d1]

This stuff can happen when you have drawn the character on a white or clear background with a soft brush, so when cutting out the texture, the sprite retained some information of the background on its border. Or something like that.

That's my guess too. It's a problem you must fix in your drawing software, not in XNA (if you are using XNA's defaults).

Put your white background on a layer (it's only an helper layer) and your sprite on another layer.
The sprite layer should have an alpha channel.
Save your sprite layer in PNG format (well I guess another format should be fine. I personally use .PNG. Anyway, it will be compressed in .XNB format in XNA).
Draw your sprite using XNA's default parameters (Alpha blending enabled).

[Ishi]

You can solve the white outline like that but it won't stop the insides of the player sprite being all blurry. I think just making sure it doesn't get filtered in the first place should be the main priority.

[Eclipse]

You can solve the white outline like that but it won't stop the insides of the player sprite being all blurry. I think just making sure it doesn't get filtered in the first place should be the main priority.

agreed, using texture filtering in a pixel art game is nonsense anyway

[rayteoactive]

Wao~ that's alot of solution here. I will try them out and let you guys know if they worked 

Btw, any takes on the "title safe issue"?

[Ishi]

Btw, any takes on the "title safe issue"?

I wrote a bit on that in case you missed it going through all the replies.

[moi]

You can solve the white outline like that but it won't stop the insides of the player sprite being all blurry. I think just making sure it doesn't get filtered in the first place should be the main priority.

agreed, using texture filtering in a pixel art game is nonsense anyway

That's funny because "Pixel art" was originally created at the time of blurry renders , as in the early times, everything was supposed to run on TVs or CRT monitors, and blur was an integral part of the experience.
I find non blurred pixel art ugly personally.

[Eclipse]

That's funny because "Pixel art" was originally created at the time of blurry renders , as in the early times, everything was supposed to run on TVs or CRT monitors, and blur was an integral part of the experience.
I find non blurred pixel art ugly personally.

1:1 pixel art is not ugly, 3-4x scaled pixel art is, still i assure you it's even worse with bilinear filtering his game looks to have real 1:1 screen pixel ratio so he shouldn't want any kind of blurry effects...

Also texture filtering doesn't really act as tv or old crt monitors scanlines...


examples of 1:1 pixel art are Nitrome games http://www.nitrome.com/games/parasite/

[fog]

I've just done a search for this same white line around images problem and came across this so thanks for all the above suggestions. 

To fix it I needed to add:

Code:

GraphicsDevice.SamplerStates[0].MagFilter = TextureFilter.Point;

Btw, any takes on the "title safe issue"?

It's a serious pain if you come from PC development where title safe isn't really an issue.  I ended up redesigning my game to have a panning camera so that all the arena could be seen within the title safe limits.  Having a fixed camera would have restricted me to a tiny arena.

Another alternative is to render your display to a texture and then have an option that allows the user to resize this to fit perfectly on their display. (One of those "resize until the dots are at the corner of your screen" affairs.)  This way you get to use the full available screen area while also ensuring that nothing is off screen.

I know that's not always a popular option mind so I'd be interested in what others think as I plan on using it in my next project on the 360.

[Chris Z]

Why not just use the TitleSafeArea member in your Viewport to determine the default placement of UI elements and allow zooming like most games do?  Most of the time the default should be fine and you wont have too much empty space.

The other part of it is similar to the aspect ratio issue, which is what to draw (not counting UI) in the extra space (sides of 16:9/16:10).  For a platformer, it's just making sure you know where the edge of the screen is so the character can't wander past that.  If you use a view frustum that accounts for aspect ratio (which it should always) and title safe area and collide it against your game world boundaries anyway, that part is free.

[fog]

Why not just use the TitleSafeArea member in your Viewport to determine the default placement of UI elements and allow zooming like most games do?  Most of the time the default should be fine and you wont have too much empty space.

I'd imagine in rayteoactive's case it's a purely aesthetics issue.  If you have a decent sized UI and you keep it within the title safe area then you really do lose a hell of a lot of screen area.

And even if you allow the user to move the UI elements you still have to design everything else to work in a worst case scenario.

[Eclipse]

I've just done a search for this same white line around images problem and came across this so thanks for all the above suggestions. 

To fix it I needed to add:

Code:

GraphicsDevice.SamplerStates[0].MagFilter = TextureFilter.Point;

so it was what i said

[fog]

I've just done a search for this same white line around images problem and came across this so thanks for all the above suggestions. 

To fix it I needed to add:

Code:

GraphicsDevice.SamplerStates[0].MagFilter = TextureFilter.Point;

so it was what i said

Indeed.  Thank you 

[rayteoactive]

Well, thanks a lot for all the input. We manage to get rid of the white lines too. But what we did was simply adding a 1% opacity black dot to the corner of each frame, and the white line disappears.

I just saw the UI responses today though, so we'll probably try that out too. Keep you guys posted if the solution works.

Btw, it's not purely aesthetics reason that I need it adjusted, but also because the GUI is so close to the center of the screen, it's actually blocking many of the game element. Definitely not something I can live with.