scrollcam component by itzKiwiSky · Pull Request #898 · kaplayjs/kaplay

itzKiwiSky · 2025-09-22T00:39:51Z

added a new component, the scrollcam component implements a simple parallax system inspired by haxeflixel functions like setScrollFactor.

the example test also available for further test and verifications.

Summary

scrollcam component
test for the component

2025-09-21.21-39-00.mp4

dragoncoder047 · 2025-09-22T00:54:40Z

+     * @param x number
+     * @param y number
+     */
+    setScrollFactor(x: number, y: number): void;


should be ...args: Vec2Args rather than hardcoding x and y

dragoncoder047 · 2025-09-22T00:55:00Z

+ * @subgroup Component Types
+ */
+export interface CamScrollComp extends Comp 
+{


run pnpm fmt

dragoncoder047 · 2025-09-22T00:55:16Z

+     * @returns The current factor of the object as a {@link Vec2 `Vec2`}
+     */
+    getScrollFactor(): Vec2;
+}


why is basePos not exposed on the interface

dragoncoder047 · 2025-09-22T00:56:00Z

+        //@ts-ignore
+        basePos: null as Vec2 | null,
+
+        add()


this add hook does nothing so remove it

pkg-pr-new · 2025-09-22T01:43:44Z

Open in StackBlitz

npm i https://pkg.pr.new/kaplayjs/kaplay@898

commit: 60f1bca

dragoncoder047 · 2025-09-22T01:43:59Z

-        update() 
-        {
-            const obj = this as unknown as GameObj<PosComp> & { basePos: Vec2 | null };
+        update() {


you can just use update(this: GameObj<PosComp | CamScrollComp>) {

dragoncoder047 · 2025-09-22T01:44:24Z

        },

-        setScrollFactor(x: number, y: number) { 
+        setScrollFactor(x: number, y: number) {


also vec2args here

dragoncoder047 · 2025-09-22T01:45:22Z

        },

-        getScrollFactor() { return this.factor.clone() },
+        getScrollFactor() {


also are thes necessary when you can access the factor property (it's not private / in the closure)

itzKiwiSky · 2025-09-24T01:27:09Z

Sign in to view

+     * @param y number
+     * @returns the camera scroll comp
+     */
+    scrollcam(x: number, y: number): CamScrollComp;


now should be fixed

mflerackers · 2025-09-24T01:36:05Z

+        },
+
+        getScroll() {
+            return this.factor.clone();


Why have getScroll if factor is public? Was factor supposed to be a closure variable instead maybe?

You probably meant

let factor = vec2(...args); let basePos = vec2(); return { id: "scroll", require: ["pos"],

So they are inaccessible from outside

mflerackers · 2025-09-24T01:38:02Z

+        },
+
+        getScroll() {
+            return this.factor.clone();


You probably meant

let factor = vec2(...args); let basePos = vec2(); return { id: "scroll", require: ["pos"],

So they are inaccessible from outside

dragoncoder047 · 2025-12-05T02:42:16Z

    fixed(fixed?: boolean): FixedComp;
+
+    /**
+     * Make the object scrolls with camera based on a factor


I would also add a mention of "parallax scrolling" since that's what this component also does.

it might be more intuitive to rename the component as well to parallax() but that's up to you

dragoncoder047 · 2025-12-05T02:43:24Z

+        update(this: GameObj<PosComp | CamScrollComp>) {
+            const cam = getCamPos();
+
+            if (!this.basePos) {


this line will never work because you're setting it intially to the zero vector on line 29 which is an object and considered truthy

itzKiwiSky · 2026-02-09T22:06:10Z

I made some changes to the parallax component because the old code has been broken, the effect has not being applied so, I used the literal of MoveBy to fix it

mflerackers · 2026-02-09T23:16:59Z


            const delta: Vec2 = cam.sub(this.lastCam);
-            this.moveBy(
+            this.pos = this.pos.add(


moveBy does exactly this. You're saying it isn't working?

I thought this was about organization, I will return back to the original version instead

We might remove the pos setter/getter in the future and have only moveTo, moveBy and getPos. So it's better to leave moveBy.

yea I notice I "can't" set the pos directly, that's why broke the old version.

You can, just not pos.x or pos.y separately, you need to replace the entire pos. That's why we're thinking of removing that property.

yea make sense, will be for good if those properties be private, only internal access

KiwiSky added 6 commits September 21, 2025 19:01

comp: Scroll component

76e8b0c

comp: updates do scrollcomp

810485c

comp: Scroll component

00eb10e

fix: added test screen

e775277

feat: added scrollcam component

f908a46

fix: removed some unused vars and added rand to the example

e3dced0

dragoncoder047 suggested changes Sep 22, 2025

View reviewed changes

KiwiSky added 2 commits September 21, 2025 22:41

style: formated and revised

25df445

fix: removed getter and setter

b945192

dragoncoder047 reviewed Sep 22, 2025

View reviewed changes

itzKiwiSky requested a review from dragoncoder047 September 24, 2025 00:56

KiwiSky added 3 commits September 23, 2025 22:11

fix: added getScroll

4b1c265

style: fmt

7cc42bd

fix: this

7e16af9

dragoncoder047 suggested changes Sep 24, 2025

View reviewed changes

KiwiSky added 3 commits September 23, 2025 22:28

fix: bug wtf??

44f8c56

fix: I found

9019fbb

fix: 2

df08160

mflerackers reviewed Sep 24, 2025

View reviewed changes

mflerackers requested changes Sep 24, 2025

View reviewed changes

fix: removed getScroll again

53f7d4f

itzKiwiSky requested a review from mflerackers September 24, 2025 20:56

mflerackers approved these changes Sep 24, 2025

View reviewed changes

itzKiwiSky requested a review from dragoncoder047 September 24, 2025 23:32

Merge branch 'kaplayjs:master' into master

707751a

lajbel added this to the 4000.0.0-alpha.24 milestone Nov 4, 2025

Merge branch 'kaplayjs:master' into master

cb86f7b

itzKiwiSky added 2 commits November 23, 2025 09:11

Merge branch 'kaplayjs:master' into master

4d2268f

Merge branch 'kaplayjs:master' into master

60f1bca

dragoncoder047 suggested changes Dec 5, 2025

View reviewed changes

lajbel removed this from the 4000.0.0-alpha.24 milestone Jan 1, 2026

dragoncoder047 suggested changes Jan 1, 2026

View reviewed changes

Comment thread src/ecs/components/transform/camscroll.ts Outdated

itzKiwiSky and others added 6 commits January 2, 2026 11:37

Merge branch 'kaplayjs:master' into master

101e8bb

Fix: renamed component scrollcam to parallax

90fc29e

Fix: fixed a link error in component name

48e7d6f

Merge branch 'kaplayjs:master' into master

f600c8b

feat: renamed camscroll to parallax component

431cd9b

fix: removed moveBy and replace by its literal

28c98c8

feat: added getSceneIndex and fixed its examples

6d8db5c

mflerackers requested changes Feb 9, 2026

View reviewed changes

itzKiwiSky and others added 5 commits February 9, 2026 21:13

fix: back to the moveBy function

e211878

feat: updated scenepushandpoptest for better demonstration

4dc540e

fmt: style

2eeaba1

Merge branch 'kaplayjs:master' into master

b7c9c7d

feat: added target for parallax

cba9b18

Uh oh!

Conversation

itzKiwiSky commented Sep 22, 2025

Summary

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pkg-pr-new Bot commented Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dragoncoder047 Sep 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as resolved.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

itzKiwiSky commented Feb 9, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

pkg-pr-new Bot commented Sep 22, 2025 •

edited

Loading

dragoncoder047 Sep 22, 2025 •

edited

Loading