PlayCanvas End-to-End : the quick version

Rate this content
Bookmark

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.

João Ruschel
João Ruschel
121 min
18 Apr, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

This Workshop covers the basics of Play Canvas and guides you through building a game in three phases: scene setup, interactivity, and polishing. Play Canvas is a web-first game engine that runs on your mobile device or browser, making it fully cross-platform. It provides its own hosting solution for easy sharing of your game. The Workshop covers topics like importing assets, scripting, physics, animation, debugging, user interface, audio, and publishing.

1. Introduction to Play Canvas Workshop

Short description:

This workshop will cover the basics of Play Canvas and guide you through building a game in three phases: scene setup, interactivity, and polishing. You'll learn about importing assets, scripting, physics, animation, debugging, user interface, audio, and publishing. Play Canvas provides its own hosting solution for easy sharing of your game.

Hi, everyone. My name is João and this is the workshop for Play Canvas End to End, the quick version. So Play Canvas End to End, the quick version. Quick, not so quick, because it will be around 2 hours of workshop. But yeah, we'll still be able to build a full game in this 2 hours.

So the way that we will structure this workshop is, so just to do some brief introductions, but then I'll talk about Play Canvas. So I'll just talk about, you know, the basic features that we have, you know, like the everything you can do in Play Canvas. And we'll go into the actual core of the workshop where we'll build a game together.

So I split that into 3 different phases. Phase number 1 is like just a general scene set up, so we'll start just importing some assets, placing some stuff around, some obstacles, some ground. We'll talk about that in a second. And we'll talk about launching and like testing your game out. Phase 2 will be about interactivity. So we'll go over scripting, question scripts, we'll go about the event system that we have in Play Canvas, also about how to do physics with rigid bodies. We'll talk about the animation system as well. And then some debugging capabilities using Chrome. And then phase 3 will be about polishing and publishing. So we'll create just some final touches on user interface, how to do audio, and then we'll be able to publish that to the world. We'll be able to do that using Play Canvas' own hosting solution, so you don't need to have anything on your own, you just press a button and you'll have a firmware link to your build of the game, and then you can share it with anyone that you want. And then we'll do some wrap-ups towards the end.

2. Play Canvas Project Phases

Short description:

We'll be using a Play Canvas source project that already contains all the assets and boilerplate code. You can fork the project at any phase if you get lost and start from there. The final project with full documentation will also be available for reference. You can choose to listen and learn or build along with me.

Now, the way that we'll be doing the different phases there in the actual game is that we'll – I prepared a Play Canvas, like a source project that already contains all the assets and the boilerplate stuff that we'll need, and what you guys will be able to do is actually is you take that and make a fork out of it, so you'll be able to copy that as your own project and then make whatever you want with it. I'll be doing the same thing, so I'll be starting from the same like, starter project, and then together we'll build up to the final game. Now each of the phases, we also have a project for those, so let's say that you're in the middle of phase one and you kinda get lost. It's okay, just wait for phase two, and then you can clone, you can fork a project starting at phase two, and then same thing for phase three. If you get lost in the middle of the scripting stuff on phase two, just wait and I'll send the link for phase three, and then you can fork phase three and restart from there, so you have these three kind of like, checkpoints that we can go along the way, and also the final project, like the end thing, with full documentation, with all the features, will also be available for you guys to take a look at, so see the entire thing done as well. So you can also just sit back, take a coffee, tea, water, whatever you fancy, and just listen out how to build the full thing, or you can build out, like together with me as you go through it.

Watch more workshops on topic

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
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 levelFamiliarity with game engines and game development aspects is recommended, but not required.
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.