From c3a36a3c97ff784971b3141e4c51db61f20d2933 Mon Sep 17 00:00:00 2001 From: lajbel Date: Wed, 15 Jan 2025 11:56:56 -0300 Subject: [PATCH 1/7] fix: stop using async in lifespan, rename particle example to lifespan --- examples/{particle.js => lifespan.js} | 18 ++++++++--------- src/components/misc/lifespan.ts | 29 ++++++++++++++++----------- 2 files changed, 25 insertions(+), 22 deletions(-) rename examples/{particle.js => lifespan.js} (63%) diff --git a/examples/particle.js b/examples/lifespan.js similarity index 63% rename from examples/particle.js rename to examples/lifespan.js index 238dd457..705470e9 100644 --- a/examples/particle.js +++ b/examples/lifespan.js @@ -1,6 +1,5 @@ // @ts-check -// Particle spawning kaplay(); @@ -18,10 +17,9 @@ sprites.forEach((spr) => { setGravity(800); -// Spawn one particle every 0.1 second -loop(0.1, () => { - // TODO: they are resolving collision with each other for some reason - // Compose particle properties with components +// Spawn one object every 0.1 second +loop(0.2, () => { + // Compose object properties with components const item = add([ pos(mousePos()), sprite(choose(sprites)), @@ -29,15 +27,15 @@ loop(0.1, () => { scale(rand(0.5, 1)), area({ collisionIgnore: ["particle"] }), body(), - lifespan(1, { fade: 0.5 }), + // lifespan() comp destroys the object after desired seconds + lifespan(1, { + // it will fade after 0.5 seconds + fade: 0.5 + }), opacity(1), move(choose([LEFT, RIGHT]), rand(60, 240)), "particle", ]); - item.onCollide("particle", (p) => { - console.log("dea"); - }); - item.jump(rand(320, 640)); }); diff --git a/src/components/misc/lifespan.ts b/src/components/misc/lifespan.ts index e3a43731..a94d8a26 100644 --- a/src/components/misc/lifespan.ts +++ b/src/components/misc/lifespan.ts @@ -24,18 +24,23 @@ export function lifespan(time: number, opt: LifespanCompOpt = {}): EmptyComp { id: "lifespan", require: ["opacity"], async add(this: GameObj) { - await _k.game.root.wait(time); - this.opacity = this.opacity ?? 1; - if (fade > 0) { - await _k.game.root.tween( - this.opacity, - 0, - fade, - (a) => this.opacity = a, - easings.linear, - ); - } - this.destroy(); + _k.game.root.wait(time, () => { + this.opacity = this.opacity ?? 1; + if (fade > 0) { + _k.game.root.tween( + this.opacity, + 0, + fade, + (a) => this.opacity = a, + easings.linear, + ).onEnd(() => { + this.destroy(); + }); + } + else { + this.destroy(); + } + }); }, }; } From 81e4a40070bb451c38187b25f11a3425e7b954db Mon Sep 17 00:00:00 2001 From: lajbel Date: Wed, 15 Jan 2025 12:07:42 -0300 Subject: [PATCH 2/7] chore: new particles example --- examples/particle.js | 49 ++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 examples/particle.js diff --git a/examples/particle.js b/examples/particle.js new file mode 100644 index 00000000..e21a2e1e --- /dev/null +++ b/examples/particle.js @@ -0,0 +1,49 @@ +// Creating particles using Particle Component + +kaplay(); + +loadSprite("star", "./examples/sprites/particle_star_filled.png"); + +onLoad(() => { + go("game") +}); + +function woah() { + const parts = add([ + pos(center()), + particles({ + max: 20, + speed: [50, 100], + angle: [0, 360], + angularVelocity: [45, 90], + lifeTime: [1.0, 1.5], + colors: [rgb(128, 128, 255), WHITE], + opacities: [0.1, 1.0, 0.0], + scales: [1, 2, 1], + texture: getSprite("star").data.tex, + quads: [getSprite("star").data.frames[0]], + }, { + lifetime: 1.5, + rate: 0, + direction: -90, + spread: 40, + }), + ]); + + parts.emit(20); +} + +scene("game", () => { + onKeyPress("space", () => { + woah(); + }); + + onMousePress(() => { + woah(); + }); + + add([ + text("press space for particles"), + ]); +}); + From cb741365f2c69a0163da19b546899f9b27cdec48 Mon Sep 17 00:00:00 2001 From: lajbel Date: Wed, 15 Jan 2025 12:09:37 -0300 Subject: [PATCH 3/7] chore: remove async keyword --- src/components/misc/lifespan.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/misc/lifespan.ts b/src/components/misc/lifespan.ts index a94d8a26..e35a39fd 100644 --- a/src/components/misc/lifespan.ts +++ b/src/components/misc/lifespan.ts @@ -23,7 +23,7 @@ export function lifespan(time: number, opt: LifespanCompOpt = {}): EmptyComp { return { id: "lifespan", require: ["opacity"], - async add(this: GameObj) { + add(this: GameObj) { _k.game.root.wait(time, () => { this.opacity = this.opacity ?? 1; if (fade > 0) { From d35823bd7ac2d72d998f5015e157fc13efc35eda Mon Sep 17 00:00:00 2001 From: lajbel Date: Wed, 15 Jan 2025 12:20:19 -0300 Subject: [PATCH 4/7] doc: better lifespan explanation --- examples/lifespan.js | 8 ++++---- src/components/misc/lifespan.ts | 1 + src/types.ts | 8 +++++--- 3 files changed, 10 insertions(+), 7 deletions(-) diff --git a/examples/lifespan.js b/examples/lifespan.js index 705470e9..891fa63d 100644 --- a/examples/lifespan.js +++ b/examples/lifespan.js @@ -18,14 +18,14 @@ sprites.forEach((spr) => { setGravity(800); // Spawn one object every 0.1 second -loop(0.2, () => { +loop(0.1, () => { // Compose object properties with components const item = add([ - pos(mousePos()), + pos(center()), sprite(choose(sprites)), anchor("center"), scale(rand(0.5, 1)), - area({ collisionIgnore: ["particle"] }), + area({ collisionIgnore: ["fruit"] }), body(), // lifespan() comp destroys the object after desired seconds lifespan(1, { @@ -34,7 +34,7 @@ loop(0.2, () => { }), opacity(1), move(choose([LEFT, RIGHT]), rand(60, 240)), - "particle", + "fruit", ]); item.jump(rand(320, 640)); diff --git a/src/components/misc/lifespan.ts b/src/components/misc/lifespan.ts index e35a39fd..169d2934 100644 --- a/src/components/misc/lifespan.ts +++ b/src/components/misc/lifespan.ts @@ -26,6 +26,7 @@ export function lifespan(time: number, opt: LifespanCompOpt = {}): EmptyComp { add(this: GameObj) { _k.game.root.wait(time, () => { this.opacity = this.opacity ?? 1; + if (fade > 0) { _k.game.root.tween( this.opacity, diff --git a/src/types.ts b/src/types.ts index d81ee2a6..9885d7da 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1178,11 +1178,13 @@ export interface KAPLAYCtx< * * @example * ```js - * // spawn an explosion, destroy after 1 seconds, start fading away after 0.5 second + * // spawn an explosion, destroy after 1.5 seconds (time + fade) * add([ * sprite("explosion", { anim: "burst", }), - * lifespan(1, { fade: 0.5 }), - * ]) + * lifespan(1, { + * fade: 0.5 // it start fading 0.5 second after time + * }), + * ]); * ``` * * @returns The lifespan comp. From f8917934f720612360839e4bd77c4ea30b362f41 Mon Sep 17 00:00:00 2001 From: lajbel Date: Wed, 15 Jan 2025 12:22:24 -0300 Subject: [PATCH 5/7] chore: changelog --- CHANGELOG.md | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ca01a90d..6f967dd5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,21 @@ The format is (mostly) 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). +## [3001.0.9] - 2025-01-15 + +### Added + +- **(examples)** Added a new `particle` example! - @lajbel + +### Changed + +- Improved `lifespan()` explanation - @lajbel +- **(examples)** `particle` example renamed to `lifespan` - @lajbel + +### Fixed + +- Fixed a bug where `lifespan()` was working incorrectly - @lajbel + ## [3001.0.8] - 2025-01-15 ### Fixed From f7c6c87a7ac292ece4a312e59d1aadb1c72870af Mon Sep 17 00:00:00 2001 From: lajbel Date: Wed, 15 Jan 2025 12:28:06 -0300 Subject: [PATCH 6/7] chore: changelog --- CHANGELOG.md | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 6f967dd5..10d102df 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,6 +10,17 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). ### Added +- Added new option in `LoadSpriteOpt` for loading sprites in an individual + spritesheet - @chqs-git + ```js + loadSprite( + "player", + "sprites/player.png", + { + singular: true, + }, + ); + ``` - **(examples)** Added a new `particle` example! - @lajbel ### Changed @@ -34,11 +45,11 @@ adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html). - Added `kaplay({ spriteAtlasPadding })` for setting the space between the sprites in the sprite atlas - @marianyp - ```js - kaplay({ - spriteAtlasPadding: 10, // 10 pixels of space between each sprite - }); - ``` +```js +kaplay({ + spriteAtlasPadding: 10, // 10 pixels of space between each sprite +}); +``` ### Changed From 7e52ee1c47259b767b8bda0a8ca53dfe79fac376 Mon Sep 17 00:00:00 2001 From: lajbel Date: Wed, 15 Jan 2025 12:29:48 -0300 Subject: [PATCH 7/7] chore: funding --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 490d4c58..016f3d6b 100644 --- a/package.json +++ b/package.json @@ -1,9 +1,10 @@ { "name": "kaplay", "description": "KAPLAY is a JavaScript & TypeScript game library that helps you make games fast and fun!", - "version": "3001.0.8", + "version": "3001.0.9", "license": "MIT", "homepage": "https://kaplayjs.com/", + "funding": "https://opencollective.com/kaplay", "repository": { "type": "git", "url": "git+https://github.com/kaplayjs/kaplay.git"