I am trying to make a screen fade between scenes for my current project(I know I posted about 2 other projects recently, but I am only helping someone with one, and the other will be my next project), and I tried to do a screen fade that happens between scenes, the fade works in Sector 1, but Sector 3 is unplayable because the entity that has fades out is not fading, what am I doing wrong and is there an easier way to do a screen fade?
Project link to Sector 3: PlayCanvas | HTML5 Game Engine
Link to script with the fade in/out code: PlayCanvas | HTML5 Game Engine
I’m not sure it is any easier but here is an example of using html element overlay to fade in and out. https://playcanvas.com/project/1202866/overview/scene-change-with-asset-preload. You can use the 1 to 9 keys to change scenes.
1 Like
the problem with this one is unloading all assets after the transition starts, which I tested with my previous project, sometimes the global variable may reset if there are no entities with those scripts in the new scene
The scene_transition,js files contains just the fading in/out code and could in theory be integrated into your scene switching code. Or can just be used as example code as a starting point. As you say that project’s focus was about loading/unloading assets so you don’t need those bits.
ok, cool, but I never used these types of scripting before(I never used any script that is labeled as:
class "Name Here" extends PC.Event_Handler).
How do I trigger the transition?
It’s going be a bit of a learning curve to use the code in the project in a plug and play way. As you spotted it’s not using the usual script format for scripts that are attached to entities. I set this project up so that the SceneManager and SceneTransition scripts are not attached to each scene, but instead are created just once at app startup and then they are available for the whole lifetime of the app. But the scene-transition.js script is self contained and self explanatory if you want to try and convert it to the usual script format you know and attach it to a scene.
To answer your question though. If you want to create a new instance of the SceneTransition class and start the transition you would
const sceneTransition = new SceneTransition(this.app);
await sceneTransition.start();
where would I put it?
during the instance where the scene transition starts?
or during the instance where the scene transition trigger activates?
I’d need to take a look at your code. I’ll see if I have time in a few hours.
if you didn’t see it above, here: PlayCanvas | HTML5 Game Engine
while looking through Scene Manager, it seems like it is on a continuous repeat, so I think it might be best if it was where the scene change trigger is active, but the trigger is not happening.
also, do you know how to detect the current scene, it is necessary for the saving process. When the game saves, it saves the X and Y positions of the saving object(not the player’s x and y, that may look weird every time you respawn) * 30(because, for every frame you move, Qiste moves 1/30 of a full unit(unless you go diagonally where it’s 1/30 in both directions your moving in)) put into Hexadecimal, the(main and key) items you collected in Bianary(to show what items you have easier), which optional items you collected in Bianary(as there are multiple of each them and I need a way to keep track of those individually) what bosses are defeated in Binary*, and finally the scene name that shows which scene you last saved in(I don’t know how I will save the scene name but I think it will be Hex codes of the letters, grouped together(and separated when decoding)
*(there is one boss that doesn’t count towards the defeated bosses, because you have to fight another boss(A scavenger) right after it and you have to beat the scavenger without leaving the scene to prevent you from taking the strong weapon(that the first boss gave you) away, you lose the item after killing the scavenger in that boss fight, because it is only there to kill the scavenger, and you get the boss killed point for both the Robot & scavenger(Which are the same bit)once the scavenger is dead). there was a lot of info here which is why I added the asterisk footnote.
and yes, I do know how to save projects here.
You should start a new topic for that.
the problem is, I checked Google for PlayCanvas forum, PlayCanvas API, and PlayCanvas developer pages for something that can help me find the Scene name, but nothing succeeded in helping the questioner do it, so I cannot find out how to do it(I think I got a workaround, but the problem comes with the default scene name, IDK what to make it as this will have 2 starting points(I should probably set it when you select which chapter to play)
When you change scenes you pass the name of the scene. Just store that name somewhere.
that was my workaround, but when you start a new game, the variable is preset, so once I have the transition working, I will start making the title screen work.
In the start scene before you have changed to another scene you can default the current scene name to the start scene name , because you know the start scene name. Is there anything else you are missing related to scene name? If so it’s better to ask a new question and not mix it up in this thread about fading.
no, thx
but are you able to find where to put the fade transition trigger in the scene change script?
I’ll take a look this evening. I may fork your project if necessary to try things out.
I forked your project here https://playcanvas.com/project/1277142/overview/fork-breached
- a made sector 1 transition to sector 3 and sector 3 transition to sector 1. I’ll leave it to you to fix up the other scenes.
- I removed various attached to entity ‘change scene’ script that hadn’t set the ‘scene’ attribute.
- I name the entity with the ‘change scene’ script SCENE CHANGER so you can find it.
- I attached the playcanvas tween script needed by my script for the fading.
- I modified your ‘change scene’ script to call create a new instance of my script and call the start and complete methods of that script to do the fadeout and fadein.
1 Like