ported over charter multikey and other stuff

Co-Authored-By: Ne_Eo <NeeEoo@users.noreply.github.com>

assets/shaders/engine/charterGrid.frag

@@ -0,0 +1,35 @@
+#pragma header
+
+#define GRID_SIZE 40.0
+#define GRID_HEIGHT 4.0
+
+uniform int segments;
+
+vec4 colorA = vec4(0.329, 0.329, 0.329, 1.0);
+vec4 colorB = vec4(0.153, 0.153, 0.153, 1.0);
+vec4 colorOutline = vec4(0.867, 0.867, 0.867, 1.0);
+
+void main()
+{
+	vec2 pixelSize = (1.0 / openfl_TextureSize) / (GRID_SIZE * float(segments));
+	vec2 uv = openfl_TextureCoordv.xy;
+	vec2 pixelUV = vec2(uv.x * GRID_SIZE * float(segments), uv.y * GRID_SIZE * GRID_HEIGHT);
+	if (uv.x < pixelSize.x || uv.x > 1.0 - pixelSize.x) { //edges
+		gl_FragColor = colorOutline;
+		return;
+	}
+	vec4 col = colorA;
+	bool flip = false;
+	
+	//horizontal
+	if (mod(pixelUV.x, GRID_SIZE * 2.0) < GRID_SIZE)
+		flip = !flip;
+	//vertical
+	if (mod(pixelUV.y, GRID_SIZE * 2.0) < GRID_SIZE)
+		flip = !flip;
+
+	if (flip)
+		col = colorB;
+
+	gl_FragColor = col * flixel_texture2D(bitmap, uv);
+}

source/funkin/backend/chart/Chart.hx

@@ -168,6 +168,14 @@ class Chart {
 			base.events = base.events.concat(extraEvents);
 		#end
 
+		/**
+		 * Set defaults on strum lines
+		*/
+		for(strumLine in base.strumLines) {
+			if(strumLine.keyCount == null)
+				strumLine.keyCount = 4;
+		}
+
 		return base;
 	}
 

source/funkin/backend/chart/ChartData.hx

@@ -42,6 +42,7 @@ typedef ChartStrumLine = {
 	var ?strumScale:Float;
 	var ?scrollSpeed:Float;
 	var ?vocalsSuffix:String;
+	var ?keyCount:Int; // default=4
 
 	var ?strumLinePos:Float; // Backwards compatability
 }

source/funkin/backend/scripting/events/AmountEvent.hx

@@ -4,7 +4,7 @@ final class AmountEvent extends CancellableEvent {
 	/**
 	 * Amount
 	 */
-	public var amount:Int;
+	public var amount:Null<Int>;
 
 	/**
 	 * Shows whether or not psych users complained about this class

source/funkin/backend/utils/CoolUtil.hx

@@ -839,6 +839,13 @@ class CoolUtil
 		return file.file;
 	}
 
+	@:noUsing public static function getClosestAngle(angle:Float, targetAngle:Float):Float {
+		var diff:Float = angle - targetAngle;
+		if (diff < -180) diff += 360;
+		else if (diff > 180) diff -= 360;
+		return angle - diff;
+	}
+
 	public static function sortAlphabetically(array:Array<String>, ?lowercase:Bool=false) {
 		array.sort(function(a1, a2):Int {
 			if(lowercase) {

source/funkin/editors/charter/Charter.hx

@@ -286,6 +286,22 @@ class Charter extends UIState {
 						label: 'Low Detail Waveforms',
 						onSelect: _view_switchWaveformDetail,
 						icon: Options.charterLowDetailWaveforms ? 1 : 0
+					},
+					null,
+					{
+						label: "Scroll left",
+						keybind: [SHIFT, LEFT],
+						onSelect: _view_scrollleft
+					},
+					{
+						label: "Scroll right",
+						keybind: [SHIFT, RIGHT],
+						onSelect: _view_scrollright
+					},
+					{
+						label: "Reset scroll",
+						keybind: [SHIFT, DOWN],
+						onSelect: _view_scrollreset
 					}
 				]
 			},
@@ -773,7 +789,7 @@ class Charter extends UIState {
 						n.snappedToStrumline = false;
 						n.setPosition(n.fullID * 40 + (mousePos.x - dragStartPos.x), n.step * 40 + (mousePos.y - dragStartPos.y));
 						n.y = CoolUtil.bound(n.y, 0, (__endStep*40) - n.height);
-						n.x = CoolUtil.bound(n.x, 0, ((strumLines.members.length * 4)-1) * 40);
+						n.x = CoolUtil.bound(n.x, 0, (strumLines.totalKeyCount-1) * 40);
 						n.cursor = HAND;
 					}, function (e:CharterEvent) {
 						e.y =  e.step * 40 + (mousePos.y - dragStartPos.y) - 17;
@@ -802,7 +818,7 @@ class Charter extends UIState {
 							if (s is CharterNote) {
 								var note:CharterNote = cast s;
 								if (note.fullID + changePoint.y < 0) boundedChange.y += Math.abs(note.fullID + changePoint.y);
-								if (note.fullID + changePoint.y > (strumLines.members.length*4)-1) boundedChange.y -= (note.fullID + changePoint.y) - ((strumLines.members.length*4)-1);
+								if (note.fullID + changePoint.y > strumLines.totalKeyCount-1) boundedChange.y -= (note.fullID + changePoint.y) - (strumLines.totalKeyCount-1);
 							}
 
 							s.handleDrag(boundedChange);
@@ -835,7 +851,7 @@ class Charter extends UIState {
 						gridActionType = BOX_SELECTION;
 
 					var id = Math.floor(mousePos.x / 40);
-					var mouseOnGrid = id >= 0 && id < 4 * gridBackdrops.strumlinesAmount && mousePos.y >= 0;
+					var mouseOnGrid = id >= 0 && id < strumLines.totalKeyCount && mousePos.y >= 0;
 
 					if (FlxG.mouse.justReleased) {
 							for (n in selection) n.selected = false;
@@ -843,9 +859,10 @@ class Charter extends UIState {
 
 							if (mouseOnGrid && mousePos.y > 0 && mousePos.y < (__endStep)*40) {
 								var note = new CharterNote();
+								var targetStrumline = strumLines.getStrumlineFromID(id);
 								note.updatePos(
 									CoolUtil.bound(FlxG.keys.pressed.SHIFT ? ((mousePos.y-20) / 40) : quantStep(mousePos.y/40), 0, __endStep-1),
-									id % 4, 0, noteType, strumLines.members[Std.int(id/4)]
+									(id-targetStrumline.startingID) % targetStrumline.keyCount, 0, noteType, targetStrumline
 								);
 								notesGroup.add(note);
 								selection = [note];
@@ -1147,7 +1164,7 @@ class Charter extends UIState {
 			gridBackdrops.conductorSprY = lerp(gridBackdrops.conductorSprY, curStepFloat * 40, __firstFrame ? 1 : 1/3);
 		}
 		charterCamera.scroll.set(
-			((((40*4) * gridBackdrops.strumlinesAmount) - FlxG.width) / 2),
+			lerp(charterCamera.scroll.x, (((40*strumLines.totalKeyCount) - FlxG.width) / 2) + sideScroll, __firstFrame ? 1 : 1/3),
 			gridBackdrops.conductorSprY - (FlxG.height * 0.5)
 		);
 
@@ -1198,14 +1215,20 @@ class Charter extends UIState {
 			if(FlxG.keys.justPressed.ANY && !strumLines.isDragging && this.currentFocus == null)
 				UIUtil.processShortcuts(topMenu);
 
-			if (FlxG.keys.pressed.CONTROL) {
-				if (FlxG.mouse.wheel != 0) {
-					zoom += 0.25 * FlxG.mouse.wheel;
-					__camZoom = Math.pow(2, zoom);
-				}
-			} else {
-				if (!FlxG.sound.music.playing) {
-					Conductor.songPosition -= (__crochet * FlxG.mouse.wheel) - Conductor.songOffset;
+			if (!topMenuSpr.anyMenuOpened) {
+				if (FlxG.keys.pressed.CONTROL) {
+					if (FlxG.mouse.wheel != 0) {
+						zoom += 0.25 * FlxG.mouse.wheel;
+						__camZoom = Math.pow(2, zoom);
+					}
+				} else if (FlxG.keys.pressed.SHIFT) {
+					if (FlxG.mouse.wheel != 0) {
+						sideScroll -= 40 * FlxG.mouse.wheel;
+					}
+				} else {
+					if (!FlxG.sound.music.playing) {
+						Conductor.songPosition -= (__crochet * FlxG.mouse.wheel) - Conductor.songOffset;
+					}
 				}
 			}
 		}
@@ -1267,6 +1290,11 @@ class Charter extends UIState {
 		return __camZoom = CoolUtil.bound(val, 0.1, 3);
 	}
 
+	var sideScroll(default, set):Float = 0;
+	function set_sideScroll(val:Float) {
+		return sideScroll = FlxMath.bound(val, -(40*strumLines.totalKeyCount) / 2, (40*strumLines.totalKeyCount) / 2);
+	}
+
 	// TOP MENU OPTIONS
 	#if REGION
 	function _file_exit(_) {
@@ -1601,6 +1629,16 @@ class Charter extends UIState {
 		t.icon = (Options.charterLowDetailWaveforms = !Options.charterLowDetailWaveforms) ? 1 : 0;
 		for (shader in waveformHandler.waveShaders) shader.data.lowDetail.value = [Options.charterLowDetailWaveforms];
 	}
+
+	function _view_scrollleft(_) {
+		sideScroll -= 40;
+	}
+	function _view_scrollright(_) {
+		sideScroll += 40;
+	}
+	function _view_scrollreset(_) {
+		sideScroll = 0;
+	}
 	
 	inline function _snap_increasesnap(_) changequant(1);
 	inline function _snap_decreasesnap(_) changequant(-1);

source/funkin/editors/charter/CharterBackdropGroup.hx

@@ -4,11 +4,11 @@ import flixel.addons.display.FlxBackdrop;
 import flixel.graphics.FlxGraphic;
 import funkin.backend.system.Conductor;
 import openfl.geom.Rectangle;
+import funkin.backend.shaders.CustomShader;
 
 class CharterBackdropGroup extends FlxTypedGroup<CharterBackdrop> {
 	public var strumLineGroup:CharterStrumLineGroup;
 	public var notesGroup:CharterNoteGroup;
-	var __gridGraphic:FlxGraphic;
 
 	public var conductorSprY:Float = 0;
 	public var bottomLimitY:Float = 0;
@@ -21,23 +21,11 @@ class CharterBackdropGroup extends FlxTypedGroup<CharterBackdrop> {
 	public function new(strumLineGroup:CharterStrumLineGroup) {
 		super();
 		this.strumLineGroup = strumLineGroup;
-
-		__gridGraphic = FlxG.bitmap.create(160, 160, 0xFF272727, true);
-		__gridGraphic.bitmap.lock();
-
-		// Checkerboard
-		for(y in 0...4)
-			for(x in 0...2) __gridGraphic.bitmap.fillRect(new Rectangle(40*((x*2)+(y%2)), 40*y, 40, 40), 0xFF545454);
-
-		// Edges
-		__gridGraphic.bitmap.fillRect(new Rectangle(0, 0, 1, 160), 0xFFDDDDDD);
-		__gridGraphic.bitmap.fillRect(new Rectangle(159, 0, 1, 160), 0xFFDDDDDD);
-		__gridGraphic.bitmap.unlock();
 	}
 
 	public function createGrids(amount:Int = 0) {
 		for (i in 0...amount) {
-			var grid = new CharterBackdrop(__gridGraphic);
+			var grid = new CharterBackdrop();
 			grid.active = grid.visible = false;
 			add(grid);
 		}
@@ -53,7 +41,7 @@ class CharterBackdropGroup extends FlxTypedGroup<CharterBackdrop> {
 			if (strumLine == null) continue;
 
 			if (members[i] == null)
-				members[i] = recycle(CharterBackdrop, () -> {return new CharterBackdrop(__gridGraphic);});
+				members[i] = recycle(CharterBackdrop, () -> {return new CharterBackdrop();});
 
 			var grid = members[i];
 			grid.cameras = this.cameras;
@@ -68,7 +56,7 @@ class CharterBackdropGroup extends FlxTypedGroup<CharterBackdrop> {
 
 			grid.notesGroup.clear();
 			notesGroup.forEach((n) -> {
-				var onStr:Bool = (n.snappedToStrumline ? n.strumLineID : CoolUtil.boundInt(Std.int((n.x+n.width)/(40*4)), 0, strumLineGroup.members.length-1)) == i;
+				var onStr:Bool = (n.snappedToStrumline ? n.strumLineID : CoolUtil.boundInt(Std.int((n.x+n.width)/(40*strumLine.keyCount)), 0, strumLineGroup.members.length-1)) == i;
 				if(n.exists && n.visible && onStr)
 					grid.notesGroup.add(n);
 			});
@@ -125,11 +113,17 @@ class CharterBackdrop extends FlxTypedGroup<Dynamic> {
 	public var notesGroup:FlxTypedGroup<CharterNote> = new FlxTypedGroup<CharterNote>();
 	public var strumLine:CharterStrumline;
 
-	public function new(gridGraphic:FlxGraphic) {
+	public var gridShader:CustomShader = new CustomShader("engine/charterGrid");
+	var __lastKeyCount:Int = 4;
+
+	public function new() {
 		super();
 
-		gridBackDrop = new FlxBackdrop(gridGraphic, Y, 0, 0);
+		gridBackDrop = new FlxBackdrop(null, Y, 0, 0);
+		gridBackDrop.makeSolid(1, 1, -1);
+		gridBackDrop.shader = gridShader;
 		add(gridBackDrop);
+		gridShader.hset("segments", 4);
 
 		waveformSprite = new FlxSprite().makeSolid(1, 1, 0xFF000000);
 		waveformSprite.scale.set(160, 1);
@@ -194,10 +188,12 @@ class CharterBackdrop extends FlxTypedGroup<Dynamic> {
 	public function updateSprites() {
 		var x:Float = 0; // fuck you
 		var alpha:Float = 0.9;
+		var keyCount:Int = 4;
 
 		if (strumLine != null) {
 			x = strumLine.x;
 			alpha = strumLine.strumLine.visible ? 0.9 : 0.4;
+			keyCount = strumLine.keyCount;
 		} else alpha = 0.9;
 
 		for (spr in [gridBackDrop, sectionSeparator, beatSeparator, topLimit, bottomLimit, 
@@ -206,20 +202,30 @@ class CharterBackdrop extends FlxTypedGroup<Dynamic> {
 			spr.cameras = this.cameras;
 		}
 
+		gridBackDrop.setGraphicSize(40*keyCount, 160);
+		gridBackDrop.updateHitbox();
+		if (__lastKeyCount != keyCount) gridShader.hset("segments", keyCount);
+		__lastKeyCount = keyCount;
+
 		sectionSeparator.spacing.y = (10 * Conductor.beatsPerMeasure * Conductor.stepsPerBeat) - 1;
 		beatSeparator.spacing.y = (20 * Conductor.stepsPerBeat) - 1;
 
-		topLimit.scale.set(4 * 40, Math.ceil(FlxG.height / cameras[0].zoom));
+		topLimit.scale.set(keyCount * 40, Math.ceil(FlxG.height / cameras[0].zoom));
 		topLimit.updateHitbox();
 		topLimit.y = -topLimit.height;
 
-		bottomLimit.scale.set(4 * 40, Math.ceil(FlxG.height / cameras[0].zoom));
+		bottomLimit.scale.set(keyCount * 40, Math.ceil(FlxG.height / cameras[0].zoom));
 		bottomLimit.updateHitbox();
 
+		for (spr in [conductorFollowerSpr, sectionSeparator, beatSeparator, topSeparator, bottomSeparator]) {
+			spr.scale.x = keyCount * 40;
+			spr.updateHitbox();
+		}
+
 		waveformSprite.visible = waveformSprite.shader != null;
 		if (waveformSprite.shader == null) return;
 
-		waveformSprite.scale.set(160, FlxG.height * (1/cameras[0].zoom));
+		waveformSprite.scale.set(keyCount * 40, FlxG.height * (1/cameras[0].zoom));
 		waveformSprite.updateHitbox();
 
 		waveformSprite.y = (cameras[0].scroll.y+FlxG.height/2)-(waveformSprite.height/2);

source/funkin/editors/charter/CharterNote.hx

@@ -1,5 +1,6 @@
 package funkin.editors.charter;
 
+import flixel.math.FlxAngle;
 import flixel.math.FlxPoint;
 import flixel.tweens.FlxTween;
 import flixel.util.FlxColor;
@@ -67,7 +68,7 @@ class CharterNote extends UISprite implements ICharterSelectable {
 
 	public var fullID(get, never):Int; // instead of %4 get fullID (for mousepos stuff)
 	public function get_fullID():Int
-		return (strumLineID * 4) + id;
+		return strumLine.startingID + id;
 
 	public function updatePos(step:Float, id:Int, susLength:Float = 0, ?type:Int = 0, ?strumLine:CharterStrumline = null) {
 		this.step = step;
@@ -84,8 +85,8 @@ class CharterNote extends UISprite implements ICharterSelectable {
 
 		if (angleTween != null) angleTween.cancel();
 
-		var destAngle = switch(animation.curAnim.curFrame = (id % 4)) {
-			case 0: -90;
+		var destAngle:Float = switch(animation.curAnim.curFrame = (id % 4)) {
+			case 0: 270;
 			case 1: 180;
 			case 2: 0;
 			case 3: 90;
@@ -104,7 +105,9 @@ class CharterNote extends UISprite implements ICharterSelectable {
 		if(angleTween != null)
 			angleTween.cancel();
 
-		angleTween = FlxTween.tween(this, {angle: destAngle}, (2/3)/__animSpeed, {ease: function(t) {
+		destAngle = CoolUtil.getClosestAngle(angle, destAngle);
+		
+		angleTween = FlxTween.angle(this, angle, destAngle, (2/3)/__animSpeed, {ease: function(t) {
 			return ((Math.sin(t * Math.PI) * 0.35) * 3 * t * Math.sqrt(1 - t)) + t;
 		}});
 	}
@@ -114,7 +117,7 @@ class CharterNote extends UISprite implements ICharterSelectable {
 			angleTween.cancel();
 			angleTween = null;
 			angle = switch(animation.curAnim.curFrame = (id % 4)) {
-				case 0: -90;
+				case 0: 270;
 				case 1: 180;
 				case 2: 0;
 				case 3: 90;
@@ -171,14 +174,15 @@ class CharterNote extends UISprite implements ICharterSelectable {
 
 	public function handleDrag(change:FlxPoint) {
 		var newStep = CoolUtil.bound(step + change.x, 0, Charter.instance.__endStep-1);
-		var newID:Int = CoolUtil.boundInt(fullID + Std.int(change.y), 0, (Charter.instance.strumLines.members.length*4)-1);
+		var newID:Int = Std.int(FlxMath.bound(fullID + Std.int(change.y), 0, Charter.instance.strumLines.totalKeyCount-1));
+		var newStrumLine = Charter.instance.strumLines.getStrumlineFromID(newID);
 
-		updatePos(newStep, newID % 4, susLength, type, Charter.instance.strumLines.members[Std.int(newID/4)]);
+		updatePos(newStep, (newID - newStrumLine.startingID) % newStrumLine.keyCount, susLength, type, newStrumLine);
 	}
 
 	public override function draw() {
 		if (snappedToStrumline)
-			x = (strumLine != null ? strumLine.x : 0) + (id % 4) * 40;
+			x = (strumLine != null ? strumLine.x : 0) + (id % (strumLine != null ? strumLine.keyCount : 4)) * 40;
 
 		drawMembers();
 		drawSuper();

source/funkin/editors/charter/CharterNoteHoverer.hx

@@ -17,10 +17,10 @@ class CharterNoteHoverer extends CharterNote {
 		switch (Charter.instance.gridActionType) {
 			case NONE:
 				var inBoundsY:Bool = (__mousePos.y > 0 && __mousePos.y < (Charter.instance.__endStep)*40);
-				if ((__mousePos.x > 0 && __mousePos.x < Charter.instance.gridBackdrops.strumlinesAmount * 160 && inBoundsY) && showHoverer) {
+				if ((__mousePos.x > 0 && __mousePos.x < Charter.instance.strumLines.totalKeyCount * 40 && inBoundsY) && showHoverer) {
 					step = CoolUtil.bound(FlxG.keys.pressed.SHIFT ? ((__mousePos.y-20) / 40) : Charter.instance.quantStep(__mousePos.y/40), 0, Charter.instance.__endStep-1);
 					id = Math.floor(__mousePos.x / 40); y = step * 40; x = id * 40; visible = true; sustainSpr.visible = typeText.visible = false;
-					angle = switch(animation.curAnim.curFrame = (id % 4)) {
+					angle = switch(animation.curAnim.curFrame = ((id - Charter.instance.strumLines.getStrumlineFromID(id).startingID) % 4)) {
 						case 0: -90;
 						case 1: 180;
 						case 2: 0;
@@ -53,7 +53,7 @@ class CharterNoteHoverer extends CharterNote {
 								y -= ((draggingNote.step + verticalChange)
 									- Charter.instance.quantStepRounded(draggingNote.step+verticalChange, verticalChange > 0 ? 0.35 : 0.65));
 							y *= 40;
-							var newID:Int = CoolUtil.boundInt(draggingNote.fullID + horizontalChange, 0, (Charter.instance.strumLines.members.length*4)-1);
+							var newID:Int = CoolUtil.boundInt(draggingNote.fullID + horizontalChange, 0, Charter.instance.strumLines.totalKeyCount-1);
 							x = (id=newID) * 40; y = CoolUtil.bound(y, 0, (Charter.instance.__endStep*40) - height);
 
 							angle = switch(animation.curAnim.curFrame = (draggingNote.id % 4)) {

source/funkin/editors/charter/CharterStrumLineGroup.hx

@@ -8,6 +8,13 @@ class CharterStrumLineGroup extends FlxTypedGroup<CharterStrumline> {
 	var draggingObj:CharterStrumline = null;
 	var draggingOffset:Float = 0;
 
+	public var totalKeyCount(get, never):Int;
+	public function get_totalKeyCount():Int {
+		var v:Int = 0;
+		for (strumLine in members) v += strumLine.keyCount;
+		return v;
+	}
+
 	public var draggable:Bool = false;
 	public var isDragging(get, never):Bool;
 	public function get_isDragging():Bool
@@ -36,14 +43,14 @@ class CharterStrumLineGroup extends FlxTypedGroup<CharterStrumline> {
 		}
 
 		for (i=>strum in members)
-			if (strum != null && !strum.dragging) strum.x = CoolUtil.fpsLerp(strum.x, 160 * i, 0.225);
+			if (strum != null && !strum.dragging) strum.x = CoolUtil.fpsLerp(strum.x, 40*strum.startingID, 0.225);
 
 		if (Charter.instance.eventsBackdrop != null && members[0] != null)
 			Charter.instance.eventsBackdrop.x = members[0].button.x - Charter.instance.eventsBackdrop.width;
 		if (Charter.instance.strumlineLockButton != null && members[0] != null)
-			Charter.instance.strumlineLockButton.x = members[0].x - (40*4);
+			Charter.instance.strumlineLockButton.x = members[0].x - (160);
 		if (Charter.instance.strumlineAddButton != null && members[CoolUtil.maxInt(0, members.length-1)] != null)
-			Charter.instance.strumlineAddButton.x = members[members.length-1].x + (40*4);
+			Charter.instance.strumlineAddButton.x = members[members.length-1].x + (40*members[members.length-1].keyCount);
 
 		if ((FlxG.mouse.justReleased || !draggable) && isDragging)
 			finishDrag();
@@ -53,7 +60,7 @@ class CharterStrumLineGroup extends FlxTypedGroup<CharterStrumline> {
 
 	public function snapStrums() {
 		for (i=>strum in members)
-			if (strum != null && !strum.dragging) strum.x = 160 * i;
+			if (strum != null && !strum.dragging) strum.x = 40*strum.startingID;
 	}
 
 	public function orderStrumline(strumLine:CharterStrumline, newID:Int) {
@@ -93,6 +100,15 @@ class CharterStrumLineGroup extends FlxTypedGroup<CharterStrumline> {
 		__pastStrumlines = null;
 	}
 
+	public function getStrumlineFromID(id:Int) {
+		var v:Int = 0;
+		for (strumLine in members) {
+			v += strumLine.keyCount;
+			if (id < v) return strumLine;
+		}
+		return members.last();
+	}
+
 	override function draw() @:privateAccess {
 		var i:Int = 0;
 		var basic:FlxBasic = null;

source/funkin/editors/charter/CharterStrumline.hx

@@ -23,6 +23,17 @@ class CharterStrumline extends UISprite {
 
 	public var vocals:FlxSound;
 
+	public var keyCount:Int = 4;
+	public var startingID(get, null):Int;
+	public function get_startingID():Int {
+		var index = Charter.instance.strumLines.members.indexOf(this);
+		if (index < 1) return 0; //-1 or 0
+
+		var v:Int = 0;
+		for (i in 0...index) v += Charter.instance.strumLines.members[i].keyCount;
+		return v;
+	}
+
 	public var selectedWaveform(default, set):Int = -1;
 	public function set_selectedWaveform(value:Int):Int {
 		if (value == -1) waveformShader = null;
@@ -45,14 +56,18 @@ class CharterStrumline extends UISprite {
 
 		var icons = strumLine.characters != null ? strumLine.characters : [];
 
+		keyCount = strumLine.keyCount != null ? strumLine.keyCount : 4;
+
 		healthIcons = new FlxSpriteGroup(x, y);
 
+		var maxCol = icons.length < 4 ? icons.length : 4;
+		var maxRow = Math.floor((icons.length-1) / 4) + 1;
 		for (i=>icon in icons) {
 			var healthIcon = new HealthIcon(Character.getIconFromCharName(icon));
-			healthIcon.scale.x = healthIcon.scale.y = 0.6 - (icons.length / 20);
+			healthIcon.scale.x = healthIcon.scale.y = Math.max((0.6 - (icons.length / 20)), 0.35);
 			healthIcon.updateHitbox();
-			healthIcon.x = FlxMath.lerp(0, icons.length * 20, (icons.length-1 != 0 ? i / (icons.length-1) : 0));
-			healthIcon.y = draggable ? 29 : 7;
+			healthIcon.x = FlxMath.lerp(0, Math.min(icons.length * 20, 120), (maxCol-1 != 0 ? (i % 4) / (maxCol-1) : 0));
+			healthIcon.y = (draggable ? 29 : 7) + FlxMath.lerp(0, Math.min(maxRow * 15, 60), (maxRow-1 != 0 ? Math.floor(i / 4) / (maxRow-1) : 0));
 			healthIcon.alpha = strumLine.visible ? 1 : 0.4;
 			healthIcons.add(healthIcon);
 		}
@@ -82,7 +97,7 @@ class CharterStrumline extends UISprite {
 	public override function update(elapsed:Float) {
 		if (FlxG.keys.justPressed.K) draggable = !draggable;
 
-		healthIcons.follow(this, ((40 * 4) - healthIcons.width) / 2, 7 + (__healthYOffset = FlxMath.lerp(__healthYOffset, draggable ? 8 : 0, 1/20)));
+		healthIcons.follow(this, ((40 * keyCount) - healthIcons.width) / 2, 7 + (__healthYOffset = FlxMath.lerp(__healthYOffset, draggable ? 8 : 0, 1/20)));
 
 		draggingSprite.selectable = draggable;
 		draggingSprite.updateSpriteRect();
@@ -91,7 +106,7 @@ class CharterStrumline extends UISprite {
 		draggingSprite.scale.set(dragScale, dragScale);
 		draggingSprite.updateHitbox();
 
-		draggingSprite.follow(this, (160/2) - (draggingSprite.width/2), 6 + (__draggingYOffset = FlxMath.lerp(__draggingYOffset, draggable ? 3 : 0, 1/12)));
+		draggingSprite.follow(this, ((keyCount*40)/2) - (draggingSprite.width/2), 6 + (__draggingYOffset = FlxMath.lerp(__draggingYOffset, draggable ? 3 : 0, 1/12)));
 		var fullAlpha:Float = UIState.state.isOverlapping(draggingSprite, @:privateAccess draggingSprite.__rect) || dragging ? 0.9 : 0.35;
 		draggingSprite.alpha = FlxMath.lerp(draggingSprite.alpha, draggable ? fullAlpha : 0, 1/12);
 		button.follow(this, 0, 95);
@@ -102,14 +117,18 @@ class CharterStrumline extends UISprite {
 	public function updateInfo() {
 		var icons = strumLine.characters != null ? strumLine.characters : [];
 
+		keyCount = strumLine.keyCount != null ? strumLine.keyCount : 4;
+
 		healthIcons.clear();
 
+		var maxCol = icons.length < 4 ? icons.length : 4;
+		var maxRow = Math.floor((icons.length-1) / 4) + 1;
 		for (i=>icon in icons) {
 			var healthIcon = new HealthIcon(Character.getIconFromCharName(icon));
-			healthIcon.scale.x = healthIcon.scale.y = 0.6 - (icons.length / 20);
+			healthIcon.scale.x = healthIcon.scale.y = Math.max((0.6 - (icons.length / 20)), 0.35);
 			healthIcon.updateHitbox();
-			healthIcon.x = FlxMath.lerp(0, icons.length * 20, (icons.length-1 != 0 ? i / (icons.length-1) : 0));
-			healthIcon.y = draggable ? 14 : 7;
+			healthIcon.x = FlxMath.lerp(0, Math.min(icons.length * 20, 120), (maxCol-1 != 0 ? (i % 4) / (maxCol-1) : 0));
+			healthIcon.y = (draggable ? 14 : 7) + FlxMath.lerp(0, Math.min(maxRow * 15, 60), (maxRow-1 != 0 ? Math.floor(i / 4) / (maxRow-1) : 0));
 			healthIcon.alpha = strumLine.visible ? 1 : 0.4;
 			healthIcons.add(healthIcon);
 		}
@@ -125,13 +144,13 @@ class CharterStrumlineOptions extends UITopMenuButton {
 	public function new(parent:CharterStrumline) {
 		super(0, 95, null, "Options ↓", []);
 		strLine = parent;
-		bWidth = 40 * 4;
-		this.label.fieldWidth = bWidth;
 	}
 
 	public override function update(elapsed:Float) {
 		super.update(elapsed);
 		alpha = FlxMath.lerp(1/20, 1, alpha); // so that instead of 0% it is 33% visible
+		bWidth = 40 * strLine.keyCount;
+		this.label.fieldWidth = bWidth;
 	}
 
 	public override function openContextMenu() {

source/funkin/editors/charter/CharterStrumlineScreen.hx

@@ -19,6 +19,7 @@ class CharterStrumlineScreen extends UISubstateWindow {
 	public var visibleCheckbox:UICheckbox;
 	public var scrollSpeedStepper:UINumericStepper;
 	public var usesChartscrollSpeed:UICheckbox;
+	public var keyCountStepper:UINumericStepper;
 
 	public var characterIcons:Array<HealthIcon> = [];
 
@@ -43,7 +44,8 @@ class CharterStrumlineScreen extends UISubstateWindow {
 				type: OPPONENT,
 				notes: [],
 				position: "dad",
-				visible: true
+				visible: true,
+				keyCount: 4
 			};
 
 		winTitle = creatingStrumLine ? 'Creating strumline #$strumLineID' : 'Editing strumline #$strumLineID properties';
@@ -156,10 +158,14 @@ class CharterStrumlineScreen extends UISubstateWindow {
 		vocalsSuffixDropDown = new UIDropDown(typeDropdown.x, hudScaleStepper.y + 128, 200, 32, suffixlist, strumLine.vocalsSuffix != null && strumLine.vocalsSuffix != "" ? suffixlist.indexOf(strumLine.vocalsSuffix) : 0);
 		add(vocalsSuffixDropDown);
 		addLabelOn(vocalsSuffixDropDown, "Vocal Suffix");
+
+		keyCountStepper = new UINumericStepper(vocalsSuffixDropDown.x + 200 + 26, vocalsSuffixDropDown.y, strumLine.keyCount != null ? strumLine.keyCount : 4, 1, 0, 1, null, 84);
+		add(keyCountStepper);
+		addLabelOn(keyCountStepper, "Key Count");
 	}
 
 	function saveStrumline() {
-		for (stepper in [hudXStepper, hudYStepper, hudScaleStepper])
+		for (stepper in [hudXStepper, hudYStepper, hudScaleStepper, keyCountStepper])
 			@:privateAccess stepper.__onChange(stepper.label.text);
 
 		var newStrumLine:ChartStrumLine = {
@@ -174,7 +180,8 @@ class CharterStrumlineScreen extends UISubstateWindow {
 			strumPos: [0, hudYStepper.value],
 			strumLinePos: hudXStepper.value,
 			strumScale: hudScaleStepper.value,
-			vocalsSuffix: vocalsSuffixDropDown.options[vocalsSuffixDropDown.index] != "NONE" ? vocalsSuffixDropDown.options[vocalsSuffixDropDown.index] : ""
+			vocalsSuffix: vocalsSuffixDropDown.options[vocalsSuffixDropDown.index] != "NONE" ? vocalsSuffixDropDown.options[vocalsSuffixDropDown.index] : "",
+			keyCount: Std.int(keyCountStepper.value)
 		};
 		if(!usesChartscrollSpeed.checked) newStrumLine.scrollSpeed = scrollSpeedStepper.value;
 		if (onSave != null) onSave(newStrumLine);

source/funkin/editors/ui/UIContextMenu.hx

@@ -16,6 +16,9 @@ class UIContextMenu extends MusicBeatSubstate {
 	public var contextMenuOptions:Array<UIContextMenuOptionSpr> = [];
 	public var separators:Array<FlxSprite> = [];
 
+	var scroll:Float = 0.0;
+	var flipped:Bool = false;
+
 	private var __oobDeletion:Bool = true;
 
 	public inline function preventOutOfBoxClickDeletion() {
@@ -77,7 +80,8 @@ class UIContextMenu extends MusicBeatSubstate {
 		bg.bWidth = maxW + 8;
 		bg.bHeight = Std.int(lastY - bg.y + 4);
 
-		if (bg.y + bg.bHeight > FlxG.height) {
+		if (bg.y + bg.bHeight > FlxG.height && bg.y > FlxG.height*0.5) {
+			flipped = true;
 			bg.y -= bg.bHeight;
 			for(o in contextMenuOptions)
 				o.y -= bg.bHeight;
@@ -104,7 +108,10 @@ class UIContextMenu extends MusicBeatSubstate {
 
 		super.update(elapsed);
 
-		contextCam.scroll.y = CoolUtil.fpsLerp(contextCam.scroll.y, 0, 0.5);
+		if (FlxG.mouse.wheel != 0.0)
+			scroll = FlxMath.bound(scroll + (FlxG.mouse.wheel * -20.0), !flipped ? 0.0 : -Math.max(bg.bHeight - FlxG.height*0.5, 0.0), flipped ? 0.0 : Math.max(bg.bHeight - FlxG.height*0.5, 0.0));
+
+		contextCam.scroll.y = CoolUtil.fpsLerp(contextCam.scroll.y, scroll, 0.5);
 		contextCam.alpha = CoolUtil.fpsLerp(contextCam.alpha, 1, 0.25);
 	}
 

source/funkin/game/PlayState.hx

@@ -684,7 +684,7 @@ class PlayState extends MusicBeatState
 
 		// HUD INITIALIZATION & CAMERA INITIALIZATION
 		#if REGION
-		var event = EventManager.get(AmountEvent).recycle(4);
+		var event = EventManager.get(AmountEvent).recycle(null);
 		if (!scripts.event("onPreGenerateStrums", event).cancelled) {
 			generateStrums(event.amount);
 			scripts.event("onPostGenerateStrums", event);
@@ -1017,9 +1017,12 @@ class PlayState extends MusicBeatState
 	}
 
 	@:dox(hide)
-	private inline function generateStrums(amount:Int = 4):Void
-		for(p in strumLines)
-			p.generateStrums(amount);
+	private inline function generateStrums(amount:Null<Int> = null):Void {
+		for(p in strumLines) {
+			var kc = amount != null ? amount : p.data.keyCount;
+			p.generateStrums(kc);
+		}
+	}
 
 	@:dox(hide)
 	override function openSubState(SubState:FlxSubState)

source/funkin/game/Strum.hx

@@ -96,12 +96,12 @@ class Strum extends FlxSprite {
 	private inline function updateNotePos(daNote:Note) {
 		if (daNote.strumRelativePos) {
 			daNote.setPosition((this.width - daNote.width) / 2, (daNote.strumTime - Conductor.songPosition) * (0.45 * CoolUtil.quantize(getScrollSpeed(daNote), 100)));
-			if (daNote.isSustainNote) daNote.y += N_WIDTHDIV2;
+			if (daNote.isSustainNote) daNote.y += N_WIDTHDIV2 * (scale.y / 0.7);
 		} else {
 			var offset = FlxPoint.get(0, (Conductor.songPosition - daNote.strumTime) * (0.45 * CoolUtil.quantize(getScrollSpeed(daNote), 100)));
 			var realOffset = FlxPoint.get(0, 0);
 
-			if (daNote.isSustainNote) offset.y -= N_WIDTHDIV2;
+			if (daNote.isSustainNote) offset.y -= N_WIDTHDIV2 * (scale.y / 0.7);
 
 			if (Std.int(daNote.__noteAngle % 360) != 0) {
 				var noteAngleCos = FlxMath.fastCos(daNote.__noteAngle / PIX180);

source/funkin/game/StrumLine.hx

@@ -301,7 +301,7 @@ class StrumLine extends FlxTypedGroup<Strum> {
 	public function createStrum(i:Int, ?animPrefix:String) {
 		if (animPrefix == null)
 			animPrefix = strumAnimPrefix[i % strumAnimPrefix.length];
-		var babyArrow:Strum = new Strum(startingPos.x + ((Note.swagWidth * strumScale) * i), startingPos.y);
+		var babyArrow:Strum = new Strum(startingPos.x + ((Note.swagWidth * strumScale * (4 / (data.keyCount != null ? data.keyCount : 4))) * i), startingPos.y);
 		babyArrow.ID = i;
 
 		if(data.scrollSpeed != null)