Constructor
new Sprite(xopt, yopt, coloropt, …imageSrcs)
Creates a sprite.
Creates a sprite. Use createSprite for instantiation.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
x |
number |
<optional> |
0 | The starting x-coordinate. |
y |
number |
<optional> |
0 | The starting y-coordinate. |
color |
string |
<optional> |
'white' | The sprite's color. |
imageSrcs |
string |
<repeatable> |
Optional image sources for costumes. |
- Source:
Extends
Members
border :boolean
Whether sprite is touching a border
.Whether sprite is touching a border
Type:
- boolean
- Source:
color :string
Sprite color
.Sprite color
Type:
- string
- Source:
controls :Object|null
Control scheme for movement
.Control scheme for movement
Type:
- Object | null
- Source:
costumes :Array.<HTMLImageElement>
List of costume images
.List of costume images
Type:
- Array.<HTMLImageElement>
- Source:
currentCostume :number
Index of the current costume
.Index of the current costume
Type:
- number
- Source:
currentPath :Array.<{x: number, y: number}>|null
Current pen path
.Current pen path
Type:
- Array.<{x: number, y: number}> | null
- Source:
direction :number
Facing direction in degrees (Scratch style: 0=up, 90=right)
.Facing direction in degrees (Scratch style: 0=up, 90=right)
Type:
- number
- Source:
doStopAtBorder :boolean
If stop at Border or not
.If stop at Border or not
Type:
- boolean
- Source:
events :Object.<string, Array.<function()>>
Event listeners
.Event listeners
Type:
- Object.<string, Array.<function()>>
- Source:
gravity :number
Gravity effect in pixels per frame
.Gravity effect in pixels per frame
Type:
- number
- Source:
hidden :boolean
Whether the object is hidden
.Whether the object is hidden
Type:
- boolean
- Overrides:
- Source:
hitbox :boolean
Whether sprite acts as a hitbox
.Whether sprite acts as a hitbox
Type:
- boolean
- Source:
loadedCostumes :Array.<HTMLImageElement>
Loaded costume images
.Loaded costume images
Type:
- Array.<HTMLImageElement>
- Source:
opacity :number
Opacity for rendering (0.0-1.0)
.Opacity for rendering (0.0-1.0)
Type:
- number
- Source:
penColor :string
Pen color
.Pen color
Type:
- string
- Source:
penDown :boolean
Whether the pen is down for drawing
.Whether the pen is down for drawing
Type:
- boolean
- Source:
penThickness :number
Pen thickness in pixels
.Pen thickness in pixels
Type:
- number
- Source:
penTrails :Array.<Array.<{x: number, y: number}>>
Array of pen paths
.Array of pen paths
Type:
- Array.<Array.<{x: number, y: number}>>
- Source:
prevX :number
Previous x position
.Previous x position
Type:
- number
- Source:
prevY :number
Previous y position
.Previous y position
Type:
- number
- Source:
scale :number
Scaling factor for size
.Scaling factor for size
Type:
- number
- Source:
size :number
Sprite size in pixels
.Sprite size in pixels
Type:
- number
- Source:
speed :number
Movement speed in pixels per frame
.Movement speed in pixels per frame
Type:
- number
- Source:
touchCallbacks :Array.<{target: Sprite, callback: function()}>
Touch event callbacks
.Touch event callbacks
Type:
- Array.<{target: Sprite, callback: function()}>
- Source:
touchEndCallbacks :Array.<{target: Sprite, callback: function()}>
Touch-end callbacks
.Touch-end callbacks
Type:
- Array.<{target: Sprite, callback: function()}>
- Source:
touchOnceCache :Set.<Sprite>
Cache for touch-once events
.Cache for touch-once events
Type:
- Set.<Sprite>
- Source:
touchOnceCallbacks :Array.<{target: Sprite, callback: function()}>
Touch-once callbacks
.Touch-once callbacks
Type:
- Array.<{target: Sprite, callback: function()}>
- Source:
touching :Array.<Sprite>
List of sprites currently touching
.List of sprites currently touching
Type:
- Array.<Sprite>
- Source:
useOriginalSize :boolean
Use original image size for rendering
.Use original image size for rendering
Type:
- boolean
- Source:
x :number
X position
.X position
Type:
- number
- Overrides:
- Source:
y :number
Y position
.Y position
Type:
- number
- Overrides:
- Source:
Methods
center()
Moves this sprite to the exact centre of the canvas.
Moves this sprite to the exact centre of the canvas.
(Assumes the global canvaX / canvaY match the canvas size.)
- Source:
changeOpacityBy(delta)
Changes the sprite opacity by a delta.
Changes the sprite opacity by a delta.
Parameters:
| Name | Type | Description |
|---|---|---|
delta |
number | Amount to add to current opacity. |
- Source:
changePenThicknessBy(thickness)
This changes the pen thickness of the sprite pen.
This changes the pen thickness of the sprite pen.
Parameters:
| Name | Type | Description |
|---|---|---|
thickness |
* | The thickness value of the sprite pen you want to add/minus. |
- Source:
changeScaleBy(scale)
Change scale(for images costume only!) of the sprite.
Change scale(for images costume only!) of the sprite.
Parameters:
| Name | Type | Description |
|---|---|---|
scale |
* | The scale you want to add/minus for your sprite. |
- Source:
changeSizeBy(size)
Change size(for no-image costume only!) of the sprite.
Change size(for no-image costume only!) of the sprite.
Parameters:
| Name | Type | Description |
|---|---|---|
size |
* | The scale you want to add/minus for your sprite. |
- Source:
changeSpeedBy(speed)
Parameters:
| Name | Type | Description |
|---|---|---|
speed |
* | The speed you wanna change for the sprite if controlschem is set. |
- Source:
changeXBy(x)
Changes the sprite’s position(ONLY X).
Changes the sprite’s position(ONLY X).
Parameters:
| Name | Type | Description |
|---|---|---|
x |
number | The x-coordinate you want to add/minus. |
- Source:
changeYBy(Y)
Changes the sprite’s position(ONLY Y).
Changes the sprite’s position(ONLY Y).
Parameters:
| Name | Type | Description |
|---|---|---|
Y |
number | The y-coordinate you want to add/minus. |
- Source:
clearPen()
Clears all pen trails for this sprite.
Clears all pen trails for this sprite.
- Source:
clone(copyClickopt) → {Sprite}
Creates a Scratch‑style clone of this sprite.
Creates a Scratch‑style clone of this sprite.
‑ Copies visuals & state (but NOT "click" handlers by default)
‑ Adds itself to drawables
‑ Fires "cloneStart" on the clone
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
copyClick |
boolean |
<optional> |
false | If true, copy the parent's "click" callbacks as well. |
- Source:
Returns:
The newly created clone.
- Type
- Sprite
delete()
Completely removes this sprite (or clone) from the game.
Completely removes this sprite (or clone) from the game.
‑ Takes itself out of drawables
‑ Clears pen trails so nothing is left on screen
‑ Notifies listeners with a "delete" event
Subsequent calls are ignored.
- Source:
doHitbox(hitbox)
Add hitbox for the sprite.
Add hitbox for the sprite.
Parameters:
| Name | Type | Description |
|---|---|---|
hitbox |
* | Type true/false only! |
- Source:
draw()
Draws the object on the canvas.
Draws the object on the canvas. To be overridden by subclasses.
- Overrides:
- Source:
getCollisionSize() → {Object}
Gets the sprite’s collision size.
Gets the sprite’s collision size.
- Source:
Returns:
The collision dimensions.
- Type
- Object
goBack(n)
Move this sprite backward n layers (default 1).
Move this sprite backward n layers (default 1). Equivalent to Scratch “go back (n) layers”.
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
n |
number | 1 |
- Source:
goForward(n)
Move this sprite forward n layers (default 1).
Move this sprite forward n layers (default 1). Equivalent to Scratch “go forward (n) layers”.
Parameters:
| Name | Type | Default | Description |
|---|---|---|---|
n |
number | 1 |
- Source:
goTo(x, y)
Sets the sprite’s position.
Sets the sprite’s position.
Parameters:
| Name | Type | Description |
|---|---|---|
x |
number | The new x-coordinate. |
y |
number | The new y-coordinate. |
- Source:
goToBack()
Send this sprite to the very back layer (bottom).
Send this sprite to the very back layer (bottom).
- Source:
goToFront()
Bring this sprite to the very front layer (topmost).
Bring this sprite to the very front layer (topmost).
- Source:
isClicked(mouseX, mouseY) → {boolean}
Checks if the sprite is clicked at the given coordinates.
Checks if the sprite is clicked at the given coordinates.
Parameters:
| Name | Type | Description |
|---|---|---|
mouseX |
number | The mouse x-coordinate. |
mouseY |
number | The mouse y-coordinate. |
- Source:
Returns:
True if clicked within the sprite’s bounds.
- Type
- boolean
isHovered(mx, my) → {boolean}
Checks if the sprite is hovered at the given coordinates.
Checks if the sprite is hovered at the given coordinates.
Parameters:
| Name | Type | Description |
|---|---|---|
mx |
number | The mouse x-coordinate. |
my |
number | The mouse y-coordinate. |
- Source:
Returns:
True if the mouse is over the sprite.
- Type
- boolean
isOnGround() → {boolean}
Checks if the sprite is on the ground (touching a hitbox).
Checks if the sprite is on the ground (touching a hitbox).
- Source:
Returns:
True if touching a hitbox sprite.
- Type
- boolean
isTouching(other) → {boolean}
Checks if this sprite is touching another sprite.
Checks if this sprite is touching another sprite.
Parameters:
| Name | Type | Description |
|---|---|---|
other |
Sprite | The other sprite to check collision with. |
- Source:
Returns:
True if the sprites are touching.
- Type
- boolean
isTouchingColor(targetColor, toleranceopt) → {boolean}
Checks if the sprite is touching a specific color on the canvas.
Checks if the sprite is touching a specific color on the canvas.
Parameters:
| Name | Type | Attributes | Default | Description |
|---|---|---|---|---|
targetColor |
Object | The target color to detect, with r, g, b, and a properties. |
||
tolerance |
number |
<optional> |
0 | Optional tolerance for color matching. |
- Source:
Returns:
True if the sprite is touching the target color.
- Type
- boolean
on(eventName, callback)
Registers an event listener.
Registers an event listener.
Parameters:
| Name | Type | Description |
|---|---|---|
eventName |
string | The event name. |
callback |
function | The callback function. |
- Source:
onTouch(target, callback)
Registers a callback for continuous touch with a target.
Registers a callback for continuous touch with a target.
Parameters:
| Name | Type | Description |
|---|---|---|
target |
Sprite | The sprite to check for touching. |
callback |
function | The callback to execute on touch. |
- Source:
onTouchEnd(target, callback)
Registers a callback when touch with a target ends.
Registers a callback when touch with a target ends.
Parameters:
| Name | Type | Description |
|---|---|---|
target |
Sprite | The sprite to check for touch ending. |
callback |
function | The callback to execute on touch end. |
- Source:
onTouchOnce(target, callback)
Registers a callback for a single touch event with a target.
Registers a callback for a single touch event with a target.
Parameters:
| Name | Type | Description |
|---|---|---|
target |
Sprite | The sprite to check for touching. |
callback |
function | The callback to execute once on touch. |
- Source:
pointInDirection(deg)
Points the sprite in an absolute direction (Scratch style).
Points the sprite in an absolute direction (Scratch style). 0 = up, 90 = right, 180 = down, −90 / 270 = left
Parameters:
| Name | Type | Description |
|---|---|---|
deg |
number | New direction in degrees. |
- Source:
pointTowards(target)
Points the sprite towards another sprite.
Points the sprite towards another sprite.
Parameters:
| Name | Type | Description |
|---|---|---|
target |
Sprite | The target sprite to face. |
- Source:
setColor(color)
Parameters:
| Name | Type | Description |
|---|---|---|
color |
* | The color you want to set for sprite. |
- Source:
setControlScheme(scheme)
Sets the control scheme for the sprite.
Sets the control scheme for the sprite.
Parameters:
| Name | Type | Description |
|---|---|---|
scheme |
Object | The control scheme object. |
- Source:
setCostume(index)
Sets the current costume by index.
Sets the current costume by index.
Parameters:
| Name | Type | Description |
|---|---|---|
index |
number | The costume index. |
- Source:
setGravity(gravity)
Makes sprite have gravity but not real physics!
.Makes sprite have gravity but not real physics!
Parameters:
| Name | Type | Description |
|---|---|---|
gravity |
* | Type the gravity force power value and type 0 if you dont want gravity! |
- Source:
setOpacity(alpha)
Sets the sprite opacity.
Sets the sprite opacity.
Parameters:
| Name | Type | Description |
|---|---|---|
alpha |
number | Value between 0 and 1. |
- Source:
setPenThickness(thickness)
This sets the pen thickness of the sprite pen.
This sets the pen thickness of the sprite pen.
Parameters:
| Name | Type | Description |
|---|---|---|
thickness |
* | The thickness of the sprite pen. |
- Source:
setScale(scale)
Set the scale(for images costume only!) of the sprite.
Set the scale(for images costume only!) of the sprite.
Parameters:
| Name | Type | Description |
|---|---|---|
scale |
* | The scale you want to set for your sprite. |
- Source:
setSize(size)
Set the size(for no-image costume only!) of the sprite.
Set the size(for no-image costume only!) of the sprite.
Parameters:
| Name | Type | Description |
|---|---|---|
size |
* | The size you want to set for your sprite. |
- Source:
setSpeed(speed)
Parameters:
| Name | Type | Description |
|---|---|---|
speed |
* | The speed you wanna set for the sprite if controlschem is set. |
- Source:
setX(x)
Sets the sprite’s position(ONLY X).
Sets the sprite’s position(ONLY X).
Parameters:
| Name | Type | Description |
|---|---|---|
x |
number | The new x-coordinate. |
- Source:
setY(y)
Sets the sprite’s position(ONLY Y).
Sets the sprite’s position(ONLY Y).
Parameters:
| Name | Type | Description |
|---|---|---|
y |
number | The new y-coordinate. |
- Source:
startDrawing()
Starts drawing a pen trail at the current position.
Starts drawing a pen trail at the current position.
- Source:
stopDrawing()
Stops drawing the pen trail.
Stops drawing the pen trail.
- Source:
trigger(eventName, eventObject)
Triggers all callbacks for an event.
Triggers all callbacks for an event.
Parameters:
| Name | Type | Description |
|---|---|---|
eventName |
string | The event name. |
eventObject |
Object | The event data. |
- Source:
turnLeft(deg)
Turns the sprite counter‑clockwise by a given number of degrees.
Turns the sprite counter‑clockwise by a given number of degrees.
Parameters:
| Name | Type | Description |
|---|---|---|
deg |
number |
- Source:
turnRight(deg)
Turns the sprite clockwise by a given number of degrees.
Turns the sprite clockwise by a given number of degrees.
Parameters:
| Name | Type | Description |
|---|---|---|
deg |
number |
- Source:
update()
Updates the sprite state.
Updates the sprite state. Override in specific sprites.
- Source: