Make a Game With PlayCanvas in 2 Hours

Rate this content
Bookmark
The video covers how to create a game using PlayCanvas, focusing on various aspects like setting up the scene, adding a player character, and controlling its movement. It explains the use of the speed attribute for the player object and how to tweak it live in the ETSA. The video also discusses the importance of collision detection, using tags to differentiate between entities, and playing sound effects upon collisions. PlayCanvas's entity component system, which includes entities with components like sound, physics, and custom scripts, is highlighted. The video mentions the use of image-based lighting and skybox assets to enhance the visual appeal of the scene. It also delves into UI design, explaining how to anchor UI elements and create responsive designs for different screen sizes. Additionally, the video covers the integration of the Ammo physics engine for adding realistic physics to the game objects. The PlayCanvas engine architecture and its open-source nature under the MIT license are also discussed, along with the benefits of using WebXR for AR and VR experiences.

From Author:

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.

This workshop has been presented at JSNation 2023, check out the latest edition of this JavaScript Conference.

FAQ

Backplane Canvas is a web-first engine focusing on maximizing web capabilities, including support for WebXR for AR and VR experiences and gLTF standards for models and materials. It features an open-source engine runtime under the MIT license, an online editor for building experiences, and support for Draco Mesh Compression for optimizing model sizes.

Developers can contribute to Backplane Canvas by adding features and fixes to its open-source engine runtime. The project accepts contributions from both its core team and the developer community at large.

Using WebXR with Backplane Canvas allows developers to create immersive AR and VR experiences directly on the web, which can be enabled by devices like the Apple Vision Pro. This integration enhances the accessibility and reach of AR/VR applications.

Backplane Canvas documentation uses ES5 for PlayCanvas, an older version of JavaScript. Developers should be aware of the differences when mixing tutorials that may use newer JavaScript versions like ES6, which includes features like classes and modules.

The MIT license allows developers to use, copy, modify, merge, publish, distribute, sublicense, and sell the software and its associated documentation freely. This makes Backplane Canvas an attractive option for developers looking for a flexible and open engine runtime.

In Backplane Canvas, applications are made up of entity objects in a scene. Each entity has components that drive its behavior, such as sound, physics, or custom scripts. Entities can be manipulated through a PC application class that manages all systems and provides access to the scene graph and assets.

Draco Mesh Compression is a feature in Backplane Canvas that allows developers to compress highly detailed meshes significantly, reducing them to a tenth or even a twentieth of their original size. This compression improves loading times and performance of 3D models in applications.

Steven Yau
Steven Yau
116 min
09 Jun, 2023

Comments

Sign in or register to post your comment.

Video Transcription

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.
Tiny Game Live Coding Workshop
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Tiny Game Live Coding Workshop
Workshop
Frank Force
Frank Force
Dive into the captivating world of micro-game development with Frank Force in this interactive live coding workshop. Tailored for both seasoned developers and curious newcomers, this session explores the unique challenges and joys of creating games and demos with extreme size constraints.

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
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
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
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
Top Content
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
Watch video: How Not to Build a Video Game
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
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!
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
Web 3 Gaming: What it is and Why it Matters
JS GameDev Summit 2022JS GameDev Summit 2022
36 min
Web 3 Gaming: What it is and Why it Matters
Web3 gaming enables decentralized identity and finance, allowing game developers to bypass centralized platforms. It is driven by wallets, ERC20 tokens, and NFTs. Web3 games focus on collaborative world-building, ownership, and open-source collaboration. The challenge is achieving decentralization while addressing economic and technological limitations. Web3 aims to redefine the gaming industry by using economic tools and exploring new genres like RPG and RTS games.