6 posts tagged with "tutorial"

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.

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:

🔍 Powerful Search​

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

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).

🌏 Language Selection​

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

👩‍💻 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.

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

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

API Reference​

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

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.

Open Source FTW​

Everything we are announcing today is 100% open source.

• Developer Site on GitHub
• API Reference Site on GitHub

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! ❤️

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!

We've added two new tutorials to our developer site this week.

How to create a real time multiplayer game with Node.js and PlayCanvas - READ MORE

How to use the Facebook SDK in your WebGL application - READ MORE

You can find loads more tutorials on our developer site.

In preparation for your PLAYHACK game jam, why not run through our 6 part tutorial that takes you through building a complete game in PlayCanvas?

The six parts cover: Scene setup, Materials, Scripting, Audio and Particle effects and User Interface

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.

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: