YesNoOk
avatar

Need help with Parallax scrolling in a stage.  (Read 381 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 Wheat Stage Released vVv
Re: Need help with Parallax scrolling in a stage.
#2  June 12, 2018, 01:52:49 pm
  • ****
  • os cães ladram, mas a caravana não pára
    • Brazil
    • Skype - adriano_gt2005@hotmail.com
    • www.facebook.com/groups/mortalkombatmugenkommunity/
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.
New #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 Wheat Stage Released vVv
Last Edit: June 13, 2018, 12:42:04 pm by Odb718