[Tutorial] Diagonal stages (how to create AND how to play)

*Original post by Don Vecta.

Okay, seems this is one of the most difficult type of stages to build up. Remember stage 1-1 on SOR2? How about the arcades in stage 3-2? Or the jungle in 6-2? Or in Final Fight 2 stage1-2? Some beat 'em ups started to use diagonal stages to add more depth and style on them and a modder also wants to use these elements in their works but... how to make them work properly? Here's some basic tips how to make them work... at least the traditional style of going from up to down... or from up to down to up.

What do you need:

1) SORmaker unlocked. Duh. FPG edit. Double duh!
2) A fpg with a layer going beyond the typical 240 height (most modders would use a double sized vertical layer at 480, but you can go as down as you want, as long you also can go in straight as well).
3) A fpg with a map (almost a must, unless you want a whole free roaming place up and down, but sure it's gonna be a mess in the end).
4) LOTS OF PATIENCE!

Okay, let's start with the first thing:
A) Design your stage.

If you want to build a stage that goes from up to down (say, like SOR2 1-1) put in mind that even though you start in a 240 height environment, when you put your stage settings in diagonal left/right on SORmaker, the stage will now scroll up and down as well, so you must design your stage thinking like that.

For instance, if you start from up to down, try to design the floor down the longer your scroll allows you too (of course, by using your map to lock your character at certain point). Here's an example (using LucasHB's Manhunt stage as sample):



Basically, you must think in the scrolling you can do not only from left to right (scroll X) but from up to down as well (scroll Y), and by setting the SORmaker stage in diagonal left/right you are making the engine to go up and down as well, and not only left or right.

In fact, the design of your level must be done at the same time with your map level as well since you'll start figuring out the paths and routes it will be taking and how it will be going down or up. See the example below (using Charco's v4 remade stage 1-1).



With this get up you'd be able to have a nice diagonal walkable zone without problems.

2) Layers usage.

Easy stage designs like the one LucasHB used in Manhunt can do the trick and then you just need to place your enemies and voila, but what if the modders want to add more complex effects, background layers or the worse: foreground layers? Is it possible? The answer is yes, but it's definitely a lot trickier than you could guess.

So let's start with something, can we create a multi layer background without messing it up? Yup, we can.

If you want to use a background that remain the same style horizontally (even with an infinite loop), you can use your standard 240 size (or less, if you're using only a skyline or the non-walkable area), but you gotta set it up as follows (using a stage of H.U.N.T.E.R. by yours truly):




Check the examples, the image will be completely fixed, even up and down (the down part doesn't matter since you simply won't see it at all, considering you've already covered the sensible scroll areas). That's thanks to your Scroll X tab in the layer. It will keep it totally fixed vertically, even if you go up or down, but it will scroll normally horizontally as you walk without problems.

For the other background layers that need standard scrolling in X AND Y (say only a layer existing in a part of the stage but not in the whole background but you don't want it to be sunk in the stage with the Scroll X tab) then do a normal layer placement as in any normal stage: place the layer in the area, put your scroll type as Auto (the default type), tweak the kind of scroll speed below and that's it.

So, how about foregrounds?

Trickier, but possible indeed.

Scenario 1. Let's say you want an area where there's some objects that due of vertical scrolling would look like if you stepped over them? But also, this layer is at the bottom/top of the stage. You don't need it scrolled at all but you need certainly make sure that you don't step over them so you can give depth to the stage.

Then just make the items you need in the foreground in a whole layer with the size of your main layer 001 (if possible, from your stage design in your image editor just duplicate the items you need to stick out, then disappear the rest of the elements of your design BUT the stick out items with a black background, save, and add it in your fpg).
On SORmaker, put the layer on -240, which is the maximum foreground visualization without overlapping the lifebars, stage clear screen and other stuff. And the scroll speed to 1 so the layer gets stuck completely on your main layer as if it was part of it.


VOILA~!
Many people might be asking why not using a layer with the exact size of the items you want to put on the foreground, and in fact you could, but by using the same size of your main layer and being done inside the graphic design of your stage, it will guarantee 100% accuracy of the item placement inside the game, thus no need to tweak for positioning, especially on diagonal stages.


Scenario 2. Remember the bad effect shown on Charco's stage 1-1 of v4 remade?



Yes, this scenario. I want to make a scrollable foreground in the first area of the stage before I go down but... considering that my stage scrolls also up and down even before I need to go down or up then it does show that under my layer there's... a void! >_< What to do!?

Okay, there's two solutions for this:

1) The easier way to do this is to place your foreground layer (has to be a partial layer, of course, you only need it in that area in particular) with Scroll X tab. Also make sure to tweak the speed of your foreground scroll in order that, when you need to go up or down, the foreground layer is out of the area so it doesn't look weirdly out of place... like this:

This way, whenever you move up or down, the foreground stays on screen.

Examples:



I personally don't like how it looks like because it looks awkward the effect, but I think it works well if the foreground it's meant to be from a bit aerial position that justifies the foreground to be shown... like from a nearby rooftop, say.

2) A more elaborated way to do this is: Make a foreground layer covering the Y visible areas, which means, if you want to use the generic fences, garden dividers, phone booths, cars, signs, people, etc, make sure their bases are visible over a different ground layer if you wanna make them visible. Pretty much you have to fill out the void beneath it.

In all honesty, this could be my approach if I had to since it will deliver a more visual stunning impact and won't look awkward the scrolling in X and Y altogether. You still might need to tweak the speed of that foreground so doesn't clash vertically with your players/enemies and look like if a whole sidewalk is stomping over them.

Point in fact, would be highly recommendable to keep the design in the vertical viewing area as you go down so it looks like a whole street block (the same, keeping it under the non-walkable area).


General tips:

If you are going to use police, put it in Helicopter only mode, otherwise... something like this would happen:

which doesn't look THAT bad if you filled up the lower part completely... but if you did, then it might look as shitty as this:


So, bottomline, stick with Helicopter assistance only.

Now here's the deal breaker: How to play a diagonal stage?

Yeah, sounds stupid, kinda like:


...but seriously though, several players have found that playing diagonal stages are not so easy. They're easy to get stuck there forever and not getting the scroll down properly or simply stay in a point where you can't go anywhere thus you need to start again from scratch (remember SORmaker games don't have savestates? ffffffffffffffffffffffffffffffffffffffffffuuuuuuuuuu~!)

So pretty much, it's necessary to know how to play them properly. Here some tips to avoid getting stuck in the scroll down.

1) Trigger your vertical scroll from the beginning of the stage. Walk forward then go down, then tip up and press down again until the Y scrolling begins. Lot easier if you do roll down ( down down) then up
a bit and the roll down again. This way it's easier to go down if you want to without getting stuck. You also can run diagonally as well to trigger the vertical scroll as well (you need the options for that on, though).
2) Do NOT run amok straight to the wall before you go down! That's the thing, you go straight quickly to the point you scrolled all your way in front of you. So there's no space for you to do the forward then down motion to unlock the Scroll Y of the engine. And since you wouldn't get a chance to go back then you're living in la-la land forever and ever.
3) In the point the map allows you to go down, then go down immediately. Odds to get stuck are less and less.

Thing is that the scroll Y is active during the whole stage but it has to be triggered by movement, otherwise, going straight would keep the scroll going that way and to unlock it it's necessary to go forward then down.

Oh, and about Benny's question about not going up from the bottom, unfortunately no, cannot do that. First you must go down a bit then you can go up all your way. Oh well.

From CajNatalie:

One problem I found with diagonal stages (2 guesses what I'm doing) is that if you start the scrolling, then go back up... the vertical scroll LOCKS, and you can't go down again!

However, if you ensure you have 168 pixels of green at the top, then you can walk high enough to scroll back up the screen, but it won't lock.

And for a vertical scroll trigger, I've found this method has worked every single time so far...
Before scrolling at all, walk all the way to the top.
Then walk forward until horizontal scroll begins - STOP.
Do a barrel roll (down)!
Vertical scrolling begins.

If there's a 168 pixel green wall above, you can continue the level safely until the diagonal part.

Designing diagonal stages tips.



Sometimes it is possible to keep walking and scroll down the less possible so minimize fighting space and make easier to dispose of enemies (a technique I always use), therefore, the chopped upper areas from the scroller can be visible if only covers the 240 height limit (not to mention the background's black space as it wasn't set in an X scrolling axis).

The solution? Design beyond the box.

When creating a diagonal scroller, make sure it covers 192 pixels above the bottom 240. Expand the upper areas with copy/pasta or things that make sense. In this case, as the game shows a clear area above, the upper areas should be finished with something that gives style or sense and not just the Photoshop cut out of the image.

As for the background problem, there's two options.

1) Use X scrolling. The BG won't move up or down, will scroll in X from left to right without showing any spaces.

2) create a BG with a height proportional of the height of the diagonal stage (say, a diagonal stage is 3 times more the normal screen, around 720, then the BG layer should be x2 the height, in this case 480).