Members
canvas
p5.js canvas element. Use this property to get the canvas'
width and height
Properties:
Name | Type | Description | ||||||
---|---|---|---|---|---|---|---|---|
canvas |
p5.Canvas
|
|||||||
Name | Type | Description |
---|---|---|
w |
Number
|
the width of the canvas |
h |
Number
|
the height of the canvas |
loadImg
Just like the p5.js loadImage function except it also caches images
so that they are only loaded once. Multiple calls to loadImage with
the same path will return the same image object. It also adds the
image's url as a property of the image object.
mouse :Mouse
Get user input from the mouse.
Stores the state of the left, center, or right mouse buttons.
Type:
-
Mouse
world :World
The planck physics world. Use this to change gravity and offset the
sprite's coordinate system.
Type:
Methods
Canvas()
Creates a p5.js canvas element. Includes some extra features such as
a pixelated mode. See the Canvas learn page for more information.
animation(ani, x, y, r, sX, sY)
Displays an animation. Similar to the p5.js image function.
Parameters:
Name | Type | Description |
---|---|---|
ani |
SpriteAnimation
|
Animation to be displayed |
x |
Number
|
position of the animation on the canvas |
y |
Number
|
position of the animation on the canvas |
r |
Number
|
rotation of the animation |
sX |
Number
|
scale of the animation in the x direction |
sY |
Number
|
scale of the animation in the y direction |
background()
Just like the p5.js background function except it also accepts
a color pallette code.
colorPal(c, palette)
Gets a color from a color palette
Parameters:
Name | Type | Description |
---|---|---|
c |
String
|
A single character, a key found in the color palette object. |
palette |
Number
|
Object
|
Can be a palette object or number index in the system's palettes array. |
Returns:
a hex color string for use by p5.js functions
createCanvas(width|ratio, height)
Use of `new Canvas()` is preferred.
p5play adds some extra functionality to the p5.js createCanvas
function.
In p5play, a canvas can be created with an aspect ratio in the
format `width:height`. For example `new Canvas('16:9')` will create
the largest possible canvas with a 16:9 aspect ratio.
This function also disables the default keydown responses for
the arrow keys, slash, and spacebar. This is to prevent the
browser from scrolling the page when the user is playing a game
using common keyboard commands.
Parameters:
Name | Type | Description |
---|---|---|
width|ratio |
Number
|
|
height |
Number
|
createGroup() → {Group}
Use of `new Group()` is preferred.
Creates a new group of sprites.
Returns:
- Type:
-
Group
createSprite() → {Sprite}
Use of `new Sprite()` is preferred.
Creates a new sprite.
Returns:
- Type:
-
Sprite
delay(millisecond) → {Promise}
Delay code execution in an async function for the specified time
or if no input parameter is given, it waits for the next possible
animation frame.
Parameters:
Name | Type | Description |
---|---|---|
millisecond |
Number
|
Returns:
- Type:
-
Promise
A Promise that fulfills after the specified time.
Example
async function startGame() {
await delay(3000);
}
drawSprite()
Deprecated, use sprite.draw() instead.
allSprites.draw() is run automatically at the end of the p5.js
draw loop, unless a sprite or group is drawn separately within the
draw loop.
drawSprites()
Deprecated, use group.draw() instead.
allSprites.draw() is run automatically at the end of the p5.js
draw loop, unless a sprite or group is drawn separately within the
draw loop.
fill()
Just like the p5.js fill function except it also accepts
a color pallette code.
getFPS() → {Number}
Use this function to performance test your game code. FPS, amongst
the gaming community, refers to how many frames a game could render
per second, not including the delay between when frames are shown
on the screen. The higher the FPS, the better the game is
performing.
Returns:
- Type:
-
Number
The current FPS
keyIsDown(key)
Obsolete: Use kb.pressing(key) instead.
Parameters:
Name | Type | Description |
---|---|---|
key |
String
|
play(sound) → {Promise}
Awaitable function for playing sounds.
Parameters:
Name | Type | Description |
---|---|---|
sound |
p5.Sound
|
Returns:
- Type:
-
Promise
Example
await play(sound);
spriteArt(txt, scale, palette)
Create pixel art images from a string. Each character in the
input string represents a color value defined in the palette
object.
Parameters:
Name | Type | Description |
---|---|---|
txt |
String
|
Each character represents a pixel color value |
scale |
Number
|
The scale of the image |
palette |
Number
|
Object
|
Color palette |
Returns:
A p5.js Image
Example
let str = `
...yyyy
.yybyybyy
yyyyyyyyyy
yybyyyybyy
.yybbbbyy
...yyyy`;
let img = spriteArt(str);
stroke()
Just like the p5.js stroke function except it also accepts
a color pallette code.