chore: changelog 2.3.6

Author: imaginarny

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.3.5] - 2025-07-30
+
+### Fixed
+
+- Fix importing projects exported after v2.3 - @imaginarny
+
 ## [2.3.5] - 2025-06-22
 
 ### Fixed

package.json

@@ -1,7 +1,7 @@
 {
   "name": "kaplayground",
   "type": "module",
-  "version": "2.3.5",
+  "version": "2.3.6",
   "bin": "scripts/cli.js",
   "scripts": {
     "dev": "vite dev",

src/data/exampleList.json

@@ -1619,13 +1619,13 @@
     },
     {
         "id": 87,
-        "name": "sprite",
-        "formattedName": "Sprites",
-        "sortName": "0-basics-zzzz-9999-sprite",
+        "name": "spriteAnim",
+        "formattedName": "Sprite Animations",
+        "sortName": "0-basics-zzzz-9999-spriteAnim",
         "category": "basics",
         "group": "",
         "description": "How to load and animate sprites",
-        "code": "// Sprite animation\n\n// Start a kaboom game\nkaplay({\n    // Scale the whole game up\n    scale: 4,\n    // Set the default font\n    font: \"monospace\",\n});\n\n// Loading a multi-frame sprite\nloadSprite(\"dino\", \"/sprites/dungeon-dino.png\", {\n    // The image contains 9 frames layed out horizontally, slice it into individual frames\n    sliceX: 9,\n    // Define animations\n    anims: {\n        \"idle\": {\n            // Starts from frame 0, ends at frame 3\n            from: 0,\n            to: 3,\n            // Frame per second\n            speed: 5,\n            loop: true,\n        },\n        \"run\": {\n            from: 4,\n            to: 7,\n            speed: 10,\n            loop: true,\n        },\n        // This animation only has 1 frame\n        \"jump\": 8,\n    },\n});\n\nconst SPEED = 120;\nconst JUMP_FORCE = 240;\n\nsetGravity(640);\n\n// Add our player character\nconst player = add([\n    sprite(\"dino\"),\n    pos(center()),\n    anchor(\"center\"),\n    area(),\n    body(),\n]);\n\n// .play is provided by sprite() component, it starts playing the specified animation (the animation information of \"idle\" is defined above in loadSprite)\nplayer.play(\"idle\");\n\n// Add a platform\nadd([\n    rect(width(), 24),\n    area(),\n    outline(1),\n    pos(0, height() - 24),\n    body({ isStatic: true }),\n]);\n\n// Switch to \"idle\" or \"run\" animation when player hits ground\nplayer.onGround(() => {\n    if (!isKeyDown(\"left\") && !isKeyDown(\"right\")) {\n        player.play(\"idle\");\n    }\n    else {\n        player.play(\"run\");\n    }\n});\n\nplayer.onAnimEnd((anim) => {\n    if (anim === \"idle\") {\n        // You can also register an event that runs when certain anim ends\n    }\n});\n\nonKeyPress(\"space\", () => {\n    if (player.isGrounded()) {\n        player.jump(JUMP_FORCE);\n        player.play(\"jump\");\n    }\n});\n\nonKeyDown(\"left\", () => {\n    player.move(-SPEED, 0);\n    player.flipX = true;\n    // .play() will reset to the first frame of the anim, so we want to make sure it only runs when the current animation is not \"run\"\n    if (player.isGrounded() && player.curAnim() !== \"run\") {\n        player.play(\"run\");\n    }\n});\n\nonKeyDown(\"right\", () => {\n    player.move(SPEED, 0);\n    player.flipX = false;\n    if (player.isGrounded() && player.curAnim() !== \"run\") {\n        player.play(\"run\");\n    }\n});\n[\"left\", \"right\"].forEach((key) => {\n    onKeyRelease(key, () => {\n        // Only reset to \"idle\" if player is not holding any of these keys\n        if (player.isGrounded() && !isKeyDown(\"left\") && !isKeyDown(\"right\")) {\n            player.play(\"idle\");\n        }\n    });\n});\n\nconst getInfo = () =>\n    `\nAnim: ${player.curAnim()}\nFrame: ${player.frame}\n`.trim();\n\n// Add some text to show the current animation\nconst label = add([\n    text(getInfo(), { size: 12 }),\n    color(0, 0, 0),\n    pos(4),\n]);\n\nlabel.onUpdate(() => {\n    label.text = getInfo();\n});\n\n// Check out https://kaboomjs.com#SpriteComp for everything sprite() provides",
+        "code": "// Animate Sprites with platformer movement [👁️]\n\n// This example may be large, so use regions for navigating faster. Important\n// content is marked with 👁️\n\nkaplay({ scale: 4, font: \"happy\" });\n\nconst SPEED = 120;\nconst JUMP_FORCE = 240;\nsetGravity(640);\n\n// #region Loading Assets 👁️\nloadBitmapFont(\"happy\", \"/fonts/happy_28x36.png\", 28, 36);\n\n// Loading a multi-frame sprite 👁️\nloadSprite(\"dino\", \"/sprites/dungeon-dino.png\", {\n    // The image contains 9 frames layered out horizontally, slice it into individual frames\n    sliceX: 9,\n    // Define animations\n    anims: {\n        \"idle\": {\n            // Starts from frame 0, ends at frame 3\n            from: 0,\n            to: 3,\n            // Frame per second\n            speed: 5,\n            loop: true,\n        },\n        \"run\": {\n            from: 4,\n            to: 7,\n            speed: 10,\n            loop: true,\n        },\n        // This animation only has 1 frame\n        \"jump\": 8,\n    },\n});\n// #endregion\n\n// #region Game Objects\n\n// Add our player character 👁️\nconst player = add([\n    sprite(\"dino\"),\n    pos(center()),\n    anchor(\"center\"),\n    area(),\n    body(),\n]);\n\n// Add a platform\nadd([\n    rect(width(), 24),\n    area(),\n    outline(1),\n    pos(0, height() - 24),\n    body({ isStatic: true }),\n]);\n// #endregion\n\n/* 👁️\nWe can animate sprites using obj.play(\"name\") method.\n\nThis time we're defining a function for executing animations conditionally.\n*/\n\n// #region Player animations 👁️\nconst playerPlayRun = () => {\n    // obj.play() will reset to the first frame of the animation\n    // so we want to make sure it only runs when the current animation is not \"run\"\n    if (player.isGrounded() && player.getCurAnim().name !== \"run\") {\n        player.play(\"run\");\n    }\n};\n\nconst playerPlayIdle = () => {\n    // Only reset to \"idle\" if player is not holding any of these keys\n    if (player.isGrounded() && !isKeyDown(\"left\") && !isKeyDown(\"right\")) {\n        player.play(\"idle\");\n    }\n};\n// #endregion\n\n// #region Player move/anim 👁️\nonKeyDown(\"left\", () => {\n    player.move(-SPEED, 0);\n    player.flipX = true;\n    playerPlayRun();\n});\n\nonKeyDown(\"right\", () => {\n    player.move(SPEED, 0);\n    player.flipX = false;\n    playerPlayRun();\n});\n\nonKeyRelease([\"left\", \"right\"], () => {\n    playerPlayIdle();\n});\n\nonKeyPress([\"space\", \"up\"], () => {\n    if (player.isGrounded()) {\n        player.jump(JUMP_FORCE);\n        player.play(\"jump\");\n    }\n});\n\n// Switch to \"idle\" or \"run\" animation when player hits ground\nplayer.onGround(() => {\n    if (!isKeyDown(\"left\") && !isKeyDown(\"right\")) {\n        player.play(\"idle\");\n    }\n    else {\n        player.play(\"run\");\n    }\n});\n\n// #endregion\n\n// You can run functions when a specific animation ends 👁️\nplayer.onAnimEnd((anim) => {\n    if (anim === \"idle\") {\n        debug.log(\"hi!\");\n    }\n});\n\n// #region UI\nconst getInfo = () =>\n    `\nAnim: ${player.getCurAnim()?.name}\nFrame: ${player.frame}\n`.trim();\n\n// Add some text to show the current animation\nconst label = add([\n    text(getInfo(), { size: 12 }),\n    color(0, 0, 0),\n    pos(4),\n]);\n\nlabel.onUpdate(() => {\n    label.text = getInfo();\n});\n// #endregion",
         "difficulty": 0,
         "version": "master",
         "minVersion": "3001.0",
@@ -1634,7 +1634,7 @@
             "animation"
         ],
         "createdAt": "2021-03-12T00:08:17-05:00",
-        "updatedAt": "2025-05-04T23:04:38+02:00"
+        "updatedAt": "2025-06-28T19:15:26-03:00"
     },
     {
         "id": 88,