chore: bump versions and examples

scripts/examples.ts

@@ -33,3 +33,5 @@ export const generateExamples = async (examplesPath = defaultExamplesPath) => {
 
     console.log("Generated exampleList.json");
 };
+
+generateExamples();

src/components/Playground/Playground.tsx

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { useMediaQuery } from "react-responsive";
 import { Slide, ToastContainer } from "react-toastify";
 import { Tooltip } from "react-tooltip";
+import { DEFAULT_KAPLAY_VERSION } from "../../config/common";
 import { useConfig } from "../../hooks/useConfig";
 import { useProject } from "../../hooks/useProject";
 import { decompressCode } from "../../util/compressCode";
@@ -74,7 +75,7 @@ const Playground = () => {
             mode: "ex",
             id: "ex-shared",
             kaplayConfig: {},
-            kaplayVersion: "3001.0.1",
+            kaplayVersion: DEFAULT_KAPLAY_VERSION,
             name: "Shared Example",
             version: "2.0.0",
             isDefault: true,

src/config/common.ts

@@ -6,6 +6,7 @@ export const CHANGELOG =
 export const REPO = "https://github.com/lajbel/kaplayground";
 
 export const KAPLAY_FILE = "kaplay.js";
+export const DEFAULT_KAPLAY_VERSION = "3001.0.2";
 
 // Context menus
 export const RESOURCES_MENU_ID = "F";

src/data/exampleList.json

@@ -16,12 +16,12 @@
     },
     {
         "name": "audio",
-        "code": "// @ts-check\n\n// audio playback & control\n\nkaplay({\n    // This makes it so the audio doesn't pause when the tab is changed\n    backgroundAudio: true,\n    background: [0, 0, 0],\n});\n\n// Loads the bell sound, and OtherworldlyFoe sound\nloadSound(\"bell\", \"/examples/sounds/bell.mp3\");\nloadSound(\"OtherworldlyFoe\", \"/examples/sounds/OtherworldlyFoe.mp3\");\n\n// play() to play audio\n// (This might not play until user input due to browser policy)\nconst music = play(\"OtherworldlyFoe\", {\n    loop: true,\n    paused: true,\n});\n\n// Adjust global volume\nvolume(0.5);\n\nconst label = add([\n    text(),\n]);\n\nfunction updateText() {\n    label.text = `\n${music.paused ? \"Paused\" : \"Playing\"}\nTime: ${music.time().toFixed(2)}\nVolume: ${music.volume.toFixed(2)}\nSpeed: ${music.speed.toFixed(2)}\n\n\\\\[space] play/pause\n[up/down] volume\n[left/right] speed\n\t`.trim();\n}\n\nupdateText();\n\n// Update text every frame\nonUpdate(updateText);\n\n// Adjust music properties through input\nonKeyPress(\"space\", () => music.paused = !music.paused);\nonKeyPressRepeat(\"up\", () => music.volume += 0.1);\nonKeyPressRepeat(\"down\", () => music.volume -= 0.1);\nonKeyPressRepeat(\"left\", () => music.speed -= 0.1);\nonKeyPressRepeat(\"right\", () => music.speed += 0.1);\nonKeyPress(\"m\", () => music.seek(4.24));\n\n// We store some keys in a string\nconst keyboard = \"awsedftgyhujk\";\n\n// Simple piano with \"bell\" sound and the second row of a QWERTY keyboard\nfor (let i = 0; i < keyboard.length; i++) {\n    onKeyPress(keyboard[i], () => {\n        play(\"bell\", {\n            // The original \"bell\" sound is F, -500 will make it C for the first key\n            detune: i * 100 - 500,\n        });\n    });\n}\n\n// Draw music progress bar\nonDraw(() => {\n    if (!music.duration()) return;\n    const h = 16;\n    drawRect({\n        pos: vec2(0, height() - h),\n        width: music.time() / music.duration() * width(),\n        height: h,\n    });\n});\n",
+        "code": "// @ts-check\n// Playing audio and controlling it\n\nkaplay({\n    // This makes it so the audio doesn't pause when the tab is changed\n    backgroundAudio: true,\n    background: \"5ba675\",\n});\n\n// Loads the bell sound\nloadSound(\"bell\", \"/examples/sounds/bell.mp3\");\n// Load the music, it makes it being streamed, so loading is faster\nloadMusic(\"OtherworldlyFoe\", \"/examples/sounds/OtherworldlyFoe.mp3\");\nloadSprite(\"bag\", \"/sprites/bag.png\");\n\n// Adjust global volume\nvolume(0.5);\n\n// We use the play() function to play audio\nonKeyPress(\"enter\", () => {\n    play(\"bell\", {\n        volume: 1,\n        speed: 1,\n    });\n});\n\n// For our mobile friends\nonTouchStart(() => {\n    play(\"bell\", {\n        volume: 1,\n        speed: 1,\n    });\n});\n\n// We can also play music, and control it\nconst music = play(\"OtherworldlyFoe\", {\n    loop: true,\n    paused: true,\n});\n\nconst label = add([\n    text(),\n    pos(10, 10),\n]);\n\n// See below for the function\nupdateText();\n\n// Update text every frame\nonUpdate(() => {\n    updateText();\n});\n\n// Adjust music properties through input\nonKeyPress(\"space\", () => music.paused = !music.paused);\nonKeyPressRepeat(\"up\", () => music.volume += 0.1);\nonKeyPressRepeat(\"down\", () => music.volume -= 0.1);\nonKeyPressRepeat(\"left\", () => music.speed -= 0.1);\nonKeyPressRepeat(\"right\", () => music.speed += 0.1);\nonKeyPress(\"m\", () => music.seek(4.24));\n\n// Piano\n// We store some keys in a string\nconst keyboard = \"awsedftgyhujk\";\n\n// Simple piano with \"bell\" sound and the second row of a QWERTY keyboard\nfor (let i = 0; i < keyboard.length; i++) {\n    onKeyPress(keyboard[i], () => {\n        play(\"bell\", {\n            // The original \"bell\" sound is F, -500 will make it C for the first key\n            detune: i * 100 - 500,\n        });\n    });\n}\n\n// Draw music progress bar\nonDraw(() => {\n    if (!music.duration()) return;\n    const h = 16;\n    drawRect({\n        pos: vec2(0, height() - h),\n        width: music.time() / music.duration() * width(),\n        height: h,\n    });\n});\n\n// The rotating bag\nconst bag = add([\n    sprite(\"bag\"),\n    pos(center()),\n    anchor(\"center\"),\n    rotate(0),\n    scale(2),\n]);\n\nbag.onUpdate(() => {\n    if (music.paused) return;\n\n    bag.angle += dt() * 100;\n});\n\n// Create text guide\nfunction updateText() {\n    label.text = `\n${music.paused ? \"Paused\" : \"Playing\"}\nTime: ${music.time().toFixed(2)}\nVolume: ${music.volume.toFixed(2)}\nSpeed: ${music.speed.toFixed(2)}\n\n\\\\[space] play/pause\n[up/down] volume\n[left/right] speed\n[a...k] piano\n\t`.trim();\n}\n",
         "index": "3"
     },
     {
         "name": "bench",
-        "code": "// @ts-config\n\n// Bench marking sprite rendering performance\n// We use this example to test and bench the performance of kaplay rendering\n\nkaplay();\n\nloadSprite(\"bean\", \"sprites/bean.png\");\nloadSprite(\"bag\", \"sprites/bag.png\");\n\n// Adds 5 thousand objects which can be a bean or a bag in random positions\nfor (let i = 0; i < 5000; i++) {\n    add([\n        sprite(i % 2 === 0 ? \"bean\" : \"bag\"),\n        pos(rand(0, width()), rand(0, height())),\n        anchor(\"center\"),\n    ]).paused = true;\n}\n\nonDraw(() => {\n    drawText({\n        // You can get the current fps with debug.fps()\n        text: debug.fps(),\n        pos: vec2(width() / 2, height() / 2),\n        anchor: \"center\",\n        color: rgb(255, 127, 255),\n    });\n});\n",
+        "code": "// @ts-config\n\n// Bench marking sprite rendering performance\n// We use this example to test and bench the performance of kaplay rendering\n\nkaplay();\n\nloadSprite(\"bean\", \"sprites/bean.png\");\nloadSprite(\"bag\", \"sprites/bag.png\");\nloadSprite(\"bobo\", \"sprites/bobo.png\");\nloadSprite(\"ghosty\", \"sprites/ghosty.png\");\n\nconst scenes = [\n    \"sprites\",\n    \"objects\",\n    \"uvquads\",\n];\n\nscene(\"sprites\", () => {\n    debug.log(\"Rendering 5000 sprites using onDraw\");\n\n    // Adds 5 thousand sprites which can be a bean or a bag in random positions\n    const sprites = [];\n\n    for (let i = 0; i < 5000; i++) {\n        sprites.push({\n            sprite: i % 2 === 0 ? \"bean\" : \"bag\",\n            pos: vec2(rand(0, width()), rand(0, height())),\n            anchor: \"center\",\n        });\n    }\n\n    onDraw(() => {\n        sprites.forEach((sprite) => {\n            drawSprite(sprite);\n        });\n    });\n\n    addFps();\n    addSceneNavigation();\n});\n\nscene(\"objects\", () => {\n    debug.log(\"Rendering 5000 sprites using game objects\");\n\n    // Adds 5 thousand objects which can be a bean or a bag in random positions\n    for (let i = 0; i < 5000; i++) {\n        add([\n            sprite(i % 2 === 0 ? \"bobo\" : \"ghosty\"),\n            pos(rand(0, width()), rand(0, height())),\n            anchor(\"center\"),\n        ]).paused = true;\n    }\n\n    addFps();\n    addSceneNavigation();\n});\n\nscene(\"uvquads\", () => {\n    debug.log(\"Rendering 5000 uv quads using onDraw\");\n\n    const quads = [];\n    const bean = getSprite(\"bean\");\n    const bag = getSprite(\"bag\");\n    // We only need the bean texture since the bag texture is on the same atlas\n    const tex = bean.data.tex;\n    const beanQuad = bean.data.frames[0];\n    const bagsQuad = bag.data.frames[0];\n\n    for (let i = 0; i < 5000; i++) {\n        quads.push({\n            tex: tex,\n            quad: i % 2 === 0 ? beanQuad : bagsQuad,\n            pos: vec2(rand(0, width()), rand(0, height())),\n            width: i % 2 === 0 ? bean.data.width : bag.data.width,\n            height: i % 2 === 0 ? bean.data.height : bag.data.height,\n        });\n    }\n\n    onDraw(() => {\n        quads.forEach((quad) => {\n            drawUVQuad(quad);\n        });\n    });\n\n    addFps();\n    addSceneNavigation();\n});\n\ngo(\"sprites\");\n\nfunction addFps() {\n    onDraw(() => {\n        drawText({\n            // You can get the current fps with debug.fps()\n            text: debug.fps(),\n            pos: vec2(width() / 2, height() / 2),\n            anchor: \"center\",\n            color: rgb(255, 127, 255),\n            outline: {\n                width: 10,\n            },\n        });\n    });\n}\n\nfunction addSceneNavigation() {\n    onKeyPress(\"1\", () => go(\"sprites\"));\n    onKeyPress(\"2\", () => go(\"objects\"));\n    onKeyPress(\"3\", () => go(\"uvquads\"));\n\n    onTouchStart(() => {\n        const currentScene = getSceneName();\n        const nextScene =\n            scenes[(scenes.indexOf(currentScene) + 1) % scenes.length];\n\n        go(nextScene);\n    });\n}\n",
         "index": "4"
     },
     {
@@ -31,7 +31,7 @@
     },
     {
         "name": "burp",
-        "code": "// @ts-check\n\n// Start the game in burp mode\nkaplay({\n    burp: true,\n});\n\n// \"b\" triggers a burp in burp mode\nadd([\n    text(\"press b\"),\n]);\n\n// burp() on click / tap for our friends on mobile\nonClick(() => burp());\n",
+        "code": "// @ts-check\n// Core KAPLAY features.\n\n// Start the game in burp mode\nkaplay({\n    burp: true,\n    background: \"cc425e\",\n});\n\n// \"b\" triggers a burp in burp mode\nadd([\n    text(\"Press B to burp\"),\n    anchor(\"center\"),\n    pos(width() / 2, height() / 2),\n]);\n\n// burp() on click / tap for our friends on mobile\nonClick(() => burp());\n",
         "index": "6"
     },
     {
@@ -126,7 +126,7 @@
     },
     {
         "name": "fakeMouse",
-        "code": "// @ts-check\n\nkaplay();\n\nloadSprite(\"bean\", \"/sprites/bean.png\");\nloadSprite(\"cursor\", \"/sprites/cursor_default.png\");\n\n// set the layers\nlayers([\n    \"game\",\n    \"ui\",\n], \"game\");\n\nconst MOUSE_VEL = 200;\n\nconst cursor = add([\n    sprite(\"cursor\"),\n    fakeMouse(),\n    pos(),\n    layer(\"ui\"),\n]);\n\n// Mouse press and release\ncursor.onKeyPress(\"f\", () => {\n    cursor.press();\n});\n\ncursor.onKeyRelease(\"f\", () => {\n    cursor.release();\n});\n\n// Mouse movement\ncursor.onKeyDown(\"left\", () => {\n    cursor.move(-MOUSE_VEL, 0);\n});\n\ncursor.onKeyDown(\"right\", () => {\n    cursor.move(MOUSE_VEL, 0);\n});\n\ncursor.onKeyDown(\"up\", () => {\n    cursor.move(0, -MOUSE_VEL);\n});\n\ncursor.onKeyDown(\"down\", () => {\n    cursor.move(0, MOUSE_VEL);\n});\n\n// Example with hovering and click\nconst bean = add([\n    sprite(\"bean\"),\n    area(),\n    color(BLUE),\n]);\n\nbean.onClick(() => {\n    debug.log(\"ohhi\");\n});\n\nbean.onHover(() => {\n    bean.color = RED;\n});\n\nbean.onHoverEnd(() => {\n    bean.color = BLUE;\n});\n",
+        "code": "// @ts-check\n// Only works with v4000\n\n// A fake mouse that can be controlled with the keyboard, controller or\n// any other input\n\nkaplay({\n    background: \"4a3052\",\n});\n\nloadBean();\nloadSprite(\"door\", \"/sprites/door.png\");\nloadSprite(\"cursor\", \"/sprites/cursor_default.png\");\nloadSprite(\"grab\", \"/sprites/grab.png\");\nloadSound(\"knock\", \"/examples/sounds/knock.ogg\");\n\nconst MOUSE_VEL = 200;\nconst MAX_KNOCKS = 10;\nlet knocks = 0;\nlet doorOpened = false;\n\n// Set the layers, the cursor will be on top of everything, \"ui\"\nlayers([\n    \"game\",\n    \"ui\",\n], \"game\");\n\n// We create the object that will emulate the OS mouse\nconst cursor = add([\n    sprite(\"cursor\"),\n    pos(),\n    layer(\"ui\"),\n    scale(2),\n    // The fakeMouse() component will make it movable with a real mouse\n    fakeMouse(),\n]);\n\nsetCursor(\"none\"); // Hide the real mouse\n\n// Mouse press and release with keyboard, this will trigger mouse proper\n// events like .onClick, .onHover, etc\ncursor.onKeyPress(\"space\", () => {\n    cursor.press();\n});\n\ncursor.onKeyRelease(\"space\", () => {\n    cursor.release();\n});\n\n// Mouse movement with the keyboard\ncursor.onKeyDown(\"left\", () => {\n    cursor.move(-MOUSE_VEL, 0);\n});\n\ncursor.onKeyDown(\"right\", () => {\n    cursor.move(MOUSE_VEL, 0);\n});\n\ncursor.onKeyDown(\"up\", () => {\n    cursor.move(0, -MOUSE_VEL);\n});\n\ncursor.onKeyDown(\"down\", () => {\n    cursor.move(0, MOUSE_VEL);\n});\n\n// Example with hovering and click\nconst door = add([\n    sprite(\"door\"),\n    pos(center()),\n    anchor(\"center\"),\n    area(),\n    scale(2),\n]);\n\n// Trigered thanks to cursor.press(), you can trigger it with a real mouse or\n// with the keyboard\ndoor.onClick(() => {\n    if (knocks > MAX_KNOCKS) {\n        openDoor();\n    }\n    else {\n        knocks++;\n        play(\"knock\");\n    }\n});\n\ndoor.onHover(() => {\n    cursor.sprite = \"grab\";\n});\n\ndoor.onHoverEnd(() => {\n    cursor.sprite = \"cursor\";\n});\n\n// Open the door, a friend appears\nfunction openDoor() {\n    if (doorOpened) return;\n    doorOpened = true;\n\n    door.hidden = true;\n\n    add([\n        sprite(\"bean\"),\n        scale(2),\n        pos(center()),\n        anchor(\"center\"),\n    ]);\n\n    burp();\n\n    debug.log(\"What happens?\");\n}\n",
         "index": "25"
     },
     {

src/stores/project.ts

@@ -1,5 +1,6 @@
 import type { KAPLAYOpt } from "kaplay";
 import type { StateCreator } from "zustand";
+import { DEFAULT_KAPLAY_VERSION } from "../config/common";
 import { defaultProject } from "../config/defaultProject";
 import examplesList from "../data/exampleList.json";
 import { useConfig } from "../hooks/useConfig";
@@ -55,7 +56,7 @@ export const createProjectSlice: StateCreator<
         assets: new Map(),
         kaplayConfig: {},
         mode: "pj",
-        kaplayVersion: "3001.0.1",
+        kaplayVersion: DEFAULT_KAPLAY_VERSION,
         id: `upj-Untitled`,
     },
     getProject: () => {
@@ -135,7 +136,7 @@ export const createProjectSlice: StateCreator<
                 assets: assets,
                 kaplayConfig: {},
                 mode: filter,
-                kaplayVersion: "3001.0.1",
+                kaplayVersion: DEFAULT_KAPLAY_VERSION,
                 isDefault: exampleIndex ? true : false,
                 id: id,
             },