Ten Days of PlayCanvas

This was supposed to be the “A week of PlayCanvas” post, but I kept putting it off.

I’ve had a chance to familiarize myself with PlayCanvas and wanted to take a few minutes to capture my thoughts. When I decided to check out PlayCanvas I wanted to learn just enough about it to be able to decide if I should go further. Could it be a valuable tool to add to my toolkit for building VR? Having spent the last ten days tinkering with the editor and making small scenes and demos, I can answer that. I definitely want to keep working with this tool. A few days ago I wrote an introduction post in the forum that captured my excitement pretty well. I’ll copy a few points from that post below.

Working in the Editor has been amazing. I’m constantly amazed at the attention to detail that went into every feature. It’s easy to learn and familiar to anyone who has worked in 3D before. Seeing changes to entities taking place in real time on other devices blew me away.

Having spent time in Unity in the past, the Editor was familiar to me right away. The controls were easy to learn, and the simple layout of the tools and panels makes it easy to navigate. It also works well on a laptop screen, something that I can’t say for other 3D editors that I’ve worked with.

The Launch button will open a new window or tab with a playable preview of the scene you are working in. Changes that you make in the editor show up right away. This is especially useful for VR development. I can leave the WebXR session running on a Quest while making changes to objects in a scene, then just put the headset on to see the changes. Most of the time I don’t need to do the “exit, reload, enter” dance that I’m used to with other tools.

Scripting is also impressive. The code editor is clean and easy to use, with great auto-complete and documentation. Scripting is packed full of quality-of-life improvements such as component attributes or the asset registry.

The code editor that is bundled with PlayCanvas will be familiar to anyone who has worked with VS Code, or any Monoco Editor for that matter. While it has minimal settings, it has reasonable defaults setup. I think the only setting that I changed was enabling “format on save”. The editor has access to the same file structure as the Asset section of the main Editor. You can open the code editor at the start of your work and keep it open, working with as many files as needed. Anything you do in the code editor window is available right away in the main Editor. You can even setup script hot reloading if you want to work on a complex script without having to reload a running scene preview.

I think the things that have impressed me the most are the things that I haven’t had to do. No NPN setup, no package.json file, dependency management, command line tools, etc. This stuff drives me nuts when starting a new project. PlayCanvas lets me skip all of that and jump right into creativity mode and start making things.

Honestly, it took me about three days to notice this. I was having so much fun making things, that it took me some time to realize that I didn’t have to do any work to set up the projects that I was working on. When I started the Canvatorium project a few months back, I spent the first week or so just setting up the project. The dev tools, local web server, SSL issues, port issues, npm packages, loaders, etc. I didn’t have to deal with any of that with PlayCanvas. Personally, this is one area that makes me want to work with PlayCanvas more and more. I want more projects in my life that are about creativity and fewer that involve build tools and bundlers.

The mind-blowing part?All of this is happening in a web browser.

What did I make?

Aside from a short tutorial project, most of my work so far has been in a project called vrhermit’s playcanvas playground. I didn’t set any particular objective for this project, instead opting to use it as a place to explore PlayCanvas while playing with a few ideas. You can find more about these demos in the Bloops section of my site or by checking out the full project.

Demo One: Vapor Derp

Exploring basic scene editing, meshes, materials, scripting.

Demo Two: Random Boxes

Populating a scene with pseudo-random boxes.

Demo 3: Video

Rendering video on a texture

Demo 4: Watcher

Replacing the Video Texture with a texture that renders the view of a camera in the scene. Note that this didn’t work for the VR camera but worked well for any other camera.

Demo 5: Interface

Another demo with the giant computer, this time with an interactive user interface. It’s just a concept, but it includes HTML that is interactive. Clicking the button will print another line on screen.

What next?

In the short term, I don’t know. Hopefully over the next few weeks I’ll begin to form a better idea of when I’d use PlayCanvas for a project over something else such as Babylon JS. In the meantime, I’m going to keep learning and tinkering on whatever comes to mind.