RMMV Creating the illusion of Z-axis with Parallax - the ground falls below as you fly above

[TheAM-Dol]

Hello,
I've been trying to create (what I initially thought was easy) this effect of the player rising higher and higher into the sky as the ground below gets smaller and smaller.
I'm open to ideas on how to achieve this, but my idea, and the one I've been pursuing has been using the Parallax.
TLDR; I'm looking for a plugin to help me achieve the illusion of a Z height

The current method: multiple images at different crop levels
My current method involves creating a very large map and exporting it as an png. Then in photoshop I can crop the map at different zoom levels and assign each zoom level to an event, so as the player moves forward or "up" the parallax can swap to an image that is incrementally more and more zoomed out. Here's the problem; it looks really bad The transition of one crop level to the next is harsh and sudden and not very appealing. I could smooth this by changing the number of steps between crop levels, but 1) that's a lot of work, requiring me to render twice or more the number of crop levels, and 2) probably still won't look very smooth.
So I tried looking into some plugins that assist with parallax, and...maybe I'm just not using the right search terms on both DuckDuckGo and Google, but I couldn't find many simple options. Many options are either way overly complicated, such as the case with DrDhoom's Parallax Utility (more on that later) or seem to be more focused on parallax mapping, which is an entirely different concept than what I am trying to do.

Using Crossfading between steps to smooth the harsh transition:
Now, DrDhoom's Parallax Utility may be the tool I am looking to use, but I spent probably 2 or 3 hours reviewing the demo project, reading the help section, and just play testing things and the best result I got was a headache-inducing effect of the parallax image rapidly shifting left and right. The problem with the Parallax Utility is that it does WAY WAY more than I actually need. All I really want is a crossfade between parallax images. I feel that at the very least, cross fading between different crop levels will at least reduce the unappealing nature of my current method. So, I guess option 2 for this thread is: how the heck do I set up DrDhoom's plugin to allow for crossfading between multiple parallax backgrounds?

A plugin to pan & zoom a single parallax image:
But, I think ideally, the best option would be a simple plugin that allowed the parallax background to pan AND zoom. If there were to be a plugin that allowed for pan and zoom, then I could load in my 1 massive png image of the map as the parallax, start this parallax image at a high zoom level, and as the player moves up, it can begin zooming out on the image, creating the illusion of Z axis, but I've been unable to find any plugins that can do this so far.

As always, the help of this community is greatly appreciated

 

[Andar]

There is an old engineer's saying that is very appropiate even here:
cheap, reliable, powerfull: pick two to max and it will cost you in the third.
there is absolutely no way to max all three for any machinery.


your problem here is similar. you cannot have everything at the same time.
and your description above even ignored a few more problems with that idea, that would probably only come to your attention after the display problems would be in the past, like how to identify the landing coordinates after panning over a large part of the map.

I'm not sure I can explain the problem that will cause for you, but I'll try.

a parallax is basically calculated on triangles, with the fron t side being your map grid and a distant point below as the third point of the distance triangle.
but if you have more than a single map grid to transfer, that distance transfers to non-regular grid sizes.
just think about it: if you zoom out when flying up, and then go two grids to the right - what position would you be when landing again?

It's like going south from the north pole: that is the only place on earth where you can go south 5 kilometer, then west five kilometer and finally north five kilometer to end on the same spot. anywhere else you would end up five kilometer to the west of your starting point.

to make a plugin that both zooms and pans a parallax requires a lot more than you think, because you have to include a full coordinate transformation on the map grid to determine where the player will be after landing again.
theoretically it can be done, but it requires a lot of mathematics to work correctly.
and even for the few programmers that can handle those mathematics it will not be a trivial work.
so I don't think your chance of getting that for free are good. Your chances are probably higher if you are willing to commission someone and pay for such a plugin.

 

[ramza]

Sounds to me like what you're trying to do is what is colloquioally known as 'mode 7'. A term that dates back to the days of the SNES where the background layer is tilted and transformed causing the illusion of depth, while sprites riding on top of it are swapped out depending on apparent distance to create the illusion of them getting closer to the camera.

Mode7 on wikipedia.

Fortunately, there is a plugin that allows you to achieve this, on this very forum. Knowing what it is called would've made you find it more easily.

 

[TheAM-Dol]

what position would you be when landing again?

True that, though, I suppose in my case it's probably not necessary to know where the player would land. In my case, it's sort of just a dramatic long staircase before the final fight...so there's no reason to know a specific landing spot. While technically, a player may choose midway up the flight of steps to turn around in the event they forgot something, if the plugin doesn't really know where the play would be, then I could easily just prevent them from turning back through eventing.
So, while that plugin may not be possible - I would assume anyone willing to develop the plugin would want to distribute it for others to use, by my use case is maybe a bit too niche - there is still the alternative I had mentioned that is still a possibility, which is crossfading between different images.

Sounds to me like what you're trying to do is what is colloquioally known as 'mode 7'.

Actually I am aware of Mode 7, though I didn't consider it because actually what I am trying to do is have one part of the map stay at the same "height" I guess you could call it, while everything below that part of the map drops out.
I'm not sure if Mode 7 can do this, since if I recall Mode 7 tilts the perspective on the tile set, so in that regard all parts of the map would have that "zoomed out" effect.
So like I mentioned above to Andar, the intent of this is with a giant staircase. So the staircase would need to be at the same "height" as the character, while the world below the staircase sinks further and further away.
I also eventually wanted to transition away from looking down at land and eventually transition to being above clouds, and eventually into space, so that's another reason why parallax came to mind. I figured if I had the ability to crossfade between parallax images, it would be easier to do a soft transition from "ground below" to "above the clouds".

I'll check Mode 7 though anyways, I have one idea, though it sounds like a right pain in the ass. I could apply mode 7 to the large map I exported as a PNG, then using events, I could assign the stair tile as the image for the event. I think in this case the event image would be separate from the map image, right? The problem is that the stair case is planned to be (as I hope I have implied) very, very long (and dramatic), which means it would be a real pain to copy paste that many events to build the stairs, not to mention how cluttered my list of events would be on the map.

 

[coyotecraft]

I believe this is what you want to work with

SceneManager._scene.children[0]._parallax.position = {x: 50, y: 50}
SceneManager._scene.children[0]._parallax.scale = {x: .90, y: .90}

Although, honestly, I think using "show picture" might be easier to work with. Well, maybe. I guess it depends if you're scaling from a fixed point or not.

Edit: Forgive me, I should post more relevant values and a better example. Pivot rather than position is more relevant. The pivot point is kind of like the origin point. When you scale, it'll be from that point rather than the corner. A good pivot point might be the center graphics, when scaling up, aka "zooming in".

"Zooming out" or shrinking the scale means you need to increase the width and height.

In this example I, I just scale the parallax down 50% and doubled the width so it fills the whole screen. But I didn't touch the height, so you can see how it works.

SceneManager._scene.children[0]._parallax.width = SceneManager._scene.children[0]._parallax.width *2

SceneManager._scene.children[0]._parallax.pivot = {x: 0, y: -(Graphics.height*.5)}
SceneManager._scene.children[0]._parallax.scale = {x: .5, y: .5}

//this hides the tilemap and events sprites
SceneManager._scene.children[0].children[0].children[2].visible = false

I should point out that the _parallax width and height are the layer boundaries, normally just the screen size, not necessarily the dimensions of the .png

 

[TheAM-Dol]

I think using "show picture" might be easier to work with

Show picture is brilliant! In fact, now that you have mentioned that, it seems so obvious I almost feel dumb for not thinking about that before. Though, there is still the matter of being able to place the picture behind the tileset similar to a parallax. I wonder if a plugin for that already exists. It might seem redundant since in most cases, parallax would accomplish the same thing, so I feel like it might be tough to find a plugin that can do that...I guess I will start looking.

I must be honest though, I'm not enitrely sure what to do with the JS you shared. Is that for inserting a script into an event?

 

[coyotecraft]

I was thinking the tileset would be part of the show picture facade.

and Yes. You could just put these lines in a event script. But these are fixed values. So it's just goes *blip* smaller parallax.
You could substitute them with the value of a $gameVariable that you are controlling to make it a more gradual transition. As the character is walking up or down steps, the value goes up or down. Making the parallax scale up or down.

 

[TheAM-Dol]

I was thinking the tileset would be part of the show picture facade.

Sort of, let me attach a screenshot. Hopefully it paints a clearer image of what I am trying to do.
Here (as viewed from the editor) you can see the staircase which is part of the tileset. Below the staircase is the parallax image. This image has been generated by exporting a large map I made (see the second image I have attached)

Spoiler: Image 1: Parallax example

Spoiler: Image 2: Export Map

(The long black line is just to make it easier for me to find the center of the map. I assume the staircase shown above will always obscure this black line.)

Hopefully that can clarify things

As for the JS, sorry I'm not sure how to use it or integrate it with my project. When it comes to programming, I'm a complete noob.

 

[coyotecraft]

Yeah, I get it. Script calls can be pretty esoteric sometimes. A few lines of code can do so much, but then I have to write paragraphs explaining how it works and people's eyes glaze over.

I think you can simulate the entire scene with only pictures. With the stairs and character as pictures too, above the scaling background.

But since this is a JS Request I can offer a ""simple"" code that might make this a tad... simpler.
We can reduce this down to just the 1 image of the background...or maybe 2.

So, you don't really need to push the parallax picture "behind" the tileset. You just need a layer mask. A mask is like...masking tape. You know, you paint over it then peel it off so you can see what's underneath. You need a cutout the size of the stairs. But you can't just cut out a transparent stripe on the image itself because that stripe would scale along with the image. So we'd use another image to tape off the area of where the stairs are.
Technically we can use a lot of things as a mask, including the tile map.
But uh, maybe sticking to pictures will be easier to explain.

Picture ID 1 masking Picture ID 5

The code for this is
*cough*
SceneManager._scene.children[0].children[2].children[0].mask = SceneManager._scene.children[0].children[2].children[4]
*cough*

One line. Simple?
Yeah... all you need to worry about are the numbers 0 and 4 highlighted in red.
Which are the index values for picture IDs 1 and 5, just shifted down, see?
You just copy and paste that into a event's script command. And try not to think about how much RM could do if they...no...try not to think about it.

Picture 1 is using Picture 5 as a mask. Lighter values are opaque while the dark values are transparent. You can transform Picture 1 and Picture 5 independently.
The catch is that the mask isn't permanent. It'll disappear when you change scenes, like opening the menu or changing maps. Or the last stroke of midnight. Then *poof* the magic is gone and you'll be back in your RM95 rags.

As I was saying, you can mask other things too. Like the tile map itself. So in theory...you could do it with just 1 image and the tile map. But that's probably too elaborate for a short walk across the screen.

 

[TheAM-Dol]

Thanks for breaking this down into smaller chunks for me to understand.
I've been playing around with this for quite a bit now and just can't seem to get it to work. I feel like I am missing something. I've tried a number of things, such as changing the order (picture #), changing the pictures blend style, inverting the layer mask, moving the script to it's own event. I'm just not sure what I'm missing
Image attached below - the wait times between each section is just for debugging so I can watch the scene load. I copy and pasted the script to a notepad since part of the script is truncated in the editor.

 

[coyotecraft]

Perhaps your picture #5 "ParallaxMap" doesn't have light enough values to work as a mask.
Try converting it to a Black & White image.
White is Opaque. Black is Transparent.

Looking at my example image, I might have miss labeled 1 and 5. Sorry.
The Picture Number order is indeed important.
The mask image should be above and overlapping the base image
#5-Mask
#1- Reid

 

[TheAM-Dol]

Okay, so I had to do a bit of troubleshooting, I got it to work...sort of, but it's not because of anything you told me, your information has been spot on - thank you, my teacher
I tried creating a new project and testing masking there: no problem. Everything worked flawlessly. So, just to be safe, I copied the event from my test project over to my main project and ran the game and...it didn't work.
So, I've learned that this effect is handled through some part of RPG Maker called PIXI which is part of a graphics rendering engine or something, and so I wondered if one of my plugins that utilizes PIXI may be interfering with the script...after turning off a couple of plugins...viola, your java script works flawlessly.
So it turns out my lighting plugin, Terrax Lighting System , has some sort of conflict.
I wonder if it's worth replacing Terrax and completely redoing all of my lighting with a new plugin or seeing about getting the plugin fixed....

edit:
apparently there was a fork of Terrax Lighting called Community Lighting. I've changed to it, but so far seem to be having the same problem

 

[coyotecraft]

No, I see what's happening.
The Terrax Lighting system creates a lightmask spriteset. It's just changing the index we're calling.
Where it says children[2] change it to children[3].

SceneManager._scene.children[0].children[3].children[0].mask = SceneManager._scene.children[0].children[3].children[4]

 

[TheAM-Dol]

Ayyyyyy! You're a life saver! It works now!
Ah man, thanks for bearing with me through all of this, I'll be sure to add your name to my credits list and when it comes time I'll be sure to send you a copy of the game. If there's a preferred name or alias you'd like to be credited as, let me know - otherwise, I'll just put Coyotecraft.

Thank you so much!

 

[slimmmeiske2]

This thread is being closed, due to being solved. If for some reason you would like this thread re-opened, please report this post and leave a message why. Thank you.