Parker2991/Funkin
1
0
Fork 0
mirror of https://github.com/FunkinCrew/Funkin.git synced 2024-11-23 08:07:54 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #452 from FunkinCrew/preloader-polish

Browse source 
stereo preloader in progress
This commit is contained in:
Cameron Taylor 2024-04-04 04:47:03 -04:00 committed by GitHub
commit 26ed30e88c
3 changed files with 229 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

187
source/funkin/ui/transition/preload/FunkinPreloader.hx
View file

@ -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.x = BAR_PADDING;
progressBar.y = this._height - BAR_PADDING - BAR_HEIGHT;
addChild(progressBar);
// progressBar = new Bitmap(new BitmapData(1, BAR_HEIGHT, true, Constants.COLOR_PRELOADER_BAR));
// progressBar.x = BAR_PADDING;
// progressBar.y = this._height - BAR_PADDING - BAR_HEIGHT;
// 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;
var piecesToRender:Int = Std.int(percent * progressBarPieces.length);
for (i => piece in progressBarPieces)
{
piece.alpha = i <= piecesToRender ? 0.9 : 0.1;
}
}
// Render progress bar
var maxWidth = this._width - BAR_PADDING * 2;
var barWidth = maxWidth * percent;
progressBar.width = barWidth;
// 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);
logo = progressBar = null;
// removeChild(progressBar);
logo = null;
super.destroy();
}

70
source/funkin/ui/transition/preload/VFDOverlay.hx Normal file
View file

@ -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;
}
}

2
source/funkin/util/Constants.hx
View file

@ -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