PlayCanvas Scripts 2.0

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

Live hot-swapping

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.

Script Concatenation

With the new script format we now support multiple script definitions in a single JavaScript file. We’ve added the option to concatenate and minify all your scripts into one file when you publish. This will save you many HTTP requests and reduces the size of your application, making for a much quicker start up time.

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.

If you haven’t tried PlayCanvas before:

SIGN UP TODAY

Moving playcanv.as to HTTPS

tanx

TANX running on HTTPS

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.

Embedding

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:

  • Device Motion
  • Device Orientation
  • Encrypted Media Extensions
  • Fullscreen API (including pointer lock)
  • Geolocation
  • getUserMedia (webcam access)

Soon it won’t be possible to access these Javascript APIs without using a secure HTTPS page. In advance of this time, we want to make sure your hosted PlayCanvas applications can support all these features.

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.

 

Development Update: Tags, New Script Attributes

Hi everyone! It’s time for another Development Update. So without further ado…

Editor Tags and Engine Tag API

The feedback we’ve been getting is that your projects are continuing to grow. More assets, more entities, more complexity. It makes it hard to find and organize things, right? To help you out, we’ve introduced Tags to the Editor interface. We’re starting out with Assets. Check out how you tag your assets:

tags

To search for Assets, we have introduced a new pc.Tags API. Let’s quickly look at some examples:

// Return all assets tagged by 'level-1'
var assets = app.assets.findByTag("level-1");

// Return all assets tagged by 'level-1' OR 'level-2' 
var assets = app.assets.findByTag("level-1", "level-2");

// Return all assets tagged by 'level-1' AND 'monster' 
var assets = app.assets.findByTag(["level-1", "monster"]);

// Return all assets tagged by ('level-1' AND 'monster') OR ('level-2' AND 'monster')
var assets = app.assets.findByTag(["level-1", "monster"], ["level-2", "monster"]);

Next up is to support tagging of entities. Look out for this feature landing sometime soon.

Curve and Entity Script Attributes

We have added a couple of new script attribute types for you to expose to the Editor UI: curves and entities.

Curve attributes can be used to define how a value or values change over time. Consider it a simple keyframing tool. To define a curve script attribute, use the following notation:

// Specify a single curve
pc.script.attribute('singleCurve', 'curve');

// Specify a set of 3 curves labelled x, y, z
pc.script.attribute('xyzCurve', 'curve', null, {
    curves: ['x', 'y', 'z']
});

// Specify a set of 3 curves labelled r, g, b with a color preview
pc.script.attribute('rgbCurve', 'colorcurve');

// Specify a set of 4 curves labelled r, g, b, a with a color preview 
pc.script.attribute('rgbaCurve', 'colorcurve', null, {
    curves: ['r', 'g', 'b', 'a'],
    type: 'rgba'
});

Check out the colorcurve control’s functionality below:

colorcurve

To define an entity script attribute, use the following notation:

pc.script.attribute('target', 'entity');

This exposes an entity picker to your script UI. Even cooler is that you can drag entities from the Hierarchy panel directly onto the picker, as shown below:
entitydrag

 

That’s it for this update, friends. Now get back to making cool stuff! 😀

PlayCanvas pioneers 3D rich media ad format for Facebook and Twitter

PlayCanvas, the leading tool for creating interactive 3D content for the web, today announced that it is powering the launch of the first interactive 3D social media campaign for Hutch Games’s smash hit mobile game MMX Racing featuring WWE.

PlayCanvas and Hutch Games have collaborated to create a set of 3D interactive experiences for monster truck and wrestling fans on Twitter and Facebook. Players get a taste of the latest MMX Racing update right in their feed before going on to install the game.

tripleh interactive ad

Try the Triple H rich media ad

Currently interactive 3D content, including games, has always been locked up inside app stores and browser plugins. This means that on mobile devices, users have to suffer through the download and install process just to experience a bit of fun. PlayCanvas is the only engine technology that can bring these experiences to life on the web or in social networking apps.

PlayCanvas co-founder and CEO Will Eastcott said today “User acquisition is the biggest problem facing mobile game developers today. By using their existing assets in exciting, shareable and viral ways game developers can attract engaged players who have already demonstrated an interest in their game.

“This is changing the way developers think about promoting their games. PlayCanvas has unlocked the ability to make beautiful and exciting visuals available directly to players, in their browser and in their social network feeds. We know that interactive content can convert users as much as 50% more than static images and we expect PlayCanvas-powered interactive campaigns to become the standard way to promote mobile games.”

Autocomplete and Realtime API Reference added to Code Editor

PlayCanvas scripters rejoice! The Code Editor has just received a major upgrade. We have just deployed two new related features:

  1. Autocompletion
  2. Realtime API reference documentation

So what does this look like? An animated GIF is worth 1000 words, so behold:

autocomplete

As you can see, the Code Editor now displays the properties of a variable and can list them in a popup for quick selection. But even cooler is that the API reference description for the selected property is shown to the right of this. So what does this all mean? Fewer visits to the full API Reference Manual on the developer site, that’s what? So nice.

Let us know what you think. Anything else you would like us to add?

That’s all for now folks. Over and out.

 

Enhanced Asset API

Today we’re pleased to update the engine and tools with a new Asset API. We’ve finessed the API to make it more intuitive and also added some extra features to make it easier for you to preload or stream in assets at any stage of your application.

This post should introduce some of the new APIs, plus give you an upgrade guide for areas of the API which have changed.

First some terms. When we talk about a “resource” we are referring to some data, usually stored in a file, that can be loaded by a PlayCanvas application. When the resource data is loaded, the engine creates a instance of some class that came from that data. e.g. the resource “image.png”, is loaded to a creates an instance of a `pc.Texture`. The same applies for a 3D model, an animation or sound effect.

When we talk about as “asset” we are referring to a reference to a resource, with some associated data. For example a texture asset looks something like this:

{
 "id": 14761,
 "name": "Cerberus_G",
 "type": "texture",
 "preload": true,
 "file": {
  "url": "files/assets/14761/1/Cerberus_G.jpg",
  "size": 816084,
  "hash": "dc49dac4f4775191b7643b4583b3ac3f",
  "filename": "Cerberus_G.jpg"
 },
 "data": {
  "minfilter": "linear_mip_linear",
  "name": "Cerberus_G",
  "magfilter": "linear",
  "addressu": "repeat",
  "addressv": "repeat",
  "anisotropy": 1
 },
}

You can see the asset data for this texture as an ID, a Name, a reference to the file where the resource data is, plus some additional data which isn’t stored in the image file. This data is used to create the texture resource. Some assets contain lots of data (materials) some none (a text file).

Once loaded into the engine, you can use the asset registry to find assets, and you can access the loaded resource (if it is loaded) from the asset using the `asset.resources` property.

On to the changes:

Editor Changes

Asset Preloading

preload

The first new feature is asset preload. Previously we would load any assets that were referenced by your scene. We changed this behaviour so that now assets have a specific preload property which you can enable or disable. Any asset marked as preload, and we default this to true for new assets, will be loaded during the loading screen stage and will be ready to use when your application starts. Any that are not marked as preload, will remain on the server, ready to be loaded when you need them.

We’ve updated existing assets to mark all existing target assets are preload. So you may need to uncheck this option on some assets if you don’t actually need them.

Export and Publishing

When you publish an app or choose to download an export of your app, we now include all assets in the package. As you can choose whether or not to preload assets, this means that you can select only a subset of your assets to be loaded before your application starts. Then you can load other assets at any other stage later on. This lets you use many more assets in your games and applications but not worry about start up time. Just stream your assets in later on.

Script Loading Order

Script loading has had an overhaul, we now load scripts in parallel with other assets so load times should be reduced. We have also changed which scripts are loaded. Previously, we’d only load scripts which are referenced in scenes. We now load all scripts in your repository. Because of this we’ve introduced a way to set the order in which your scripts are loaded.

script-priority

Found in the menu, you can use the script loading priority dialog to choose scripts you wish to load first.

API changes

Asset Registry

The `AssetRegistry` object has changed slightly in the new API. The core methods are shown below. As before the `AssetRegistry` object is available in your scripts as `app.assets`.

app.assets.get(id) - get by id
app.assets.find(name, type) - search by name, return first result
app.assets.findAll(name, type) - search by name, return all
app.assets.load(asset) - load remote resource for asset

The main change here is that `load()` no longer accepts a list of assets and it no longer returns a promise. We’re removing promise from the engine in favour of node.js style callbacks and events.

Note, we have left in a compatibility version of assets.load which accepts a list of assets and returns a promise. You should update your code to remove this as it will not be in the engine forever.

Asset Events

The asset registry (and the asset object) fire a consistent set of events which you can use to react to changes on the registry. These can be used to monitor loading progress or respond if you wish to dynamically add assets to the registry.

assets.on("add", callback) - triggered when asset added to registry
assets.on("add:{id}", callback) - triggered when asset added to registry
assets.on("add:url:{url}", callback) - triggered when asset added to registry
assets.on("remove", callback) - triggered when asset added to registry
assets.on("remove:{id}", callback) - triggered when asset added to registry
assets.on("remove:url:{url}", callback) - triggered when asset added to registry
assets.on("load", callback) - triggered on successful load
assets.on("load:{id}", callback) - triggered on successful load
assets.on("error", callback) - triggered on asset loading error
assets.on("error:{id}", callback) - triggered on asset loading error
asset.on("change", callback) - triggered when asset data changes

A good pattern for loading and using an asset is like this:

asset.ready(function (asset) {
    // use asset.resource here 
});
assets.load(asset);

asset.ready() will call the callback when if when the asset is loaded. It’s it’s already loaded from before, the callback is called immediately. asset.load() does nothing if the asset is already loaded.

Resource Loader

The resource loader is a lower level interface than the asset registry. Most users won’t need to access this directly as they will use the asset registry to load data. But this API has changed significantly. We’ve made it much simpler:

app.loader.load(url, type, callback);

I’ll just leave it there, see the API docs if you need more information.

Application Scene Loading

We’ve added a simple API for loading new scene data via the `app` object

app.loadSceneHierarchy(url, callback) - load a scene file, get hierarchy, append hierarchy to app.root
app.loadSceneSettings(url, callback) - load a scene file, apply settings (lighting/physics) to current scene

These two functions accept the URL of the scene file which will be in the format “scene_id.json” e.g. “100.json”.

Upgrade guide

Hopefully you’ll find your application continues work as before, only now it loads faster and you have more options available to you for dynamically loading assets. However, this is a breaking API change so you may need to update your projects.

app.assets.load(asset)

If you are using this and passing in a single asset, we no longer return a promise. You should replace your code with this:

asset.ready(function (asset) {
  // use asset
});
app.assets.load(asset);

app.assets.load(assets);

If you are loading a list of assets, our compatible load should still work. However, you should update your code to use the new loading format. As below

var toload = []; // list of assets
var count = 0;
toload.forEach(function (asset) {
   asset.ready(function (asset) {
   count++;
   if (count === toload.length) {
     // done
   }
 });
 app.assets.load(asset); 
});

app.loader.request()

If you were using this to make resource requests like loading Packs or asking for texture data. This is all new. You should be able to replace these calls with some other method. Maybe `app.loadSceneHierarchy()` or by using asset preloading to delay loading texture data. However if you really need to load a resource directly. You can use the resource loader API:

app.loader.load(url, function (err, resource) {
  if (!err) {
    // use resource
  }
});

That’s it! If you notice any problems or have trouble upgrading, get in touch on the forum.

PLAYHACK with ARM: Chromebook Winner

Last month we worked with ARM to launch our first Prize PLAYHACK. They provided the great prize of a Samsung Chromebook 2 13.3″.

70 developers forked the starter project and slaved over the coding for the last month. ARM and PlayCanvas spent a tough few hours playing all the games and we’ve picked out a winner.

Space Buggy

space_buggy_start

This month’s PLAYHACK winner is Space Buggy a compulsive driving game. Which features tracks generated from stock charts. The aim is to safely reach the end of the track without over-turning or running out of fuel.

PlayCanvas user lmao is already a previous PLAYHACK winner and this month his determination and hard-work has paid off. Space Buggy is a polished and addictive stunt game. Lmao makes great use of the Buggy model that we gave away for the competition and also used simple textures and boxes to generate tracks creating simple yet compelling graphics. Nice touches include the engine start and headlights on the car, the “jukebox” playing different tracks and the integration of Google Play Services for leaderboards.

See it in action:

Space Buggy animation

PLAY SPACE BUGGY HERE

Massive congratulations to lmao, your Chromebook will be winging it’s way over to you shortly.

We want to make a couple of special mentions to alphacodemonkey for his addictive high-score chaser Boarddrive and lizzip for dinosaur escape game Desperately Fleeing Susan

Optimized for ARM Mali

We’ve been working hard with ARM to make sure that PlayCanvas runs really well on their Mali mobile GPUs. You’ll see this in the Seemore demo we developed in association with ARM.

Screen Shot 2015-04-02 at 15.49.43

Find out more at http://malideveloper.arm.com

 

Build a game for a loved one this month.

Our most popular PLAYHACK ever finishes today. Last month’s gem challenge sparked your creativity and led to over 30 forks of the project.

Featured Winner

yet another gem

This month our favourite PLAYHACK game is Yet Another Gems by lmao. A great 3D twist on a classic format. We were most impressed by the polish of the game. From the full menu and UI, to the the inclusion of online leaderboards using Google Play Services, this is a complete game. An impressive achievement for only one month’s development.

finalists

Here’s a selection of some of the games made this month. Special mention to runninglvlan who only started making his game Gem Labyrinth 12 days ago, but already has an addictive maze running game (my record is 130 points in 47 seconds)

Go watch and star the game projects for Gem Labyrinth and Yet Another Gems.

Make your loved one a game

PlayCanvas

With the end of one PLAYHACK must come the start of a new one. February 14th is St Valentine’s Day, so this month’s theme is to give you the chance to create the ultimate Valentine’s Day gift. Make your loved one their own special game.

We’re giving you 20 hearts of all shapes and sizes, and not only that, there is a loveable furry surprise in the pack too.

Valentine’s Day is only 2 weeks away, so don’t wait around. If you miss the 14th though, don’t worry, our deadline is the end of the month. And we’ll still love you whenever you finish.

How does it work?

  1. Fork this month’s project into your account
  2. Use 3D models from the project to build a new game.
  3. Post to your Devlog about your game throughout the month
  4. At the end of the month we’ll look at all the forks
  5. We’ll pick our favorite and feature it on the explore page

As there are so many models this month, feel free to pick and choose a few that you need.

Judging

The process of judging is as broad as the rules. You won’t be marked on the strength of code, graphics of theme, the winning game will be the game that we enjoy the most, simple.

What will you build?

This month we want to start up a discussion about what you can build.

We’ve got some ideas about what games suit the the theme and what would work best as a unique and personal gift for a loved one. But what do you think? Join the discussion in the forum.

Enough from us though.

START YOUR PLAYHACK

bear_small

 

We love you!

3D Asset Store Propsplanet upgrades from Unity to PlayCanvas

logos

Propsplanet is an online digital marketplace which sells 3D models to independent game developers. Previously powered by the Unity Web Player browser plugin, Propsplanet has this week relaunched using the PlayCanvas engine.

“Upgrading our online 3D preview from Unity to PlayCanvas has made a huge difference to the customer experience on our website. It lets us broaden our audience from desktop only to include every shopper including tablet and mobile users. Our early tests show that using PlayCanvas decreases page loading times by over 10x which has led to more item views and the average time on site has increased by over 500%.”

Propsplanet founder, Wale Adeyeye

“WebGL technology is a huge deal for online retailers. For companies like Propsplanet, having previews of their digital assets is vital. Previous technologies were limited by plugins which led to low engagement and were simply missing the enormous mobile market. We’re showing how PlayCanvas isn’t just able to power the next-generation of games but also help digital retailers and other websites use 3D on the web to raise engagement and increase sales.”

PlayCanvas CEO, Will Eastcott

Propsplanet used our cloud-hosted tools platform to build the interactive 3D application which let’s users preview hundreds of 3D models streamed dynamically from the server. Because PlayCanvas applications are standard web pages the preview application works on every platform.

You can see what an improvement we made to the Propsplanet user experience in this side-by-side comparison video

You can try the PlayCanvas-powered application on Propsplanet’s store website now.