YesNoOk
avatar

Need help with Parallax scrolling in a stage.  (Read 7076 times)

Started by Odb718, June 12, 2018, 09:04:00 am
Share this topic:
Need help with Parallax scrolling in a stage.
#1  June 12, 2018, 09:04:00 am
  • *****
  • Shame on you!
    • USA
I'm starting a very simple stage. It's pretty much going to be 100% parallax scrolling.
The stage is going to be Mugen 1.0, so I'm using 
Code:
[BG FEET ROW CENTER]
type = parallax
spriteno = 0, 0
start = 0, 615
width = 861, 1061
yscalestart = 400
yscaledelta = 0.40
as my center point for the floor. The original image is 1661x412. This gives me the size and detail I want.
I know how to put additional tiles to the left and the right just fine.
One more row is needed in the foreground and maybe 4 rows in the back.
Because it's the same image I figured the next row in front will be
width = 1061,1261
and it looks good. Except when I move. It seems to be floating.
I'm thinking it has to do with the yscale(s). Which makes me think I should leave all of the tiles using the same width and just adjust the start, and the ydelta and the ystart.
I'm not entirely sure which way to go with this. And I haven't even started on the walls....

I was hoping someone could explain how all the math works out, or could show me an example of a stage with 1 tile being tiled with parallax in 1.0.
vVv Ryuko718 Updated 10/31/22 vVv
Re: Need help with Parallax scrolling in a stage.
#2  June 12, 2018, 01:52:49 pm
  • ****
    • Brazil
    • https://www.facebook.com/profile.php?id=100074220240917
delta = ?,1
? = delta value of wall

[BG FEET ROW CENTER]
type = parallax
spriteno = 0, 0
start = 0, 615
delta = ?,1
width = 861, 1061
yscalestart = 400
yscaledelta = 0.40
Re: Need help with Parallax scrolling in a stage.
#3  June 13, 2018, 08:56:40 am
  • *****
  • Shame on you!
    • USA
My bad. I didn't have that in the example in Mugen Class so I wasn't aware until I looked at my training stage.
As for your question, I haven't done the wall but I have a couple of the floor's rows going.
After some brute force value debugging I have
Spoiler, click to toggle visibilty
I've no clue if these are the best value for what I want. Below I show the source I'm trying to mimic and how I had it. In the pic the stage hasn't begun to move. P2 is standing at where it starts. I read the math example in mugen class but it doesn't explain the values at all.

It seems when I want the tiles to fade into the BG I need to up the yscalestart. The rows when using the same value all seem the same size. Dealing with perspective this is all wrong. As things get closer to the horizon they need to shrink. So I've tried messing with the value. I'm not sure if math can be involved when trying to figure it out or not.

Spoiler: Source & what it looks like when B2 row was using 600 for yscalestart. (click to see content)
Setting it to 700 seems to look good at ground level, but when I jump it looks as though the ground curves upward.

I'm not too concerned about having it look exactly like the stage. If things don't line up perfectly, It doesn't really bother me. but I do want another 5 or 6 rows to be visible before the "fog".
You can probably figure out that the tile is 2x rows and 8x columns. I've just been puzzle piecing them together 1 at a time, but it seems to go faster if I use 3 and set different values and load the stage, see which is closest, change the other two values, and just keep refining the stage. What stinks is when I get to 3 different values and they all are visually correct but two are wrong. Makes me think the next row will be that much more off.

Is there any formal way of doing the math to figure all of this out??
I'd like to be able to add a simple example to the Mugen Class page that has 2 rectangles and how to figure out the math for 2 different set ups.
Like if your sprite is 120x415 you can set the values for 5 rows and they'll connect fading into the background. And if you dont like the vanishing point you multiply/divide/whatever to get the new values.


----
I still don't have an exact method, and this image looks way better than it acts,
but, I've come up with a method of getting the right yscalestart, then I put the actual Y position, then using M$Paint I find the width point(s) I want.
I picked which version of the tiles that looked the best. I followed it's vanishing point with yellow/red lines trying to find the exact spot but I couldn't get ONE point, so I picked one.
Then I just followed along the heights to the intersection and got half of my width. BUT it doesn't line up with the original values. So I did some math and used X*1.079 to come up with the approximate values for mugen.
Spoiler: this is the process' image(s) I made along the way (click to see content)

Spoiler: This is how it ended up looking. (click to see content)
I added the top row just using guesstimates. Not terrible. I'll lock it in after this double I'm working tomorrow.
Right now ALL of the deltas are set to 1,1, which is very very wrong. Still not sure how the heck to figure it out.
vVv Ryuko718 Updated 10/31/22 vVv
Last Edit: June 13, 2018, 12:42:04 pm by Odb718
Re: Need help with Parallax scrolling in a stage.
#4  June 21, 2018, 12:22:15 pm
  • ****
  • Stages & Screen Pack
  • Mugen Creator
    • USA
    • https://jusmugen.forumotion.com/
My bad. I didn't have that in the example in Mugen Class so I wasn't aware until I looked at my training stage.
As for your question, I haven't done the wall but I have a couple of the floor's rows going.
After some brute force value debugging I have
Spoiler, click to toggle visibilty
I've no clue if these are the best value for what I want. Below I show the source I'm trying to mimic and how I had it. In the pic the stage hasn't begun to move. P2 is standing at where it starts. I read the math example in mugen class but it doesn't explain the values at all.

It seems when I want the tiles to fade into the BG I need to up the yscalestart. The rows when using the same value all seem the same size. Dealing with perspective this is all wrong. As things get closer to the horizon they need to shrink. So I've tried messing with the value. I'm not sure if math can be involved when trying to figure it out or not.

Spoiler: Source & what it looks like when B2 row was using 600 for yscalestart. (click to see content)
Setting it to 700 seems to look good at ground level, but when I jump it looks as though the ground curves upward.

I'm not too concerned about having it look exactly like the stage. If things don't line up perfectly, It doesn't really bother me. but I do want another 5 or 6 rows to be visible before the "fog".
You can probably figure out that the tile is 2x rows and 8x columns. I've just been puzzle piecing them together 1 at a time, but it seems to go faster if I use 3 and set different values and load the stage, see which is closest, change the other two values, and just keep refining the stage. What stinks is when I get to 3 different values and they all are visually correct but two are wrong. Makes me think the next row will be that much more off.

Is there any formal way of doing the math to figure all of this out??
I'd like to be able to add a simple example to the Mugen Class page that has 2 rectangles and how to figure out the math for 2 different set ups.
Like if your sprite is 120x415 you can set the values for 5 rows and they'll connect fading into the background. And if you dont like the vanishing point you multiply/divide/whatever to get the new values.


----
I still don't have an exact method, and this image looks way better than it acts,
but, I've come up with a method of getting the right yscalestart, then I put the actual Y position, then using M$Paint I find the width point(s) I want.
I picked which version of the tiles that looked the best. I followed it's vanishing point with yellow/red lines trying to find the exact spot but I couldn't get ONE point, so I picked one.
Then I just followed along the heights to the intersection and got half of my width. BUT it doesn't line up with the original values. So I did some math and used X*1.079 to come up with the approximate values for mugen.
Spoiler: this is the process' image(s) I made along the way (click to see content)

Spoiler: This is how it ended up looking. (click to see content)
I added the top row just using guesstimates. Not terrible. I'll lock it in after this double I'm working tomorrow.
Right now ALL of the deltas are set to 1,1, which is very very wrong. Still not sure how the heck to figure it out.
I think to make a stage like as parallax I prefer you make a Tilesprite to make it work as parallax because the is the same texture

let me explain in the best I can in text and hope you understand my broken text grammer

your floor need to be tiled. I also notice that the lend of the floor was not big enough
let me explain the formula of the Parallax

the effect whereby the position or direction of an object appears to differ when viewed from different positions, e.g., through the viewfinder and the lens of a camera.

This animation is an example of parallax. As the viewpoint moves side to side, the objects in the distance appear to move more slowly than the objects close to the camera. In this case, the blue cube in front appears to move faster than the red cube.


Now for mugen you have to make a tile to perform a parallax
This is my own creation and to demonstration of a TILE flooring i made using blender 3d free software


 I notices that your floor sprite is does indeed look in angle type parallax
on my floor its does look flat and this what you call tile texture to perform a parallax
 you need to know your math and also understand angles how work for parallax
once you know that and you give the code command for your mugen stage you make your floor move as real 3d effect parallax effect to the floor to make look like this I know look weird but in the mugen game look different


here the code to perform my tile parallax and I made it so can create a duplicate without the use of adding tile = 1,0
Spoiler, click to toggle visibilty


sure I can add tile =1,0  to do that way but its wont look good as I wanted to be. so to make a duplicate the floor I add more code of the same code but I went and added the start = x,y position to connect each tile sprite and adjust width = x,y the way I want  look to and work with the tile floor sprite that I created

Here how the stage look like on a parallax effect in action when is its finish


also tile sprite for floor are good way if you are just using one texture sprite and tri to tile it with my method

however there some floor that full flooring sprite, for examples like the parallax for street fighter 2.
if that you are trying to create then electro is an expert on that subject. you can check out his video guide about parallax
in this video guide also scale delta will work as well he also explain about it too. I hope I help some way and I know Electro will share his knowledge as well :D

click the spoiler to see Electro's video guide about paralax and scaledelta :D
Spoiler, click to toggle visibilty
Join My JUSMUGEN Community.
https://jusmugen.forumotion.com/
Last Edit: June 21, 2018, 12:27:25 pm by OldGamer
Re: Need help with Parallax scrolling in a stage.
#5  June 21, 2018, 01:09:30 pm
  • *****
  • Shame on you!
    • USA
HHhmmm, this is all pretty much brute force stuff.
I'm really after being able to just figure out a ratio, or an equation to map out the floor and how things go.
I've done a tiny bit of 3D work in the past. There's a technique we were using in FreeStyleDash to convert a 2D plane into 3D objects. I'll try to get in touch with a few people to see if I can use those tools.

@ELECTR0: Have you figured out any way of doing the math to get things to line up?
I had an equation I made wolfram alpha come up with but I didn't know how to use it in the end.
Basically what I did was I said,
98X+Y=211
138X+Y=298
182X+Y=393
and on and on with my values and wolfram pumped out a value like X= 3/145 Y=13/197. All of these values are just examples.
But the X & Y values I got didn't seem to get me anywhere. Giving wolfram just 98X = 211, 138X = 298 and on and on just gave an error.
So the 98X value would be in the def and the =211 value was what was on screen. When I was using the results and trying to work backwards I was just getting a starting point. I still had to test and retest and retest to get the "right" value.

I know there's a way to get the 360 XDK to make 3D shapes just giving it 4 corners to work with. And we DO have that with mugen. I wish I had more free time :\

My main problem is that I'm not trying to recreate a stage. All the techniques seem to be based off of that. But that part with the wall in the video  should help me.
vVv Ryuko718 Updated 10/31/22 vVv
Re: Need help with Parallax scrolling in a stage.
#6  June 22, 2018, 01:37:54 am
  • ***
    • sites.google.com/view/ariasoftheend/home
It's just linear interpolation, I'll break it down with an example, localcoord 960x720.

Spoiler, click to toggle visibilty

Not sure why you are complicating it with horizontal rows, it would be easier to do it in a vertical way, the way you're doing it you will have to calculate several parallax values instead of just one, the principle is the same regardless, I started from the bottom to the top (because that's where characters usually stand), but can be done either way depending where you set your starting width values:

Spoiler, click to toggle visibilty


Samples:
Spoiler, click to toggle visibilty
Last Edit: June 22, 2018, 07:21:41 am by Margatroid
Re: Need help with Parallax scrolling in a stage.
#7  June 22, 2018, 03:08:35 pm
  • ****
  • Robotics Engineer
    • USA
    • altoiddealer@gmail.com
^ Looks like a great bit of info to stick in MUGEN Class

Re: Need help with Parallax scrolling in a stage.
#8  June 22, 2018, 03:16:28 pm
  • ******
  • Loyal to the Game
    • USA
    • http://jesuszilla.trinitymugen.net/
Indeed, this is REALLY handy information! I want to make a stage with parallax now just to see how it works.
Re: Need help with Parallax scrolling in a stage.
#9  June 22, 2018, 07:37:15 pm
  • *****
  • Shame on you!
    • USA
This is a lot of info to soak up. I feel like the numbers you give come out of nowhere and then you explain them a little. Kinda hard for me to get, but I kinda get it.
This is definitely going into Mugen Class. 

"Not sure why you are complicating it with horizontal rows, it would be easier to do it in a vertical way,..."
If I do a vertical line, I have to have different sprites so that a pattern isn't obvious. At that point, I should just have an entirely HUGE sprite of the entire floor and forget the math. With the horizontal set up I'll have 2 sets and you wont see a pattern for I _think_ 16 tiles horizontally and 4 vertically offset. You'll have to LOOK for the pattern to see it. I figured if there was a way to get the values doing math it'd become simple. Brut force had it going smooth enough.

One thing is that I've set my screen position and then character offset, THEN I started putting my tiles down. Basically the reverse of how you have it. The way I was thinking was to make the top of 1 horizontal row, and the bottom of 1 horizontal row, have delta of 1, and go from there. That should work right? Because it doesn't seem to work out for me.
Spoiler, click to toggle visibilty
^^^These numbers suck but I'm just pointing out that if the Delta is 1 at 631, that should be the walking line right?

I want to get to a point where I know how to make a cube with 4 sprites for the top, and 4 for the front, and 1 or 4 for the side(s), and place it anywhere on my stage and make it look solid.

One major thing I'm having trouble with is jumping. The rows kinda pull apart.
vVv Ryuko718 Updated 10/31/22 vVv
Re: Need help with Parallax scrolling in a stage.
#10  June 23, 2018, 11:46:53 pm
  • ***
    • sites.google.com/view/ariasoftheend/home
One thing is that I've set my screen position and then character offset, THEN I started putting my tiles down. Basically the reverse of how you have it. The way I was thinking was to make the top of 1 horizontal row, and the bottom of 1 horizontal row, have delta of 1, and go from there. That should work right? Because it doesn't seem to work out for me.

Works perfectly fine for me. Like I did in the example or in reverse, it's still the same interpolation principles, no matter how you start. Did a quick stage, even added 2 more rows calculating them with the same method using the values of your bottom parallax.

Spoiler, click to toggle visibilty

You are using 2 different sprites of 1661x412 right?, these are the tiles I'm using of the same size and squares.
The position at the sff file is (830,0) for both.
Zoffset is 631.
The progressive scale reduction (yscalestart) is 1.38, (1133/820).
Spoiler, click to toggle visibilty

Quote
I'm just pointing out that if the Delta is 1 at 631, that should be the walking line right?
If your Y sprite axis is at 0 & "start = 0, 631" from your parallax, then yes, your zoffset should be 631.
I'd forget about yscaledelta if you plan to add walls, mugen has no vertical scrolling to follow the yscale of the floor, you will have to make a workaround that may cause a bit of lag in some computers, even made & released a stage for the sole purpose of testing this with other people, because it worked fine for me but lagged for others, still possible in 1.0 & 1.1 nonetheless.
Last Edit: June 24, 2018, 02:16:31 am by Margatroid
Re: Need help with Parallax scrolling in a stage.
#11  June 23, 2018, 11:55:21 pm
  • ****
  • Raging Fist
Oh man where was this when I was doing stages in the past! This will save me a HELL of a lot of frustration!!
Re: Need help with Parallax scrolling in a stage.
#12  June 24, 2018, 12:46:55 am
  • ****
    • Argentina
    • sites.google.com/view/senseiyoda/sensei-yodas-mugen
Re: Need help with Parallax scrolling in a stage.
#13  June 24, 2018, 02:02:52 pm
  • *****
  • Shame on you!
    • USA
Master Yoda, I've seen that a while ago. I just got more confused by it.

Right now I have the equations for 5 values written down. They can help figure out a lot of stuff but not everything.
I still need to know how to obtain a tile above the original tile's yscalestart.
With being able to solve the yscalestart value I can solve pretty much all of the rest of the values.
 I cannot write them all out as it stands.

I'll come up with a diagram or some other way to get all this info easy to follow. So far I can only imagine 4 objects to get parallax.
The center floor, floor 1.
The floor behind it in the background, floor 2.
The floor closer to the screen, floor 3.
An object positioned on a floor/floating.

[BG Floor 2]
type = parallax
spriteno = 2, 1 ;F2SpH & F2OSH
start = F2StX, F2StY
delta = D2X,1
width = W2X,W2Y
yscalestart = F2YSSt

[BG Object1]
type  = normal
spriteno = 718,1 
start = OStX, OStY
delta = OD1,1

[BG Floor 1]
type = parallax
spriteno = 1, 1 ;F1SpH & F1OSH
start = F1StX, F1StY
delta = D1X,1
width = W1X,W1Y
yscalestart = F1YSSt

[BG Floor 3]
type = parallax
spriteno = 3, 1 ;F3SpH & F3OSH
start = F3StX, F3StY
delta = D3X,1
width = W3X,W3Y
yscalestart = F3YSSt

F1SpH and F1OSH stand for Floor 1's Sprite Height in the sff and Floor 1's On Screen Height. The spriteno values do not correspond to them obviously. It's just a decent spot to put them.

SO! With that said, 
F1OSH = (100/F1YSSt)*F1SpH
OD1 = [(OStY-F1StY)*((W1Y/W1X)*D1X)-D1X]/F1SpH+D1X
W2X = W1X-(F2OSH*(W1Y-W1X)/F1OSH
D2X = D1X*W2X/W1X
[StageInfo]  ZOffSet = ((F1SpH*(1-D1X)/W1Y/W1X*D1X)-D1X)+F1StY
W2Y = W1X
W3X = W1Y

See, none of this is confusing at all......
If you're counting, we have about 27 values and about 13 of them I still have no clue how to formulate. A good chunk of them, like the actual sprite height are up to the creator. What X & Y pos of an object you decide. But the OD1 can be found with the other values.

If someone knows how to get the F2YSSt and F3YSSt please try to write it out in the crappy method I've come up with.
vVv Ryuko718 Updated 10/31/22 vVv
Re: Need help with Parallax scrolling in a stage.
#14  June 24, 2018, 07:14:20 pm
  • ****
    • Argentina
    • sites.google.com/view/senseiyoda/sensei-yodas-mugen
Well, give me a few days and I'll do a tutorial