Make a Game With PlayCanvas in 2 Hours

Rate this content
Bookmark

In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.


Table of the content:

- Introduction

- Intro to PlayCanvas

- What we will be building

- Adding a character model and animation

- Making the character move with scripts

- 'Fake' running

- Adding obstacles

- Detecting collisions

- Adding a score counter

- Game over and restarting

- Wrap up!

- Questions


Workshop level

Familiarity with game engines and game development aspects is recommended, but not required.

Steven Yau
Steven Yau
116 min
09 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Backplane Canvas is a web-first engine that embraces open standards like WebXR and supports gLTF. PlayCanvas offers an online editor for building experiences visually. The engine architecture, JavaScript gotchas, and API documentation are discussed. The workshop covers setting up the project and scene, creating a player character, writing custom scripts, adding physics and game elements, and implementing UI and sound effects. Additional resources and suggestions for improving the game are provided.

Available in Español

1. Introduction to Backplane Canvas

Short description:

Backplane Canvas is a web-first engine focused on using the web to the fullest. It embraces open standards like WebXR and supports gLTF. The engine runtime is open source under the MIT license and has a small footprint. PlayGamers offers an online editor for building experiences visually. The latest features include GLTF support with Draco Mesh Compression. Many users have created multiplayer games and experiences for platforms like WeChat and Snapchat. We're building a small game to control a player character and prevent balls from hitting the floor.

Okay, so Backplane Canvas is a web-first engine, which means they are very much focused on using the web to the fullest. This includes embracing open standards such as WebXR for AR and VR experiences, which I'm very happy that the Apple Vision Pro is enabling at some point, and supporting the gLTF standards for models and materials. The engine run time, the code that has published experiences are ran on is fully open source under the MIT license, and they've had many developers contribute features and fixes over the years as well as core team.

In terms of size, it's got a footprint of less than 400k after gzip and the developers are looking to support tree-taking from the editor to make it even smaller so it could strip out code that from the engine that you're not using. It uses a and the core product from PlayGamers is an online editor which you can see here and we can build experiences visually, add models, upload textures, modify materials through the browser, which is what we'll be using today. And here's a selection of the latest features. I won't go into all of them now, but the ones I do want to call out is the GLTF support with Draco Mesh Compression which allows developers to take really high detail meshes and compress them down into a tenth or twentieth of a size. So almost like one-fifth of the size. It's something they've recently added and is super impressive.

And so many of the users for PlayCanvas have made some really great multiplayer games, games for multiplayer. So let me just step back a bit. So basically what I have today, who I am, features. Many of the users have made great multiplayer games and games with meshed platforms such as WeChat, Snapchat, Facebook, Metaverses, Shopping Experiences, and Product Visualizations and Configurators. You can find trailers for this under MaplePlayCanvas and linked here. And this is what we're looking to build today. We're looking to build a very small game where you control your player character and to stop the balls from hitting the floor. So basically try and knock them away from the floor because when they hit the floor, your health will fall. Okay.

2. JavaScript and Play Canvas Gotchas

Short description:

Our plan is to go through as many features as we can, including the foundation features. Before that, let's talk about some gotchas with JavaScript and Play Canvas. Play Canvas uses an older version of JavaScript, and it doesn't have a build step to transpile code. JavaScript has no value types and allows dynamic property addition at runtime. Functions are objects and can be powerful but require careful scope management. We'll also cover the Play Canvas engine architecture and how to navigate the API documentation.

So, what's our plan is to basically go through as many features as we can. the foundation features. But before that, I also want to talk about how so what talk a little bit about some gotchas with JavaScript and Play Canvas. So all documentation for Play Canvas use the EDSA uses jest ES5 which as you everyone knows is quite an old version of JavaScript. If you're looking for like if you're new to JavaScript especially and you're looking at tutorials around JavaScript, you'll find that they're gonna be written in using ES6, which is classes and modules. Generally is not a problem as long as you're kind of aware of the differences, but bear this in mind when you mix tutorials from outside of Play Canvas and the stuff from Play Canvas itself. And this is because like Play Canvas doesn't really have a build step yet, where it transpiles JavaScript down to ES5. What it does, it takes the code that you write, and runs it directly into the browser. So, technically as long as the browser can run the code, you can use it within the Play Canvas editor. And I don't know if there's any people who are new to JavaScript here, but if you are, there's some people who come from Unity and C Sharp. There's a few gotchas that people run into when they first use Play Canvas and not use JavaScript before. Which is, JavaScript has no concept of value types, so objects are always parsed by reference. And there's dynamic language where you can add properties dynamically at run time. So you don't have the static type checking that you normally have with languages like C Sharp and C++. And also, more importantly, functions are objects. So you can parse functions as objects across the code, which makes it incredibly powerful, but it's also something to be aware of when you're dealing with scope. And I want to also cover the Play Canvas engine architecture, at least very broadly. This is something that we're going to come back to throughout the workshop, and also use this to help show how to navigate the API documentation especially.

Watch more workshops on topic

How to make amazing generative art with simple JavaScript code
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
How to make amazing generative art with simple JavaScript code
Top Content
WorkshopFree
Frank Force
Frank Force
Instead of manually drawing each image like traditional art, generative artists write programs that are capable of producing a variety of results. In this workshop you will learn how to create incredible generative art using only a web browser and text editor. Starting with basic concepts and building towards advanced theory, we will cover everything you need to know.
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
The open source PlayCanvas game engine is built specifically for the browser, incorporating 10 years of learnings about optimization. In this talk, you will discover the secret sauce that enables PlayCanvas to generate games with lightning fast load times and rock solid frame rates.
Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
LittleJS is a super lightweight game engine that is easy to use and powerfully fast. The developer will talk about why he made it, what it does, and how you can use it to create your own games. The talk will include a demonstration of how to build a small game from scratch with LittleJS.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.
Boost the Performance of Your WebGL Unity Games!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
Boost the Performance of Your WebGL Unity Games!
Unity, when deployed on the web, faces three critical challenges: build size, memory usage, and overall performance. This lecture delves deep into advanced optimization techniques to help you address each of these issues. Attendees will gain insights into:
- Effective strategies for optimizing textures, audio, and models.- A detailed analysis of our ASTC experimentation with Unity, shedding light on the unexpected results despite Unity's claims.- A comprehensive guide to Unity's memory profiling tool and its implications.- An exploration of lesser-known Unity settings that remain underutilized by many developers.
Additionally, we'll introduce our proprietary tool designed specifically for Unity optimization. We will also showcase CrazyGames' developer dashboard, our platform that enables developers to monitor and enhance the performance of their web-based games seamlessly. 
Join us to equip yourself with the latest strategies and tools to elevate your Unity web gaming projects.