Announcement

Collapse
No announcement yet.

How to add interesting transitions between levels?(Iris, mosaic/pixelization, melting, waves, etc.)

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    How to add interesting transitions between levels?(Iris, mosaic/pixelization, melting, waves, etc.)

    I know there are plenty of tutorials on how to fade in/out transition between levels, but none on other effects. I'm looking to create wave effect, melting effect, iris effect, and pixelization/mosaic effects to transition between levels.

    Here are some examples:

    Melting effect:

    https://www.youtube.com/watch?v=m9HvAXZgGeQ&t=3m57s




    Iris wipe:
    https://www.youtube.com/watch?v=KDsux0h2f78

    Wave effect:

    https://www.youtube.com/watch?v=XZBaiyNvsoA&t=1m32s

    Pixelization/mosaic effect:

    https://www.youtube.com/watch?v=8p4EY8LVcpg&t=0m13s


    How would I go about implementing this? Since these are two dimensional transitions, I think it might be good to have the game save a screenshot of where the camera/player last was and then have that screenshot laid over the next level. Because I have seen Unreal games that feature the ability to take screenshots in-game.

    Now for the iris, I think it would be pretty simple. Maybe animating a transparency/alphamap for the hole expanding at center of the screenshot with the next level underneath. (Ditto for the melting effect. ) Do you think this would work?

    For the wave and mosaic transitions, I'm at a loss. I have no idea how I would even begin to do these.

    A few questions:
    1.How would I make these transitions?
    2.Do you think the use of screenshots laid over the next level would be a good idea?
    3.How do make the game make screenshots and will the resolution be the same, or would the size of the screenshot depend on the resolution (this is the ideal for me)


    He is another video of transitions for reference:
    https://www.youtube.com/watch?v=5_D1GTEYOc8

    Thanks in advance..
    Last edited by tapirtoon; 12-06-2018, 06:43 PM.

    #2
    Edit: you might have to right click and press "view image" to see the images in full size. They're a bit smaller on this forum for some reason

    Comment


      #3
      Post Process
      https://docs.unrealengine.com/en-us/...ProcessEffects
      https://www.casualdistractiongames.com

      Comment


        #4
        Originally posted by OptimisticMonkey View Post
        You can apply post process effects to in-game screenshots?

        Comment


          #5
          Actually to do that transition effect you should combine post process effect with screenshot. Because after changing the level you need to have some information from previous level, to have smooth transition. So you do post process on first level, save screenshot of post processed image of screen, then load next level, and start with postprocess on, which should mix and blend post processed render of current level and previously saved screenshot.
          Check out my works here: Youtube channel. Project: CityBattle | Virtual Earth

          Comment


            #6
            Originally posted by OptimisticMonkey View Post
            Originally posted by Demnus View Post
            Actually to do that transition effect you should combine post process effect with screenshot. Because after changing the level you need to have some information from previous level, to have smooth transition. So you do post process on first level, save screenshot of post processed image of screen, then load next level, and start with postprocess on, which should mix and blend post processed render of current level and previously saved screenshot.
            I found these guides and they look extremely promising! Almost exactly what I looking for:

            Here are the links. Have a look:
            https://www.parallelcube.com/2017/10...erials-part-1/
            https://www.parallelcube.com/2017/10...erials-part-2/




            Now I'm still lost on how to apply these to previous level screenshots. What can I do to do this?
            Last edited by tapirtoon; 12-08-2018, 05:21 PM.

            Comment


              #7
              If you want to use this effects in a 3D your best option is to use a Post Process Effect
              You have a tutorial explaining how to use this 2D materials into a 3D scene using a post process volume

              https://www.parallelcube.com/2018/12...rocess-volume/

              I think this method is easier than taking a screenshot and pass it as a parameter to the "2d" Material, so take a look to the tutorial and give me a feedback with your results

              Audio Analyzer
              Web | Marketplace | Support

              Comment


                #8
                Originally posted by BYC View Post
                If you want to use this effects in a 3D your best option is to use a Post Process Effect
                You have a tutorial explaining how to use this 2D materials into a 3D scene using a post process volume

                https://www.parallelcube.com/2018/12...rocess-volume/

                I think this method is easier than taking a screenshot and pass it as a parameter to the "2d" Material, so take a look to the tutorial and give me a feedback with your results
                Wow, thanks a lot! I will test this soon.

                Comment


                  #9
                  Originally posted by BYC View Post
                  If you want to use this effects in a 3D your best option is to use a Post Process Effect
                  You have a tutorial explaining how to use this 2D materials into a 3D scene using a post process volume

                  https://www.parallelcube.com/2018/12...rocess-volume/

                  I think this method is easier than taking a screenshot and pass it as a parameter to the "2d" Material, so take a look to the tutorial and give me a feedback with your results
                  Will this also work for the wave distortion and radial cutoff transitions in a similar way, or are those different? Please let me know. Those are the only other transitions I would need, except for "blinds" transition? Do you mind doing tutorial on this?





                  Comment


                    #10
                    The wave distortion material can be modified in the same way, replace the Texture sample with a SceneTexture node.

                    The Cutoff transtitions of that tutorial are applied to an image, in full screen, in a widget. You can continue using this materials in 2D with that trick, or you can apply a mask directly to the SceneTexture node.

                    So the Radial Cutoff Material can be transform from this
                    radialmaterial_2d

                    to this:

                    radialmat_ppv

                    And now can be used in a Post Process Volume, the result is the same.


                    With regard to blinds transitions I think you have all the knowledge in https://www.parallelcube.com/2017/10...erials-part-2/. The most difficult part is to create the gradient mask.


                    I want to make a short tutorial doing a transition blending to levels at the same time, I dont know when, but I think it would be interesting.



                    Audio Analyzer
                    Web | Marketplace | Support

                    Comment


                      #11
                      Originally posted by BYC View Post
                      I want to make a short tutorial doing a transition blending to levels at the same time, I dont know when, but I think it would be interesting.
                      That would be interesting. A lot of people have been wondering how to blend transition between levels, but no one has done it yet (or at least not posted about it online).
                      Originally posted by BYC View Post
                      If you want to use this effects in a 3D your best option is to use a Post Process Effect
                      You have a tutorial explaining how to use this 2D materials into a 3D scene using a post process volume

                      https://www.parallelcube.com/2018/12...rocess-volume/

                      I think this method is easier than taking a screenshot and pass it as a parameter to the "2d" Material, so take a look to the tutorial and give me a feedback with your results
                      It says I need Visual Studio 2017 to open this project. I'll install it to see it, but when I finally release my game will the users have to download Visual Studio 2017 to run the final packaged game? Because Visual Studio 2017 is a HUGE download size (almost 40GB!).

                      Comment


                        #12
                        As any c++ windows application, the users will need to install only the redistributables package (is a bunch of libraries) to be able to run the final game. This package is included in the game build and its size is much lower than a VS installation.

                        I think my IDE installation is below 40GB. You don't need to install all the IDE options, to develop only with UE4 just enable Game development with C++

                        You can follow this guide to see the recommended options
                        https://docs.unrealengine.com/en-us/...ualStudioSetup

                        Of course, if you plain to package to other platforms, like Android or IOS, you need to add more options.

                        Btw, since version 4.20 I think SDK 8,1 is not needed any more



                        Audio Analyzer
                        Web | Marketplace | Support

                        Comment

                        Working...
                        X