Aligning added background with Y parallax is confusing me

(John Andersson) #1

Okay, so my background layer has a scrolly value of 0.5, so it scrolls twice as slow on the y axis.

Now, when I add the graphic to the world, depending on the levels height, the background layer is off more or less on the y axis.

I’m using

addGraphic(_map_BG, 2, 0, -( (mapHeight * 16) / 4) + 6);

which works on level 1 perfectly (level 1 is 512 pixels high). But on level 2 (which is only 352 pixels high), the background layer is way too far up in the air

I know this is basic math, but for some god damn reason I can’t wrap my head around why it is like this, I’m confused

(Martí Angelats i Ribera) #2

We don’t know what you are trying to do. Please explain a bit your project (this is out of context so is hard to tell).

(John Andersson) #3

The background is simply not the way I place it in the level editor, if I remove the scroll.Y, then it works, but as soon as I change the scroll.Y then the background is on an offset

(John Andersson) #4

An example, I have a level that is 512 pixels high.

I have a background layer with a scrollY value of 0.5.

If I add the background layer with an offset of -122 like this:

addGraphic(_map_BG, 2, 0, -(122));

Then it works fine. But why the number 122? I got to it by trial and error. If I have another level that is, let’s say, 713 pixels high, then the background layer isn’t aligned properly! Since the background layer has a scrollY of 0.5 that means it moves half the speed as a normal layer, so shouldn’t I just have to place it on an offset of -256 (half of the levels height)??

Why is this so weird?

(Martí Angelats i Ribera) #5

What is _map_BG ? Aren’t you using a Backdrop?

(John Andersson) #6

No, I’m using a spritemap as backgrounds. (I make them in Tiled, and every level has a unique one.)

(John Andersson) #7

Anyone? Please? I could really use some help

(Jacob Albano) #8

If all you need to do is set the visual position of a graphic, you might find this useful. I just added it to my own engine a few days ago. It took me a while to figure out the math behind this and make it consistent and flexible.

You’ll have to modify the code to work with Flashpunk; Camera.Left and Camera.Top are, in FP, equal to Camera.X and Camera.Y respectively.

(John Andersson) #9

Thank you for your input, but I don’t understand what you posted. I would not dare to edit the engine. I don’t even know what namespaces and internals are.

Here is a picture which explains the problem. It feels like it should be really easy to fix this with one line of code, but I can’t figure it out. I’ve tried different math formulas, which include the maps height and scrollY value, but to no avail.

halp.png1054x744 22.3 KB

(Jacob Albano) #10

I wasn’t suggesting you modify the camera. That link was supposed to go to the line for the utility functions I have to set the position of a graphic so it appears in the right position regardless of scrolling.

/// Set the position of a Graphic relative to the screen, compensating for its scroll factor.
public void SetRenderY(Graphic graphic, float y)
{
    float parentY = 0;
    if (graphic.Parent != null)
        parentY = graphic.Parent.Y;
    
    y -= parentY;
    graphic.Y = y + Top * -(1f - graphic.ScrollY);
}

Should be easily modified to work in Flash/Flashpunk.

(B6ka) #11

What if you set the y value of the background for each level separately? Just extend the base Level class for each level (Level1, Level2, etc.) and manually set the y value for each level, i.e. move it down if it is too high and vice versa.

(John Andersson) #12

That would take me a very long time, since my game has around 243 levels at the moment… they are short but they are plenty!

(John Andersson) #13

Cool, where do should I add all of that code?

(John Andersson) #14

Hello? :stuck_out_tongue: I don’t know where to add that

(Jacob Albano) #15

It doesn’t matter where you put it? Substitute FP.camera.x for Left and FP.camera.y for Top.

(John Andersson) #16

I tried putting it after addgraphic but then it told me I can only put the public attribute inside a package… so how should I construct this package and refer to it? Sorry for not knowing this stuff, but I’m still not that good at programming :stuck_out_tongue: so many new thigns to learn all the time

(Jacob Albano) #17

That’s fine, but this doesn’t need to be anywhere special. It can be a function on your class or you can make a helper class for it, doesn’t matter at all.

Something I hadn’t considered is that you might not be familiar with C-style language (this is in C#), so translating the code might be difficult. Here’s a flash version (untested):

public static function setRenderY(graphic:Graphic, y:Number, camera:Point, parent:Entity = null):void
{
    var parentY:Number = 0;
    if (parent)
        parentY = parent.y;
    
    y -= parentY;
    graphic.y = y + camera.y * -(1f - graphic.scrollY);
}

Changing this to work for the x position is trivial.

All you do is pass the position you want the graphic to show up as if it has a scroll value of 1 (the default).

setRenderY(bgImage, 100, world.camera, this); // where this is your background entity

I haven’t been very active on here since I’m settling into a full time job, so I’m sorry if it takes me a while to get back to you.

(Martí Angelats i Ribera) #18

Actually camera:Camera sould be camera:Point :wink:

(Jacob Albano) #19

Oops, that goes to show how long it’s been since I’ve used Flashpunk. Indigo is quite drastically different at this point.

(John Andersson) #20

Thank you so much for helping, there is no need to say sorry. I understand :smile: We’re making great progress here, I almost understand what the function is doing now. I assume that “1f” was a spelling error? I removed the “f” since it gave me an error.

Anyway, there is only one small problem left. I can’t seem to understand what the “this” part should be in

setRenderY(bgImage, 100, world.camera, this);

I read “where this is your background entity”, but since the background is not an entity, but a tilemap, it produces an error. I make the backgrounds manually in Tiled.

I tried changing “this” to the same thing I replace “bgImage” with and other things that didn’t work.

Example:

setRenderY(_map_BG, 100, FP.world.camera, _map_BG);

which gives me an error:

Error: Implicit coercion of a value of type net.flashpunk.graphics:Tilemap to an unrelated type net.flashpunk:Entity.

PS: All of this code (and the background tilemap parsing from XML) is taking place within the gameworld. Thank you for all of your help Jacob. This community wouldn’t be the same without you!