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.