You can see the sheared floor rows disappearing behind the bath here: If the bath were in the same layer, it would be sheared along with the floor tiles, which wouldn’t look right. Why can’t the front of the bath just go in Scroll 2? Because there are 16 rows of floor pixels that are beyond it. As we move away from the centre of the stage, the rectangle becomes more and more skewed, and the entire layer also scrolls, giving the appearance of a flat horizontal plane behaving as if we were looking at a 3D scene. In the centre of the stage, the horizontal offset is zero, and the tiles are drawn unmodified. I’ve drawn a rectangle around the floor area so its effect can be easily seen: Three different floor perspectives, the extreme left of the stage, the centre, and extreme right. The clouds in the sky fly past independently of our movement on the stage – parallax isn’t used for it all.Ĭonsecutive rows in Scroll 2 are grouped together depending on which surface they belong two, and each row within that group is displaced by a certain amount to create a shear transformation. Ryu’s stage uses Scroll 1 for drawing the sky, which places it underneath all the others. Note also that the scrolls don’t have to be layered with 1 on top and 3 at the bottom, it just happens to be this way for E Honda’s stage. The key thing here is that the layer’s priority (which layers it is drawn on top of) and the layer’s displacement are two different things. This works, because Scroll 1 moves as if it were located there. Note that while Scroll 1 is drawn on top of the other layers, the object it contains appears between the floor and the top of the bath. Ken and Ryu’s sprites are anchored to Scroll 2, water dripping from the bath and a small tub are anchored to Scroll 1, which contains the front surface of the bath.
#WORDPRESS ROAD FIGHTER SLIDER BELOW NAVIGATION FULL#
The three layers combine with the sprites to create the full image shown below.
![wordpress road fighter slider below navigation wordpress road fighter slider below navigation](https://hushkit.files.wordpress.com/2021/07/screenshot-2021-07-07-at-18.05.45.png)
We have Scroll 1, with the front surface of the bath, Scroll 2 containing the floor, ceiling and the top surface of the bath, and Scroll 3 with the background. Let’s look at how that stage is layered: The three tilemap layers, Scrolls 1, 2, and 3 from left to right. All of the SF2 stages have a floor with parallax scrolling, only a few also have a ceiling, but E Honda’s also has a nice bath in the centre of the stage. Let’s take a look at E Honda’s stage as it is the most interesting. In the space of a minute, the mountain seems not to move at all, nearer features appear, cross our vision and disappear from view, while the fence bordering the railways corridor whizzes past, the only object giving us a true sense of the train’s speed. This matches our experience with the real world, for example riding a train and looking out the window a far away mountain. Elements very far away (in photography and modelling we call this “at infinity”) don’t move at all.
![wordpress road fighter slider below navigation wordpress road fighter slider below navigation](https://miro.medium.com/max/1400/0*NMVr1eP52BwTFets.png)
A small amount of floor in front of the fighters has a negative Z-depth, with background elements having some positive Z-depth.Īs the camera moves horizontally, elements with a negative Z-depth move more than elements at Z=0, which in turn move more than elements with a positive depth. We can think of an imaginary line just underneath the feet of our fighters as having a Z-depth of zero.
![wordpress road fighter slider below navigation wordpress road fighter slider below navigation](https://ravencrimereads.files.wordpress.com/2021/10/girl.jpg)
The other two scrolls and the sprites are always positioned somewhere relative to this main scroll’s position, and the Z-depth of those scrolls.
![wordpress road fighter slider below navigation wordpress road fighter slider below navigation](https://monsterspost.com/wp-content/uploads/2019/12/swimmerz.jpg)
In SF2 we can think of this as the “main” scroll. We can see this effect on the the floor here: Two different perspectives of the floor: one in the centre, compared with one at the far left of the stage. One of these layers is special, and allows for each individual row of pixels to be scrolled horizontally, in addition to the entire layer itself. We saw in the previous post that the CPS1 has three layers of tilemaps which can be scrolled independently: Scrolls 1 through 3. There’s no way we can use this effect for horizontal surfaces like floors and ceilings – we’d either need to use a lot more layers which we don’t have, or a huge amount of tiles to represent different perspective angles, which we’d rather not.įor horizontal surfaces like floors and ceilings, SF2 uses another technique called row scrolling (a.k.a. This really only works for elements that are standing upright, though. Elephants overlapping by different amount depending on the camera position.