PlayCanvas is one of the most popular ways to build 3D interactive web content today. But before 3D graphics was a thing, there was 2D graphics!
Today we’re excited to launch the first part of our 2D graphics support. Great for building classic 2D games.
There are 5 great new features which will help you build 2D games using PlayCanvas.
Texture Atlas Asset
The new Texture Atlas asset is an enhanced texture asset which includes additional frame data for splitting your texture into multiple Sprites.
The Sprite Asset is a set of frames from a texture atlas. This can be a single button or a complete flip-book style animation.
The Sprite Component is a new Component that you can add to your Entities. The Sprite Component let’s you play back sprite animation clips and build up your new 2D world.
The Sprite Editor is a new tool inside the PlayCanvas Editor to create and edit Texture Atlases. The Sprite Editor lets you quickly define frame regions in your texture and it’s also used to define the 9-slicing region.
9-Slicing is a very useful technique for creating scalable user interface elements from 2D textures. Using the Sprite Editor to define a border on an image, you can now use Sprites in your Element components to build your UIs. Watch this space for more User Interface features coming soon.
All these features are available today inside the PlayCanvas Editor. Take a look at the documentation and let us know what you think on the forum.
Building user interfaces in graphical applications provides a unique challenge. Today we’re pleased to launch two new components to help you build user interfaces inside your WebGL application.
From today you’ll find two new components available in the PlayCanvas Editor.
The screen component is the container for your 2D objects. This component acts a parent to all the 2D elements you are adding and defines resolution and resize behavior.
The element component renders text and images into your screen. These can form the building blocks of more complex user interface features like buttons, or just use them to display content in 2D.
The element component also features useful layout features like anchoring and pivot points and the Group Element.
Supporting text in PlayCanvas is trivial now. Simply drag and drop a TTF font file from your computer into the asset panel and we’ll convert it into our special multi-channel signed distance field font asset which means that text can be scaled and render an almost any size and remain crisp and readable.
Of course, we have documentation and tutorials to help you get started. Feel free to let us know what you think on the forum.
Today we’re excited to unveil the new code editor for all our PlayCanvas users. We’ve been taking your feedback since we launched Scripts 2.0 last year and we’ve updated the code editor to make working on scripts in PlayCanvas much easier.
Some of the new features introduced by the new editor:
File view & tabs
The most obvious difference is now we let you browse all your text files in the code editor and open multiple files in the same window. No more hunting through browser tabs to find that file you were editing.
Goto Anything (Ctrl/Cmd+P) is the power users dream option. Jump to any text file in your project with a few keystrokes.
Enhanced keyboard shortcuts
We’ve had a complete overhaul of the keyboard shortcuts. All your standard text editor shortcuts are there. Including using multiple cursors and expanding selections.
Better find & replace
We’ve beefed up the find and replace with a new interface and easy to use extras like case-senstive and regular expressions.
We hope you enjoy using the new code editor as much as we do!
Today we’re really excited to announce support for WebVR into the PlayCanvas Editor.
This week Google announced that WebVR 1.1 (the latest current version of the spec) should be released in Chrome for Android in January 2017. But for a feature as complex as virtual reality, browser support is only one piece of the puzzle. At PlayCanvas, we know how important great tools are to making high quality experiences so today we’re launching our WebVR engine integration to make sure that you can create applications right now.
Optimized Engine Support
The PlayCanvas graphics engine is an advanced WebGL graphics engine. We’ve worked hard to make sure our renderer is optimized specifically for stereo rendering. Unlike most engines we don’t simply render the scene twice for each eye. Instead, our renderer knows that a lot of the main render loop is the same for each eye. So, for example, expensive operations like culling, sorting draw calls and setting uniforms and render states only have to be done once before we draw the scene for each eye. This can lead to a significant performance increase, particularly on mobile.
Polyfill for unsupported platforms
It’s still early days for WebVR which means it’s not yet supported on all platforms. When you enable WebVR in your PlayCanvas project, we make sure your browser can support it using the WebVR polyfill library from Google. PlayCanvas is smart enough to load the library only if you need it.
We’ve just launched “Scripts 2.0”, a complete re-design and re-implementation of the scripting system for PlayCanvas applications. Our goals were to fix an array of small irritations that had built up over using the PlayCanvas scripting for the last few years and take the opportunity to clean up the interface and simplify the creation and usage of scripts.
Here’s a list of the improvements you can enjoy with the new script system:
rapid iteration by hot-swapping code at run-time
real-time collaborative code editing
script concatenation and minification for publishing
better error handling and fault tolerance
full folder support for script assets
multiple script definitions in a single file
simpler interface and boilerplate
If you choose to, you can now allow your scripts to update all running instances of your application. We dynamically reload scripts after they change. By implementing a single swap() function, you can transfer state into your new script instance and carry on as if nothing had happen. Except you’ve got all your new code!
Real-time collaborative code editing
Now that scripts are first-class assets, we now support real-time collaboration in the Code Editor. This means you’re no longer in danger overwriting other people’s code. In fact, you can see it appear as they type.
To help support this, we’ve also improved the error handling and fault tolerance of scripts while they’re running. This means bad scripts won’t bring your game screeching to a halt, preventing everyone from working.
How do you find these new scripts?
Scripts 2.0 is live right now and any new projects you create will have the new script system enabled. However, if you’re not quite ready to move to the new system or you need some of the features that are currently only available with the old system, you can still create projects using the “Legacy Script System”. Look for the option in the new project dialog.
For many years, lightmapping has been the mainstay of achieving low cost yet realistic lighting. However, it’s rarely seen in WebGL applications because generating lightmaps requires third-party modelling applications with complex workflows in order to bake out textures.
All that changes today as we introduce Runtime Lightmap Generation into the PlayCanvas Engine.
Google’s Cardboard VR is an excellent low cost device for experiencing virtual reality via your phone and a simple head mounted display. At PlayCanvas we immediately saw the benefit of using WebGL to display 3D VR experiences right in your browser. With WebGL VR you can distribute VR content quickly and easily to every user with a mobile web browser. With nothing to install there is no barrier to entry.
Our demonstration project shows you a example of a simple interactive VR scene that you can use to learn.
On a mobile device just tap the view above to enable the Cardboard VR mode. Our tutorial will walk you through how to add VR to your projects.
This is the start of VR support in PlayCanvas and we’ll be working to integrate Cardboard VR and WebVR closer into the editor as they get more popular.
From today we now support HTTPS URLs on all published applications. So anytime you see a link to something on http://playcanv.as you can also use https://playcanv.as. After a short period of testing we’ll be changing all default links to point to the HTTPS versions of the applications, though we will keep support for non-secure HTTP versions for the short term to ensure compatibility for applications that require a non-secure page.
There are many reasons to use a secure HTTPS page, especially if you are doing transactions or taking money. But primarily for you as a PlayCanvas developer we’re supporting HTTPS for two reasons.
With an HTTPS page you can now embed the your PlayCanvas applications in any other page that requires a secure URL. Of note, this includes Facebook Canvas games, so you can now publish your PlayCanvas game directly to Facebook.
Secure Powerful Features
Major browsers such as Chrome and Firefox are currently in the process of securing all “powerful features”. Which means only allowing access to these features on secure pages. These features include:
Encrypted Media Extensions
Fullscreen API (including pointer lock)
getUserMedia (webcam access)
What this means for you
As a developer our transition to HTTPS should be seamless and you shouldn’t notice. Though one area to watch out for is that an HTTPS page is not able to load resources from a non-secure page. So if you are loading fonts or images from other servers that are insecure they may be blocked (depending on exactly how you load them) when running your PlayCanvas application from HTTPS. The solution is to make sure all external resources are loaded via HTTPS.
You can now choose whether to run the pipeline automatically when you import an asset. This gives you more control over the options you apply to each individual asset.
Non-power of two textures
You can now disable the conversion of textures to the nearest power of two. If you’re using images in HTML or in your user interface. This can be very useful.
When you start iterating on models you often want to upload a new FBX file, but only update some parts. For example, you will often have created your own materials and don’t need to original materials from the FBX file. You can now choose which parts of a model file you wish to import, model, animations, materials or textures.
In other news:
You can now access your project settings directly in the Editor. Click the settings cog to see the update settings panel.
You can now upload scripts from your computer into the asset panel.
Model meta data
When you upload a model, we now show you properties like the number of vertices and mesh instances in the asset properties.
If you right-click an asset in the asset panel. There is references option which will tell you everywhere in the scene where that asset is currently used.