Stencyl 3.4.0 is now out. Get it now!

Totally Awesome Transitions for Cool Developers Like You [Engine Extension]

Hectate

  • *
  • Posts: 4642
SadiQ and Hectate proudly present
Totally Awesome Transitions For Cool Developers Like You!

Greetings fellow Stencyler and Cool Developer! I'm sure that you have thought to yourself "Golly, if only I could have some totally awesome transitions to make this scene switching more interesting. If only someone could release an extension that solved this problem for me!". Well fear no more, because SadiQ and Hectate have come to your rescue. We are pleased to announce the release of our fine extension that resolves this handily.

You may find yourself wondering just exactly how awesome these transitions are. Do not fret yourself over such trivial matters; we shall prove it to you! Examine below, how incredible and smooth the exciting transformation between scenes is made by the addition of these Totally Awesome Transitions For Cool Developers Like You!

Fancy images to come in the near future
Video on Stencyl's Facebook

"But Hectate," you say, "how much are these incredible feats of coding prowess that I find myself uncontrollably compelled to obtain going to cost me so that I might use them in my projects and try to fill the void in my soul left because I will never be as incredibly talented as you two fine coders?" Why nothing of course! They're absolutely and entirely free for each and every person! Yes, even you! SadiQ and I would not turn down a free beer, if we were to meet you in a pub someday - but it is not required (perhaps, we might buy you one). In the meanwhile, enjoy!

Of course, this post would not be complete without some instructional documentation for the hapless users we are unleashing this on! Read on below, fellow developer, and be educated thoroughly concerning all matters involving Totally Awesome Transitions For Cool Developers Like You!

Where it works: Flash is confirmed. All other platforms are untested at this date, and use-at-your-own-risk (sorry, they should be fine though, mostly?). Please let us know if you have any success/failure on other platforms so we can share the joy or sadness, or perhaps release new versions with greater compatibility in the future.
Questions not covered above or below: Please join us on the Stencyl Discord server if you want to ask questions, troubleshoot issues, or proclaim how magnanimous we are for releasing this to the public. You could also post in this thread, if that's more your flavor.

Blocks

Details
Change to [Scene] using [Transition]
This is the block that you use to actual trigger a scene change. Select a scene, or a Scene attribute block, as the scene you will change to. The blank space is meant to hold any of the blue Transition blocks as the transition for this scene change.

Make [Number] [Horizontal/Vertical] blinds over [Number] seconds
This transition divides the screen into horizontal or vertical strips, similar to window blinds. Results are strange with few blinds (e.g. less than 5 or so), and an even number is recommended - and in particular one that divides evenly into the screen resolution. The total duration of the transition is related to the number of seconds given, but the transition will actually take longer as you add more blinds. Because we are not currently altering this code, please assume this is a feature and not a bug, and experiment and tweak the value to arrive at the desired effect.

Slide [Old Scene Out/New Scene In] moving [Up/Down/Left/Right] over [Number] seconds
The new/old scene will slide in/out of the scene, thereby concealing or revealing the other. Nothing particularly special or fancy, and in fact Stencyl already has this I believe. Consider this more of a convenience. We had hoped to introduce alternate tweens (bounces, etc) at some point, but at this time it is strictly linear. We could, if there is interest, revisit this in a future release should one occur.


Push [Up/Down/Left/Right] over [Number] seconds
The new scene will push the old one out of the way (both will move) in the desired direction. Again, this has greater possibilities in the future.
Lies, they're all lies.

Crossfade in-out over [Number] seconds
This is the exact same code used in the Stencyl crossfade (because I took it from there to learn how the transitions work), so nothing special here either yet. Sorry, your transitions are in another castle/these are not the transitions you are looking for; move along.

Threshold masking using [Image] [Dark-to-light/Light-to-dark] over [Number] seconds : blur [Number] quality [Number]
This is an exciting, exceptionally-customizable transition that uses any arbitrary image to progressively mask out portions of the old scene and reveal the new scene underneath. Anyone familiar with RPGMaker transitions should be familiar with these. A number of images are available (see the Installation Notes), or you can create your own or generate one from an Image attribute in Stencyl! The Dark/Light dropdown allows you to reverse the "direction" of the threshold (inverting the image, essentially). The Blur and Quality numbers allow you to smooth the edge of the threshold, but with a performance penalty as numbers increase. Setting either to zero will disable the smoothing.
Note that images are automatically re-scaled when the transition begins so they fit the screen size fully. Thus you could use smaller images for your transitions to reduce the space requirements. Images larger than the screen would be pointless.

Use [Number] rows/columns, shrunk to [Number] and then [Flip/Shrink] over [Number] seconds, with [Color] background

This cuts the old scene into equally-sized "cards", based on the number used for the rows/columns. These are intended to shrink a bit (so you can see the gaps), which is equal to the second number shown. This number should be a float between 0 and 1, with a value around .8-.9 recommended as a starting point. These cards will then either Flip over to reveal the new scene or Shrink to nothing with new cards appearing using the new scene's image instead.

Threshold using Perlin noise at scale [Number] over [Number] seconds
This does the same thing as the Threshold using an image, except it handily produces Perlin noise (random blobs with smooth gradient between them) image for the transition. The scale should be a multiple of 2 and the higher it is the larger the "blobs" of noise. There is a small amount of blending hardcoded into this already.

Installation Notes
Google Drive
Please download the extension file transitions.zip. The zip file can be installed in the usual fashion (or by alternate method). The code contained in this extension is being released under CC BY 4.0 which pretty much means you can do whatever you want with it, almost. If you have questions or concerns about this, please PM me.

Also available is extras.zip containing some images for the Threshold transition. I made all of them myself and they are released into the public domain, or the best legal equivalent for the laws in your country. Please feel free to learn from them, modify them, or include them in your projects as you see fit. To use them (or any that you create yourself), simply include the image in your /extras folder for the game and then reference them with the "image from file" block. Most are 640x480 (as that is the default resolution for Stencyl projects). Notably, the simple wipes are single-pixel wide/tall and you will see that the re-scaling done at run-time permits them to cover the entire screen easily!

« Last Edit: January 17, 2017, 09:01:35 am by Hectate »
:
:
Patience is a Virtue,
But Haste is my Life.
Proud member of the League of Idiotic Stencylers; doing things in Stencyl that probably shouldn't be done.

Hectate

  • *
  • Posts: 4642
We're so over-confident in how explosive this thread will be that we are reserving this second comment for future use. Hurrah.
:
:
Patience is a Virtue,
But Haste is my Life.
Proud member of the League of Idiotic Stencylers; doing things in Stencyl that probably shouldn't be done.


LIBERADO

  • *
  • Posts: 2140
Thanks a lot.

A bug: the Push transition behaves as the Crossfade in-out transition.
I'm spanish, excuse me for my bad English.
I'm not a private teacher. Please, post your questions in the public forum.

Eriko

  • Posts: 148

havana24

  • *
  • Posts: 468
Thanks guys, I'll test it on windows! ;)

-Alessandro
My Website: www.havana24.net

SadiQ

  • Posts: 1706
@ Hectate: Now THAT'S how you write a topic hehehhehe.
Proud member of the League of Idiotic Stencylers! Doing things in Stencyl that probably shouldn't be done.

Hectate

  • *
  • Posts: 4642
Thanks a lot.

A bug: the Push transition behaves as the Crossfade in-out transition.
Right, so that's another feature not a bug. Alternative explanation; I created placeholder code for it and never actually wrote anything that did a "Push" instead. I'm not sure how I missed it because I thought I tested all of them but I guess not.
We'll correct it in a future release.
:
:
Patience is a Virtue,
But Haste is my Life.
Proud member of the League of Idiotic Stencylers; doing things in Stencyl that probably shouldn't be done.

Wow!Thank you so much.=D

AlexVsCoding

  • *
  • Posts: 111
This is super cool as a feature, although I feel it could gain a lot more traction if you had examples of the transitions in action (E.g. The Stencyl shader tutorial http://www.stencyl.com/help/view/shaders). Thanks again for making this and look forward to giving it a go!

SadiQ

  • Posts: 1706
Proud member of the League of Idiotic Stencylers! Doing things in Stencyl that probably shouldn't be done.

Hectate

  • *
  • Posts: 4642
Yes, we were just talking about that in Discord also. I think the correct route will be to create an example game that a user can open and see a bunch of these in action and also look at the blocks in a behavior. I also want to make some example GIFs, and there's actually a nice video on the official Stencyl Facebook page of some of them.
:
:
Patience is a Virtue,
But Haste is my Life.
Proud member of the League of Idiotic Stencylers; doing things in Stencyl that probably shouldn't be done.

robinschaafsma

  • *
  • Posts: 633
Awesome.. :) Goodwork
byRobinGames.com


I'am not always on the forum, you can mail me if you have an question. info@byrobin.nl



Donni11

  • *
  • Posts: 2121
@Hectate, I thought these were going in the Stencyl Black Friday store... you let me down....
The Stencyl Discord Channel , Where the real Stencyl work happens ;).

Hectate

  • *
  • Posts: 4642
Well if you want to wait until next Black Friday to download them, be my guest :)
:
:
Patience is a Virtue,
But Haste is my Life.
Proud member of the League of Idiotic Stencylers; doing things in Stencyl that probably shouldn't be done.