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.
PlayCanvas was born 7 years ago, way back on 9th May 2011. In the early days, we were essentially prototyping, seeing what this amazing new WebGL API could do. By October 2011, we set up a source code repository and committed our first engine prototype. Right at the beginning, we adopted semantic versioning for naming our releases. Our initial commit generated engine v0.10.0. From that point onwards, we adopted a rapid release cadence, often publishing more than one release a week. The months and years passed, our team grew and feature after feature was integrated into the codebase. But through all that time, we never incremented the major version number. Why? Well, there were several reasons:
Our rapid deployment meant we never delivered a monster release that seemed to warrant going to 1.0.0.
We always made a huge effort to maintain backwards compatiblity. Projects like the inane Doom3: Gangnam Style created in December 2011 still work fine today! So we never (intentionally) broke your projects.
We, uh, just never got around to it!
The semantic versioning site says:
How do I know when to release 1.0.0?
If your software is being used in production, it should probably already be 1.0.0. If you have a stable API on which users have come to depend, you should be 1.0.0. If you’re worrying a lot about backwards compatibility, you should probably already be 1.0.0.
The PlayCanvas API is now very stable, mature and battle-hardened. Backwards compatibility is something we take very seriously indeed. And today, PlayCanvas is used in production by thousands of developers.
Indian Motorcycle’s PlayCanvas-powered configurator
And so, it gives me great pleasure to announce PlayCanvas Engine v1.0.0. I want to give my sincere thanks to all of the truly exceptional, hugely talented contributors who helped make this possible.
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, 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 (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 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’.
‘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
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:
Universal launched the movie Ride Along 2 with a PlayCanvas-powered Truck Tour:
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:
REST API for automating development tasks via script.
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!