This extension allows you to apply transitions between screens. By transitions, I mean all of those fancy effects that you see in PowerPoint or old movies to ease between two different scenes. Here’s a demo project:
“But Richard, how can I transition between two screens if arcade only has one screen?” you may be asking. Well, yes, there is only one screen. This extension gets around that limitation by splitting the screen up by z-index. You can specify a cutoff z-index and screen 1 will include all of the sprites below that cutoff and screen 2 will have all of the sprites above it. When you start the screen effect, it will transition from the upper screen (screen 2) to the lower screen (screen 1).
Still confused? Well let’s take a look at an example program:
In this program (share link), I create two sprites. The one named upperSprite has a z-index of 100, and the lowerSprite has the default z-index of 0. I then set the cutoff z-index to 50.
When the screen transition starts, you’ll see the sprite with the lower z-index disappear while the higher z-index sprite stays the same. That’s because the lower sprites is on the lower screen (it’s z-index is below 50) and the sprite with the higher z-index is on the upper screen. As the transition plays, the upper screen disappears and the lower screen takes over. It will stay this way until you press B, at which point both sprites will be visible again.
And here is another demo, this one does a spooky transition when moving between rooms in a tilemap:
In that cutoff z block, you might also notice the second z-index. Anything above that z-index will be ignored by the screen transition (e.g. HUD elements)
well, I hope you’re ready for some ms paint diagrams!
you probably know that everything in arcade has a z-index that controls when it gets drawn to the screen. You can imagine that all sprites are stacked on on top of each other in a giant tower, with the high z sprites at the top and the low z sprites at the bottom.
The way this extension works is by taking that sprite tower and slicing it in half horizontally; all of the sprites below the slice are drawn on one screen and all of the sprites above the slice are drawn on another:
Now that we have all of our sprites in two screens, we can transition between them! The transition always goes from the upper screen to the lower screen. Like this:
Now, with that in mind, let’s look at a practical example! Let’s say I have a platformer game and at the end of the level I want to transition from the level to a high-score screen. For this, I would:
Create sprites for the high score screen at a low z-index. If I’m using a tilemap, I’d want them to be at a z-index less than 0 because the tilemap is at 0, so let’s say they are all at a z-index of -2
Play the screen transition with the cutoff at -1. This will transition the screen from the platformer level to the high score screen below
After the transition finishes, destroy all of the sprites for the platformer level
)
