6.1 Groups

Step 1 — Define the concept: A Group in shPlay is a collection that holds many sprites sharing common traits. You create one with new Group().

Step 2 — Explain the problem it solves: Without groups, you would have to set color, diameter, collider, and other properties individually on every sprite — tedious and error-prone when you have 10 stars or 50 coins. A group lets you set those defaults once on the group, and every sprite spawned into it via the factory inherits them automatically. It also gives you a way to manage all members together (loop over them, count them with .length, etc.).

Answer: A Group is a collection of sprites with shared traits; it solves the problem of repeatedly configuring many similar sprites by letting group-level defaults apply to every sprite spawned into it.

Step 1 — Recall the factory syntax: You spawn a sprite into an existing group using the group's special factory method:

new groupName.Sprite(x, y);

For example: new stars.Sprite(100, 100);

Step 2 — Note the capital S: The S in .Sprite must be capitalized. The group is a class instance, and .Sprite is a special method that creates a new sprite pre-configured with the group's defaults (like color, diameter, collider) and adds it to the group. Using lowercase sprite will not work.

Answer: Use new groupName.Sprite(x, y) — with a capital S. This copies the group's defaults onto the new sprite and adds it to the group's membership.

Step 1 — First spawn: Since stars.color = 'gold' was set before spawning, the factory copies that default onto the new sprite. So new stars.Sprite(100, 100) produces a gold sprite.

Step 2 — After overriding: Setting sprite.color = 'red' afterward changes only that individual sprite. Group defaults are just starting values copied at spawn time; each sprite owns its own independent copy of every property. The group's color stays 'gold', and any other sprites in the group remain gold too.

Answer: The sprite spawns gold (inheriting the group default). Setting sprite.color = 'red' changes only that one sprite to red — the group default and other sprites are unaffected.

Step 1 — What 'none' does: Setting collider = 'none' means the sprite does not participate in physics collisions at all. It won't bounce off things, block movement, or be affected by collision forces.

Step 2 — When to use it: Use it for anything the player should pass through or that shouldn't interact physically: decorations, background stars, pickups/coins (until §6.2 adds manual overlap detection), particles, and UI-like elements. Without it, decorative sprites would collide with the player and ground like solid objects.

Answer: collider = 'none' disables physics collisions entirely for the sprite; use it for decorations, background elements, and pickups the player should pass through rather than bump into.

Step 1 — Create and configure the group: Set the required defaults once on the group so every coin inherits them:

▶ Press Run to see the output…

Step 2 — Spawn 5 coins in a row with a loop: A loop keeps the code short and spaces the coins evenly across the canvas:

  for (let i = 0; i < 5; i++) {
    new coins.Sprite(60 + i * 70, 200);
  }

Each iteration places a coin at \(x = 60, 130, 200, 270, 340\), all at \(y = 200\).

Full sketch:

▶ Press Run to see the output…

Answer: Five gold coins of diameter 20 with no collider appear in a horizontal row across the middle of the canvas, all configured by the group defaults set once in setup().

Step 1 — Compare the two calls:

• new Sprite(100, 100, 20) creates a standalone sprite not belonging to any custom group. Its diameter is 20, but its color, collider, etc. are shPlay's generic defaults.
• new coins.Sprite(100, 100) uses the group factory: it creates a sprite pre-configured with everything set on the coins group (gold color, diameter 20, collider = 'none') and registers it as a member of coins.

Step 2 — When to use each: Use plain new Sprite(...) for one-off objects with unique traits — a single player, a single goal. Use the group factory whenever you're making many sprites that share traits, because it saves repeating configuration and lets you manage them as a set (coins.length, looping over coins).

Answer: new Sprite(100, 100, 20) makes an independent sprite with generic defaults; new coins.Sprite(100, 100) makes a sprite stamped from the coins group's defaults and added to that group. Use the former for unique one-offs, the latter for batches of similar sprites.

Step 1 — Can you change properties after spawn? Yes. Group settings are only defaults copied onto the sprite at the moment it's created. Afterward, the sprite is fully independent — you can write someSprite.color = 'red' or someSprite.diameter = 30 freely.

Step 2 — Does it affect other sprites? No. Each sprite gets its own independent copy of every property at spawn time (the same independence rule as §5.3.2). Changing one sprite's property touches only that sprite — the group's default and all other members keep their values.

Answer: Yes, you can change a spawned sprite's properties anytime, and doing so affects only that sprite — other group members and the group's defaults are untouched.

Step 1 — What happens to existing sprites: Nothing changes for them. The group's properties act as a template read at spawn time. Sprites already created received their own copies of the values as they were when they were spawned.

Step 2 — Who gets the new value: Only sprites spawned after the change inherit the updated default. Existing sprites keep their old values unless you update them individually (e.g., loop over the group and assign the new value yourself).

Answer: Changing a group property after spawning does not retroactively update existing sprites; only future sprites spawned from the group get the new value.

Step 1 — What allSprites is: allSprites is a built-in Group that every sprite automatically joins the moment it's created — whether made with new Sprite(...), a group factory, or anything else. You never construct it; it already exists.

Step 2 — How it differs from your own groups: A group you create with new Group() only contains the sprites you explicitly spawn into it, and you can give it custom defaults. allSprites instead tracks everything in the scene regardless of membership in other groups (a sprite can be in both coins and allSprites). It's useful for scene-wide operations: allSprites.length counts every sprite, and for (const s of allSprites) loops over the whole world.

Answer: allSprites is the built-in group containing every sprite in the scene automatically, whereas a self-made group contains only the sprites you spawn into it. Use allSprites for counting or touching everything at once; use custom groups for managing specific kinds of sprites.

Step 1 — At spawn time: Because enemies.hp = 3 was set before spawning, every enemy created from the group starts with its own independent copy of .hp = 3.

Step 2 — After changing one enemy: Setting oneEnemy.hp = 1 modifies only that enemy's copy. The group's default enemies.hp remains 3, and every other enemy still has .hp = 3. Custom group properties follow exactly the same independence rule as built-ins like color.

Answer: Only that one enemy's .hp becomes 1; the group's default stays 3 and all other enemies keep .hp = 3, since each sprite gets an independent copy of the group's values at spawn.