diff --git a/assets/images/editors/charter/event-icons/Alt Animation Toggle.png b/assets/images/editors/charter/event-icons/Alt Animation Toggle.png index f2180276..39e1afd1 100644 Binary files a/assets/images/editors/charter/event-icons/Alt Animation Toggle.png and b/assets/images/editors/charter/event-icons/Alt Animation Toggle.png differ diff --git a/source/funkin/editors/charter/Charter.hx b/source/funkin/editors/charter/Charter.hx index 9ea81a47..d7a5a3c0 100644 --- a/source/funkin/editors/charter/Charter.hx +++ b/source/funkin/editors/charter/Charter.hx @@ -1,5 +1,6 @@ package funkin.editors.charter; +import funkin.editors.ui.UISlider.UISliderExtras; import funkin.editors.charter.CharterStrumline; import funkin.editors.charter.CharterBackdropGroup.EventBackdrop; import funkin.backend.system.framerate.Framerate; @@ -376,7 +377,18 @@ class Charter extends UIState { songPosInfo.alignment = RIGHT; uiGroup.add(songPosInfo); - playBackSlider = new UISlider(FlxG.width - 180 - 26 - 12, (23/2) - (4/2), 180, [{start: 0.5, end: 1, size: 0.5}, {start: 1, end: 3, size: 0.5}], 0.5); + /* + var extraInfo = new UISliderExtras(FlxG.width - 20 - (5*42) - 18, scrollBar.y + 8, [ + {value: .25, barProgress: 0.5, color: 0xFF870000}, + {value: .5, barProgress: 0.5, color: 0xFF870000}, + {value: 1, barProgress: 0.5, color: 0x6B6B6B}, + {value: 1.5, barProgress: 0.5, color: 0xFF008000}, + {value: 2, barProgress: 0.5, color: 0xFF008000}] + , "Preset Playback Speeds:"); + uiGroup.add(extraInfo); + */ + + playBackSlider = new UISlider(FlxG.width - 160 - 26 - 20, (23/2) - (12/2), 160, [{start: 0.25, end: 1, size: 0.5}, {start: 1, end: 2, size: 0.5}], true, 0.5); playBackSlider.onChange = function (v) { FlxG.sound.music.pitch = vocals.pitch = v; }; @@ -472,7 +484,6 @@ class Charter extends UIState { } notesGroup.sortNotes(); notesGroup.autoSort = true; - // create events var __last:CharterEvent = null; diff --git a/source/funkin/editors/ui/UIButton.hx b/source/funkin/editors/ui/UIButton.hx index c5a7fe80..f3e67821 100644 --- a/source/funkin/editors/ui/UIButton.hx +++ b/source/funkin/editors/ui/UIButton.hx @@ -12,9 +12,6 @@ class UIButton extends UISliceSprite { super(x, y, w, h, 'editors/ui/button'); this.callback = callback; members.push(field = new UIText(x, y, w, text)); - field.borderStyle = OUTLINE; - field.borderColor = 0x88000000; - field.borderSize = 1; field.alignment = CENTER; field.fieldWidth = w; diff --git a/source/funkin/editors/ui/UISlider.hx b/source/funkin/editors/ui/UISlider.hx index 29e3990f..134df9d7 100644 --- a/source/funkin/editors/ui/UISlider.hx +++ b/source/funkin/editors/ui/UISlider.hx @@ -1,5 +1,6 @@ package funkin.editors.ui; +using flixel.util.FlxSpriteUtil; using StringTools; typedef SliderSegement = { @@ -12,59 +13,49 @@ class UISlider extends UISprite { public var segments:Array = []; public var barWidth:Int = 120; - public var barStartSpr:FlxSprite; + public var progressbar:UISprite; + public var progressCentered:Bool; + public var startText:UIText; - public var barEndSpr:FlxSprite; public var endText:UIText; - public var barSegements:Map<{segment:Float, size:Float}, UISprite> = []; public var selectableBar:UISprite; public var selectableHitbox:UISprite; public var value:Float = 0; public var onChange:Float->Void; - public function new(x:Float, y:Float, width:Int = 120, segments:Array, defaultStart:Float = 0) { + public function new(x:Float, y:Float, width:Int = 120, segments:Array, centered:Bool, defaultStart:Float = 0) { this.segments = segments; this.barWidth = width; + this.progressCentered = centered; - x -= 6; super(x, y); - makeSolid((barWidth+6), 4, -1); + + makeGraphic(barWidth, 12, 0x00000000, true); + this.drawRoundRect(0, 0, barWidth, 12, 8, 6, 0xFFC0C0C0); + this.drawRoundRect(1, 1, barWidth-2, 12-2, 8, 5, 0xFF140013); cursor = BUTTON; + progressbar = new UISprite(centered ? barWidth/2 : 0); + progressbar.makeGraphic(barWidth, 8, 0x00000000, true); + progressbar.drawRoundRect(2, 0, barWidth-4, 8-.1, 8, 2, 0xFF67009B); + progressbar.origin.x = 0; + members.push(progressbar); + __barProgress = defaultStart; - members.push(barStartSpr = new FlxSprite(x-4,y+((4/2))).makeSolid(4, 12, -1)); - members.push(barEndSpr = new FlxSprite(x+barWidth+6,y+((4/2))).makeSolid(4, 12, -1)); - members.push(startText = new UIText(x, y, 0, Std.string(segments[0].start).replace("0.", "."))); - members.push(endText = new UIText(x + (barWidth+6) + 8, y, 0, Std.string(segments[segments.length-1].end))); - - var midSegments:Map = []; - for (segment in segments) { - var isFront:Bool = segment.start == segments[0].start; - var isEnd:Bool = segment.end == segments[segments.length-1].end; - - if (isFront && !midSegments.exists(Std.int(segment.end*1000))) midSegments.set(Std.int(segment.end*1000), segment.size); - if (isEnd && !midSegments.exists(Std.int(segment.start*1000))) midSegments.set(Std.int(segment.start*1000), segment.size); - } + members.push(endText = new UIText(x + (barWidth) + 8, y, 0, Std.string(segments[segments.length-1].end).replace("0.", "."))); - for (segment => size in midSegments) { - var segmentSpr:UISprite = new UISprite(x,y); - segmentSpr.makeSolid(4, 8, -1); - members.push(segmentSpr); - - barSegements.set({segment: segment/1000, size: size}, segmentSpr); - } - selectableBar = new UISprite(x,y); - selectableBar.makeSolid(6, 12, 0xFFA0A0A0); + selectableBar.loadGraphic(Paths.image("editors/ui/slider")); + selectableBar.antialiasing = true; selectableBar.cursor = BUTTON; members.push(selectableBar); selectableHitbox = new UISprite(x,y); - selectableHitbox.makeSolid(barWidth+6, 16, -1); + selectableHitbox.makeSolid(barWidth, 16, -1); selectableHitbox.cursor = BUTTON; selectableHitbox.alpha = 0; members.push(selectableHitbox); @@ -73,10 +64,8 @@ class UISlider extends UISprite { var __barProgress:Float = 0; public override function update(elapsed:Float) { - barStartSpr.follow(this, -4, (height-barStartSpr.height)/2); - barEndSpr.follow(this, barWidth+6, (height-barEndSpr.height)/2); - selectableHitbox.follow(this, 0, (height-selectableHitbox.height)/2); + var lastBarProgress:Float = __barProgress; if (selectableHitbox.hovered && FlxG.mouse.pressed) { @@ -87,14 +76,14 @@ class UISlider extends UISprite { if (__barProgress != lastBarProgress) onChange(value = calcValue(__barProgress)); + + progressbar.follow(this, progressCentered ? barWidth/2 : 0, (height-progressbar.height)/2); + progressbar.scale.x = FlxMath.bound(__barProgress-(progressCentered?0.5:0),-1,1); - selectableBar.follow(this, __barProgress * barWidth, (4-12)/2); + selectableBar.follow(this, (__barProgress * barWidth) - (selectableBar.width/2), (height-selectableBar.height)/2); - startText.follow(this, -startText.width-10, (4/2) - (startText.height/2)); - endText.follow(this, barWidth+6 + 10, (4/2) - (endText.height/2)); - - for (segmentData => sprite in barSegements) - sprite.follow(this, (barWidth * segmentData.size) + ((selectableBar.width-sprite.width)/2), ((4-8)/2)); + startText.follow(this, -startText.width-10, (height/2) - (startText.height/2)); + endText.follow(this, barWidth + 10, (height/2) - (endText.height/2)); super.update(elapsed); } @@ -110,4 +99,32 @@ class UISlider extends UISprite { } return segments[segments.length-1].end; } +} + +typedef UISliderPreset = { + var value:Float; + var barProgress:Float; + var ?color:Int; +} + +class UISliderExtras extends UISliceSprite { + public var buttonText:UIText; + public var buttons:Map = []; + + public function new(x:Float, y:Float, presets:Array, presetValueName:String = "Presets:") { + super(x - 12, y, (presets.length * (40 + 2)) + 22, 40+10, 'editors/ui/inputbox'); + alpha = 0.6; + + members.push(buttonText = new UIText(x-4,y+5, 0, presetValueName, 12)); + buttonText.borderStyle = OUTLINE; buttonText.borderColor = 0x88000000; buttonText.borderSize = 1; + + for (i => preset in presets) { + var button = new UIButton(x + (i*(40 + 2)), y + buttonText.height + 5 + 2, Std.string(preset.value).replace("0.", "."), null, 40, 20); + button.field.size = 14; + if (preset.color != null) button.color = preset.color; + members.push(button); + + buttons.set(preset, button); + } + } } \ No newline at end of file diff --git a/source/funkin/editors/ui/UIState.hx b/source/funkin/editors/ui/UIState.hx index ba7a3943..b43e605e 100644 --- a/source/funkin/editors/ui/UIState.hx +++ b/source/funkin/editors/ui/UIState.hx @@ -33,6 +33,7 @@ class UIState extends MusicBeatState { __mousePos = FlxPoint.get(); super.create(); Framerate.offset.y = 30; + FlxG.mouse.visible = true; FlxG.stage.window.onKeyDown.add(onKeyDown); FlxG.stage.window.onKeyUp.add(onKeyUp); diff --git a/source/funkin/editors/ui/UIText.hx b/source/funkin/editors/ui/UIText.hx index 413630b2..5f2aaf72 100644 --- a/source/funkin/editors/ui/UIText.hx +++ b/source/funkin/editors/ui/UIText.hx @@ -5,10 +5,15 @@ import funkin.backend.FunkinText; class UIText extends FunkinText { // PUTTING THIS HERE IN CASE IMMA MAKE FUTURE CHANGES - public function new(x, y, w, text, size:Int = 15, color:FlxColor = 0xFFFFFFFF) { + public function new(x, y, w, text, size:Int = 15, color:FlxColor = 0xFFFFFFFF, ?outline:Bool = true) { super(x, y, w, text, size, false); this.color = color; + if (outline) { + this.borderStyle = OUTLINE_FAST; + this.borderColor = 0x88000000; + this.borderSize = 1; + } this.active = false; } } \ No newline at end of file