mirror of
https://github.com/FunkinCrew/Funkin.git
synced 2024-11-27 01:55:52 -05:00
Merge pull request #452 from FunkinCrew/preloader-polish
stereo preloader in progress
This commit is contained in:
Cameron Taylor
GitHub
commit
26ed30e88c
3 changed files with 229 additions and 30 deletions
|
|
@ -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
70
source/funkin/ui/transition/preload/VFDOverlay.hx
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in a new issue