Exploration in expanding FunkinSprite for optimization

assets

@@ -1 +1 @@
-Subproject commit 03f544a7b42fed43c521cb596e487ad4ae129576
+Subproject commit ffbf73c76860a2747eb11eeed14099e186700956

source/funkin/graphics/FunkinSprite.hx

@@ -6,6 +6,8 @@ import flixel.graphics.FlxGraphic;
 
 /**
  * An FlxSprite with additional functionality.
+ * - A more efficient method for creating solid color sprites.
+ * - TODO: Better cache handling for textures.
  */
 class FunkinSprite extends FlxSprite
 {
@@ -18,19 +20,135 @@ class FunkinSprite extends FlxSprite
     super(x, y);
   }
 
+  /**
+   * Create a new FunkinSprite with a static texture.
+   * @param x The starting X position.
+   * @param y The starting Y position.
+   * @param key The key of the texture to load.
+   * @return The new FunkinSprite.
+   */
+  public static function create(x:Float = 0.0, y:Float = 0.0, key:String):FunkinSprite
+  {
+    var sprite = new FunkinSprite(x, y);
+    sprite.loadTexture(key);
+    return sprite;
+  }
+
+  /**
+   * Create a new FunkinSprite with a Sparrow atlas animated texture.
+   * @param x The starting X position.
+   * @param y The starting Y position.
+   * @param key The key of the texture to load.
+   * @return The new FunkinSprite.
+   */
+  public static function createSparrow(x:Float = 0.0, y:Float = 0.0, key:String):FunkinSprite
+  {
+    var sprite = new FunkinSprite(x, y);
+    sprite.loadSparrow(key);
+    return sprite;
+  }
+
+  /**
+   * Create a new FunkinSprite with a Packer atlas animated texture.
+   * @param x The starting X position.
+   * @param y The starting Y position.
+   * @param key The key of the texture to load.
+   * @return The new FunkinSprite.
+   */
+  public static function createPacker(x:Float = 0.0, y:Float = 0.0, key:String):FunkinSprite
+  {
+    var sprite = new FunkinSprite(x, y);
+    sprite.loadPacker(key);
+    return sprite;
+  }
+
+  /**
+   * Load a static image as the sprite's texture.
+   * @param key The key of the texture to load.
+   * @return This sprite, for chaining.
+   */
+  public function loadTexture(key:String):FunkinSprite
+  {
+    if (!isTextureCached(key)) FlxG.log.warn('Texture not cached, may experience stuttering! $key');
+
+    loadGraphic(key);
+
+    return this;
+  }
+
+  /**
+   * Load an animated texture (Sparrow atlas spritesheet) as the sprite's texture.
+   * @param key The key of the texture to load.
+   * @return This sprite, for chaining.
+   */
+  public function loadSparrow(key:String):FunkinSprite
+  {
+    var graphicKey = Paths.image(key);
+    if (!isTextureCached(graphicKey)) FlxG.log.warn('Texture not cached, may experience stuttering! $graphicKey');
+
+    this.frames = Paths.getSparrowAtlas(key);
+
+    return this;
+  }
+
+  /**
+   * Load an animated texture (Packer atlas spritesheet) as the sprite's texture.
+   * @param key The key of the texture to load.
+   * @return This sprite, for chaining.
+   */
+  public function loadPacker(key:String):FunkinSprite
+  {
+    var graphicKey = Paths.image(key);
+    if (!isTextureCached(graphicKey)) FlxG.log.warn('Texture not cached, may experience stuttering! $graphicKey');
+
+    this.frames = Paths.getPackerAtlas(key);
+
+    return this;
+  }
+
+  public static function isTextureCached(key:String):Bool
+  {
+    return FlxG.bitmap.get(key) != null;
+  }
+
+  public static function cacheTexture(key:String):Void
+  {
+    var graphic = flixel.graphics.FlxGraphic.fromAssetKey(key, false, null, true);
+    if (graphic == null)
+    {
+      FlxG.log.warn('Failed to cache graphic: $key');
+    }
+    else
+    {
+      trace('Successfully cached graphic: $key');
+    }
+  }
+
+  public static function cacheSparrow(key:String):Void
+  {
+    cacheTexture(Paths.image(key));
+  }
+
+  public static function cachePacker(key:String):Void
+  {
+    cacheTexture(Paths.image(key));
+  }
+
   /**
    * Acts similarly to `makeGraphic`, but with improved memory usage,
-   * at the expense of not being able to paint onto the sprite.
+   * at the expense of not being able to paint onto the resulting sprite.
    *
    * @param width The target width of the sprite.
    * @param height The target height of the sprite.
    * @param color The color to fill the sprite with.
+   * @return This sprite, for chaining.
    */
   public function makeSolidColor(width:Int, height:Int, color:FlxColor = FlxColor.WHITE):FunkinSprite
   {
+    // Create a tiny solid color graphic and scale it up to the desired size.
     var graphic:FlxGraphic = FlxG.bitmap.create(2, 2, color, false, 'solid#${color.toHexString(true, false)}');
     frames = graphic.imageFrame;
-    scale.set(width / 2, height / 2);
+    scale.set(width / 2.0, height / 2.0);
     updateHitbox();
 
     return this;

source/funkin/play/Countdown.hx

@@ -3,6 +3,7 @@ package funkin.play;
 import flixel.tweens.FlxEase;
 import flixel.tweens.FlxTween;
 import flixel.FlxSprite;
+import funkin.graphics.FunkinSprite;
 import funkin.modding.events.ScriptEventDispatcher;
 import funkin.modding.module.ModuleHandler;
 import funkin.modding.events.ScriptEvent;
@@ -214,7 +215,7 @@ class Countdown
 
     if (spritePath == null) return;
 
-    var countdownSprite:FlxSprite = new FlxSprite(0, 0).loadGraphic(Paths.image(spritePath));
+    var countdownSprite:FunkinSprite = FunkinSprite.create(Paths.image(spritePath));
     countdownSprite.scrollFactor.set(0, 0);
 
     if (isPixelStyle) countdownSprite.setGraphicSize(Std.int(countdownSprite.width * Constants.PIXEL_ART_SCALE));

source/funkin/play/GitarooPause.hx

@@ -3,6 +3,7 @@ package funkin.play;
 import flixel.FlxSprite;
 import flixel.graphics.frames.FlxAtlasFrames;
 import funkin.play.PlayState;
+import funkin.graphics.FunkinSprite;
 import funkin.ui.MusicBeatState;
 import flixel.addons.transition.FlxTransitionableState;
 import funkin.ui.mainmenu.MainMenuState;
@@ -27,25 +28,22 @@ class GitarooPause extends MusicBeatState
   {
     if (FlxG.sound.music != null) FlxG.sound.music.stop();
 
-    var bg:FlxSprite = new FlxSprite().loadGraphic(Paths.image('pauseAlt/pauseBG'));
+    var bg:FunkinSprite = FunkinSprite.create(Paths.image('pauseAlt/pauseBG'));
     add(bg);
 
-    var bf:FlxSprite = new FlxSprite(0, 30);
+    var bf:FunkinSprite = FunkinSprite.createSparrow(0, 30, 'pauseAlt/bfLol');
-    bf.frames = Paths.getSparrowAtlas('pauseAlt/bfLol');
     bf.animation.addByPrefix('lol', "funnyThing", 13);
     bf.animation.play('lol');
     add(bf);
     bf.screenCenter(X);
 
-    replayButton = new FlxSprite(FlxG.width * 0.28, FlxG.height * 0.7);
+    replayButton = FunkinSprite.createSparrow(FlxG.width * 0.28, FlxG.height * 0.7, 'pauseAlt/pauseUI');
-    replayButton.frames = Paths.getSparrowAtlas('pauseAlt/pauseUI');
     replayButton.animation.addByPrefix('selected', 'bluereplay', 0, false);
     replayButton.animation.appendByPrefix('selected', 'yellowreplay');
     replayButton.animation.play('selected');
     add(replayButton);
 
-    cancelButton = new FlxSprite(FlxG.width * 0.58, replayButton.y);
+    cancelButton = FunkinSprite.createSparrow(FlxG.width * 0.58, replayButton.y, 'pauseAlt/pauseUI');
-    cancelButton.frames = Paths.getSparrowAtlas('pauseAlt/pauseUI');
     cancelButton.animation.addByPrefix('selected', 'bluecancel', 0, false);
     cancelButton.animation.appendByPrefix('selected', 'cancelyellow');
     cancelButton.animation.play('selected');

source/funkin/play/PauseSubState.hx

@@ -13,6 +13,7 @@ import flixel.util.FlxColor;
 import funkin.play.PlayState;
 import funkin.data.song.SongRegistry;
 import funkin.ui.Alphabet;
+import funkin.graphics.FunkinSprite;
 
 class PauseSubState extends MusicBeatSubState
 {
@@ -72,7 +73,7 @@ class PauseSubState extends MusicBeatSubState
 
     FlxG.sound.list.add(pauseMusic);
 
-    bg = new FlxSprite().makeGraphic(FlxG.width, FlxG.height, FlxColor.BLACK);
+    bg = new FunkinSprite().makeSolidColor(FlxG.width, FlxG.height, FlxColor.BLACK);
     bg.alpha = 0;
     bg.scrollFactor.set();
     add(bg);

source/funkin/play/PlayState.hx

@@ -10,12 +10,14 @@ import flixel.addons.transition.Transition;
 import flixel.addons.transition.Transition;
 import flixel.FlxCamera;
 import flixel.FlxObject;
-import flixel.FlxSprite;
 import flixel.FlxState;
+import funkin.graphics.FunkinSprite;
 import flixel.FlxSubState;
+import funkin.graphics.FunkinSprite;
 import flixel.math.FlxMath;
 import flixel.math.FlxPoint;
 import flixel.math.FlxRect;
+import funkin.graphics.FunkinSprite;
 import flixel.text.FlxText;
 import flixel.tweens.FlxEase;
 import flixel.tweens.FlxTween;
@@ -213,7 +215,7 @@ class PlayState extends MusicBeatSubState
    * The current gameplay camera will always follow this object. Tween its position to move the camera smoothly.
    *
    * It needs to be an object in the scene for the camera to be configured to follow it.
-   * We optionally make this an FlxSprite so we can draw a debug graphic with it.
+   * We optionally make this a sprite so we can draw a debug graphic with it.
    */
   public var cameraFollowPoint:FlxObject;
 
@@ -400,7 +402,7 @@ class PlayState extends MusicBeatSubState
    * The background image used for the health bar.
    * Emma says the image is slightly skewed so I'm leaving it as an image instead of a `createGraphic`.
    */
-  public var healthBarBG:FlxSprite;
+  public var healthBarBG:FunkinSprite;
 
   /**
    * The health icon representing the player.
@@ -568,12 +570,15 @@ class PlayState extends MusicBeatSubState
 
     if (!assertChartExists()) return;
 
+    // TODO: Add something to toggle this on!
     if (false)
     {
       // Displays the camera follow point as a sprite for debug purposes.
-      cameraFollowPoint = new FlxSprite(0, 0).makeGraphic(8, 8, 0xFF00FF00);
+      var cameraFollowPoint = new FunkinSprite(0, 0);
+      cameraFollowPoint.makeSolidColor(8, 8, 0xFF00FF00);
       cameraFollowPoint.visible = false;
       cameraFollowPoint.zIndex = 1000000;
+      this.cameraFollowPoint = cameraFollowPoint;
     }
     else
     {
@@ -1349,7 +1354,7 @@ class PlayState extends MusicBeatSubState
   function initHealthBar():Void
   {
     var healthBarYPos:Float = Preferences.downscroll ? FlxG.height * 0.1 : FlxG.height * 0.9;
-    healthBarBG = new FlxSprite(0, healthBarYPos).loadGraphic(Paths.image('healthBar'));
+    healthBarBG = FunkinSprite.create(0, healthBarYPos, Paths.image('healthBar'));
     healthBarBG.screenCenter(X);
     healthBarBG.scrollFactor.set(0, 0);
     add(healthBarBG);
@@ -1383,7 +1388,7 @@ class PlayState extends MusicBeatSubState
   function initMinimalMode():Void
   {
     // Create the green background.
-    var menuBG = new FlxSprite().loadGraphic(Paths.image('menuDesat'));
+    var menuBG = FunkinSprite.create(Paths.image('menuDesat'));
     menuBG.color = 0xFF4CAF50;
     menuBG.setGraphicSize(Std.int(menuBG.width * 1.1));
     menuBG.updateHitbox();
@@ -2623,10 +2628,10 @@ class PlayState extends MusicBeatSubState
         // TODO: Softcode this cutscene.
         if (currentSong.id == 'eggnog')
         {
-          var blackShit:FlxSprite = new FlxSprite(-FlxG.width * FlxG.camera.zoom,
+          var blackBG:FunkinSprite = new FunkinSprite(-FlxG.width * FlxG.camera.zoom, -FlxG.height * FlxG.camera.zoom);
-            -FlxG.height * FlxG.camera.zoom).makeGraphic(FlxG.width * 3, FlxG.height * 3, FlxColor.BLACK);
+          blackBG.makeSolidColor(FlxG.width * 3, FlxG.height * 3, FlxColor.BLACK);
-          blackShit.scrollFactor.set();
+          blackBG.scrollFactor.set();
-          add(blackShit);
+          add(blackBG);
           camHUD.visible = false;
           isInCutscene = true;
 

source/funkin/play/ResultState.hx

@@ -4,6 +4,7 @@ import funkin.ui.story.StoryMenuState;
 import funkin.graphics.adobeanimate.FlxAtlasSprite;
 import flixel.FlxBasic;
 import flixel.FlxSprite;
+import funkin.graphics.FunkinSprite;
 import flixel.graphics.frames.FlxAtlasFrames;
 import flixel.graphics.frames.FlxBitmapFont;
 import flixel.group.FlxGroup.FlxTypedGroup;
@@ -96,8 +97,7 @@ class ResultState extends MusicBeatSubState
       bfSHIT.anim.play(); // unpauses this anim, since it's on PlayOnce!
     };
 
-    var gf:FlxSprite = new FlxSprite(500, 300);
+    var gf:FlxSprite = FunkinSprite.createSparrow(500, 300, 'resultScreen/resultGirlfriendGOOD');
-    gf.frames = Paths.getSparrowAtlas('resultScreen/resultGirlfriendGOOD');
     gf.animation.addByPrefix("clap", "Girlfriend Good Anim", 24, false);
     gf.visible = false;
     gf.animation.finishCallback = _ -> {
@@ -105,8 +105,7 @@ class ResultState extends MusicBeatSubState
     };
     add(gf);
 
-    var boyfriend:FlxSprite = new FlxSprite(640, -200);
+    var boyfriend:FlxSprite = FunkinSprite.createSparrow(640, -200, 'resultScreen/resultBoyfriendGOOD');
-    boyfriend.frames = Paths.getSparrowAtlas('resultScreen/resultBoyfriendGOOD');
     boyfriend.animation.addByPrefix("fall", "Boyfriend Good", 24, false);
     boyfriend.visible = false;
     boyfriend.animation.finishCallback = function(_) {
@@ -115,8 +114,7 @@ class ResultState extends MusicBeatSubState
 
     add(boyfriend);
 
-    var soundSystem:FlxSprite = new FlxSprite(-15, -180);
+    var soundSystem:FlxSprite = FunkinSprite.createSparrow(-15, -180, 'resultScreen/soundSystem');
-    soundSystem.frames = Paths.getSparrowAtlas("resultScreen/soundSystem");
     soundSystem.animation.addByPrefix("idle", "sound system", 24, false);
     soundSystem.visible = false;
     new FlxTimer().start(0.4, _ -> {
@@ -162,20 +160,17 @@ class ResultState extends MusicBeatSubState
     FlxTween.tween(blackTopBar, {y: 0}, 0.4, {ease: FlxEase.quartOut, startDelay: 0.5});
     add(blackTopBar);
 
-    var resultsAnim:FlxSprite = new FlxSprite(-200, -10);
+    var resultsAnim:FunkinSprite = FunkinSprite.createSparrow(-200, -10, "resultScreen/results");
-    resultsAnim.frames = Paths.getSparrowAtlas("resultScreen/results");
     resultsAnim.animation.addByPrefix("result", "results", 24, false);
     resultsAnim.animation.play("result");
     add(resultsAnim);
 
-    var ratingsPopin:FlxSprite = new FlxSprite(-150, 120);
+    var ratingsPopin:FunkinSprite = FunkinSprite.createSparrow(-150, 120, "resultScreen/ratingsPopin");
-    ratingsPopin.frames = Paths.getSparrowAtlas("resultScreen/ratingsPopin");
     ratingsPopin.animation.addByPrefix("idle", "Categories", 24, false);
     ratingsPopin.visible = false;
     add(ratingsPopin);
 
-    var scorePopin:FlxSprite = new FlxSprite(-180, 520);
+    var scorePopin:FunkinSprite = FunkinSprite.createSparrow(-180, 520, "resultScreen/scorePopin");
-    scorePopin.frames = Paths.getSparrowAtlas("resultScreen/scorePopin");
     scorePopin.animation.addByPrefix("score", "tally score", 24, false);
     scorePopin.visible = false;
     add(scorePopin);

source/funkin/play/components/HealthIcon.hx

@@ -6,6 +6,7 @@ import flixel.math.FlxMath;
 import flixel.math.FlxPoint;
 import funkin.play.character.CharacterData.CharacterDataParser;
 import openfl.utils.Assets;
+import funkin.graphics.FunkinSprite;
 import funkin.util.MathUtil;
 
 /**
@@ -26,7 +27,7 @@ import funkin.util.MathUtil;
  * @author MasterEric
  */
 @:nullSafety
-class HealthIcon extends FlxSprite
+class HealthIcon extends FunkinSprite
 {
   /**
    * The character this icon is representing.
@@ -408,7 +409,7 @@ class HealthIcon extends FlxSprite
 
     if (!isLegacyStyle)
     {
-      frames = Paths.getSparrowAtlas('icons/icon-$charId');
+      loadSparrow('icons/icon-$charId');
 
       loadAnimationNew();
     }

source/funkin/play/components/PopUpStuff.hx

@@ -3,6 +3,7 @@ package funkin.play.components;
 import flixel.FlxSprite;
 import flixel.group.FlxGroup.FlxTypedGroup;
 import flixel.tweens.FlxTween;
+import funkin.graphics.FunkinSprite;
 import funkin.play.PlayState;
 
 class PopUpStuff extends FlxTypedGroup<FlxSprite>
@@ -14,17 +15,18 @@ class PopUpStuff extends FlxTypedGroup<FlxSprite>
 
   public function displayRating(daRating:String)
   {
+    var perfStart:Float = Sys.time();
+
     if (daRating == null) daRating = "good";
 
-    var rating:FlxSprite = new FlxSprite(0, 0);
-    rating.scrollFactor.set(0.2, 0.2);
-
-    rating.zIndex = 1000;
     var ratingPath:String = daRating;
 
     if (PlayState.instance.currentStageId.startsWith('school')) ratingPath = "weeb/pixelUI/" + ratingPath + "-pixel";
 
-    rating.loadGraphic(Paths.image(ratingPath));
+    var rating:FunkinSprite = FunkinSprite.create(0, 0, Paths.image(ratingPath));
+    rating.scrollFactor.set(0.2, 0.2);
+
+    rating.zIndex = 1000;
     rating.x = FlxG.width * 0.50;
     rating.x -= FlxG.camera.scroll.x * 0.2;
     // make sure rating is visible lol!
@@ -61,10 +63,16 @@ class PopUpStuff extends FlxTypedGroup<FlxSprite>
         },
         startDelay: Conductor.instance.beatLengthMs * 0.001
       });
+
+    var perfEnd:Float = Sys.time();
+
+    trace("displayRating took: " + (perfEnd - perfStart));
   }
 
   public function displayCombo(?combo:Int = 0):Int
   {
+    var perfStart:Float = Sys.time();
+
     if (combo == null) combo = 0;
 
     var pixelShitPart1:String = "";
@@ -75,7 +83,7 @@ class PopUpStuff extends FlxTypedGroup<FlxSprite>
       pixelShitPart1 = 'weeb/pixelUI/';
       pixelShitPart2 = '-pixel';
     }
-    var comboSpr:FlxSprite = new FlxSprite().loadGraphic(Paths.image(pixelShitPart1 + 'combo' + pixelShitPart2));
+    var comboSpr:FunkinSprite = FunkinSprite.create(Paths.image(pixelShitPart1 + 'combo' + pixelShitPart2));
     comboSpr.y = FlxG.camera.height * 0.4 + 80;
     comboSpr.x = FlxG.width * 0.50;
     comboSpr.x -= FlxG.camera.scroll.x * 0.2;
@@ -129,8 +137,7 @@ class PopUpStuff extends FlxTypedGroup<FlxSprite>
     var daLoop:Int = 1;
     for (i in seperatedScore)
     {
-      var numScore:FlxSprite = new FlxSprite().loadGraphic(Paths.image(pixelShitPart1 + 'num' + Std.int(i) + pixelShitPart2));
+      var numScore:FunkinSprite = FunkinSprite.create(0, comboSpr.y, Paths.image(pixelShitPart1 + 'num' + Std.int(i) + pixelShitPart2));
-      numScore.y = comboSpr.y;
 
       if (PlayState.instance.currentStageId.startsWith('school'))
       {
@@ -163,6 +170,9 @@ class PopUpStuff extends FlxTypedGroup<FlxSprite>
       daLoop++;
     }
 
+    var perfEnd:Float = Sys.time();
+    trace("displayCombo took: " + (perfEnd - perfStart));
+
     return combo;
   }
 }

source/funkin/play/notes/NoteSprite.hx

@@ -4,9 +4,10 @@ import funkin.data.song.SongData.SongNoteData;
 import funkin.play.notes.notestyle.NoteStyle;
 import flixel.graphics.frames.FlxAtlasFrames;
 import flixel.FlxSprite;
+import funkin.graphics.FunkinSprite;
 import funkin.graphics.shaders.HSVShader;
 
-class NoteSprite extends FlxSprite
+class NoteSprite extends FunkinSprite
 {
   static final DIRECTION_COLORS:Array<String> = ['purple', 'blue', 'green', 'red'];
 

source/funkin/play/notes/notestyle/NoteStyle.hx

@@ -4,6 +4,7 @@ import flixel.graphics.frames.FlxAtlasFrames;
 import flixel.graphics.frames.FlxFramesCollection;
 import funkin.data.animation.AnimationData;
 import funkin.data.IRegistryEntry;
+import funkin.graphics.FunkinSprite;
 import funkin.data.notestyle.NoteStyleData;
 import funkin.data.notestyle.NoteStyleRegistry;
 import funkin.data.notestyle.NoteStyleRegistry;
@@ -100,6 +101,11 @@ class NoteStyle implements IRegistryEntry<NoteStyleData>
 
   function buildNoteFrames(force:Bool = false):FlxAtlasFrames
   {
+    if (!FunkinSprite.isTextureCached(Paths.image(getNoteAssetPath())))
+    {
+      FlxG.log.warn('Note texture is not cached: ${getNoteAssetPath()}');
+    }
+
     if (noteFrames != null && !force) return noteFrames;
 
     noteFrames = Paths.getSparrowAtlas(getNoteAssetPath(), getNoteAssetLibrary());

source/funkin/play/stage/Stage.hx

@@ -185,9 +185,9 @@ class Stage extends FlxSpriteGroup implements IPlayStateScriptedClass implements
         switch (dataProp.animType)
         {
           case 'packer':
-            propSprite.frames = Paths.getPackerAtlas(dataProp.assetPath);
+            propSprite.loadPacker(dataProp.assetPath);
           default: // 'sparrow'
-            propSprite.frames = Paths.getSparrowAtlas(dataProp.assetPath);
+            propSprite.loadSparrow(dataProp.assetPath);
         }
       }
       else if (isSolidColor)
@@ -209,7 +209,7 @@ class Stage extends FlxSpriteGroup implements IPlayStateScriptedClass implements
       else
       {
         // Initalize static sprite.
-        propSprite.loadGraphic(Paths.image(dataProp.assetPath));
+        propSprite.loadTexture(Paths.image(dataProp.assetPath));
 
         // Disables calls to update() for a performance boost.
         propSprite.active = false;

source/funkin/ui/freeplay/DJBoyfriend.hx

@@ -156,8 +156,6 @@ class DJBoyfriend extends FlxAtlasSprite
 
   function setupAnimations():Void
   {
-    // frames = FlxAnimationUtil.combineFramesCollections(Paths.getSparrowAtlas('freeplay/bfFreeplay'), Paths.getSparrowAtlas('freeplay/bf-freeplay-afk'));
-
     // animation.addByPrefix('intro', "boyfriend dj intro", 24, false);
     addOffset('boyfriend dj intro', 8, 3);
 

source/funkin/ui/freeplay/FreeplayFlames.hx

@@ -23,7 +23,7 @@ class FreeplayFlames extends FlxSpriteGroup
     {
       var flame:FlxSprite = new FlxSprite(flameX + (flameSpreadX * i), flameY + (flameSpreadY * i));
       flame.frames = Paths.getSparrowAtlas("freeplay/freeplayFlame");
-      flame.animation.addByPrefix("flame", "fire loop", FlxG.random.int(23, 25), false);
+      flame.animation.addByPrefix("flame", "fire loop full instance 1", FlxG.random.int(23, 25), false);
       flame.animation.play("flame");
       flame.visible = false;
       flameCount = 0;

source/funkin/ui/freeplay/FreeplayScore.hx

@@ -111,7 +111,7 @@ class ScoreNum extends FlxSprite
     for (i in 0...10)
     {
       var stringNum:String = numToString[i];
-      animation.addByPrefix(stringNum, stringNum, 24, false);
+      animation.addByPrefix(stringNum, '$stringNum DIGITAL', 24, false);
     }
 
     this.digit = initDigit;

source/funkin/ui/freeplay/FreeplayState.hx

@@ -226,17 +226,17 @@ class FreeplayState extends MusicBeatSubState
     trace(FlxG.camera.initialZoom);
     trace(FlxCamera.defaultZoom);
 
-    var pinkBack:FlxSprite = new FlxSprite().loadGraphic(Paths.image('freeplay/pinkBack'));
+    var pinkBack:FunkinSprite = FunkinSprite.create(Paths.image('freeplay/pinkBack'));
     pinkBack.color = 0xFFffd4e9; // sets it to pink!
     pinkBack.x -= pinkBack.width;
 
     FlxTween.tween(pinkBack, {x: 0}, 0.6, {ease: FlxEase.quartOut});
     add(pinkBack);
 
-    var orangeBackShit:FlxSprite = new FlxSprite(84, 440).makeGraphic(Std.int(pinkBack.width), 75, 0xFFfeda00);
+    var orangeBackShit:FunkinSprite = new FunkinSprite(84, 440).makeSolidColor(Std.int(pinkBack.width), 75, 0xFFfeda00);
     add(orangeBackShit);
 
-    var alsoOrangeLOL:FlxSprite = new FlxSprite(0, orangeBackShit.y).makeGraphic(100, Std.int(orangeBackShit.height), 0xFFffd400);
+    var alsoOrangeLOL:FunkinSprite = new FunkinSprite(0, orangeBackShit.y).makeSolidColor(100, Std.int(orangeBackShit.height), 0xFFffd400);
     add(alsoOrangeLOL);
 
     exitMovers.set([pinkBack, orangeBackShit, alsoOrangeLOL],
@@ -462,7 +462,7 @@ class FreeplayState extends MusicBeatSubState
 
     var fnfHighscoreSpr:FlxSprite = new FlxSprite(860, 70);
     fnfHighscoreSpr.frames = Paths.getSparrowAtlas('freeplay/highscore');
-    fnfHighscoreSpr.animation.addByPrefix("highscore", "highscore", 24, false);
+    fnfHighscoreSpr.animation.addByPrefix("highscore", "highscore small instance 1", 24, false);
     fnfHighscoreSpr.visible = false;
     fnfHighscoreSpr.setGraphicSize(0, Std.int(fnfHighscoreSpr.height * 1));
     fnfHighscoreSpr.updateHitbox();

source/funkin/ui/transition/LoadingState.hx

@@ -44,11 +44,10 @@ class LoadingState extends MusicBeatState
 
   override function create():Void
   {
-    var bg:FlxSprite = new FunkinSprite().makeSolidColor(FlxG.width, FlxG.height, 0xFFcaff4d);
+    var bg:FunkinSprite = new FunkinSprite().makeSolidColor(FlxG.width, FlxG.height, 0xFFcaff4d);
     add(bg);
 
-    funkay = new FlxSprite();
+    funkay = FunkinSprite.create(Paths.image('funkay'));
-    funkay.loadGraphic(Paths.image('funkay'));
     funkay.setGraphicSize(0, FlxG.height);
     funkay.updateHitbox();
     add(funkay);
@@ -209,6 +208,11 @@ class LoadingState extends MusicBeatState
       params.targetSong.cacheCharts(true);
     }
 
+    // TODO: This is a hack! Redo this later when we have a proper asset caching system.
+    FunkinSprite.cacheTexture(Paths.image('combo'));
+    FunkinSprite.cacheTexture(Paths.image('healthBar'));
+    FunkinSprite.cacheTexture(Paths.image('menuDesat'));
+
     FlxG.switchState(playStateCtor);
     #end
   }