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.

Screen Component​

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.

Element Component​

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.

Learning more​

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, Adobe announced that it is to kill Flash by 2020.

Back in early 2011, we foresaw this event and started work on PlayCanvas. We knew that Flash would still be around for some years, but we also knew that building any replacement for content creators would be a titanic task. Over six years later, PlayCanvas has established itself as the go-to toolset for building WebGL-content. The browser-based Editor application is lightweight yet exceptionally powerful. The apps produced are super-lightweight and perform great even on older mobile devices. And our modern, cloud-based approach enables developers to collaborate and iterate like never before.

Flash never did quite manage to establish Stage3D as a standard. WebGL, on the other hand, has cemented itself as the dominant force for web-based 3D, and has now reached version 2.0. In fact, PlayCanvas partnered with Mozilla back in January to launch the new standard. Flash has always been more popular for 2D based content and the remaining Flash developers must now find a path to migrate away. Spoiler alert: we're working hard on improving our support for 2D. While it's possible to make superb 2D content with PlayCanvas today (check out Master Archer, one of the top titles on Facebook Instant Games), we recognize there's still more to be done in both the engine and the tools. We have some exciting announcements in the works regarding this so keep your eyes peeled.

Bottom line: Flash devs - we've got your back and we'll be working hard to ensure you've got the tools and run-time you need.

The PlayCanvas website and editor will be unavailable intermittently from 9am UTC tomorrow (Saturday 10th June) while we perform server maintenance. We will endeavor to keep downtime to a minimum but the period of downtime may be several hours. Stay informed with updates via this blog post and on our Twitter Account.

We apologies for any inconvenience this may cause.

Update: Maintenance is complete at 2.30pm UTC. Thanks for you patience.

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​

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-sensitive and regular expressions.

We hope you enjoy using the new code editor as much as we do!

Today we're excited to launch the WebVR Lab, a living project built by the PlayCanvas team to help developers learn about creating scalable and responsive WebVR applications for all devices.

Try the lab right now:

Try it in fullscreen

WebVR is a new standard that makes VR experiences accessible to the billions of web browser users and enables developers to reach a user on any type of VR headset. Using the web to deliver VR makes sharing experiences as easy as clicking a link, with no downloads required.

Chrome 56 for Android, launched this week, supports WebVR using the Daydream View headsets.

“WebVR allows developers to build an experience that scales across all VR platforms from Google Cardboard and Daydream to desktop VR headsets, while also supporting 2D displays. Different platforms have different capabilities and the PlayCanvas WebVR Lab project gives developers an example of how to manage that diversity.” Megan Lindsay, Google Product Manager for WebVR

We launched our official WebVR support back in November and the WebVR Lab marks the company’s next step to ensure that developers can quickly and efficiently build the most beautiful WebVR experiences possible.

The WebVR Lab elegantly scales from a simple Cardboard headset to a full desktop VR setup. Devices supported by the project include Google Cardboard, Daydream View, GearVR, Oculus Rift (with Touch controllers) and HTC VIVE.

The project is to be continually updated with new experiments that implement core interactions for VR on the web. Including teleportation, manipulating virtual objects, user interface and controllers.

The first fruits of our work on the WebVR Lab is the Tracked Controllers project, where developers can take our sample code and quickly integrate the Daydream Controller into their project.

Read more on TechCrunch, UploadVR and on the Google Chrome blog.

See you in Virtual Reality!

Today is a huge milestone for real-time graphics on the web. Mozilla has launched Firefox 51, the first browser to bring WebGL 2 to the masses. WebGL has been around since 2011, the year when PlayCanvas was founded. 6 years on, the open standard for web graphics has taken a huge leap forwards, exposing far more GPU capabilities to developers, making for ever richer, more beautiful experiences.

To mark the launch of WebGL 2, Mozilla and PlayCanvas have teamed up to build 'After the Flood'.

EXPERIENCE 'AFTER THE FLOOD' NOW

'After the Flood' illustrates many of the key, new aspects of WebGL 2.

• Transform feedback: to animate leaf particles on the GPU.
• 3D Textures: used to create procedural clouds.
• HDR rendering with MSAA: for correct blending of antialiased HDR surfaces.
• Hardware PCF: for better shadow filtering at a lower cost.
• Alpha to coverage: to render antialiased foliage.
• ...and much more.

So how was all of this done? As you know, PlayCanvas is an open source game engine. All of the work to integrate WebGL 2 into the engine can be found on GitHub.

Other key demo features are:

• Compressed textures: DXT, PVR and ETC1 are used to reduce VRAM usage.
• Asynchronous asset streaming: to get the demo loading faster.
• Runtime lightmap baking: to generate realistic shadows that render fast.
• Procedural water ripples
• Planar mirrors

As you can see, PlayCanvas is all about squeezing the full potential from the browser. PlayCanvas apps, like 'After the Flood', look beautiful, load fast and perform great.

So what's next? First, we will refactor and merge our WebGL 2 work into PlayCanvas' mainline codebase. Then we will enable 'After the Flood' on mobile. And finally, we will make the demo project public so you can see exactly how we made it:

Want to get creative with WebGL yourself?  Why not get started with PlayCanvas today?

We're excited to announce the launch of Master Archer, our new Instant Game for Facebook Messenger. Shoot the fruit from Bob's head and challenge your friends with your high score!

Only a week on from release and Master Archer has already cracked 1,000,000 players!

This shows the incredible viral power of Facebook's new gaming platform.

Many developers make 3D apps with PlayCanvas, but as you can see, PlayCanvas can also be used to create beautiful 2D games as well.

To play, open Facebook Messenger, select a friend and hit the joypad icon:

And select Master Archer from the game list!

Or you can play on facebook.com if you are using a desktop browser.

Let us know your high score in the comments!

Farewell, 2016! It seems that WebGL was everywhere last year, spreading across every corner of the web. And this added up to PlayCanvas’ best year yet!

Big Name Users​

The last twelve months have seen some incredible companies adopt PlayCanvas. Here’s our pick of the bunch:

Disney selected PlayCanvas for the Moana-themed Hour of Code

King published Shuffle Cats Mini as a launch title for Facebook Instant Games

Miniclip published the fiendish Virtual Voodoo on their portal:

Leapfrog launched the Leapfrog Academy subscription service

Nickelodeon published the TMNT game Turflytle

Universal launched the movie Ride Along 2 with a PlayCanvas-powered Truck Tour:

https://vimeo.com/152996271

So what's attracting incredible companies like these to PlayCanvas? It's because they need WebGL tooling that works. Other game engines have let them down and PlayCanvas is delivering the technology they need.

2016 Tech Updates​

Here are our top 5 picks for PlayCanvas tech improvements during 2016:

Scripts 2.0 with hot reloading, collaborative coding and parallel on-device testing:

Integrated WebVR support with optimized stereo rendering:

Runtime generated lightmaps to bake lighting on app startup for fast rendering.

One-click texture compression to enable the loading of far more texture data.

REST API for automating development tasks via script.

Cool Games​

Plenty of PlayCanvas games have been released during 2016 but we have to give special mention to Midgard's BlastArena! It pays homage to the classic Bomberman with frenetic, insanely fun online play.

And we have to give special mention to our own online multiplayer game TANX! 2016 saw the game receive a massive upgrade, with stunning new visuals and level design.

PlayCanvas continues to race ahead as the leading platform for building lightweight, mobile-friendly WebGL content. We've got lots of surprises in store for 2017 and we can't wait to share them with you. Happy New Year everyone!

Goo Create is a platform for creating WebGL-based interactive web content offered by Goo Technologies. Today, Goo Technologies is announcing an important change to the Goo Create service.

All support services relating to Goo Create have unfortunately ended. Goo Create will continue for 3 months after which we cannot guarantee that the service will accept new signups. This process begins today and will complete within the next 3 months. Create users are encouraged to export important projects to avoid to losing their data and assets.

In light of this announcement, Goo Technologies is partnering with PlayCanvas to migrate the Goo Create userbase across to PlayCanvas as efficiently as possible.

Here at PlayCanvas, we recognize that this is a worrying time for Goo Create users. But we are ready and waiting to help you migrate your projects and quickly and painlessly as possible. PlayCanvas shares a great deal of the features of Goo Create. The good news is, you get a platform with a whole lot more power:

Realtime Collaboration Goo Create is a single user development environment. PlayCanvas lets you seamlessly work together on projects as a team.

Physical Rendering PlayCanvas' graphics engine can achieve improved visuals over Goo Create thanks to built-in support for Physically Based Rendering (or PBR).

On-Device Development Mobile is important! So you want to be able to develop and test on mobile easily. PlayCanvas lets you launch onto one or more mobile devices and develop using a live link to the Editor.

Realtime App Profiler PlayCanvas makes it easy to tune your app to achieve incredible performance even on low end mobile. Simply launch your app from the Editor with the Profiler enabled to quickly diagnose and fix performance issues.

Vibrant Community PlayCanvas has a highly active community, interacting through the bustling forum and the project dev log system and global activity feed.

REST API We provide a REST API to enable you to automate common tasks such as app downloading and project archiving.

Robustness and Scalability As the leading tools platform for building WebGL content, PlayCanvas is battle-hardened following the development and release of high profile projects from companies like Disney, King, Leapfrog and Nickelodeon. We've seen PlayCanvas projects containing over 15,000 entities. You can be assured that PlayCanvas can handle your data sets.

To help you migrate, we've added a Goo Create Migration Guide to the PlayCanvas Developer Site.

We Are Here to Support You​

You may well have further questions about this news. You can be assured that we are on hand to address your concerns. Either follow up below in the comments, post on the forum, or for more sensitive matters, reach out to us at info@playcanvas.com. We're here to help.

Team PlayCanvas

We're proud to announce that Disney has selected PlayCanvas to power their newly launched Hour of Code application. Entitled "Moana: Wayfinding with Code", it's a free online tutorial to teach kids the basics of computer science.

In the tutorial, kids are tasked with using code to navigate Moana and Maui, two of the main characters, through the ocean. When they’re attacked, the students have to use their coding skills to dodge the pirates.

PlayCanvas enabled Disney to bring the beautiful visuals of Moana to the browser via WebGL-based, realtime 3D graphics.

PlayCanvas' web-first approach makes it incredibly easy to incorporate other web technologies such as Google's Blockly and more besides. But it also gives great performance, particularly on mobile. And the tiny footprint of the 160KB engine makes for lightning fast download times and rock-solid stability all the way down to iPhone 4S.

Try "Moana: Wayfinding with Code" now and see how Disney is leading the way in encouraging our younger generation to become tomorrow's software engineers.