New Feature: 2D Sprites and 9-slicing

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.

Sprite Asset

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.

Sprite Component

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.

Sprite Editor

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

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.

Prehistoric graphics by Pixel-boy

Introducing Element & Screen Components

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.

UI demo

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.

Maintenance Saturday June 10, 9am UTC

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.

 

Introducing the new Code Editor

Code Editor

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

Editor 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

Editor Find

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!

Master Archer lands on Facebook Instant Games

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!

instant-game-chart

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:

play-archer

And select Master Archer from the game list!

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

What's your high score?

Let us know your high score in the comments!

Instant Games and PlayCanvas

You may have seen the news about Facebook launching Instant Games in Messenger. If not here’s the launch video

Instant Games is a totally new mobile gaming platform and it’s entirely built on HTML5 games. This is tremendous news for the PlayCanvas game development community.

Games that are built using PlayCanvas will work with no modification as an Instant Game. Those games are ready to be played in the Facebook News Feed and in Messenger.

Developing Instant Games

Instant Games are playable today in the News Feed and in Messenger. However, the development platform is currently in closed beta. If you’ve started developing a game that would be suitable as an Instant Game visit Facebook to sign up for the closed beta.

PlayCanvas Instant Games

PlayCanvas is already being used to build Instant Games. The launch title Shuffle Cats Mini by King was built using PlayCanvas. Look out for more titles built using PlayCanvas in the future.

A new gaming platform

We’re tremendously excited to see Facebook launching the Instant Games platform and it is a perfect platform for PlayCanvas games. HTML games that are fast and lightweight, mobile and shareable. We hope you share our excitement and if you want to get started building your Instant Game, sign up to PlayCanvas for free today.

WebVR support in PlayCanvas

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.

PlayCanvas WebVR

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.

Tutorials and Documentation

PlayCanvas is renowned for its extensive documentation and VR is no different. Basic instructions, API reference and specific optimization tips, we’ve got it all.

Samples and Starter Kits

These sample projects show you how to construct a VR scene and give you sample code to start from.

Hello World – A very simple 3D scene

360 Image – Just drop in your own 360 panorama

360 Video – Add a link to your own video

Room Scale VR – A more complex scene designed for HTC Vive and other Room Scale VR

The Future

We believe the future for WebVR is very bright and we’re committed to making PlayCanvas the best tool for creating WebVR applications. Sign up for free today, we’d love to see what you build!

PlayCanvas REST API

api

Today we’re launching the first version of the PlayCanvas REST API.

The REST API is available to all Organization account holders and allows developers to automate processes to help them with their development. For example, you can use the API to create a daily build of your application and download it via a build server. In the future we’ll be expanding the API with additional features like access to assets and more.

You can read more details about the API in the documentation.

We’d love to hear your thoughts on how you are using the API and what you’d like to see in the future. Let us know on our forum.