Upcoming Code Editor upgrade to Monaco!

We have almost completed work on moving the Code Editor from Code Mirror to Monaco, the same editor that powers the ever popular, Visual Studio Code.

Look familiar? 👀

With this upgrade, it will give developers:

  • Much better performance, especially with large text files
  • More editing functionality through the command palette
  • Mouse driven features such as Cmd/Ctrl + Click to jump to definition, hover for documentation and a context menu!

There will be some small differences which will include:

  • Syntax color changes as we’ve opted to use Monaco’s default theme, which should be comfortably familiar to VS Code users
  • Some hotkeys/shortcuts will be different (e.g moving a line up/down)

When can we use it?

We are still working through a few issues but planning to release the Editor as early as next week. Keep your eyes peeled!

Editor API beta release

Over the last few months, we have been working on an Editor API that allows users to automate tedious tasks and extend the base functionality.

We are excited to announce the beta release of the API today and would love to see how the PlayCanvas community will use it to power up their workflows!

Creating and modifying Entities and Assets are all accessible via the API. Add/remove components, scripts, tags, assets, create and instantiate templates and so much more.

Here’s a great example where a context menu can be added to select Entity parents in the hierarchy to speed up scene editing:

From: https://twitter.com/yaustar/status/1446504233537314816

Or add random Entities to the scene:

More examples and links to the documentation can be found in the User Manual.

Join our Open Source Effort

The PlayCanvas team is a big advocate for open source. This is why we have taken the step to open source the Editor API on GitHub. We want to build the best possible API for you so we need your help:

  • Log issues and features requests (or leave feedback on those submitted by others).
  • Submit pull requests for fixes and API changes.
  • Watch the repo or individual issues to get progress updates in real time.

Get experimenting and show us your work with the Editor API in the forums!

Changes to our Editor and Engine releases

Up to now, our process for releasing new features and fixes to the PlayCanvas Engine and Editor has been rather simple.

As features and fixes are ready, we would plan a release and test against a comprehensive list of PlayCanvas projects and the Engine examples. Once testing is passed, it would be released to everyone that is using the playcanvas.com service and Editor.

This has served us well for many years and meant that users always had the latest features of the Engine.

However, as the features of the Engine are get bigger and more complex and users’ projects grow in scale and size, this release process needs to change to match our users’ needs for stability and transparency with releases.

Over the next month or so, we will be rolling out the following changes (finer details subject to change):

Minor and patch versions updates

Minor releases (1.XX.0 where the XX is the minor version) are currently reserved for API additions/changes in the Engine and/or larger feature releases while patch releases (1.XX.YY where YY is the patch version) could be bug fixes and minor features.

Going forward, patch releases will strictly only be for bug fixes which will generally improve stability and user expectations.

New functionality will only be added in minor releases.

Renaming Engine’s GitHub ‘master’ branch to ‘dev’

To better reflect our usage of the ‘master’ branch, we will be renaming it to ‘dev’ over the next few days as that is where our features and updates are merged prior being released.

As the branch is typically unstable, the naming of ‘dev’ is more descriptive of the branch’s purpose.

This will have knock on effects to forks of the Engine repo on GitHub. If you have a fork of the Engine, please read the following documentation from GitHub to see how this affects you.

The steps from the documentation will be:

$ git branch -m master dev
$ git fetch origin
$ git branch -u origin/dev dev
$ git remote set-head origin -a

Alternatively, creating a fresh clone from GitHub will work as well.

Separate Engine releases from the Editor

The Editor will no longer be affected by the latest release of the Engine on the GitHub repo. The Engine version used in the Editor will only be updated via an Editor release.

While it means that Editor users will have to wait a little longer to get the latest features, it allows extra time for users to test their projects against the upcoming Engine release and report any issues.

However, users will still be able test early against the latest Engine releases using the use_local_engine param on the Launch Tab. We will also be looking at making this process easier to do via the Editor, such as an option in the Launch Tab settings.

Once this has been tested against the Editor and any reported issues are fixed, the Editor will be released with this version of the Engine.

Feedback

This is currently the high level plan and we would love to hear your thoughts and suggestions on the forums!

Import full model hierarchy into PlayCanvas

The PlayCanvas team are very excited to fully release the Import Hierarchy pipeline feature in the PlayCanvas Editor!

With this feature enabled, any imported FBX will create a Template asset which contains the full node hierarchy as entities representing sub-models of the model. This gives users greater flexibility in manipulating mesh instances in the model directly in the Editor.

Render assets will also be created that can be used with the Render Component and allow users to add an individual mesh instance of a model in the scene.

For example, an imported car FBX model would create several Render assets, doors, wheels, wipers etc. The wheel assets can be used independently from the rest of the car model to create a tire wall.

With the model hierarchy being editable in the Editor, this opens a number of uses that weren’t possible before:

  • Attach other Entities and/or models as part of another model’s hierarchy such as adding a helmet to a character’s head.
  • Move/Rotate/Scale sub-models directly in the Editor such as moving/adding/removing chairs around a house model.
  • Use the Render assets elsewhere in the scene for decoration or customization.
  • Add components and/or scripts to individual nodes such as attaching particle effects to animated parts.

However, please note that while the Model Component is compatible with both the Animation and Anim (State Graph) Component, the Render Component/Import Hierarchy feature is only compatible with the Anim (State Graph) Component.

Going forward, we will be marking the Model and Animation Components as ‘legacy’ but if you have an existing project using these components, please do not worry. None of the existing functionality is being removed and you will not be forced to update projects to the new pipeline for continued development. Although no new features will be added to the Model Component, the PlayCanvas team will continue to fix bugs with the existing pipeline until our next major version (2.0.0) of the engine at the earliest.

You can even mix both pipelines in the same project if you wish to take advantage of the features in the new pipeline in an existing project. However, please bear in mind that this can add complexity to the project code.

The Import Hierarchy asset task will be enabled by default for newly created projects. If you would like to use this feature in your existing project, please consult User Manual for details.

Useful Links

Important Information about macOS Safari 15

We have been made aware of a critical issue regarding WebGL content and the release of macOS Safari 15 earlier this week where previously published content could fail to load.

Apple are aware of this and have a fix in place on WebKit. However, we don’t know when this fix will be included in an update release.

PlayCanvas have released v1.46.5 of the engine to workaround this issue.

Actions to take

If you have a PlayCanvas application that was published between Feb 2020 and 21st Sep 2021, the application will fail to load on Safari 15 until Apple releases an update and users update their devices.

Please republish the application so that it uses the latest engine release or update the engine version to v1.46.5 if you are using NPM.

If you need to stay on particular version of the PlayCanvas engine, it is possible modify the engine or build a custom version and include the following code change from this PR.

If you have any issues or questions, please message us on the forum where we will provide support.

PlayCanvas Showcase 2021

We are very excited to release our very first showcase reel, showing some of the very best WebGL browser games and experiences made with PlayCanvas to date!

Many thanks for to all our partners and users that allowed us to show their awesome content in the video:

See more games and experiences at Awesome PlayCanvas!

Transitioning to the New Render Component and Fill Mode API

Hi everyone!

This is a different blog post to what we normally do but with some big changes coming soon, we wanted to give context and advance notice of said changes and more importantly, how they may affect you across the PlayCanvas platform.

Moving from Model Component model import pipeline to new Render Component

As part of the work to enable the import of a model’s hierarchy into the scene, we have introduced Render Asset and Render Component as new features of the Engine and Editor.

Import hierarchy preview

Going forward, this will be the default way to render imported models and gives developers greater flexibility in manipulating mesh instances in the model directly in the Editor. For example, with the new pipeline you can import a house FBX model and only use the door mesh instance in the scene instead of the whole model.

However, please note that while the Model Component is compatible with both the Animation and Anim (State Graph) Component, the Render Component/Import Hierarchy feature is only compatible with the Anim (State Graph) Component.

(More details will be shared in an upcoming announcement, stay tuned for that!)

For existing projects using the Model Component, please do not worry. None of the existing functionality is being removed and you will not be forced to update projects to the new pipeline for continued development. Although no new features will be added to the Model Component, the PlayCanvas team will continue to fix bugs with the existing pipeline.

You can even mix both pipelines in the same project if you wish to take advantage of the features in the new pipeline in an existing project. However, please bear in mind that this can add complexity to the project code.

The expected changes over the upcoming months are as follows:

  • Add/Rename a Project Setting to switch between the two mesh import pipelines (Currently, this is the ‘Import Hierarchy’ setting).
  • Newly created projects will default to using the Render Component pipeline.
  • developer.playcanvas.com tutorials will be updated to use Render Component (playcanvas.github.io engine examples have already been updated).
  • The template projects (Blank Project, Model Viewer Starter Kit, VR Starter Kit) will be updated to use Render Component.
  • User Manual updates and mitigation steps from using the Model Component to Render Component pipelines.

Breaking change to PlayCanvas Fill Mode API

We want to make the PlayCanvas engine as flexible as it can be for the widest range of use cases for web developers. To do so, we occasionally have to break existing APIs that may have made sense when they were first introduced, but not today.

One such API is the Fill Mode related functions on pc.Application:

These functions affect the canvas element size in the DOM as it was long assumed that apps made with PlayCanvas are either be iframed or fullscreen/full document apps.

However, there has been more requests about having more control of the canvas element rather than using iframes. The main reason is that it’s easier to communicate between the page and the PlayCanvas app without having to deal with iframe messaging.

Some examples:

Currently, there is no way for an end user to have full control of the canvas without patching the engine.

Also, from an architecture point of view, the Engine shouldn’t handle the size or position of the element that it is rendering in. The responsibility should be on the web document and how it wants to layout the elements on the page (e.g through stylesheets).

These changes will affect you directly if you are:

  • An engine only user as the HTML boilerplate will handle the resizing and positioning of the canvas. We will provide examples in the examples folder.
  • Any developer that changes the fill mode or resizes the Canvas at runtime. Some developers do this to handle landscape and portrait mode more effectively.

The current plan is deprecate these functions and move them to globally accessible functions on the page on the PlayCanvas Editor environment with as little (if any) downtime for projects or developers. At worst, you should only get a few warnings in the console log regarding deprecated function use.

The steps will be as a gradual rollout:

  • Add globally accessible JS functions in the Editor and publish HTML templates to replace the fill mode functions from the Engine.
  • Change the PlayCanvas Editor and published build templates to patch the Engine functions to call the global functions above with warnings that they should use the global functions instead.
  • Update the User Manual to document these global functions.
  • Deprecate the affected engine functions with warnings and reference the User Manual page.

Questions and Feedback

If there are any questions or areas that you would like to be made more clear, please post in the forums and the PlayCanvas team will be there to answer.

The PlayCanvas team are appreciative of your patience and continued support as we go through this transition!

Build Facebook Playable Ads with PlayCanvas!

PlayCanvas are very excited to announce official support for Facebook Playable Ads! 🚀

What are Playable Ads?

Playable ads are small, interactive previews of a game or app that give a taste of the experience before the user choses to download it. These ads from Facebook are normally shown in the news feed or with ‘rewarded ads’ in other games and apps in exchange for an in-game/app reward.

Facebook case studies consistently show that playable ads:

  • Increase click-through rates
  • Increase install conversion over traditional ads
  • Increase return on ad spend
  • Reduce cost per install

Combine that with the fully featured PlayCanvas game engine which includes:

  • Best in class visual editor with live updates across multiple devices
  • 3D models and animation with physically based rendering (PBR)
  • 2D animated sprites
  • Responsive user interface authoring

And you have a very powerful combination to create fantastic and engaging experiences to reach your audience.

Sounds great! How do I get started?

We’ve published the official exporter tool on GitHub with instructions in our User Manual Documentation. It’s very simple to set up!

Once configured, creating the file(s) for upload to Facebook is just a single command, shown in real time below.

That is how quick and easy it is! 💪 And it supports both the single 2MB HTML and 5MB zip bundle formats used by Facebook. 🙌

If you’re new to PlayCanvas, why not sign up today for free. We can’t wait to see what you make! Let us hear your feedback in the forums!

Useful links:

P.S We are considering doing a follow up technical post on how the tool works under the hood. Let us know in the comments below if that is something you would be interested in. 👇

Basis Texture Compression arrives in PlayCanvas

PlayCanvas implemented the fantastic hardware texture compression workflow in 2016 which allowed users to build bigger and better WebGL apps, even on low memory devices like mobile phones.

JPGs and PNGs are great formats for transmission over a network because they tend to compress nicely. But once the images are downloaded and handed over to WebGL, they must decompressed to raw RGB(A) data. Using hardware compressed textures is important as decompression is performed in silicon on the GPU which avoids the need to utilize lots of memory.

This 4096 x 2048 Earth texture is a 1.81MB JPG but takes a huge 33.6MB of VRAM when uncompressed!

With hardware supported texture formats, we can retain a similar file size while massively reducing the amount of VRAM as seen below.

Now, what if you reduce file sizes as well as the VRAM usage?!

That is what Basis gives us and it is available right now to all PlayCanvas users! Compressing the same Earth texture above, produces a 521KB Basis Texture.That’s a 68% saving over the smallest file size from the hardware supported formats 💪

Basis is an open sourced, texture codec that produces a highly compressed intermediate file format (.basis) that can be converted at runtime to a format that the hardware supports in GPU hardware. This means that there is only a single (and often smaller) file that is created to support a wide range of platforms.

As shown by the numbers above, Basis offers huge savings in download times for the end user which in turn, can lead to improved user engagement and click to open metrics for your application.

Let’s check out a real world example. The Space Base Texture Compression Demo from our previous blog article achieves the following VRAM usage and download sizes (gzipped) on desktop in Chrome:

Note that VRAM usage for Basis would ordinarily be the same as with legacy compression. However, PlayCanvas compresses normal maps to YYYX format instead of XYZ for improved quality so utilization is marginally higher.

That’s a big saving of 52% (19.5 MB) in download size from updating the project to use Basis while using a similar amount of VRAM!

And all it takes is a couple of clicks in the asset inspector to get started with Basis compression!

To recap

  • Only need one compressed file vs many (DXT, PVR, ETC1, ETC2, etc) for every texture
  • Up to 2.8 times smaller files and faster download times for your users
  • Up to 10x faster compression times with Basis
  • Similar savings in VRAM usage as hardware supported formats
  • Same one click process to compress textures

Basis texture compression is available to everyone right now so start crunching down those textures! More information can be found in the documentation including a migration guide.

And if you’re new to PlayCanvas, why not sign up today. We can’t wait to see what you make! Let us hear your feedback in the forums!

Introducing JSON Script Attributes

JSON Script Attributes Preview

We have levelled up the Script Attributes that makes it much easier to organize and group related attributes together.

Using JSON, developers are able to define a schema for a data object that has multiple attributes and have them grouped together in the Inspector.

In the example below, we have created a JSON schema with the name ‘settings’ and has the attributes ‘gravity’, ‘startingHealth’ and ‘godMode’.

GameManager.attributes.add('settings', {
    type: 'json',
    schema: [{
        name: 'gravity',
        type: 'number',
        default: -9.8
    }, {
        name: 'startingHealth',
        type: 'number',
        default: 20
    }, {
        name: 'godMode',
        type: 'boolean',
        default: false
    }]
});

In the Inspector, the data object is shown as a collapsible section:

Collapsible script settings

Even better, these data objects can made into an array! This is a huge improvement over having to organize multiple attribute arrays that was difficult to update and error prone to maintain.

Example JSON schema for an array of enemies:

GameManager.attributes.add('enemies', {
    type: 'json',
    schema: [{
        name: 'health',
        type: 'number',
        default: 10
    }, {
        name: 'type',
        type: 'number',
        enum: [
            { 'Close Combat': 1 },
            { 'Range': 2 },
            { 'Both': 3 }
        ]
    }, {
        name: 'templateAsset',
        type: 'asset',
        assetType: 'template'
    }],
    array: true
});

Becomes the following in the inspector which is so much cleaner!

Arrays of JSON objects

Read more in the documentation and let us hear your feedback in the forums!