feat: texture repacking for EVERYTHING!! (#1021)

Author: dragoncoder047

.vscode/settings.json

@@ -2,5 +2,16 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.preferences.importModuleSpecifierEnding": "minimal",
   "typescript.preferences.importModuleSpecifier": "shortest",
-  "dprint.path": "./node_modules/dprint/dprint"
+  "dprint.path": "./node_modules/dprint/dprint",
+  "cSpell.words": [
+    "anims",
+    "Bbox",
+    "gopt",
+    "kaplay",
+    "lajbel",
+    "lerp",
+    "minver",
+    "mult",
+    "verts"
+  ]
 }

CHANGELOG.md

@@ -12,12 +12,36 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - [Jump to v3001 changelog](#changelog-for-v3001).
 
 <!--
+
 Hey, KAPLAY Dev, you must changelog here, in unreleased, so later your
 best friend, lajbel, can put the correct version name here
+
+Make sure to format each entry like this:
+
+- short description (#PR Number) - @your username
+
 -->
 
 ## [unreleased]
 
+### Breaking Changes
+
+- The texture uv coordinates for primitives (solid- or gradient-filled circles,
+  rectangles, lines, and polygons) have now been changed to (1, 1) instead of
+  (0, 0), so shaders written for primitives will need to be updated. (#1021) -
+  @dragoncoder047
+- The global `onDraw()` handler's no-tag form now always draws before all game
+  objects are drawn, **regardless of whether it was attached after game objects
+  were added** (#977) - @lajbel
+- The `LoadFontOpt.filter` option has been **removed** since fonts are now
+  packed into the same texture as sprites, so only the global filter setting can
+  change this (#1021) - @dragoncoder047
+- The sprite data format has been changed to allow individual frames to be on
+  different GPU textures. Now `SpriteData.tex` doesn't exist, and
+  `SpriteData.frames` is a list of `Frame`s instead of a list of `Quad`s. A
+  `Frame` contains `tex` and `q` (quad) properties that contain that data.
+  (#1021) - @dragoncoder047
+
 ### Added
 
 - Added `tileMode` option to 9-slice sprites with four tiling strategies:
@@ -26,7 +50,7 @@ best friend, lajbel, can put the correct version name here
 - Added a `calculate()` method to the internal FPS counters, so advanced users
   can access them to create their own FPS monitor (#1010) - @dragoncoder047
 - Added Intl.Segmenter-based grapheme splitting for proper Indic language
-  support, via the `locale` option in `DrawTextOpt (#1013) - @shajidhasan
+  support, via the `locale` option in `DrawTextOpt` (#1013) - @shajidhasan
 - Added topMostOnlyActivate kaplay option. When true, only the topmost object
   will receive clicks. This avoids problems in a UI where elements overlap -
   @mflerackers
@@ -37,12 +61,17 @@ best friend, lajbel, can put the correct version name here
 - Updated the texture packer to use a new packing algorithm which may get more
   sprites onto the same texture, improving graphics batching performance
   (#1011) - @dragoncoder047
+- Updated all sprite and font loading to pack everything in the same texture to
+  allow it to all batch together, for speed and efficiency (#1021) -
+  @dragoncoder047
+- Added spritesheet repacking, so spritesheet images that contain lots of blank
+  space don't waste texture memory (#1021) - @dragoncoder047
 
 ### Fixed
 
 - Fixed tiled mode drawing of sprites ignoring opacity when it was 0 (#1020) -
   @dragoncoder047
-- Now, all global events handlers are avaible in scopes, `app.onXXXX` and
+- Now, all global events handlers are available in scopes, `app.onXXXX` and
   `scene.onXXXX()` (#977) - @lajbel
 - Fixed input events attached to paused ancestors not being paused (#1009) -
   @amyspark-ng, @dragoncoder047

examples/ai.js

@@ -26,7 +26,7 @@ const BULLET_SPEED = 800;
 const player = add([
     sprite("bean"),
     pos(80, 80),
-    area(),
+    area({ isSensor: true }),
     anchor("center"),
 ]);
 
@@ -55,7 +55,7 @@ enemy.onStateEnter("attack", async () => {
             pos(enemy.pos),
             move(dir, BULLET_SPEED),
             rect(12, 12),
-            area(),
+            area({ isSensor: true }),
             offscreen({ destroy: true }),
             anchor("center"),
             color(BLUE),

examples/analogtriggers.js

@@ -48,7 +48,7 @@ scene("main", () => {
         add([
             pos(rand(vec2(width() - 60, height() - 60))),
             sprite("ghosty"),
-            area(),
+            area({ isSensor: true }),
             color(WHITE),
             "ghosty",
         ]);
@@ -65,7 +65,7 @@ scene("main", () => {
                 rotate(gun.angle),
                 move(dir, 1000 * analogValue),
                 pos(player.pos.add(dir.scale(60))),
-                area(),
+                area({ isSensor: true }),
                 offscreen({ destroy: true }), // Destroy them on offscreen to avoid lag
                 "bullet",
                 {

examples/animation.js

@@ -30,7 +30,7 @@ rotatingBean.animate("angle", [0, 360], {
     loops: 1,
 });
 
-onClick(() => {
+onMousePress(() => {
     rotatingBean.animation.play();
 });
 
@@ -56,7 +56,7 @@ movingBean.animate("pos", [vec2(50, 150), vec2(150, 150)], {
     direction: "ping-pong",
 });
 
-onClick(() => {
+onMousePress(() => {
     movingBean.animation.paused = !movingBean.animation.paused;
 });
 

examples/burp.js

@@ -29,4 +29,4 @@ add([
 ]);
 
 // burp() on click / tap for our friends on mobile
-onClick(() => burp());
+onMousePress(() => burp());

examples/camera.js

@@ -107,7 +107,7 @@ scoreCounter.onUpdate(() => {
     scoreCounter.text = score.toString();
 });
 
-onClick(() => {
+onMousePress(() => {
     // Use toWorld() to transform a screen-space coordinate (like mousePos()) to
     // the world-space coordinate, which has the camera transform applied
     addKaboom(toWorld(mousePos()));

examples/collision.js

@@ -73,6 +73,7 @@ for (let i = 0; i < 3; i++) {
         sprite("ghosty"),
         pos(x, y),
         // Both objects must have area() component to enable collision detection between
+        // The isSensor option tells area() to enable collision detection even without body()
         area({ isSensor: true }),
         "enemy",
     ]);

examples/component.js

@@ -83,9 +83,10 @@ const bean = add([
     area(),
     // Use our component here
     funky(),
-    // Tags are empty components, it's equivalent to a { id: "friend" }
+    // A string here turns into a tag
     "friend",
-    // Plain objects here are components too and work the same way, except unnamed
+    // Plain objects here are components too and work the same way,
+    // except unnamed (which means they can't be removed with unuse())
     {
         coolness: 100,
         friends: [],

examples/confetti.js

@@ -70,13 +70,12 @@ function addConfetti(opt = {}) {
 
         p.onUpdate(() => {
             velY += gravity * dt();
-            p.pos.x += velX * dt();
-            p.pos.y += velY * dt();
+            p.move(velX, velY);
             p.angle += velA * dt();
             p.opacity -= fade * dt();
             velX *= airDrag;
             velY *= airDrag;
-            p.scale.x = wave(-1, 1, time() * spin);
+            p.scaleTo(wave(-1, 1, time() * spin), p.scale.y);
         });
     }
 }