Toodle

Appearance

@blooper.gg/toodle

@blooper.gg/toodle / scene/QuadNode / QuadNode

Class: QuadNode ​

Defined in: scene/QuadNode.ts:32

A node in the scene graph that renders a textured quad.

This is a base class and is fairly low level. You will probably want to interact with the wrapper class Toodle.Quad instead.

Extends ​

Constructors ​

Constructor ​

new QuadNode(options, matrixPool): QuadNode

Defined in: scene/QuadNode.ts:53

Parameters ​

options ​

QuadOptions

matrixPool ​

Pool<Float32Array>

Returns ​

QuadNode

Overrides ​

SceneNode.constructor

Properties ​

extra ​

extra: object

Defined in: scene/QuadNode.ts:258

atlasSize() ​

atlasSize: () => Size

Returns the size of the texture atlas in texels, by default this is 4096x4096

Returns ​

Size

cropRatio() ​

cropRatio: () => Size

Returns the crop ratio for the quad. This is the relative difference in size between the cropped and uncropped texture, and will be 1 if the quad has no transparent pixels or if it is loaded without cropping..

Returns ​

Size

setAtlasCoords() ​

setAtlasCoords: (value) => void

Sets the atlas coords for the quad. This is for advanced use cases and by default these are set automatically to reference the right texture atlas region.

Parameters ​
value ​

AtlasCoords

The new atlas coords.

Returns ​

void

id ​

id: number

Defined in: scene/SceneNode.ts:20

Inherited from ​

SceneNode.id

label? ​

optional label: string

Defined in: scene/SceneNode.ts:21

Inherited from ​

SceneNode.label

nextId ​

static nextId: number = 1

Defined in: scene/SceneNode.ts:18

Inherited from ​

SceneNode.nextId

Accessors ​

aspectRatio ​

Get Signature ​

get aspectRatio(): number

Defined in: scene/SceneNode.ts:267

The aspect ratio of the node. If the node has no defined size, the aspect ratio will be 1.

Returns ​

number

Inherited from ​

SceneNode.aspectRatio

atlasCoords ​

Get Signature ​

get atlasCoords(): AtlasCoords

Defined in: scene/QuadNode.ts:165

The atlas coordinates for the quad. These determine the region in the texture atlas that is sampled for rendering in normalized uv space.

Returns ​

AtlasCoords

bottom ​

Set Signature ​

set bottom(value): void

Defined in: scene/SceneNode.ts:428

Set the bottom edge of the node in world space.

Parameters ​
value ​

number

Returns ​

void

Inherited from ​

SceneNode.bottom

bounds ​

Get Signature ​

get bounds(): Bounds

Defined in: scene/SceneNode.ts:371

Get the bounds of the node in world space

Returns ​

Bounds

Inherited from ​

SceneNode.bounds

centerX ​

Set Signature ​

set centerX(value): void

Defined in: scene/SceneNode.ts:449

Set the center x of the node in world space.

Parameters ​
value ​

number

Returns ​

void

Inherited from ​

SceneNode.centerX

centerY ​

Set Signature ​

set centerY(value): void

Defined in: scene/SceneNode.ts:456

Set the center y of the node in world space.

Parameters ​
value ​

number

Returns ​

void

Inherited from ​

SceneNode.centerY

children ​

Get Signature ​

get children(): SceneNode[]

Defined in: scene/SceneNode.ts:142

The children of the node. Alias for SceneNode.kids.

Returns ​

SceneNode[]

Inherited from ​

SceneNode.children

color ​

Get Signature ​

get color(): Color

Defined in: scene/QuadNode.ts:126

The tint color of the quad. When drawing shapes, this will be the fill color. When drawing textures, this will be the color multiplier by default. You can also use this value in fragment shaders by referencing vertex.engine_tint

Returns ​

Color

Set Signature ​

set color(value): void

Defined in: scene/QuadNode.ts:130

Parameters ​
value ​

Color

Returns ​

void

cropOffset ​

Get Signature ​

get cropOffset(): Vec2

Defined in: scene/QuadNode.ts:228

The drawing offset of the texture. This can be used to offset the texture from the origin of the quad.

Returns ​

Vec2

Set Signature ​

set cropOffset(value): void

Defined in: scene/QuadNode.ts:236

The drawing offset of the texture. This can be used to offset the texture from the origin of the quad.

Parameters ​
value ​

Vec2

Returns ​

void

flipX ​

Get Signature ​

get flipX(): boolean

Defined in: scene/QuadNode.ts:188

Whether the image is mirrored horizontally.

true means the image is mirrored (equivalent to a scale.x of -1), false means it is not mirrored.

Returns ​

boolean

Set Signature ​

set flipX(value): void

Defined in: scene/QuadNode.ts:198

Sets whether the image is mirrored horizontally.

true mirrors the image (equivalent to a scale.x of -1), false restores normal orientation.

Parameters ​
value ​

boolean

Returns ​

void

flipY ​

Get Signature ​

get flipY(): boolean

Defined in: scene/QuadNode.ts:209

Whether the image is mirrored vertically.

true means the image is mirrored (equivalent to a scale.y of -1), false means it is not mirrored.

Returns ​

boolean

Set Signature ​

set flipY(value): void

Defined in: scene/QuadNode.ts:219

Sets whether the image is mirrored vertically.

true mirrors the image (equivalent to a scale.y of -1), false restores normal orientation.

Parameters ​
value ​

boolean

Returns ​

void

hasExplicitLayer ​

Get Signature ​

get hasExplicitLayer(): boolean

Defined in: scene/SceneNode.ts:336

Returns true if the node has an explicit layer set.

If the node does not have an explicit layer but one of its ancestors does, its layer will be inherited from its parent.

Returns ​

boolean

Inherited from ​

SceneNode.hasExplicitLayer

idealSize ​

Set Signature ​

set idealSize(value): void

Defined in: scene/SceneNode.ts:250

Parameters ​
value ​

null | Size

Returns ​

void

Inherited from ​

SceneNode.idealSize

isActive ​

Get Signature ​

get isActive(): boolean

Defined in: scene/SceneNode.ts:282

isActive is a boolean that determines if the node is active. If a node is not active, it will not be drawn. If any of a node's ancestors are not active, the node will not be active.

Returns ​

boolean

Set Signature ​

set isActive(value): void

Defined in: scene/SceneNode.ts:297

Parameters ​
value ​

boolean

Returns ​

void

Inherited from ​

SceneNode.isActive

isCircle ​

Get Signature ​

get isCircle(): boolean

Defined in: scene/QuadNode.ts:254

Whether this quad is rendering a circle.

Returns ​

boolean

isPrimitive ​

Get Signature ​

get isPrimitive(): boolean

Defined in: scene/QuadNode.ts:247

Whether this quad is rendering a primitive shape like a line or a circle/rect.

Returns ​

boolean

key ​

Get Signature ​

get key(): string

Defined in: scene/SceneNode.ts:161

Returns the key of the node as set when the node was created.

This key can be used to reference the node from an external lookup system.

Returns ​

string

Inherited from ​

SceneNode.key

kids ​

Get Signature ​

get kids(): SceneNode[]

Defined in: scene/SceneNode.ts:135

Returns an array of the node's immediate kids.

Note that these will be returned with a SceneNode type, but can be narrowed if you know the type of them, for eg:

ts
for (const kid of node.kids) {
  if (kid instanceof Scene.QuadNode) {
    console.log(kid.color)
  }

  if (kid instanceof Text.TextNode) {
    console.log(kid.text)
  }
}
Returns ​

SceneNode[]

Inherited from ​

SceneNode.kids

layer ​

Get Signature ​

get layer(): number

Defined in: scene/SceneNode.ts:307

Nodes are batched for drawing based on their layer. Each layer will submit a separate draw call. Nodes with the same layer will be drawn in the order they are drawn with toodle.Draw Nodes with a higher layer will be drawn on top of nodes with a lower layer.

Returns ​

number

Set Signature ​

set layer(value): void

Defined in: scene/SceneNode.ts:340

Parameters ​
value ​

number

Returns ​

void

Inherited from ​

SceneNode.layer

left ​

Set Signature ​

set left(value): void

Defined in: scene/SceneNode.ts:421

Set the left edge of the node in world space.

Parameters ​
value ​

number

Returns ​

void

Inherited from ​

SceneNode.left

matrix ​

Get Signature ​

get matrix(): Float32Array

Defined in: scene/SceneNode.ts:354

This is the model matrix of the node. See https://webgpufundamentals.org/webgpu/lessons/webgpu-matrix-math.html for more information.

Do not edit this matrix directly as it is derived from the node's transform and will be overwritten.

Returns ​

Float32Array

Inherited from ​

SceneNode.matrix

matrixWithSize ​

Get Signature ​

get matrixWithSize(): Float32Array

Defined in: scene/QuadNode.ts:150

This is the final model matrix used to render the quad, which may differ from the matrix passed down to the node's children. Properties like flipX and flipY or size are applied here but not inherited by children.

Returns ​

Float32Array

parent ​

Get Signature ​

get parent(): null | SceneNode

Defined in: scene/SceneNode.ts:168

Returns the parent node. See https://toodle.gg/f849595b3ed13fc956fc1459a5cb5f0228f9d259/examples/transforms.html

Returns ​

null | SceneNode

Inherited from ​

SceneNode.parent

position ​

Get Signature ​

get position(): Point

Defined in: scene/SceneNode.ts:180

Position of the node in local space. For world space, use SceneNode.bounds.

Returns ​

Point

Set Signature ​

set position(value): void

Defined in: scene/SceneNode.ts:172

Parameters ​
value ​

Point

Returns ​

void

Inherited from ​

SceneNode.position

region ​

Get Signature ​

get region(): TexelRegion

Defined in: scene/QuadNode.ts:174

A subregion of the texture to render. This is useful for rendering a single sprite from a spritesheet for instance. It defaults to the full texture.

Returns ​

TexelRegion

renderComponent ​

Get Signature ​

get renderComponent(): null | RenderComponent

Defined in: scene/SceneNode.ts:345

Returns ​

null | RenderComponent

Inherited from ​

SceneNode.renderComponent

Set Signature ​

set right(value): void

Defined in: scene/SceneNode.ts:442

Set the right edge of the node in world space.

Parameters ​
value ​

number

Returns ​

void

Inherited from ​

SceneNode.right

rotation ​

Get Signature ​

get rotation(): number

Defined in: scene/SceneNode.ts:217

The rotation of the node in degrees. For radians, see SceneNode.rotationRadians.

Returns ​

number

Set Signature ​

set rotation(value): void

Defined in: scene/SceneNode.ts:208

Parameters ​
value ​

number

Returns ​

void

Inherited from ​

SceneNode.rotation

rotationRadians ​

Get Signature ​

get rotationRadians(): number

Defined in: scene/SceneNode.ts:225

The rotation of the node in radians. For degrees, see SceneNode.rotation.

Returns ​

number

Set Signature ​

set rotationRadians(value): void

Defined in: scene/SceneNode.ts:229

Parameters ​
value ​

number

Returns ​

void

Inherited from ​

SceneNode.rotationRadians

scale ​

Get Signature ​

get scale(): Vec2

Defined in: scene/SceneNode.ts:237

The scale of the node. See https://toodle.gg/f849595b3ed13fc956fc1459a5cb5f0228f9d259/examples/quad-size-scale.html

Returns ​

Vec2

Set Signature ​

set scale(value): void

Defined in: scene/SceneNode.ts:241

Parameters ​
value ​

number | Vec2

Returns ​

void

Inherited from ​

SceneNode.scale

size ​

Get Signature ​

get size(): Size

Defined in: scene/QuadNode.ts:137

The size of the quad. See https://toodle.gg/f849595b3ed13fc956fc1459a5cb5f0228f9d259/examples/quad-size-scale.html

Returns ​

Size

Overrides ​

SceneNode.size

textureId ​

Get Signature ​

get textureId(): string

Defined in: scene/QuadNode.ts:240

Returns ​

string

top ​

Set Signature ​

set top(value): void

Defined in: scene/SceneNode.ts:435

Set the top edge of the node in world space.

Parameters ​
value ​

number

Returns ​

void

Inherited from ​

SceneNode.top

transform ​

Get Signature ​

get transform(): Transform

Defined in: scene/SceneNode.ts:152

Returns a reference to the node's transform.

Do not edit this transform directly as it won't invalidate cache's correctly. Instead, use convenience properties SceneNode.position, SceneNode.scale, and SceneNode.rotation.

Returns ​

Transform

Inherited from ​

SceneNode.transform

writeInstance ​

Get Signature ​

get writeInstance(): undefined | (array, offset) => void

Defined in: scene/QuadNode.ts:178

Returns ​

undefined | (array, offset) => void

x ​

Get Signature ​

get x(): number

Defined in: scene/SceneNode.ts:192

The local x coordinate of the node.

Returns ​

number

Set Signature ​

set x(value): void

Defined in: scene/SceneNode.ts:184

Parameters ​
value ​

number

Returns ​

void

Inherited from ​

SceneNode.x

y ​

Get Signature ​

get y(): number

Defined in: scene/SceneNode.ts:204

The local y coordinate of the node.

Returns ​

number

Set Signature ​

set y(value): void

Defined in: scene/SceneNode.ts:196

Parameters ​
value ​

number

Returns ​

void

Inherited from ​

SceneNode.y

Methods ​

add() ​

add<T>(kid, index?): T

Defined in: scene/SceneNode.ts:106

Add a child node and return the child node with this node set as its parent.

Type Parameters ​

T ​

T extends SceneNode

Parameters ​

kid ​

T

index? ​

number

Returns ​

T

Inherited from ​

SceneNode.add

delete() ​

delete(): void

Defined in: scene/SceneNode.ts:477

Removes references to this node and all of its children.

Call this to remove a node from a parent's tree and before garbage collection to prevent a node from being retained.

Returns ​

void

Example ​

ts
const parent = toodle.Node();
const child = toodle.Quad();
const grandchild = toodle.Quad();

parent.add(child);
child.add(grandchild);

// Will delete `child` and `grandchild`
child.delete();

Inherited from ​

SceneNode.delete

remove() ​

remove(kid): void

Defined in: scene/SceneNode.ts:505

Remove any child node from this node. Warns if the child is not found.

The node will still exist as an orphaned node and can still be passed to toodle.Draw or added to another parent.

Alternatively, calling node.delete() on the child will remove it and set it to inactive.

Parameters ​

kid ​

SceneNode

Returns ​

void

Example ​

ts
const parent = toodle.Node();
const child = toodle.Quad();
const grandchild = toodle.Quad();

parent.add(child);
child.add(grandchild);

parent.remove(child);

Inherited from ​

SceneNode.remove

setBounds() ​

setBounds(bounds): QuadNode

Defined in: scene/SceneNode.ts:407

Set the bounds of the node in world space.

Parameters ​

bounds ​

Partial<Bounds>

Returns ​

QuadNode

Inherited from ​

SceneNode.setBounds

setDirty() ​

setDirty(): void

Defined in: scene/SceneNode.ts:536

This marks the node as dirty, invalidating its cache and causing its matrix to be recalculated. This should not be necessary to call directly, but is available for advanced use cases.

Returns ​

void

Inherited from ​

SceneNode.setDirty

toJSON() ​

toJSON(): object

Defined in: scene/SceneNode.ts:567

This method usually is not called directly. It will be called automatically by JSON.stringify, see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify#description and SceneNode.parse.

Returns ​

object

id ​

id: number

isActive ​

isActive: boolean

kids ​

kids: SceneNode[]

label ​

label: undefined | string

layer ​

layer: null | number

render ​

render: null | RenderComponent

transform ​

transform: Transform

Example ​

ts
const node = new Node();
const json = JSON.stringify(node); // calls toJSON()
console.log(json)

Inherited from ​

SceneNode.toJSON

parse() ​

static parse(json): SceneNode

Defined in: scene/SceneNode.ts:551

Parse a node and its descendants from a JSON string. Can be used for deserialization from a file or other source.

Parameters ​

json ​

string

Returns ​

SceneNode

Example ​

ts
const node = new Node();
const json = JSON.stringify(node);
const clonedNode = Node.parse(json);

Inherited from ​

SceneNode.parse