logo
By Lawrence

6 minutes

Change a Core Component

TL;DR: The scaffold downloaded the core components into src/components/ when it made my-game. They're free, and they're your files. Change a default in ArcCamera.defs.ts and the camera does something new. bjs download ArcCamera never writes over your copy, so delete the folder first when you want a fresh one.

Lesson 4 used bjs download to bring in Lifetime. The camera, the lights and the capsule came the same way, before you ever logged in. Look in the folder:

ls -1 src/components
AmbientOcclusion
Animation
ArcCamera
...
Hello
...
Lifetime
...
MeshPrimitive
...
Spin
...
TwinStickEnemy

Hello, Lifetime and Spin are yours from earlier lessons. The other 35 are the core set: meshes, lights, cameras, input, physics, score and the rest. npm create @babylonjsmarket/arcade fetched them from the marketplace at no cost. Since they sit in src/components/, the registry from Lesson 2 finds each one by its folder name, just like Spin.

Made my-game with an arcade older than 0.13? Then only your own folders are there. Fill in the rest:

npm install @babylonjsmarket/arcade@latest
npx arcade core

arcade core downloads any core componentOne of the free components every new project gets in src/components/ when it is made, like MeshPrimitive, ArcCamera or Score. that is missing and never touches one that is there. Your src/main.ts needs the 0.13 changes too. The arcade README lists them.

A workshop shelf of labelled jars marked SRC/COMPONENTS, with exactly five jars labelled ARCCAMERA, MESHPRIMITIVE, PHYSICS, SOUND and SCORE and no other labels; a parcel marked BJS DOWNLOAD arrives from a market stall marked MARKETPLACE, and a craftsman turns a brass dial on the ARCCAMERA jar to change its setting

Change the camera

Save a snapshot first, so you can see your edit later. git commit saves your files, and git diff shows what changed since. If my-game isn't a git repository yet, run git init once.

git add -A && git commit -m "before the camera edit"

Open src/components/ArcCamera/ArcCamera.defs.ts. The constructor gives every setting a default with ??, used when the scene leaves it out:

src/components/ArcCamera/ArcCamera.defs.ts
this.distance = data.distance ?? 15;
this.minDistance = data.minDistance ?? 5;
this.maxDistance = data.maxDistance ?? 50;
this.allowBelowGround = data.allowBelowGround ?? false;
this.minBeta = data.minBeta ?? 0.1;
this.maxBeta = data.maxBeta ?? (this.allowBelowGround ? Math.PI - 0.1 : Math.PI / 2 - 0.1);
this.alpha = data.alpha ?? Math.PI / 2;
this.beta = data.beta ?? Math.PI / 3;
this.inertia = data.inertia ?? 0.9;
this.panningInertia = data.panningInertia ?? 0.9;
this.wheelPrecision = data.wheelPrecision ?? 50;
this.angularSensibility = data.angularSensibility ?? 1000;
this.speed = data.speed ?? 1;
this.targetOffset = data.targetOffset ? cloneVec3(data.targetOffset) : [0, 0, 0];
this.autoRotate = data.autoRotate ?? false;
this.autoRotateSpeed = data.autoRotateSpeed ?? 0.5;

The starter scene never sets autoRotate. Change its default to true and save. The page reloads and the camera starts a slow lap around the capsule, all on its own. Nobody else's game spins. You changed your copy, not the marketplace's.

Scene values win

Now change distance from ?? 15 to ?? 40 and save. Nothing moves. src/scenes/game.ts sets distance: 8, and ?? only uses the default when the scene leaves the value out. Delete the distance: 8 line and the camera backs way off, the capsule a small shape in the middle of the floor. Put the line back and the default back to 15.

When an edit to a component seems to do nothing, check whether the scene sets that field.

A fresh copy

Commit the spinning camera, then ask the marketplace for a fresh copy of ArcCamera:

git add -A && git commit -m "camera orbits"
bjs download ArcCamera
Requesting download token...
Acquiring component ArcCamera...
ArcCamera + 1 dependency component already in the project (-0 credits)
→ /Users/you/my-game/src/components

Nothing was written. The one dependency is MeshPrimitive, also already there. A download never writes over a file you have, so your edit is safe. To start over, delete the folder and download it again:

rm -rf src/components/ArcCamera
bjs download ArcCamera
git diff
diff --git a/src/components/ArcCamera/ArcCamera.defs.ts b/src/components/ArcCamera/ArcCamera.defs.ts
...
-    this.autoRotate = data.autoRotate ?? true;
+    this.autoRotate = data.autoRotate ?? false;

The camera stops spinning. That's how you pick up a fix from a newer version, and it's why you commit first. git checkout -- src/components/ArcCamera puts your spinning camera back.

Next: Make It Marketplace-Ready: give Spin a meta.json, run the checks bjs submit runs, and see what a missing dependency looks like.

Was this page helpful?

We read every note — tell us what's working and what isn't.

↑↓ NavigateEnter SelectEsc CloseCtrl+K Open Search