-
-
Notifications
You must be signed in to change notification settings - Fork 186
Get Started
Before you start using p5.play you should be familiar with p5.js and JavaScript. If you're a total beginner I recommend trying my free IntroToJS course.
You can find interactive examples and documentation at p5play.org.
You can use this template sketch for the online p5.js editor to quickly start making your own games with p5.play.
You can easily use p5.play on your own website by adding the following script tags to your html within the head or body tag.
<!-- Version 3 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/addons/p5.sound.min.js"></script>
<script src="https://p5play.org/v3/planck.min.js"></script>
<script src="https://p5play.org/v3/p5.play.js"></script><!-- Version 2 (Legacy) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/addons/p5.sound.min.js"></script>
<script src="https://p5play.org/lib/p5.play.js"></script>This guide is for users that would like to use p5.play in their own projects locally, without the use of an online code editor. This takes a bit of time to setup but when you're done you will have a much smoother and faster development experience compared to using online editors.
-
Install Visual Studio Code.
-
Create a new folder for your p5.play game project.
-
Download p5.js, Planck.js as well as p5.play.js. Copy these files into your project folder.
-
Open from the empty example included in the p5.js complete distribution and link Planck.js and p5.play.
<script src="planck.min.js"></script>
<script src="p5.play.js"></script>- OR Create a new file called "index.html" from scratch and copy/paste this code into it.
<!DOCTYPE html>
<html>
<head>
<title>p5.play Example</title>
<script src="p5.min.js"></script>
<script src="planck.min.js"></script>
<script src="p5.play.js"></script>
<script src="sketch.js"></script>
</head>
<body>
</body>
</html>Scroll down for Part 2
-
Install Visual Studio Code and npm. The nodejs package manager (npm) is a command line tool that helps JavaScript developers easily keep their code libraries updated.
-
Create a new folder for your p5.play game project.
-
Use the following commands in a Windows PowerShell or macOS/linux Terminal window.
cdis the command for changing directories (folders).
cd path/to/your/ProjectFolder
npm i p5.js
npm i p5.play- Create a new file called "index.html" from scratch and copy/paste this code into it.
<!DOCTYPE html>
<html>
<head>
<title>p5.play Example</title>
</head>
<body>
<script src="node_modules/p5/lib/p5.min.js"></script>
<script src="node_modules/p5/lib/addons/p5.sound.min.js"></script>
<script src="node_modules/planck/dist/planck.min.js"></script>
<script src="node_modules/p5.play/p5.play.js"></script>
<script src="sketch.js"></script>
</body>
</html>- Create a new file called "sketch.js" and copy/paste this code into it.
function setup() {
createCanvas(800,400);
createSprite(400, 200, 50, 50);
}
function draw() {
background(255,255,255);
drawSprites();
}-
Install the Live Server extension for Visual Studio Code.
-
Right click on your "index.html" file and click "Open with Live Server".
-
If a square appears on the webpage you are all set! Go on the p5.play website to see examples.
-
Optionally you can download all the p5.play examples.