Skip to main content

6 posts tagged with "tutorial"

View All Tags

Massive Upgrade for the PlayCanvas Developer Site

· 4 min read

Today, we are excited to announce the brand new PlayCanvas Developer Site and API Reference Manual!

Developer Site

Let's start by taking a look at the new Developer Site, home of the PlayCanvas User Manual and Tutorials.

Developer Site Landing Page

Migrating from Metalsmith to Docusaurus

Since PlayCanvas was born in 2011, the basic look of the Developer Site has changed little. The content was written in Markdown and converted to a static HTML site using a tool called Metalsmith. Customizing the site to our needs meant we had to write many Metalsmith plugins (for localization, navigation and more) and a lot of HTML and CSS to style the pages as we wanted.

13 years later, the world of static site generators has moved on with lots of exciting new options! We evaluated Docusaurus and decided to migrate over to it.

What's New

So what made Docusaurus so compelling? First up, the migration was going to be straightforward because, like Metalsmith, Docusaurus consumes Markdown and outputs a static site. And much of the customization we did for Metalsmith is supplied 'out-of-the-box' with Docusaurus. So that's all great. But the new site comes with lots of cool new features we known you're going to love:

The site now integrates Algolia for advanced searching of the documentation.

Developer Site Search

This is a quantum leap over what came before. Try it (by pressing CTRL + K) - you'll be amazed. 🤯

🌒 Light and Dark Modes

Easily switch between light and dark themes (by clicking on the sun/moon icon top-right).

Developer Site Light and Dark Modes

🌏 Language Selection

Switch language from the nav-bar. At the moment, we're shipping with Japanese translations.

Developer Site Localization

👩‍💻 Edit on GitHub

As you might expect, the Developer Site is Open Source (MIT). Every page now has a handy link to the content on GitHub. Spot a mistake? Now can you fix it yourself and improve the docs for the community!

🧭 Easier Navigation

At the top of each page, you'll find 'Sidebar Breadcrumbs' which allow you to click back up the page hierarchy.

Developer Site Breadcrumbs

To the right of each page, you'll find a table of contents which can be a big help, especially for long pages.

Developer Site Table of Contents

And at the bottom of each page, you'll find 'Previous' and 'Next' links that allow you to read through the User Manual sequentially.

Developer Site Previous and Next Links

API Reference

We are not just launching a new Developer Site today. We are also launching our brand new, upgraded API Reference Manual!

API Reference Site

Migrating from JSDoc to TypeDoc

Since the start, we have relied on JSDoc to generate our API reference manual. But since then, we have seen the introduction of TypeDoc which offers some major advantages over JSDoc.

🎨 High Quality Default Theme

While it's not perfect, the default TypeDoc theme is gorgeous and a big improvement over our custom JSDoc theme. It provides:

  • Light and dark modes (like the main developer site)
  • Links to the source code on GitHub
  • Grouping of API into related categories
  • Powerful search (press / to activate it)
  • ...and much more!

It's a great foundation for us to begin with and we can customize the default theme to our requirements as needed.

🔗 Easy Combining of APIs

Did you know that PlayCanvas develops frameworks and libraries other than the PlayCanvas Engine? There's PCUI, a front-end framework for web-based tools. There's the PlayCanvas Editor API for automating the interface. And more! The new API reference collects all of the PlayCanvas APIs into a single manual.

API Reference Site APIs

Open Source FTW

Everything we are announcing today is 100% open source.

We want to empower to community to get involved and make PlayCanvas better for everybody. It's never been easier to submit your first pull request on GitHub. So why wait - get started today! ❤️

Tutorials section expanded!

· One min read
Steven Yau
Partner Relations Manager

We have just revamped the tutorials page to include many more code samples of functionality with PlayCanvas. These include common use cases such as creating an Orbit Camera around an Object, Load Assets with a Progress Bar and more.


To make it even easier to find the what you need, we have also added a filter to help narrow down the search. So if you are looking at moving a camera via user input? We have it covered!


The tutorial section will grow as we write more samples so if there is anything you would like to see, let us know on our developer forums!

Making an HTML5 Game: Lunar Lander

· One min read

A video tutorial recreating arcade classic, Lunar Lander in 3D.

This is our second video tutorial. It's a bit longer (around 45mins) but it covers a lot of stuff. Uploading 3D models, physics coding, collision events, input controllers, playing audio and publishing games to the web. It's a great introduction to lots of major features of PlayCanvas.

Enjoy and don't forget to leave us feedback on the forums.

Making an HTML5 Game: Pong

· One min read

A video tutorial on how to make a Pong clone using PlayCanvas.

Will has put together a short video showing how you can make a Pong game using PlayCanvas. It will take you through creating Primitive shapes, how to use the built-in physics engine, and some gameplay scripting to move the player paddles. It's a great introduction to PlayCanvas and building games.

Check it out on YouTube or below: