character select transition

source/funkin/ui/charSelect/CharSelectSubState.hx

@@ -22,6 +22,8 @@ import flixel.util.FlxTimer;
 import flixel.tweens.FlxEase;
 import flixel.sound.FlxSound;
 import funkin.audio.FunkinSound;
+import funkin.graphics.shaders.BlueFade;
+import openfl.filters.ShaderFilter;
 
 class CharSelectSubState extends MusicBeatSubState
 {
@@ -53,9 +55,16 @@ class CharSelectSubState extends MusicBeatSubState
   var gfChill:CharSelectGF;
   var gfChillOut:CharSelectGF;
 
+  var barthing:FlxAtlasSprite;
+  var dipshitBacking:FlxSprite;
+  var chooseDipshit:FlxSprite;
+  var dipshitBlur:FlxSprite;
+  var transitionGradient:FlxSprite;
+
   var curChar(default, set):String = "pico";
   var nametag:Nametag;
   var camFollow:FlxObject;
+  var autoFollow:Bool = false;
 
   var availableChars:Map<Int, String> = new Map<Int, String>();
   var pressedSelect:Bool = false;
@@ -71,10 +80,17 @@ class CharSelectSubState extends MusicBeatSubState
     availableChars.set(3, "pico");
   }
 
+  var fadeShader:BlueFade = new BlueFade();
+
   override public function create():Void
   {
     super.create();
 
+    autoFollow = false;
+
+    var fadeShaderFilter:ShaderFilter = new ShaderFilter(fadeShader);
+    FlxG.camera.setFilters([fadeShaderFilter]);
+
     selectSound = new FunkinSound();
     selectSound.loadEmbedded(Paths.sound('CS_select'));
     selectSound.pitch = 1;
@@ -120,12 +136,15 @@ class CharSelectSubState extends MusicBeatSubState
     curtains.scrollFactor.set(1.4, 1.4);
     add(curtains);
 
-    var barthing:FlxAtlasSprite = new FlxAtlasSprite(0, 0, Paths.animateAtlas("charSelect/barThing"));
+    barthing = new FlxAtlasSprite(0, 0, Paths.animateAtlas("charSelect/barThing"));
     barthing.anim.play("");
     barthing.blend = BlendMode.MULTIPLY;
     barthing.scrollFactor.set(0, 0);
     add(barthing);
 
+    barthing.y += 80;
+    FlxTween.tween(barthing, {y: barthing.y - 80}, 1.3, {ease: FlxEase.expoOut});
+
     var charLight:FlxSprite = new FlxSprite(800, 250);
     charLight.loadGraphic(Paths.image('charSelect/charLight'));
     add(charLight);
@@ -156,24 +175,33 @@ class CharSelectSubState extends MusicBeatSubState
     fgBlur.blend = openfl.display.BlendMode.MULTIPLY;
     add(fgBlur);
 
-    var dipshitBlur:FlxSprite = new FlxSprite(419, -65);
+    dipshitBlur = new FlxSprite(419, -65);
     dipshitBlur.frames = Paths.getSparrowAtlas("charSelect/dipshitBlur");
     dipshitBlur.animation.addByPrefix('idle', "CHOOSE vertical", 24, true);
     dipshitBlur.blend = BlendMode.ADD;
     dipshitBlur.animation.play("idle");
     add(dipshitBlur);
 
-    var dipshitBacking:FlxSprite = new FlxSprite(423, -17);
+    dipshitBacking = new FlxSprite(423, -17);
     dipshitBacking.frames = Paths.getSparrowAtlas("charSelect/dipshitBacking");
     dipshitBacking.animation.addByPrefix('idle', "CHOOSE horizontal", 24, true);
     dipshitBacking.blend = BlendMode.ADD;
     dipshitBacking.animation.play("idle");
     add(dipshitBacking);
 
-    var chooseDipshit:FlxSprite = new FlxSprite(426, -13);
+    dipshitBacking.y += 210;
+    FlxTween.tween(dipshitBacking, {y: dipshitBacking.y - 210}, 1.1, {ease: FlxEase.expoOut});
+
+    chooseDipshit = new FlxSprite(426, -13);
     chooseDipshit.loadGraphic(Paths.image('charSelect/chooseDipshit'));
     add(chooseDipshit);
 
+    chooseDipshit.y += 200;
+    FlxTween.tween(chooseDipshit, {y: chooseDipshit.y - 200}, 1, {ease: FlxEase.expoOut});
+
+    dipshitBlur.y += 220;
+    FlxTween.tween(dipshitBlur, {y: dipshitBlur.y - 220}, 1.2, {ease: FlxEase.expoOut});
+
     chooseDipshit.scrollFactor.set();
     dipshitBacking.scrollFactor.set();
     dipshitBlur.scrollFactor.set();
@@ -241,6 +269,12 @@ class CharSelectSubState extends MusicBeatSubState
 
     initLocks();
 
+    for (index => member in grpIcons.members)
+    {
+      member.y += 300;
+      FlxTween.tween(member, {y: member.y - 300}, 1, {ease: FlxEase.expoOut});
+    }
+
     cursor.scrollFactor.set();
     cursorBlue.scrollFactor.set();
     cursorDarkBlue.scrollFactor.set();
@@ -258,7 +292,8 @@ class CharSelectSubState extends MusicBeatSubState
     add(camFollow);
     camFollow.screenCenter();
 
-    FlxG.camera.follow(camFollow, LOCKON, 0.01);
+    // FlxG.camera.follow(camFollow, LOCKON, 0.01);
+    FlxG.camera.follow(camFollow, LOCKON);
 
     var temp:FlxSprite = new FlxSprite();
     temp.loadGraphic(Paths.image('charSelect/placement'));
@@ -266,6 +301,25 @@ class CharSelectSubState extends MusicBeatSubState
     temp.alpha = 0.0;
     Conductor.stepHit.add(spamOnStep);
     // FlxG.debugger.track(temp, "tempBG");
+
+    transitionGradient = new FlxSprite(0, 0).loadGraphic(Paths.image('freeplay/transitionGradient'));
+    transitionGradient.scale.set(1280, 1);
+    transitionGradient.flipY = true;
+    transitionGradient.updateHitbox();
+    FlxTween.tween(transitionGradient, {y: -720}, 1, {ease: FlxEase.expoOut});
+    add(transitionGradient);
+
+    camFollow.screenCenter();
+    camFollow.y -= 150;
+    fadeShader.fade(0.0, 1.0, 0.8, {ease: FlxEase.quadOut});
+    FlxTween.tween(camFollow, {y: camFollow.y + 150}, 1.5,
+      {
+        ease: FlxEase.expoOut,
+        onComplete: function(_) {
+          autoFollow = true;
+          FlxG.camera.follow(camFollow, LOCKON, 0.01);
+        }
+      });
   }
 
   var grpIcons:FlxSpriteGroup;
@@ -337,6 +391,35 @@ class CharSelectSubState extends MusicBeatSubState
     }
   }
 
+  function testLol():Void
+  {
+    autoFollow = false;
+    FlxTween.tween(barthing, {y: barthing.y + 80}, 0.8, {ease: FlxEase.backIn});
+    FlxTween.tween(dipshitBacking, {y: dipshitBacking.y + 210}, 0.8, {ease: FlxEase.backIn});
+    FlxTween.tween(chooseDipshit, {y: chooseDipshit.y + 200}, 0.8, {ease: FlxEase.backIn});
+    FlxTween.tween(dipshitBlur, {y: dipshitBlur.y + 220}, 0.8, {ease: FlxEase.backIn});
+    for (index => member in grpIcons.members)
+    {
+      // member.y += 300;
+      FlxTween.tween(member, {y: member.y + 300}, 0.8, {ease: FlxEase.backIn});
+    }
+    FlxG.camera.follow(camFollow, LOCKON);
+    FlxTween.tween(transitionGradient, {y: -150}, 0.8, {ease: FlxEase.backIn});
+    fadeShader.fade(1.0, 0, 0.8, {ease: FlxEase.quadIn});
+    FlxTween.tween(camFollow, {y: camFollow.y - 150}, 0.8,
+      {
+        ease: FlxEase.backIn,
+        onComplete: function(_) {
+          FlxG.switchState(FreeplayState.build(
+            {
+              {
+                character: curChar
+              }
+            }));
+        }
+      });
+  }
+
   var holdTmrUp:Float = 0;
   var holdTmrDown:Float = 0;
   var holdTmrLeft:Float = 0;
@@ -447,17 +530,19 @@ class CharSelectSubState extends MusicBeatSubState
 
         FlxG.sound.play(Paths.sound('CS_confirm'));
 
-        FlxTween.tween(FlxG.sound.music, {pitch: 0.1}, 1.5, {ease: FlxEase.quadInOut});
+        FlxTween.tween(FlxG.sound.music, {pitch: 0.1}, 1, {ease: FlxEase.quadInOut});
+        FlxTween.tween(FlxG.sound.music, {volume: 0.0}, 1.5, {ease: FlxEase.quadInOut});
         playerChill.playAnimation("select");
         pressedSelect = true;
         selectTimer.start(1.5, (_) -> {
           pressedSelect = false;
-          FlxG.switchState(FreeplayState.build(
+          // FlxG.switchState(FreeplayState.build(
-            {
+          //   {
-              {
+          //     {
-                character: curChar
+          //       character: curChar
-              }
+          //     }
-            }));
+          //   }));
+          testLol();
         });
       }
 
@@ -467,7 +552,7 @@ class CharSelectSubState extends MusicBeatSubState
         grpCursors.visible = true;
 
         FlxTween.globalManager.cancelTweensOf(FlxG.sound.music);
-        FlxTween.tween(FlxG.sound.music, {pitch: 1.0}, 1, {ease: FlxEase.quartInOut});
+        FlxTween.tween(FlxG.sound.music, {pitch: 1.0, volume: 1.0}, 1, {ease: FlxEase.quartInOut});
         playerChill.playAnimation("deselect");
         pressedSelect = false;
         selectTimer.cancel();
@@ -491,9 +576,12 @@ class CharSelectSubState extends MusicBeatSubState
 
     updateLockAnims();
 
-    camFollow.screenCenter();
+    if (autoFollow == true)
-    camFollow.x += cursorX * 10;
+    {
-    camFollow.y += cursorY * 10;
+      camFollow.screenCenter();
+      camFollow.x += cursorX * 10;
+      camFollow.y += cursorY * 10;
+    }
 
     cursorLocIntended.x = (cursorFactor * cursorX) + (FlxG.width / 2) - cursor.width / 2;
     cursorLocIntended.y = (cursorFactor * cursorY) + (FlxG.height / 2) - cursor.height / 2;