Chart Editor Additions/Fixes

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

@@ -170,6 +170,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

@@ -777,6 +777,13 @@ class CoolUtil
 		var file = new haxe.io.Path(file);
 		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;
+	}
 }
 
 /**

source/funkin/editors/charter/Charter.hx

@@ -295,6 +295,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
 					}
 				]
 			},
@@ -782,7 +798,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 = FlxMath.bound(n.y, 0, (__endStep*40) - n.height);
-						n.x = FlxMath.bound(n.x, 0, ((strumLines.members.length * 4)-1) * 40);
+						n.x = FlxMath.bound(n.x, 0, (strumLines.totalKeyCount-1) * 40);
 						n.cursor = HAND;
 					}, function (e:CharterEvent) {
 						e.y =  e.step * 40 + (mousePos.y - dragStartPos.y) - 17;
@@ -811,7 +827,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);
@@ -844,17 +860,18 @@ 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;
 							selection = [];
 
 							if (mouseOnGrid && mousePos.y > 0 && mousePos.y < (__endStep)*40) {
 								var note = new CharterNote();
+								var targetStrumline = strumLines.getStrumlineFromID(id);
 								note.updatePos(
 									FlxMath.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];
@@ -1157,7 +1174,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)
 		);
 
@@ -1208,14 +1225,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;
+					}
 				}
 			}
 		}
@@ -1277,6 +1300,11 @@ class Charter extends UIState {
 		return __camZoom = FlxMath.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(_) {
@@ -1611,6 +1639,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.graphics.FlxGraphic;
 import funkin.backend.system.Conductor;
 import openfl.geom.Rectangle;
 import flixel.addons.display.FlxBackdrop;
+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 : Std.int(FlxMath.bound((n.x+n.width)/(40*4), 0, strumLineGroup.members.length-1))) == i;
+				var onStr:Bool = (n.snappedToStrumline ? n.strumLineID : Std.int(FlxMath.bound((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);