Merge pull request #452 from FunkinCrew/preloader-polish

stereo preloader in progress

source/funkin/ui/transition/preload/FunkinPreloader.hx

@@ -1,5 +1,10 @@
 package funkin.ui.transition.preload;
 
+import openfl.filters.GlowFilter;
+import openfl.display.SpreadMethod;
+import openfl.display.GradientType;
+import openfl.geom.Matrix;
+import openfl.filters.BlurFilter;
 import openfl.events.MouseEvent;
 import flash.display.Bitmap;
 import flash.display.BitmapData;
@@ -46,7 +51,7 @@ class FunkinPreloader extends FlxBasePreloader
    */
   static final BAR_PADDING:Float = 20;
 
-  static final BAR_HEIGHT:Int = 20;
+  static final BAR_HEIGHT:Int = 12;
 
   /**
    * Logo takes this long (in seconds) to fade in.
@@ -108,10 +113,19 @@ class FunkinPreloader extends FlxBasePreloader
   #if TOUCH_HERE_TO_PLAY
   var touchHereToPlay:Bitmap;
   #end
+  var progressBarPieces:Array<Sprite>;
   var progressBar:Bitmap;
   var progressLeftText:TextField;
   var progressRightText:TextField;
 
+  var dspText:TextField;
+  var enhancedText:TextField;
+  var stereoText:TextField;
+
+  var vfdShader:VFDOverlay;
+  var box:Sprite;
+  var progressLines:Sprite;
+
   public function new()
   {
     super(Constants.PRELOADER_MIN_STAGE_TIME, Constants.SITE_LOCK);
@@ -146,7 +160,7 @@ class FunkinPreloader extends FlxBasePreloader
       bmp.x = (this._width - bmp.width) / 2;
       bmp.y = (this._height - bmp.height) / 2;
     });
-    addChild(logo);
+    // addChild(logo);
 
     #if TOUCH_HERE_TO_PLAY
     touchHereToPlay = createBitmap(TouchHereToPlayImage, function(bmp:Bitmap) {
@@ -160,16 +174,48 @@ class FunkinPreloader extends FlxBasePreloader
     addChild(touchHereToPlay);
     #end
 
+    var amountOfPieces:Int = 16;
+    progressBarPieces = [];
+    var maxBarWidth = this._width - BAR_PADDING * 2;
+    var pieceWidth = maxBarWidth / amountOfPieces;
+    var pieceGap:Int = 8;
+
+    progressLines = new openfl.display.Sprite();
+    progressLines.graphics.lineStyle(2, Constants.COLOR_PRELOADER_BAR);
+    progressLines.graphics.drawRect(-2, 480, this._width + 4, 30);
+    addChild(progressLines);
+
+    var progressBarPiece = new Sprite();
+    progressBarPiece.graphics.beginFill(Constants.COLOR_PRELOADER_BAR);
+    progressBarPiece.graphics.drawRoundRect(0, 0, pieceWidth - pieceGap, BAR_HEIGHT, 4, 4);
+    progressBarPiece.graphics.endFill();
+
+    for (i in 0...amountOfPieces)
+    {
+      var piece = new Sprite();
+      piece.graphics.beginFill(Constants.COLOR_PRELOADER_BAR);
+      piece.graphics.drawRoundRect(0, 0, pieceWidth - pieceGap, BAR_HEIGHT, 4, 4);
+      piece.graphics.endFill();
+
+      piece.x = i * (piece.width + pieceGap);
+      piece.y = this._height - BAR_PADDING - BAR_HEIGHT - 200;
+      addChild(piece);
+      progressBarPieces.push(piece);
+    }
+
     // Create the progress bar.
-    progressBar = new Bitmap(new BitmapData(1, BAR_HEIGHT, true, Constants.COLOR_PRELOADER_BAR));
+    // progressBar = new Bitmap(new BitmapData(1, BAR_HEIGHT, true, Constants.COLOR_PRELOADER_BAR));
-    progressBar.x = BAR_PADDING;
+    // progressBar.x = BAR_PADDING;
-    progressBar.y = this._height - BAR_PADDING - BAR_HEIGHT;
+    // progressBar.y = this._height - BAR_PADDING - BAR_HEIGHT;
-    addChild(progressBar);
+    // addChild(progressBar);
 
     // Create the progress message.
     progressLeftText = new TextField();
+    dspText = new TextField();
+    enhancedText = new TextField();
+    stereoText = new TextField();
 
-    var progressLeftTextFormat = new TextFormat("VCR OSD Mono", 16, Constants.COLOR_PRELOADER_BAR, true);
+    var progressLeftTextFormat = new TextFormat("DS-Digital", 32, Constants.COLOR_PRELOADER_BAR, true);
     progressLeftTextFormat.align = TextFormatAlign.LEFT;
     progressLeftText.defaultTextFormat = progressLeftTextFormat;
 
@@ -177,13 +223,14 @@ class FunkinPreloader extends FlxBasePreloader
     progressLeftText.width = this._width - BAR_PADDING * 2;
     progressLeftText.text = 'Downloading assets...';
     progressLeftText.x = BAR_PADDING;
-    progressLeftText.y = this._height - BAR_PADDING - BAR_HEIGHT - 16 - 4;
+    progressLeftText.y = this._height - BAR_PADDING - BAR_HEIGHT - 290;
+    // progressLeftText.shader = new VFDOverlay();
     addChild(progressLeftText);
 
     // Create the progress %.
     progressRightText = new TextField();
 
-    var progressRightTextFormat = new TextFormat("VCR OSD Mono", 16, Constants.COLOR_PRELOADER_BAR, true);
+    var progressRightTextFormat = new TextFormat("DS-Digital", 16, Constants.COLOR_PRELOADER_BAR, true);
     progressRightTextFormat.align = TextFormatAlign.RIGHT;
     progressRightText.defaultTextFormat = progressRightTextFormat;
 
@@ -193,6 +240,60 @@ class FunkinPreloader extends FlxBasePreloader
     progressRightText.x = BAR_PADDING;
     progressRightText.y = this._height - BAR_PADDING - BAR_HEIGHT - 16 - 4;
     addChild(progressRightText);
+
+    box = new Sprite();
+    box.graphics.beginFill(Constants.COLOR_PRELOADER_BAR, 1);
+    box.graphics.drawRoundRect(0, 0, 64, 20, 5, 5);
+    box.graphics.drawRoundRect(70, 0, 58, 20, 5, 5);
+    box.graphics.endFill();
+    box.graphics.beginFill(Constants.COLOR_PRELOADER_BAR, 0.1);
+    box.graphics.drawRoundRect(0, 0, 128, 20, 5, 5);
+    box.graphics.endFill();
+    box.x = 880;
+    box.y = 440;
+    addChild(box);
+
+    dspText.selectable = false;
+    dspText.textColor = 0x000000;
+    dspText.width = this._width;
+    dspText.height = 20;
+    dspText.text = 'DSP';
+    dspText.x = 10;
+    dspText.y = -5;
+    box.addChild(dspText);
+
+    enhancedText.selectable = false;
+    enhancedText.textColor = Constants.COLOR_PRELOADER_BAR;
+    enhancedText.width = this._width;
+    enhancedText.height = 100;
+    enhancedText.text = 'ENHANCED';
+    enhancedText.x = -100;
+    enhancedText.y = 0;
+    box.addChild(enhancedText);
+
+    stereoText.selectable = false;
+    stereoText.textColor = Constants.COLOR_PRELOADER_BAR;
+    stereoText.width = this._width;
+    stereoText.height = 100;
+    stereoText.text = 'STEREO';
+    stereoText.x = 0;
+    stereoText.y = -40;
+    box.addChild(stereoText);
+
+    // var dummyMatrix:openfl.geom.Matrix = new Matrix();
+    // dummyMatrix.createGradientBox(this._width, this._height * 0.1, 90 * Math.PI / 180);
+
+    // var gradient:Sprite = new Sprite();
+    // gradient.graphics.beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0x000000], [1, 1], [0, 255], dummyMatrix, SpreadMethod.REFLECT);
+    // gradient.graphics.drawRect(0, 0, this._width, this._height);
+    // gradient.graphics.endFill();
+    // addChild(gradient);
+
+    var vfdBitmap:Bitmap = new Bitmap(new BitmapData(this._width, this._height, true, 0xFFFFFFFF));
+    addChild(vfdBitmap);
+
+    vfdShader = new VFDOverlay();
+    vfdBitmap.shader = vfdShader;
   }
 
   var lastElapsed:Float = 0.0;
@@ -200,6 +301,8 @@ class FunkinPreloader extends FlxBasePreloader
   override function update(percent:Float):Void
   {
     var elapsed:Float = (Date.now().getTime() - this._startTime) / 1000.0;
+
+    vfdShader.update(elapsed * 100);
     // trace('Time since last frame: ' + (lastElapsed - elapsed));
 
     downloadingAssetsPercent = percent;
@@ -748,12 +851,19 @@ class FunkinPreloader extends FlxBasePreloader
     else
     {
       renderLogoFadeIn(elapsed);
-    }
 
       // Render progress bar
       var maxWidth = this._width - BAR_PADDING * 2;
       var barWidth = maxWidth * percent;
-    progressBar.width = barWidth;
+      var piecesToRender:Int = Std.int(percent * progressBarPieces.length);
+
+      for (i => piece in progressBarPieces)
+      {
+        piece.alpha = i <= piecesToRender ? 0.9 : 0.1;
+      }
+    }
+
+    // progressBar.width = barWidth;
 
     // Cycle ellipsis count to show loading
     var ellipsisCount:Int = Std.int(elapsed / ELLIPSIS_TIME) % 3 + 1;
@@ -766,29 +876,29 @@ class FunkinPreloader extends FlxBasePreloader
     {
       // case FunkinPreloaderState.NotStarted:
       default:
-        updateProgressLeftText('Loading (0/$TOTAL_STEPS)$ellipsis');
+        updateProgressLeftText('Loading \n0/$TOTAL_STEPS $ellipsis');
       case FunkinPreloaderState.DownloadingAssets:
-        updateProgressLeftText('Downloading assets (1/$TOTAL_STEPS)$ellipsis');
+        updateProgressLeftText('Downloading assets \n1/$TOTAL_STEPS $ellipsis');
       case FunkinPreloaderState.PreloadingPlayAssets:
-        updateProgressLeftText('Preloading assets (2/$TOTAL_STEPS)$ellipsis');
+        updateProgressLeftText('Preloading assets \n2/$TOTAL_STEPS $ellipsis');
       case FunkinPreloaderState.InitializingScripts:
-        updateProgressLeftText('Initializing scripts (3/$TOTAL_STEPS)$ellipsis');
+        updateProgressLeftText('Initializing scripts \n3/$TOTAL_STEPS $ellipsis');
       case FunkinPreloaderState.CachingGraphics:
-        updateProgressLeftText('Caching graphics (4/$TOTAL_STEPS)$ellipsis');
+        updateProgressLeftText('Caching graphics \n4/$TOTAL_STEPS $ellipsis');
       case FunkinPreloaderState.CachingAudio:
-        updateProgressLeftText('Caching audio (5/$TOTAL_STEPS)$ellipsis');
+        updateProgressLeftText('Caching audio \n5/$TOTAL_STEPS $ellipsis');
       case FunkinPreloaderState.CachingData:
-        updateProgressLeftText('Caching data (6/$TOTAL_STEPS)$ellipsis');
+        updateProgressLeftText('Caching data \n6/$TOTAL_STEPS $ellipsis');
       case FunkinPreloaderState.ParsingSpritesheets:
-        updateProgressLeftText('Parsing spritesheets (7/$TOTAL_STEPS)$ellipsis');
+        updateProgressLeftText('Parsing spritesheets \n7/$TOTAL_STEPS $ellipsis');
       case FunkinPreloaderState.ParsingStages:
-        updateProgressLeftText('Parsing stages (8/$TOTAL_STEPS)$ellipsis');
+        updateProgressLeftText('Parsing stages \n8/$TOTAL_STEPS $ellipsis');
       case FunkinPreloaderState.ParsingCharacters:
-        updateProgressLeftText('Parsing characters (9/$TOTAL_STEPS)$ellipsis');
+        updateProgressLeftText('Parsing characters \n9/$TOTAL_STEPS $ellipsis');
       case FunkinPreloaderState.ParsingSongs:
-        updateProgressLeftText('Parsing songs (10/$TOTAL_STEPS)$ellipsis');
+        updateProgressLeftText('Parsing songs \n10/$TOTAL_STEPS $ellipsis');
       case FunkinPreloaderState.Complete:
-        updateProgressLeftText('Finishing up ($TOTAL_STEPS/$TOTAL_STEPS)$ellipsis');
+        updateProgressLeftText('Finishing up \n$TOTAL_STEPS/$TOTAL_STEPS $ellipsis');
       #if TOUCH_HERE_TO_PLAY
       case FunkinPreloaderState.TouchHereToPlay:
         updateProgressLeftText(null);
@@ -815,10 +925,21 @@ class FunkinPreloader extends FlxBasePreloader
       else if (progressLeftText.text != text)
       {
         // We have to keep updating the text format, because the font can take a frame or two to load.
-        var progressLeftTextFormat = new TextFormat("VCR OSD Mono", 16, Constants.COLOR_PRELOADER_BAR, true);
+        var progressLeftTextFormat = new TextFormat("DS-Digital", 32, Constants.COLOR_PRELOADER_BAR, true);
         progressLeftTextFormat.align = TextFormatAlign.LEFT;
         progressLeftText.defaultTextFormat = progressLeftTextFormat;
         progressLeftText.text = text;
+
+        dspText.defaultTextFormat = new TextFormat("Quantico", 20, 0x000000, false);
+        dspText.text = 'DSP\t\t\t\t\tFNF'; // fukin dum....
+        dspText.textColor = 0x000000;
+
+        enhancedText.defaultTextFormat = new TextFormat("Inconsolata Black", 16, Constants.COLOR_PRELOADER_BAR, false);
+        enhancedText.text = 'ENHANCED';
+        enhancedText.textColor = Constants.COLOR_PRELOADER_BAR;
+
+        stereoText.defaultTextFormat = new TextFormat("Inconsolata Bold", 36, Constants.COLOR_PRELOADER_BAR, false);
+        stereoText.text = 'NATURAL STEREO';
       }
     }
   }
@@ -845,9 +966,17 @@ class FunkinPreloader extends FlxBasePreloader
     logo.y = (this._height - logo.height) / 2;
 
     // Fade out progress bar too.
-    progressBar.alpha = logo.alpha;
+    // progressBar.alpha = logo.alpha;
     progressLeftText.alpha = logo.alpha;
     progressRightText.alpha = logo.alpha;
+    box.alpha = logo.alpha;
+    dspText.alpha = logo.alpha;
+    enhancedText.alpha = logo.alpha;
+    stereoText.alpha = logo.alpha;
+    progressLines.alpha = logo.alpha;
+
+    for (piece in progressBarPieces)
+      piece.alpha = logo.alpha;
 
     return elapsedFinished;
   }
@@ -901,8 +1030,8 @@ class FunkinPreloader extends FlxBasePreloader
   {
     // Ensure the graphics are properly destroyed and GC'd.
     removeChild(logo);
-    removeChild(progressBar);
+    // removeChild(progressBar);
-    logo = progressBar = null;
+    logo = null;
     super.destroy();
   }
 

source/funkin/ui/transition/preload/VFDOverlay.hx

@@ -0,0 +1,70 @@
+package funkin.ui.transition.preload;
+
+import flixel.tweens.FlxEase;
+import flixel.tweens.FlxTween;
+import openfl.display.GraphicsShader;
+
+class VFDOverlay extends GraphicsShader
+{
+  public var elapsedTime(default, set):Float = 0;
+
+  function set_elapsedTime(value:Float):Float
+  {
+    u_time.value = [value];
+    return value;
+  }
+
+  @:glFragmentSource('#pragma header
+    const vec2 s = vec2(1, 1.7320508);
+
+    uniform float u_time;
+
+    float rand(float co) { return fract(sin(co*(91.3458)) * 47453.5453); }
+    float rand(vec2 co){ return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453); }
+
+    void main(void) {
+      vec4 col = texture2D (bitmap, openfl_TextureCoordv);
+      vec2 game_res = vec2(1280.0, 720.0);
+      const float tileAmount = 10.;
+
+      vec2 uv = (2. * openfl_TextureCoordv.xy * -1.);
+      uv *= 50.;
+
+      vec4 hexCenter = floor(vec4(uv, uv - vec2(0.5, 1.0)) / s.xyxy) + 0.5;
+      vec4 offset = vec4(uv - hexCenter.xy * s, uv - (hexCenter.zw + 0.5) * s) + 0.0;
+      vec4 hexInfo = dot(offset.xy, offset.xy) < dot(offset.zw, offset.zw) ? vec4(offset.xy, hexCenter.xy) : vec4(offset.zw, hexCenter.zw);
+
+      // Distance to the nearest edge of a hexagon
+      vec2 p = abs(hexInfo.xy) ;
+      float edgeDist = max(dot(p, normalize(vec2(1.0, sqrt(3.0)))), p.x);
+      float edgeWidth = 0.05 * tileAmount; // Adjust edge width based on tile amount
+      float edgeSharpness = 0.011 * tileAmount;
+
+      float outline = smoothstep(edgeWidth - edgeSharpness, edgeWidth, edgeDist);
+      float color_mix = mix(0.0, 0.3, outline); // Mix black outline with white fill
+
+      float flicker = (sin(u_time) * 0.05) + 1.0;
+      float sinshit = smoothstep(-3.0, 1.0, sin(uv.y * 3.));
+
+      col = vec4(vec3(0.0), color_mix);
+      col = mix(col, vec4(0., 0., 0., sinshit), 0.5 * flicker);
+
+      float specs = rand(uv.xy);
+      vec4 noise = vec4(0., 0., 0., specs);
+      col = mix(col, noise, 0.1);
+
+      gl_FragColor = col;
+		}
+  ')
+  public function new()
+  {
+    super();
+
+    this.elapsedTime = 0;
+  }
+
+  public function update(elapsed:Float):Void
+  {
+    this.elapsedTime += elapsed;
+  }
+}

source/funkin/util/Constants.hx

@@ -140,7 +140,7 @@ class Constants
   /**
    * Color for the preloader progress bar
    */
-  public static final COLOR_PRELOADER_BAR:FlxColor = 0xFF00FF00;
+  public static final COLOR_PRELOADER_BAR:FlxColor = 0xFFA4FF11;
 
   /**
    * Color for the preloader site lock background