FAQ

My school firewall is blocking p5play.org!

If the p5play library can't be loaded, it may be because your school firewall is blocking the p5play.org domain. This is likely because the domain has "play" in the name and many school firewalls block online gaming websites. Contact your school's network administrator to whitelist it. In the meantime you can use these CDN links to the p5play library.

<script src="https://cdn.jsdelivr.net/npm/p5play@3/planck.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5play@3/p5play.js"></script>		

How do I remove the "made with p5play" intro loading screen?

Similar to Unity, with the free version of p5play there is no way to replace or remove the "made with p5play" intro loading screen. I think that's a fair deal, since you get to use the software for free. If people like your game they can look up p5play and learn how to make their own games!

In the future though, p5play Patreon members will have the option to remove/replace the intro loading screen.

Note that even when given the option to remove the "made with Unity", "made with Godot", and similar intros, many professional game developers choose to keep it in their game as a way of crediting the game engine developers.

Is p5play's kb input system compatible with non-QWERTY keyboards?

Yes! Some keyboards don't start with QWERTY on the top row, such as French AZERTY keyboards. Modern browsers map other keyboard layouts to the standard English QWERTY layout.

That means in p5play the special up, down, left, right properties of kb that correspond to WASD on QWERTY keyboards, correspond to ZQSD on French AZERTY keyboard. This can be disabled by setting p5play.standardizeKeyboard to false. See MDN's KeyboardEvent code documentation for more info.

How do I enable auto-completion in Visual Studio Code?

In your project folder use npm or bun to install @types/p5 and p5play, then add this "jsconfig.json" file:

 {
  "compilerOptions": {
    "target": "ESNext"
  },
  "include": [
    "*.js", "**/*.js",
    "node_modules/@types/p5/global.d.ts",
    "node_modules/p5play/p5play.d.ts"
  ]
}

Why does VSCode auto-completion only work inside the p5.js setup function?

Because p5.js requires sprites to be defined in the setup (or preload) function. So even if you define the sprite's variable on the file level, VSCode still sees it as undefined outside the scope of the function it was assigned new Sprite().

To fix this problem in p5.js define your variable's type with a JSDoc comment:

/**
 * @type {Sprite}
 */
let mySprite;

function setup() {
  mySprite = new Sprite();
}

But this may be more trouble than it's worth. What if you could get rid of the setup function all together? You can with q5.js!

new Q5();

let mySprite = new Sprite();

function draw() {
  mySprite.color = 'blue';
}

Now you can enjoy VSCode auto-completion in any function, since the mySprite variable was declared as a Sprite on the file level.

Why isn't my Third Party controller working correctly?

Unfortunately, some Third Party manufacturers fail to use HTML5 Gamepad API standard mappings.

p5play supports non-standard mappings, but you'll have to remap the controller yourself. Here's the standard mapping for reference:

https://github.com/quinton-ashley/p5play/blob/3.18.9/p5play.js#L9391

Here's a simple example of how you could do a remapping:

if (contro.id.includes('GuliKit')) {
	contro._btns.a = 1;
	contro._btns.b = 0;
	contro._btns.x = 3;
	contro._btns.y = 2;
}