v3.5

3.5.26

Fixed #237 and the Turtle class not being able to make a Sprite

3.5.23

"p5.play" is now called "p5play"!

3.5.20

Fixed a bug that prevented users being unable to set sprite.ani to a SpriteAnimation object. For example:

sprite.ani = loadAni('splat00.png', 7);

The best way is still to use sprite.addAni though:

sprite.addAni('splat00.png', 7);

3.5.12

Added an experimental function sprite.addCollider which adds a collider (fixture) to the sprite's physics body.

It accepts parameters in a similar format to the Sprite constructor except the first two parameters are x and y offsets, the distance the new collider should be from the sprite's (x, y) position.

One limitation of the current implementation is that the collider type can't be changed without losing every collider added to the sprite besides the first. This will be fixed in a future release.

3.5.11

I improved the contro interface for getting input from game controllers, adding support for the GuliKit KingKong 2 Pro Controller. I also fixed a vertex mode polygon positioning bug.

3.5.10

Setting sprite.img or sprite.image still changes the image into a single frame animation that the sprite uses. But getting sprite.img or sprite.image now returns whatever the sprite is displaying, equivalent to sprite.ani.frameImage.

3.5.9

I noticed some of my students changing the collider of sprites to static and then trying to assign the sprite a new position or size, which isn't how static colliders are intended to be used. 🙈 This caused really crazy errors when other physics bodies interact with a static collider that's had its size changed. But... instead of throwing an error if users try to do this, I just fixed the problem by forcing planck to update a static colliders size when it gets changed! So now the following code is totally fine. 😎

sprite = new Sprite();
sprite.collider = 'static';
sprite.w = 100;

3.5.8

Improved user error reports for collide and overlap functions

3.5.7

Fixed an bug with setting a circle sprite's collider type after its creation which would cause the sprite to be a box

3.5.6

Added sprite.stroke and sprite.strokeWeight

3.5.4

Simplified and added more documentation for getting the state of an input from an input device. https://p5play.org/learn/input_devices.html

Also the inputDevice.pressing function now returns the amount of frames the user has been pressing the input. Any non-zero number is considered truthy in JS so the function can still be used in if statements just like before. This change brings the function inline with user expectations from the other "-ing" functions like sprite.colliding and sprite.overlapping.

Fixed a bug that prevented sprite.text = 0 from displaying the text "0" on the sprite.

3.5.0

Improved documentation

v3.4

3.4.13

Using the SpriteAnimation constructor is now equivalent to using loadAnimation. I also fixed inheritance order for animations, if say you had a default animation for the allSprites group and a default for the sprite's immediate parent group, then the sprite would inherent the default animation from it's parent group.

3.4.7

A sprite with no collider ("none") can now be set to have a "dynamic", "kinematic", or "static" collider.

3.4.4

One of my students convinced me that it was a bad decision I made in v3.3.9 (8 days ago) to detach a sprite's scale from the scale of its animations (making it only scale the sprite's collider).

The problem is that if a sprite has a lot of animations, then it's very tedious to go through and scale all of them individually. 😭 I think they're right. If you need to scale a sprite's animation individually you still can, but now it will have a multiplier effect on top of the sprite's scale. I think that makes a lot more sense intuitively. 🧠

Here is the finalized example of using sprite.scale: https://editor.p5js.org/quinton-ashley/sketches/rQZNY7-n6

3.4.2

Fixed changing the collider type of circle sprite, a regression in 3.4.0 made it turn in to a box. If moveTo or moveTowards is used with the mouse object, the sprite or group will not move until the player performs a mouse input or hovers on the canvas.

3.4.1

Fixed origin calculation for non-convex polygon shaped chain colliders. Such as the hourglass in this example:
https://p5play.org/demos/?file=hourglass.js

3.4.0

I made this page to demonstrate movement sequencing via the power of async/await! 🐢
https://p5play.org/learn/sprite.html?page=8

When working on that page, I noticed a problem with polygon/chain sprite rotations: their (x,y) position changed slightly while the sprite was being rotated! OOF.. 😟 TLDR: I fixed it. 🥳

Turns out planck uses the triangle centroid (vertex averaging) method of determining the center of any polygon physics body, meanwhile I was just taking the total width and height and dividing it in half to get the center. So when rotated, a polygon physics body's center would no longer match up with its center in p5.play. Fast forward a whole day of coding later: problem solved! These changes have no effect on sprites with box, circle, and non-polygon shaped chain sprites.

v3.3

v3.3.10

image/ani related bug fixes

v3.3.8

Fixed sprite.scale which, if used more than once, used to not work how one might expect.

sprite.scale = 2; // scale the sprite 2x its original size
sprite.scale = 2; // expectation: should do nothing

In previous versions, if sprite.scale was set to 2 more than once it would double the size of the sprite! This is inconsistent behavior, given how the p5.js scale function works and how animation.scale works. Sprite collider scale values are now always multiples of the original scale the sprite was at, not its current size.

Also HAS SCIENCE GONE TOO FAR?! 👨‍🔬 I made it so sprite.scale and sprite.ani.scale could be used as a number (the average of the x and y scale components) and also as an object with x and y parameters! 🧪

Check out this example: https://editor.p5js.org/quinton-ashley/sketches/rQZNY7-n6

In this update I also added the ability for a sprite's size to be defined by the size of the first image or animation added to it, just like how the Sprite constructor is able to do so if the image/ani is defined in the constructor.

// image/ani in constructor
let ball = new Sprite(ballAnimation);

// image/ani added outside the constructor
let ball = new Sprite();
ball.ani = ballAnimation;

v3.3.5

The v3.3.5 update introduces a preset option called "pixelated" 👾 for the createCanvas function and new Canvas constructor.

//       (width, height, preset)
new Canvas(256, 240, 'pixelated')

Making a retro 8-bit or 16-bit style game with p5.js used to be pretty difficult. That's because by default p5.js runs at high resolutions and low res sketches are displayed at a very small size on modern displays. But now, just by using the "pixelated" preset, p5.js will render chunky pixel goodness! 🕹️

How does it work? It scales the canvas to fullscreen while maintaining the aspect ratio of the dimensions given to it. It sets the CSS canvas property "image-rendering" to "pixelated". It also sets the p5.js pixelDensity to 1 and enables noSmooth.

This is the first preset I've made but in the future I will also make a "mobile" preset for mobile touch screen devices that will create on screen buttons that interface with the contro object in p5.play. 📲

In other news, I've also reverted all the template code links from the jsDelivr CDN back to the p5play.org library location. Students using the CDN links reported problems with p5.play due to their cached library file being outdated. I found out using the CDN links can cache the file on a user's computer for up to seven days! 😲 I'd prefer for users to be able to use the latest features without delay.

v3.3.4

Fixed the sprite.scale setter, if used in p5.js draw and set to the same value it would constantly remove the sprite's collider and add it back at the same scale, now if set to the same scale amount it does nothing, as expected.

v3.3.3

• The p5.js keyIsDown function had already been deprecated in p5.play v3 for a long time. @caleb Foss (they/them)#6472 pointed out that it's unexpected for p5.play to override this function with the non-equivalent kb.pressing function, which only accepts key names and not key codes. So as of this update any use of the p5.js keyIsDown function will result in this error:

Error: The p5.js keyIsDown function is outdated and can't be used in p5.play. Trust me, you'll see that the p5.play kb.pressing function is much better. It uses key name strings that are easier to write and easier to read! https://p5play.org/learn/input_devices.html The p5.js keyIsDown function relies on key codes and custom constants for key codes, which are not only hard to remember but were also deprecated in the JavaScript language standards over six years ago and shouldn't be used in new projects. More info: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

v3.3.2

• changing a sprite's collider property with a single letter now works properly in both the Sprite constructor and the collider setter

v3.3.1

• I fixed a bug caught by @axiom.split . Scaling a sprite's current animation can now be done by setting sprite.ani.scale.x and sprite.ani.scale.y. Each of a sprite's animations can now potentially have their own (x, y) scale.

v3.3.0

There is one breaking change in this release. The sprite.move function's parameter order is now (distance, direction, speed). I promise not to make any more breaking changes like this to existing functions!

I made this change due to feedback from my students. One of my goals with p5.play is to not have many functions that absolutely require more than one parameter. I realized that if I made distance the first parameter in the move function then users could set direction and speed separately.

// single parameter usage
sprite.direction = 'up';
sprite.speed = 5;
sprite.move(50);

// multi-param usage
// (distance, direction, speed)
sprite.move(50, 'up', 5);

Pretty nice huh? The rotate function works similarly.

// single param
sprite.rotationSpeed = 2;
sprite.rotate(90)

// multi-param
// (rotationAmount, speed)
sprite.rotate(90, 2);

If no direction is given the sprite will move 'forward', in the direction of it's current angle of rotation, (like in Turtle programming 🐢 ).

turtle.rotate(90)
turtle.move(50)

The old move function parameter order (direction, speed) can still be used if the direction is a direction name (ex. "up"). The default distance is 1. This is nice for tile based games.

pawn.move('up')

This update also improves the rotate, rotateTo, rotateTowards functions. :kirbyRotate: These functions required a lot of complicated math which makes them valuable additions to p5.play. Check out the new learn page: https://p5play.org/learn/sprite.html?page=7

Thanks to @gabriel Caldas#6327 suggestion, setting the sprite.img or sprite.image property to a p5.js Image can now add that image to the sprite. group.img and group.image work for groups too.

v3.2

v3.2.21

• added a reference page for the sprite rotation methods rotate, rotateTo, rotateTowards https://p5play.org/learn/sprite.html?page=7
• fixed the hourglass demo, now it doesn't lose a grain of sand! https://p5play.org/demos/?file=hourglass.js
• fixed #230 and #231
• fixed bug in the previous version (v3.2.20) that caused new Sprite not working in the p5.js preload function. textSize() doesn't exist until the canvas is created, I didn't know that!

v3.2.12

Bug fixes!

v3.2.6

There are now three distinct movement functions: move (in a direction, at a fixed speed, across a distance), moveTo (to a position, at a fixed speed), and moveTowards (towards a position, at a percentage of the distance to that point). Check them out here: https://p5play.org/learn/sprite.html?page=2

v3.2.2

Any arrow function added to a group will be used as a property setter that will be evaluated when a new sprite from that group is created. https://p5play.org/learn/group.html?page=1 This will work for custom properties now, not just the p5.play sprite properties! To add a function to a Group use the function keyword.

Also the moveTowards function can now accept any object with (x,y) properties.

enemies = new Group();
enemies.health = () => random(50, 70);
enemies.attack = function () {
  enemies.moveTowards(player);
}

v3.2.1

I added a new mode to the Sprite constructor for making regular polygons!

//        ( x,  y, sideLength, polygonName)
new Sprite(250, 100, 80, 'pentagon');

See the updated reference page for more info: http://p5play.org/learn/sprite.html?page=8

v3.2.0

p5.play is now available on Open Processing! Follow me (Quinton Ashley) if you'd like to see what I'll be making with p5.play and I'll follow you back. https://openprocessing.org/user/350295?o=6&view=sketches

I've updated how chain and polygon sprites can be created using the Sprite constructor. There are now three different modes: vertex, distance, and line! For more info see the updated reference page: https://p5play.org/learn/sprite.html?page=7

I also added auto-correcting to user input functions so case insensitive input strings can be used. In previous versions the following boolean condition would always return false, regardless of if the Enter key or left mouse button was pressed. Now It just works!

(kb.presses('enter') || mouse.presses('LEFT'))

v3.1.5

Fixed a bug in the p5.play loadImage function that caused the p5.js internal preloadCount (the count of images, JSON, and other data being loaded in the preload function) to go down by two instead of one when using the addAni function, which would cause p5.js to run the setup function before other preload content had finished loading.

v3.1.4

• replaced the sprite and group property shapeColor (deprecated) with color because it's also used for chains colliders which have lines and not shapes
• changed colliding and overlapping to return frame counts of how long the collision or overlap has occurred (which are truthy values in JS so they can still be treated like booleans in if statements)
• updated the website to have separate pages for collision and overlap function explanations

https://p5play.org/learn/sprite.html?page=5
https://p5play.org/learn/sprite.html?page=6

v3.1.2

CRITICAL fixes for the collided and overlapped functions which were not working correctly. Also I fixed the input held function so that it only returns true if the user releases an input after it was held for 12 frames or longer.

v3.1.0

This update contains changes to the input system. I'm sorry to make these changes kind of late in p5.play v3's development but I think it's important p5.play uses the same verb conjugations for all timing related functions.

I was inspired to make these changes because I'm adding a new paradigm for custom collide and overlap event handling that won't require the use of callback functions and can be used in if statements. This feature has been highly requested by my students!

In technical terms, single frame initiative timing functions will use present simple tense naming. Continuous timing functions will use present continuous tense naming. Single frame cessation timing functions will use past simple tense naming. For example collides, colliding, and collided. This will allow users greater control over customizing collision and overlap event response!

The past tense function, pressed, will become an alternative to released. presses will return true on the first frame the user presses an input. holds will return true when the users holds an input for 12 frames (by default). The mouse functions for detecting hovering will be changed to hovers, hovering, and hovered.

Here is an example of the new collides function in action. The "old way" will still work too.

// old way
player.collide(block, () => {
  block.remove();
});

// new way
if (player.collides(block)) {
  block.remove()
}

collides returns true on the first frame a sprite collides with a target sprite, colliding returns true while a sprite collides with a target, and collided returns true on the frame when contact between the sprite and target ends. overlaps, overlapping, and overlapped functions will be available too.

v2

v2.3.0 📓

• creating sprites with the Sprite constructor new Sprite(x, y, w, h) is equivalent to using createSprite so extending Sprite can work properly
• revised the Asteroids example to include winning and losing mechanics
• added a different version of the Asteroids game that demonstrates how Sprite can be extended

v2.2.8 👾 🪄 💨

• added a new method Group.cull
• the primary use case for Group.cull is the easy removal of offscreen sprites
• I also added an culling example to the p5.play site

v2.2.6 🌴

• Quadtree fix when removing sprites #124

v2.2.5 🚇 🤓

• tunneling fix with dev logs for demo purposes #214

v2.2.4 🟢 🔵 🟠 🟡 🔴 ⚪

• use createSprite(x, y, r) with three parameters to easily create a placeholder circle
• new feature, you can add animations to groups, sprites can use the animations added to a group it belongs to

v2.2.3 🎥

• cameraPop, cameraPush bug fix #218

v2.2.2 😮

Big update to p5.play which now uses ES6 JavaScript classes!

• instanceof works on instances of these classes
• fully backwards compatible with version 1