@blooper.gg/toodle / Toodle / Toodle
Class: Toodle
Defined in: Toodle.ts:25
Constructors
Constructor
new Toodle(
device,context,presentationFormat,canvas,resolution,options):Toodle
Defined in: Toodle.ts:79
it's unlikely that you want to use the constructor directly. see Toodle.attach for creating a Toodle instance that draws to a canvas.
Parameters
device
GPUDevice
context
GPUCanvasContext
presentationFormat
GPUTextureFormat
canvas
HTMLCanvasElement
resolution
options
Returns
Toodle
Properties
assets
assets:
AssetManager
Defined in: Toodle.ts:29
Asset manager. Use toodle.assets.loadTexture to load texture assets.
camera
camera:
Camera
Defined in: Toodle.ts:52
Camera. This applies a 2d perspective projection matrix to any nodes drawn with toodle.draw
clearColor
clearColor:
Color
Defined in: Toodle.ts:58
clearColor is the color that will be used to clear the screen at the beginning of each frame you can also think of this as the background color of the canvas
debug
debug:
object
Defined in: Toodle.ts:47
sometimes for debugging you might want to access the GPU device, this should not be necessary in normal operation
device
device:
GPUDevice
presentationFormat
presentationFormat:
GPUTextureFormat
diagnostics
diagnostics:
object
Defined in: Toodle.ts:35
diagnostics can be used as a rough gauge for performance. besides frames, these stats are reset at the beginning of each frame.
drawCalls
drawCalls:
number=0
number of instanced draw calls issued last frame. lower is better
frames
frames:
number=0
number of frames rendered
instancesEnqueued
instancesEnqueued:
number=0
number of instances enqueued last frame
pipelineSwitches
pipelineSwitches:
number=0
number of pipeline switches last frame. lower is better. to reduce pipeline switches, use fewer z-indexes or fewer custom shaders
extra
extra:
object
Defined in: Toodle.ts:641
Advanced and niche features
device()
device: () =>
GPUDevice
Get the GPU device used by this Toodle instance.
Returns
GPUDevice
shapes
shapes:
object
Defined in: Toodle.ts:471
Circle()
Circle: (
options) =>QuadNode
Parameters
options
QuadOptions = {}
Returns
Line()
Line: (
options) =>QuadNode
Parameters
options
Returns
Rect()
Rect: (
options) =>QuadNode
Parameters
options
QuadOptions = {}
Returns
Accessors
batcher
Get Signature
get batcher():
Batcher
Defined in: Toodle.ts:210
Returns
frameCount
Get Signature
get frameCount():
number
Defined in: Toodle.ts:381
The number of frames rendered since this Toodle instance was created.
Returns
number
limits
Get Signature
get limits():
object
Defined in: Toodle.ts:206
Returns the currently configured Toodle engine limits
See: https://toodle.gg/f849595b3ed13fc956fc1459a5cb5f0228f9d259/limits.html
Example
ts
const instanceLimit: number = toodle.limits.instanceCount;Returns
instanceBufferFields
instanceBufferFields:
number
Maximum number of instance buffer fields - 16 minus the vertex locations used by the engine
instanceBufferSize
instanceBufferSize:
number
Maximum size of instance buffer
instanceCount
instanceCount:
number
Maximum number of rendered instances in the scene per frame
maxTextLength
maxTextLength:
number=256
Maximum length of a single piece of text
shaderCount
shaderCount:
number=32
Maximum number of vfx shaders
textureArrayLayers
textureArrayLayers:
number=64
Maximum number of layers in a texture array
textureSize
textureSize:
number
Maximum dimensions of a single texture
uniformBufferSize
uniformBufferSize:
number
Maximum size of uniforms buffer
zIndex
zIndex:
number=32
Maximum number of unique z-indexes in the scene
maxGpuMemory
Get Signature
get maxGpuMemory():
number
Defined in: Toodle.ts:229
The maximum amount of GPU memory that will be used by the Toodle instance. This is a rough estimate and may not be exact. This will be allocated up front when calling Toodle.attach, and freed when calling toodle.destroy.
Returns
number
maxPixels
Get Signature
get maxPixels():
number
Defined in: Toodle.ts:217
The maximum number of pixels that can be loaded into texture atlases for this toodle instance.
Returns
number
resolution
Get Signature
get resolution():
Resolution
Defined in: Toodle.ts:193
The resolution of the canvas in css or logical pixels.
Example
ts
// devicePixelRatio is 1, resolution is 200x200
<canvas width="200" height="200" style="width: 200px; height: 200px;"></canvas>
// devicePixelRatio is 2, resolution is 100x100
<canvas width="200" height="200" style="width: 100px; height: 100px;"></canvas>Returns
Methods
convertSpace()
convertSpace(
point,options):Point
Defined in: Toodle.ts:347
Convert a point from one coordinate space to another.
Parameters
point
The point to convert.
options
The options for the conversion.
from
"screen" | "world"
to
"screen" | "world"
Returns
The converted point.
destroy()
destroy():
void
Defined in: Toodle.ts:632
Destroy the toodle instance and release its gpu and cpu resources.
Note that calling any methods on the instance after this result in undefined behavior.
Returns
void
draw()
draw(
node):void
Defined in: Toodle.ts:279
call draw in between start frame and end frame to enqueue an instanced draw call.
Parameters
node
Returns
void
Example
ts
toodle.assets.loadTexture("myImage", "assets/image.png");
const quad = toodle.Quad("myImage");
toodle.startFrame();
toodle.draw(quad);
toodle.endFrame();endFrame()
endFrame():
void
Defined in: Toodle.ts:293
call end frame to run through enqueued draw calls and submit them to the GPU.
Returns
void
Example
ts
toodle.startFrame();
// draw stuff
toodle.endFrame();Node()
Node(
nodeOpts?):SceneNode
Defined in: Toodle.ts:461
Create a new container node.
Parameters
nodeOpts?
Returns
Example
ts
const node = toodle.Node();
const child = node.add(toodle.Node());
node.position = [100, 100];
console.log(child.matrix);Quad()
Quad(
assetId,options):QuadNode
Defined in: Toodle.ts:432
Create a new quad node.
Parameters
assetId
string
The ID of the asset to use for the quad. This must have been loaded with toodle.assets.loadTextures.
options
QuadOptions = {}
QuadOptions for Quad creation
Returns
Example
ts
await toodle.assets.loadTextures({
"myImage": new URL("assets/image.png"),
});
const quad = toodle.Quad("myImage");
toodle.startFrame();
toodle.draw(quad);
toodle.endFrame();QuadShader()
QuadShader(
label,instanceCount,userCode,blendMode?):QuadShader
Defined in: Toodle.ts:397
Create a custom shader for quad instances. In some engines, this might be called a material.
Parameters
label
string
Debug name of the shader
instanceCount
number
The maximum number of instances that will be processed by the shader. Note that a worst-case buffer of this many instances will be immediately allocated.
userCode
string
The WGSL code to be used for the shader.
blendMode?
GPUBlendState
The blend mode to be used for the shader.
Returns
Example
ts
resize()
resize(
resolution):void
Defined in: Toodle.ts:135
call resize when the canvas is resized. this will update the projection matrix and the resolution.
Parameters
resolution
the resolution of the canvas in logical pixels.
this should be canvas.clientWidth x canvas.clientHeight and NOT canvas.width * canvas.height
Returns
void
Example
ts
const canvas = document.querySelector("canvas")!
const observer = new ResizeObserver((entries) => {
if (entries.length === 0) return
toodle.resize({ width: canvas.clientWidth, height: canvas.clientHeight })
})
observer.observe(canvas)startFrame()
startFrame(
options?):void
Defined in: Toodle.ts:247
call startFrame before drawing anything. this will create a new encoder and render pass.
Parameters
options?
Returns
void
Example
ts
toodle.startFrame();
// draw stuff
toodle.endFrame();Text()
Text(
fontId,text,textOpts?):TextNode
Defined in: Toodle.ts:465
Parameters
fontId
string
text
string
textOpts?
Returns
attach()
staticattach(canvas,options?):Promise<Toodle>
Defined in: Toodle.ts:610
Attach toodle to a canvas.
Parameters
canvas
HTMLCanvasElement
The canvas to attach toodle to.
options?
ToodleOptions for the creation of the toodle instance
Returns
Promise<Toodle>
A promise that resolves to a Toodle instance.
Example
ts
const canvas = document.createElement("canvas");
const toodle = await Toodle.attach(canvas);