Sorry your browser is not supported!

You are using an outdated browser that does not support modern web technologies, in order to use this site please update to a new browser.

Browsers supported include Chrome, FireFox, Safari, Opera, Internet Explorer 10+ or Microsoft Edge.

AppGameKit Classic Chat / Quick run down on UV commands and UV scrolling

Author
Message
SimpleProgram
12
Years of Service
User Offline
Joined: 2nd Oct 2011
Location: Cali
Posted: 18th Dec 2012 22:12 Edited at: 18th Dec 2012 22:13
Link
Can anyone give me a quick explanation of UV commands and what they do in general. I have seen them before but did not really get to much into them.

The reason I'm asking is that my current project has a scrolling background, and I have done everything I can think of to get rid of the small black line that keeps appearing between the two images I use when I run it on my tablet.

I have seen some threads about UV scrolling but cant really wrap my head around it all because im not familiar with the commands nor the concept.

I just need a simple fix for the code I already have for my scrolling and has hoping a good understanding of UV scrolling would help.



There is some extra stuff in there, but that's what I got to scroll. it just works by stacking two moving images together and when one leaves the view area it pops on top of the one being shown to create the scroll.

thanks,

//simpleprogram

Programming and video games, what else could you need?
Back to top
Profile PM Email
nickele
11
Years of Service
User Offline
Joined: 3rd Jul 2012
Location:
Posted: 18th Dec 2012 23:03
Link
I had a similar problem with you. What I would advise you to do -and that really helped me out understand this "UV thing"- is google/bing the terms "UV mapping" and "UV coordinates". You might have to read a dozen of articles, though, because only some of them give an explanation on 2 dimension surfaces. Most of them explain the way UV mapping works in programs like 3dmax.
But I think it's the best way to understand how UV works in AppGameKit and what -for example- the 4 pairs of coordinates do in the "SetSpriteUV" command.
As for the "black line" problems, in many cases they are solved by using images with multiples (or powers) of 2 dimensions.
I personally simulated out of curiosity a nice (probably useless by the number of comments) "pixelate" effect with these commands (http://forum.thegamecreators.com/?m=forum_view&t=201907&b=41), just like some old-school demos and games in Amiga.
Back to top
Profile PM
nickele
11
Years of Service
User Offline
Joined: 3rd Jul 2012
Location:
Posted: 19th Dec 2012 02:47
Link
OK, I know this is more than a quick explanation, but instead of copy-pasting some Internet articles, I will try to explain UV coordinates the way I understood them.

A sprite is a rectangle that displays an image attached to it. Image is always stretched to fit the size of sprite.
If image is smaller, the sprite will seem to be a "pixelated, magnified" version of the image.
If they are same sizes, there will be no distortion.
If image is bigger, then sprite will be a "zoomed-out" version of image.

Lets take the "big image-smaller sprite" scenario.
If we want the sprite to show only a portion of the image (for example from the center of image till the lower right), we can use SetSpriteUV command. We give 4 pair of coordinates to AppGameKit, that define a new part of the rectangle, from center to lower right of image, that is now displayed as sprite. That's the way "UV mapping" works.

Something similar happens with an image atlas (image with many sprite frames). When we "feed" a big image atlas to a sprite via the SetSpriteAnimation command, AppGameKit calculates the UV coordinates for every frame that is part of the image, based on the parameters of SetSpriteAnimation command, and then knows what part ("frame") of the atlas to display.


UV coordinates more simplified
If you search in the net you'll see that "valid" UV coordinates range from (0,0) to (1,1) and the in-between real numbers. For a *very* simplified explanation, do this:

Open a very small image in Paint.net (or any other prog) and zoom in at 800% or greater values, in order to see the gridlines "cutting" your image.

Now, the intersection of a horizontal & vertical gridline, defines a UV coordinate.

The leftmost and the upper lines, define the UV point (0,0). The rightmost and the lower lines define point (1,1).

Which UV point do we get, when we take the 15th horizontal line and the 27th vertical one? That UV point has coordinates of (15/32,27/32), or (0.46875, 0.84375).

But how can we find the UV coordinates in general?


This is easy when we look at the image and the grid:

1) When we have 32 pixels in a (horizontal/vertical) dimension, there are 33 gridlines in that same direction.

2) For an image with dimensions x and y (x horizontal & y vertical pixels) the number of gridlines that enclose the pixels of the image is x+1 horizontally, y+1 vertically. That is also the number of UV coordinates FOR THAT IMAGE.

3) Any given pixel is "surrounded" by 4 gridlines and thus the 4 UV coordinates (or points), upper-left, lower-left, upper-right, lower-right.

4) In general, a pixel with (xy) coordinates in an image with dimensions X1 & Y1, is enclosed by the UV coordinates of (x-1/X1 , y-1/Y1) (x-1/X1 , y/Y1) (x/X1 , y-1/Y1) (x/X1 , y/Y1). These are non-integer numbers and that's the reason UV commands take real numbers as parameters.

5) Similarly, a rectangle area of pixels, is "surrounded" by 4 UV coordinates. The good thing is that the user isn't limited in the "upper-left, lower-left, upper-right, lower-right" formula of the pixel in order to define the area of the image to be displayed.

The "normal" values for UV pairs in SetSpriteUV command are (0,0), (0,1), (1,0), (1,1) and are used to show full image. If we changed them to other values, then "Crazy" stuff happens.
The user can utilize values lower than 0 or greater than 1 in order to achieve a stretching-zooming of the image, a mirroring, a repeat of the image or a distortion beyond description. Just experiment with some values in the SetSpriteUV and see for yourself what happens.

Attachments

Login to view attachments
Back to top
Profile PM
SimpleProgram
12
Years of Service
User Offline
Joined: 2nd Oct 2011
Location: Cali
Posted: 20th Dec 2012 21:52
Link
Alright I kind of see what you guys are talking about. So how does this all relate to UV scrolling and how to I implement it?

Programming and video games, what else could you need?
Back to top
Profile PM Email
Marl
12
Years of Service
User Offline
Joined: 19th Nov 2011
Location: Bradford, UK
Posted: 21st Dec 2012 00:12
Link
I knocked up a quick example which moves a sprite in a circle in the middle of the screen and UV scrolls the background so that it matches the position of the sprite.




It should give you an idea of the relationships of everything.

Sample "Tile.png" image attached.

Attachments

Login to view attachments
Back to top
Profile PM Email
Marl
12
Years of Service
User Offline
Joined: 19th Nov 2011
Location: Bradford, UK
Posted: 21st Dec 2012 00:15 Edited at: 21st Dec 2012 00:18
Link
And here's what you get (only the real thing moves)



When you've got your head around this, take a look at something a little more advanced;

http://forum.thegamecreators.com/?m=forum_view&t=194972&b=41

Attachments

Login to view attachments
Back to top
Profile PM Email
SimpleProgram
12
Years of Service
User Offline
Joined: 2nd Oct 2011
Location: Cali
Posted: 21st Dec 2012 04:11 Edited at: 21st Dec 2012 04:12
Link
Many thanks for the examples. I took a look at the code you provided and was able to mod it to work for my scrolling backgrounds.

I still have a vague understanding of all of this, but I think with time and some more research (and some math classes). Ill have a firm grip on it all.

Thanks again.

Programming and video games, what else could you need?
Back to top
Profile PM Email
SimpleProgram
12
Years of Service
User Offline
Joined: 2nd Oct 2011
Location: Cali
Posted: 23rd Dec 2012 02:52 Edited at: 23rd Dec 2012 02:53
Link
Yo,

Looks like I got another bit of a problem with UV scrolling that hopefully someone can help me with.

I was able to implement it to my belief with no errors. It works just fine on windows however when on android the UV scrolling likes to split up the image im using and creates a large invisible line between the scrolling image. I have attached a image for viewing what I mean.

In the order used:

here is the code i used to set up the UV setting for the image in question:



then here is the code used to actually scroll them:



thanks,

//simpleprogram

Programming and video games, what else could you need?

Attachments

Login to view attachments
Back to top
Profile PM Email
Marl
12
Years of Service
User Offline
Joined: 19th Nov 2011
Location: Bradford, UK
Posted: 23rd Dec 2012 22:50 Edited at: 23rd Dec 2012 22:50
Link
In the line


Why are you positioning the background with a Y offset?

If you are using the texture to scroll, the sprite (which you set to full screen) should stay at 0,0.

And where does BG1Y get initially set?
Back to top
Profile PM Email
SimpleProgram
12
Years of Service
User Offline
Joined: 2nd Oct 2011
Location: Cali
Posted: 23rd Dec 2012 22:57
Link
I'm afraid that you have failed to see that that line has been commented out. Respectively with a ' commenting character.

I have changed the first background sprite(BG1sprites) which is the blue background to be static and not scroll. My main concern are the two scrolling wall sprites on the side.

Programming and video games, what else could you need?
Back to top
Profile PM Email
Marl
12
Years of Service
User Offline
Joined: 19th Nov 2011
Location: Bradford, UK
Posted: 23rd Dec 2012 23:57 Edited at: 24th Dec 2012 00:04
Link
Quote: "I'm afraid that you have failed to see that that line has been commented out"

Look again, it's your code after all, and there is definitely no comment (fifth line);

In order to find the problem, it helps to know what you are trying to achieve in the first place.

EDIT:

Since you say the problem is only on Android, the first question has to be;

Are your images all 2 power sizes (ie 32 , 64 , 128 , 256 etc)?

As this is one of the more common causes of problems.
Back to top
Profile PM Email
SimpleProgram
12
Years of Service
User Offline
Joined: 2nd Oct 2011
Location: Cali
Posted: 24th Dec 2012 00:08 Edited at: 24th Dec 2012 00:58
Link
That's the initial placing of the sprite when its created, it does not get moved afterwards.

In fact the variable BG1y is set to equal 0.0 when declared, as such:
.

The image is 480 pixels tall, so I might give 512 a try.

[UPDATE: Yeah 512 seemed to fix the problem, sorry i just should have tried that in the first place as it had crossed my mind but I just snuffed it off.]

Programming and video games, what else could you need?
Back to top
Profile PM Email
Plystire
21
Years of Service
User Offline
Joined: 18th Feb 2003
Location: Staring into the digital ether
Posted: 24th Dec 2012 06:22
Link
To clear up what "UV coordinates" are, in as few words as I can muster:

UV coordinates are the XY coordinates for textures. The only difference is that UV goes from 0 to 1. So 0,0 is the top left and 1,1 is the bottom right. 0.5, 0.5 would be the dead center.

That remains true no matter how large your texture image is.

Also, remember that the UVOffset refers to the UV coordinate that the top left corner of the sprite will be located at. So setting an offset of 0.5, 0.5 will position the center of your image to the top left of your sprite.

If you're setting a UV offset in order to scroll, ensure you have UV wrapping enabled. UV wrapping will allow it to process UV coordinates above 1 or below 0 by wrapping the image around.


~Plystire

A rose is only a rose until it is held and cherished -- then it becomes a treasure.
Back to top
Profile PM Email
Back to top

Login to post a reply

Server time is: 2024-05-04 06:27:11
Your offset time is: 2024-05-04 06:27:11