A Group is a collection of and blueprint for sprites with similar traits and behaviors.
Group extends Visuals which extends Array,
so you can use them in for loops. They've got
all the functions and properties of standard arrays
such as group.length and functions like group.includes().
Changing a group setting changes it for all the sprites in the group ("dynamic inheritance").
All groups inherit from the base group allSprites.
Groups can have subgroups, creating a hierarchy of inheritance.
Optional...sprites: Sprite[]the sprites to add to the group
Readonly[unscopables]Is an object whose properties have the value 'true' when they will be absent when used in a 'with' statement.
Optional[iterator]?: booleanOptional Readonly[unscopables]?: booleanIs an object whose properties have the value 'true' when they will be absent when used in a 'with' statement.
Optionalat?: booleanOptionalconcat?: booleanOptionalcopyWithin?: booleanOptionalentries?: booleanOptionalevery?: booleanOptionalfill?: booleanOptionalfilter?: booleanOptionalfind?: booleanOptionalfindIndex?: booleanOptionalfindLast?: booleanOptionalfindLastIndex?: booleanOptionalflat?: booleanOptionalflatMap?: booleanOptionalforEach?: booleanOptionalincludes?: booleanOptionalindexOf?: booleanOptionaljoin?: booleanOptionalkeys?: booleanOptionallastIndexOf?: booleanOptionallength?: booleanGets or sets the length of the array. This is a number one higher than the highest index in the array.
Optionalmap?: booleanOptionalpop?: booleanOptionalpush?: booleanOptionalreduce?: booleanOptionalreduceRight?: booleanOptionalreverse?: booleanOptionalshift?: booleanOptionalslice?: booleanOptionalsome?: booleanOptionalsort?: booleanOptionalsplice?: booleanOptionaltoLocaleString?: booleanOptionaltoReversed?: booleanOptionaltoSorted?: booleanOptionaltoSpliced?: booleanOptionaltoString?: booleanOptionalunshift?: booleanOptionalvalues?: booleanOptionalwith?: booleanAlias for group.push.
Adds a sprite to the end of the group.
Controls the ability for group sprites to "sleep".
"Sleeping" sprites are not included in the physics simulation, a sprite starts "sleeping" when it stops moving and doesn't collide with anything that it wasn't already colliding with.
Current animation.
A property of the allSprites group only,
that controls whether sprites are automatically deleted
when they are 10,000 pixels away from the camera.
It only needs to be set to false once and then it will remain false for the rest of the sketch, unless changed.
If true, group sprites are drawn by q5play after each physics update.
If true, group sprites are updated by q5play before each physics update.
A bearing indicates the direction that needs to be followed to reach a destination.
Setting a group sprites' bearing doesn't do anything by itself.
You can apply a force to the group sprites at its bearing angle
using the applyForce function.
The bounciness of the group sprites' physics body.
The group sprites' current fill color.
By default sprites get a random color.
Alias for group.includes.
Check if a sprite is in the group.
The diameter of a circular sprite.
If true, outlines of the group sprites' colliders and sensors will be drawn.
Use the keyboard shortcut Command+B to toggle allSprites.debug.
The density of the group sprites' physics body.
The diameter of a circular sprite.
The angle of the group sprites' movement.
The amount of resistance group sprites has to being moved.
The amount the group sprites' colliders resist moving when rubbing against other colliders.
Whether the group sprites can be grabbed by a pointer.
A ratio that defines how much the group sprites are affected by gravity.
Creates a new subgroup that inherits the traits of the group.
The height of the group sprites.
The group sprites' heading. This is a string that can be set to "up", "down", "left", "right", "upRight", "upLeft", "downRight"
The setter's input parser ignores capitalization, spaces, underscores, dashes, and cardinal direction word order.
The height of the group sprites.
Each group has a unique id number. Don't change it! It's useful for debugging.
Current image.
Set this to true if the group sprites goes really fast to prevent inaccurate physics simulation.
Sprites with the highest layer value get drawn first.
By default sprites are drawn in the order they were created in.
Gets or sets the length of the array. This is a number one higher than the highest index in the array.
When the physics simulation is progressed in world.physicsUpdate,
each sprite's life is decreased by world.timeScale.
If life becomes less than or equal to 0, the group sprites will be removed.
The mass of the group sprites' physics body.
The direct parent group that this group inherits properties from.
The physics type of the group sprites, which determines how it interacts with other sprites in the physics simulation.
It can be set to DYNAMIC/DYN, STATIC/STA, or KINEMATIC/KIN.
If true, the group sprites' physics body is included in the physics simulation.
The physics type of the group sprites, which determines how it interacts with other sprites in the physics simulation.
It can be set to DYNAMIC/DYN, STATIC/STA, or KINEMATIC/KIN.
If true, q5play will draw sprites at integer pixel precision.
This is useful for making retro games.
By default q5play draws sprites with subpixel rendering.
Simulates friction that slows down group sprites rolling on another sprite, like a soccer ball rolling to a stop on high grass.
The angle of the group sprites' rotation, not the direction it's moving.
If angleMode is set to "degrees", the value will be returned in a range of -180 to 180.
The amount the group sprites resists rotating.
If true, the group sprites can not rotate.
The speed of the group sprites' rotation in angles per frame.
Horizontal and vertical scale of the group sprites.
Components can be negative to flip/mirror the group sprites on an axis.
The valueOf function for sprite.scale returns the scale as a
number. This enables users to do things like sprite.scale *= 2
to double the group sprites' scale.
Wake group sprites up or put it to sleep.
"Sleeping" sprites are not included in the physics simulation, a sprite starts "sleeping" when it stops moving and doesn't collide with anything that it wasn't already colliding with.
The group sprites' speed.
Setting speed to a negative value will make the group sprites move 180 degrees opposite of its current direction angle.
Creates a new sprite with the traits of the group and adds it to the group.
The group sprites' stroke color.
The group sprites' stroke weight, the thickness of its outline.
Groups can have subgroups, which inherit the properties of their parent groups.
The group sprites' speed along the surface of its collider(s), like a conveyor belt.
Text displayed at the center of the group sprites.
The group sprites' text fill color. Black by default.
The group sprites' text size, the sketch's current textSize by default.
The group sprites' text stroke color. No stroke by default, does not inherit from the sketch's stroke color.
The group sprites' text stroke weight, the thickness of its outline. No stroke by default, does not inherit from the sketch's stroke weight.
The tile character that represents the Visuals or Group in a tile map.
Velocity of group sprites.
Velocity of group sprites.
If true the group sprites are shown, if set to false the group sprites are hidden.
Becomes null when the group sprites are off screen but will be drawn and set to true again if it goes back on screen.
New group sprites will not have physics bodies (can't have colliders).
The width of the group sprites.
The width of the group sprites.
Horizontal position of group sprites.
Vertical position of group sprites.
Static Readonly[species]Depending on the value that the amount property is set to, the group will either add or delete sprites.
Stores animations. Keys are the animation label, values are Ani objects
Iterator
Adds an animation to the Group or Visuals array.
the URL of the sprite sheet image
the number of frames in the sprite sheet
A promise that fulfills when the animation is loaded
Add multiple animations to the Group or Visuals array.
an object with animation names as keys and an animation or animation atlas as values
A promise that fulfills when the animations are loaded
Add multiple animations to the Group or Visuals array.
the URL of the sprite sheet image
an object with animation names as keys and an animation or animation atlas as values
A promise that fulfills when the animations are loaded
Add multiple animations to the Group or Visuals array.
the URL of the sprite sheet image
the size of each frame in the sprite sheet in the format "WIDTHxHEIGHT" (example: "32x32")
an object with animation names as keys and an animation or animation atlas as values
A promise that fulfills when the animations are loaded
Adds sprites to the group based on a tile map.
Optionalx: numberx coordinate of the top left corner of the tile map, default is -colWidth * longest row / 2
Optionaly: numbery coordinate of the top left corner of the tile map, default is -rowHeight * number of rows / 2
OptionalcolWidth: numbercolumn width including spacing, default is the width of the first tile
OptionalrowHeight: numberrow height including spacing, default is the height of the first tile
Applies a force magnitude to the group at its bearing.
Optionalorigin: { x: number; y: number }Applies a force vector to the group.
Optionalorigin: { x: number; y: number }Applies a force scaled to member masses using a magnitude.
Optionalorigin: { x: number; y: number }Applies a force scaled to member masses using a vector.
Optionalorigin: { x: number; y: number }Optionaldrag: numberOptionallift: numberReturns the item located at the specified index.
The zero-based index of the desired code unit. A negative index will count back from the last item.
Applies a force to the group's center of mass attracting it to the given position.
Optionalforce: numberApplies a force to the group's center of mass attracting it to the given position.
Optionalforce: numberReturns true on the first frame that the group no longer overlaps with the target group.
Optionalcallback: FunctionReturns true on the first frame that the group collides with the target group.
Custom collision event handling can be done by using this function in an if statement or adding a callback as the second parameter.
Optionalcallback: FunctionReturns the amount of frames that the group has been colliding with the target group for, which is a truthy value. Returns 0 if the group is not colliding with the target group.
Optionalcallback: Functionframes
Returns the this object after copying a section of the array identified by start and end to the same array starting at position target
If target is negative, it is treated as length+target where length is the length of the array.
If start is negative, it is treated as length+start. If end is negative, it is treated as length+end.
Optionalend: numberIf not specified, length of the this object is used as its default value.
Detects when sprites go outside the given culling boundary relative to the camera.
By default, culled sprites are deleted, but a callback function can be provided to perform other operations on the culled sprites.
Optionaltop: numberthe distance that sprites can move below the canvas before they are removed
Optionalbottom: numberthe distance that sprites can move below the canvas before they are removed
Optionalleft: numberthe distance that sprites can move beyond the left side of the canvas before they are removed
Optionalright: numberthe distance that sprites can move beyond the right side of the canvas before they are removed
Optionalcb: Functionthe function to be run when a sprite is culled, it's given the sprite being culled, if no callback is given then the sprite is removed
the number of sprites culled
Deletes the group and all its sprites from the world and every other group they belong to.
Don't attempt to use a group after deleting it.
Deletes all the sprites in the group.
Does not delete the group itself.
Draws all the sprites in the group.
Returns an iterable of key, value pairs for every entry in the array
Determines whether all the members of an array satisfy the specified test.
A function that accepts up to three arguments. The every method calls the predicate function for each element in the array until the predicate returns a value which is coercible to the Boolean value false, or until the end of the array.
OptionalthisArg: anyAn object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value.
Determines whether all the members of an array satisfy the specified test.
A function that accepts up to three arguments. The every method calls the predicate function for each element in the array until the predicate returns a value which is coercible to the Boolean value false, or until the end of the array.
OptionalthisArg: anyAn object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value.
Changes all array elements from start to end index to a static value and returns the modified array
value to fill array section with
Optionalstart: numberindex to start filling the array at. If start is negative, it is treated as length+start where length is the length of the array.
Optionalend: numberindex to stop filling the array at. If end is negative, it is treated as length+end.
Returns the elements of an array that meet the condition specified in a callback function.
A function that accepts up to three arguments. The filter method calls the predicate function one time for each element in the array.
OptionalthisArg: anyAn object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value.
Returns the elements of an array that meet the condition specified in a callback function.
A function that accepts up to three arguments. The filter method calls the predicate function one time for each element in the array.
OptionalthisArg: anyAn object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value.
Returns the value of the first element in the array where predicate is true, and undefined otherwise.
find calls predicate once for each element of the array, in ascending order, until it finds one where predicate returns true. If such an element is found, find immediately returns that element value. Otherwise, find returns undefined.
OptionalthisArg: anyIf provided, it will be used as the this value for each invocation of predicate. If it is not provided, undefined is used instead.
Returns the index of the first element in the array where predicate is true, and -1 otherwise.
find calls predicate once for each element of the array, in ascending order, until it finds one where predicate returns true. If such an element is found, findIndex immediately returns that element index. Otherwise, findIndex returns -1.
OptionalthisArg: anyIf provided, it will be used as the this value for each invocation of predicate. If it is not provided, undefined is used instead.
Returns the value of the last element in the array where predicate is true, and undefined otherwise.
findLast calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLast immediately returns that element value. Otherwise, findLast returns undefined.
OptionalthisArg: anyIf provided, it will be used as the this value for each invocation of predicate. If it is not provided, undefined is used instead.
Returns the index of the last element in the array where predicate is true, and -1 otherwise.
findLastIndex calls predicate once for each element of the array, in descending order, until it finds one where predicate returns true. If such an element is found, findLastIndex immediately returns that element index. Otherwise, findLastIndex returns -1.
OptionalthisArg: anyIf provided, it will be used as the this value for each invocation of predicate. If it is not provided, undefined is used instead.
Calls a defined callback function on each element of an array. Then, flattens the result into a new array. This is identical to a map followed by flat with depth 1.
A function that accepts up to three arguments. The flatMap method calls the callback function one time for each element in the array.
OptionalthisArg: ThisAn object to which the this keyword can refer in the callback function. If thisArg is omitted, undefined is used as the this value.
Performs the specified action for each element in an array.
A function that accepts up to three arguments. forEach calls the callbackfn function one time for each element in the array.
OptionalthisArg: anyAn object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
Determines whether an array includes a certain element, returning true or false as appropriate.
The element to search for.
OptionalfromIndex: numberThe position in this array at which to begin searching for searchElement.
Returns the index of the first occurrence of a value in an array, or -1 if it is not present.
The value to locate in the array.
OptionalfromIndex: numberThe array index at which to begin the search. If fromIndex is omitted, the search starts at index 0.
Adds all the elements of an array into a string, separated by the specified separator string.
Optionalseparator: stringA string used to separate one element of the array from the next in the resulting string. If omitted, the array elements are separated with a comma.
Returns an iterable of keys in the array
Returns the index of the last occurrence of a specified value in an array, or -1 if it is not present.
The value to locate in the array.
OptionalfromIndex: numberThe array index at which to begin searching backward. If fromIndex is omitted, the search starts at the last index in the array.
Calls a defined callback function on each element of an array, and returns an array that contains the results.
A function that accepts up to three arguments. The map method calls the callbackfn function one time for each element in the array.
OptionalthisArg: anyAn object to which the this keyword can refer in the callbackfn function. If thisArg is omitted, undefined is used as the this value.
Moves each sprite in the group to a destination at a constant speed, maintaining their relative offsets from the group's centroid.
Optionalspeed: numberMoves each sprite in the group to a destination at a constant speed, maintaining their relative offsets from the group's centroid.
Optionalspeed: numberMoves the group towards a position.
Optionaltracking: numberMoves the group towards a position.
Optionaltracking: numberReturns true on the first frame that the group no longer overlaps with the target group.
Optionalcallback: FunctionReturns the amount of frames that the group has been overlapping with the target group for, which is a truthy value. Returns 0 if the group is not overlapping with the target group.
Optionalcallback: Functionframes
Returns true on the first frame that the group overlaps with the target group.
Custom overlap event handling can be done by using this function in an if statement or adding a callback as the second parameter.
Optionalcallback: FunctionSets a pass through contact relationship between the group and the target group.
Sets a pass through contact relationship between the group and the target group.
Removes the last element from an array and returns it. If the array is empty, undefined is returned and the array is not modified.
Appends new elements to the end of an array, and returns the new length of the array.
New elements to add to the array.
Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
Calls the specified callback function for all the elements in an array. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
A function that accepts up to four arguments. The reduce method calls the callbackfn function one time for each element in the array.
If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.
Calls the specified callback function for all the elements in an array, in descending order. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
Calls the specified callback function for all the elements in an array, in descending order. The return value of the callback function is the accumulated result, and is provided as an argument in the next call to the callback function.
A function that accepts up to four arguments. The reduceRight method calls the callbackfn function one time for each element in the array.
If initialValue is specified, it is used as the initial value to start the accumulation. The first call to the callbackfn function provides this value as an argument instead of an array value.
Applies a repelling force from a position.
Optionalforce: numberApplies a repelling force from a position.
Optionalforce: numberReverses the elements in an array in place. This method mutates the array and returns a reference to the same array.
Rotates each sprite in the group by the given angle amount at the given speed.
Optionalspeed: numberRotates each sprite in the group by the smallest angular distance to a target angle, stopping when they arrive.
Optionalspeed: numberRotates each sprite in the group by the smallest angular distance to face a position, stopping when they arrive.
Optionalspeed: numberOptionalfacing: numberRotates each sprite in the group to a target angle. The sign of speed
determines direction: positive = CW, negative = CCW.
Optionalspeed: numberRotates each sprite in the group to face a position. The sign of speed
determines direction: positive = CW, negative = CCW.
Optionalspeed: numberOptionalfacing: numberRotates each sprite in the group towards an angle.
Optionaltracking: numberRotates each sprite in the group towards a position.
Optionaltracking: numberOptionalfacing: numberRemoves the first element from an array and returns it. If the array is empty, undefined is returned and the array is not modified.
Returns a copy of a section of an array. For both start and end, a negative index can be used to indicate an offset from the end of the array. For example, -2 refers to the second to last element of the array.
Optionalstart: numberThe beginning index of the specified portion of the array. If start is undefined, then the slice begins at index 0.
Optionalend: numberThe end index of the specified portion of the array. This is exclusive of the element at the index 'end'. If end is undefined, then the slice extends to the end of the array.
Determines whether the specified callback function returns true for any element of an array.
A function that accepts up to three arguments. The some method calls the predicate function for each element in the array until the predicate returns a value which is coercible to the Boolean value true, or until the end of the array.
OptionalthisArg: anyAn object to which the this keyword can refer in the predicate function. If thisArg is omitted, undefined is used as the this value.
Sorts an array in place. This method mutates the array and returns a reference to the same array.
OptionalcompareFn: (a: Sprite, b: Sprite) => numberFunction used to determine the order of the elements. It is expected to return a negative value if the first argument is less than the second argument, zero if they're equal, and a positive value otherwise. If omitted, the elements are sorted in ascending, UTF-16 code unit order.
[11,2,22,1].sort((a, b) => a - b)
If removalCount is greater than 0, that amount of sprites starting from the start index will be removed from this group and its sub groups recursively (if any),
Then any provided sprites will be added at the start index to this group and at the end of each of its parent groups recursively, if not already present in parent groups.
start index
number of sprites to remove, starting from the start index
sprites to add at start index
the removed sprites
Returns a string representation of an array. The elements are converted to string using their toLocaleString methods.
Optionaloptions: NumberFormatOptions & DateTimeFormatOptionsReturns a copy of an array with its elements reversed.
Returns a copy of an array with its elements sorted.
OptionalcompareFn: (a: Sprite, b: Sprite) => numberFunction used to determine the order of the elements. It is expected to return a negative value if the first argument is less than the second argument, zero if they're equal, and a positive value otherwise. If omitted, the elements are sorted in ascending, UTF-16 code unit order.
[11, 2, 22, 1].toSorted((a, b) => a - b) // [1, 2, 11, 22]
Copies an array and removes elements and, if necessary, inserts new elements in their place. Returns the copied array.
The zero-based location in the array from which to start removing elements.
The number of elements to remove.
Elements to insert into the copied array in place of the deleted elements.
The copied array.
Copies an array and removes elements while returning the remaining elements.
The zero-based location in the array from which to start removing elements.
OptionaldeleteCount: numberThe number of elements to remove.
A copy of the original array with the remaining elements.
Returns a string representation of an array.
Moves and rotates each sprite in the group towards a target transform, maintaining their relative offsets from the group's centroid.
Optionalrotation: numberOptionaltracking: numberMoves and rotates each sprite in the group towards a target transform, maintaining their relative offsets from the group's centroid.
Optionalrotation: numberOptionaltracking: numberInserts new elements at the start of an array, and returns the new length of the array.
Elements to insert at the start of the array.
Updates all the sprites in the group.
Returns an iterable of values in the array
Copies an array, then overwrites the value at the provided index with the given value. If the index is negative, then it replaces from the end of the array.
The index of the value to overwrite. If the index is negative, then it replaces from the end of the array.
The value to write into the copied array.
The copied array with the updated value.
StaticfromStaticisStaticof
A Group is a collection of and blueprint for sprites with similar traits and behaviors.