PlayCanvas to Support Flash Devs as Adobe Kills its Player

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.

Mozilla Launches WebGL 2 with PlayCanvas

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:

flood_editor

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

PlayCanvas in 2016 – WebGL Everywhere

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:

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!

Disney Selects PlayCanvas for Hour of Code

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.

PlayCanvas December Mega Update

Time for another dev update, WebGL lovers! We’ve deployed a ton of new features, optimizations and fixes. Here’s a run-down of what’s new.

Camera Preview

A Camera Preview is now shown in the top left corner of Viewport when an entity with a camera component is selected.

camerapreview

Interactive Asset Previews

New Material, Model and Cubemap Previews are now available in the Inspector. They are interactive and clickable.

material-preview

Antialiasing Control

It is now possible to control antialiasing in Scene Settings.

antialias

Model Placement

When dragging a model to the Viewport from the Assets panel, if CRTL is held (CMD on Mac) it will put the model in front of the camera rather than at the origin.

Assets Panel Enhancements

Added toggle button to Assets panel to switch between small and large thumbnails.

thumbnail-size

Added Folder Up button to navigate to parent folder.

folder-up

Hovering on asset in Assets panel will show a tooltip with the full asset name.

asset-tooltips

Asset Replace feature is available under the context menu of an asset. It activates the asset picker so the developer can choose another asset of the same type. It will replace references with new asset in Entities and Assets.

GIF files are no longer translated to PNG. They are now treated as another valid runtime format with parity to JPEG and PNG runtime texture formats.

Code Editor Enhancements

  • Highlight current line of cursor.
  • Highlight errors.
  • Made cursor more visible.
  • Fewer disconnection messages.

Optimizations

Huge speedups achieved for both loading and rendering of scenes!

  • New thumbnail rendering system reduces VRAM usage in the Editor by up to a factor of two. This makes the Editor more stable and faster to load, especially for larger scenes.
  • Major optimisations for loading and Editor rendering process so projects with thousands of entities and assets can load and render now up to 10 times faster in extreme cases.
  • Asset load operations are now batched rather than performed one by one.
  • All engine assets are loaded only when they are required (when they are enabled), leading to reduced traffic and loading times.
  • Optimisations in internal API of Editor and UI leading to reduced garbage collection (and therefore GC stalls) and speeds up UI templating for Hierarchy and Assets panels.
  • Enabled GZIP on WebSocket traffic, which reduces data transfers for initial loading.

Fixes

  • Fixed up arrow while navigating in the Hierarchy tree.
  • Fixed sorting of folders in the Assets panel tree.
  • Fixed material overrides on the Model Component if the model asset wasn’t loaded.
  • Cubemap faces now update in the Inspector (in the Faces section) if a face texture file is changed.
  • Read-only users can now select text/number field values.
  • Double click or right mouse click on number fields now will select whole content of the field and not just part of number separated by a dot or minus sign.
  • Networking improvements have been made to reduce disconnects.

Phew! We hope you like these latest additions. Got any feedback? Comment on the forum! We’d love to hear what you think.

PlayCanvas Interviewed Live on BBC News

On Friday, 18th November, PlayCanvas HQ was visited by BBC News, the world’s largest broadcast news organisation. Our CEO Will was interviewed live on the 6 o’clock evening news which has viewing figures of around 1 million people.

It was a great opportunity to promote London as a great place for young tech companies to do business. Will describes the benefits for finding great talent, but London has so much more to offer. Outside of the US, London has the most active venture capital scene. Most international companies chose to locate an office in London. Transport links are superb. Government tax breaks are in place to assist tech startups, particularly in the gaming space. And on top of that, it’s an incredible place to live.

We can’t imagine being anywhere else!

TANX Takes WebGL Gaming to a New Level

One of the most popular WebGL games today is TANX, our online tank battle game. WebGL brings developers amazing new possibilities: lightning fast load times, cross-platform play, easy sharing, incredible performance. It all adds up to instant, pure fun.

But as good as TANX is, we’ve been working hard on a major upgrade. And we’re happy to announce that it’s live today! So what’s new?

We’ve added a brand new level. We’ve moved away from the ‘TRON’ style graphics and adopted a more realistic style. Beautiful, I hope you’ll agree.

tanx-new

All power ups have been lovingly remodeled.

tanx-powerups

We’ve added a very sexy shield effect. See it crackle with energy as it kicks in. All done in a special custom GLSL shader.

tanx-shield

To turn up the mayhem, we’ve added camera shake and punchy explosions, built with PlayCanvas’ particle system component.

tanx-boom

 

The game even has a new URL. Play now at:

https://tanx.io

Public Service Announcement: TANX is highly addictive. Please take occasional breaks!

Can you believe this game is playable after loading just 2.8MB of data? Massive fun delivered to your browser in seconds.

We hope you love this update. But what do we have planned for the future? Is there more to come? You’d better believe it! Our games team is now working full-time on TANX so expect continual updates over the coming months. Send us your feature requests and suggestions in the comments below!

Refinements aplenty for our WebGL Editor

You probably saw this week’s big announcement about our seamless integration with WebVR. But while WebVR is getting a lot of attention, we still care about the small details that can make you even more productive. We’ve spent the week adding some simple yet useful tweaks to the Editor.

Previous Selection Button

We’ve added a button to the top right of the Inspector panel that allows you to step back through the selection history. There’s also a tooltip that shows clearly what the previous selection was. So if you’ve selected a model, then a material, and then a texture, you can now bubble back up to the model quickly and easily.

selection-back

Updated Physics Engine

We have updated PlayCanvas’ build of Ammo.js to the very latest version. This update benefits from 2 years of Emscripten improvements and exposes much more of the Bullet API. So if you are feeling adventurous, you can delve into the parts of Ammo that PlayCanvas does not expose and try some more advanced physics effects. For example, soft body physics. Or maybe utilize constraints for things like ragdolls, as shown below:

What to check out the project above? It’s here.

Miscellaneous Improvements
  • You can search for an asset by ID in the Assets panel
  • Edit boxes in the Inspector panel now lose focus on hitting ENTER
  • Read-only collaborators can now download assets from projects
  • CTRL-A now correctly ‘selects all’ in the Assets panel
  • A material’s ‘reflectivity’ property can now exceed 1
  • F2 (or ‘n’) now renames a selected asset or entity
  • Page Up/Down move the Editor camera up and down

We hope you like these little tweaks. We do love to make your lives easier!

WebGL Texture Compression Made Easy

Big news! PlayCanvas is excited to introduce easy texture compression, enabling you to build bigger and better WebGL apps.

Today, the vast majority of WebGL developers load textures from JPG and PNG images. Unfortunately, while these formats compress well for transmission (especially JPG), they occupy a great deal of video memory when passed to WebGL. For example, let’s consider this image of the Earth:

… 

Miniclip Launches Their First PlayCanvas Game

PlayCanvas is proud to announce that browser-gaming giant Miniclip has published their first PlayCanvas-powered game: Virtual Voodoo.

Virtual Voodoo is designed to get you in the mood for a spooky Halloween. Make the poor Voodoo doll’s life a misery with a dastardly selection of spells, curses and implements of pain! You can even customize the doll with different clothing and accessories.

Jamie Cason, Executive Producer at Miniclip said:

We’re really excited by PlayCanvas technology and the promise that it holds for the future of Open Web Games. It is currently the best toolchain and engine for WebGL that we’ve seen and Virtual Voodoo represents the first of, what we hope to be, a series of successful PlayCanvas-powered Miniclip titles.

Using PlayCanvas to create new games is a no-brainer for Miniclip. Browser plugins are gradually being phased out of the browser ecosystem and HTML5/WebGL are the technologies browser game developers are moving to. PlayCanvas is the only professional IDE for building lightweight HTML5/WebGL games that have incredibly short load times. Virtual Voodoo is playable after loading only 4MB and loads in seconds. This means more players end up playing the game and Miniclip achieves better retention.

Look out for more PlayCanvas-games from Miniclip in the future. But for now, why not embrace your dark side and PLAY VIRTUAL VOOODOO NOW!