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.

PlayCanvas Maintenance 1/10/2014

We’re going to be performing server maintenance over the next 48 hours to prepare for the next stages of our growth.

Whilst we hope you won’t be affected. There will be intermittent downtime over the next few days. You may also notice small errors like missing thumbnails. This is nothing to worry about! Check our twitter account to stay up-to-date.

We hope you understand and this downtime doesn’t inconvenience you too much. We’ll be back stronger and faster!

If you need something to do while PlayCanvas is down you could watch the tutorials on our Youtube Channel

playcanvas_-_YouTube

Or take a read of the user manual on our developer site.

PlayCanvas_Developer_Resources___PlayCanvas_Developers

Thanks,

Team PlayCanvas

iOS 8 launched with WebGL

Amazing news for PlayCanvas Users, iOS 8 is out.

So we’ve finally seen the launch of the iOS 8. For all you PlayCanvas users out there this is fantastic news as it means PlayCanvas games work straight off the web in mobile Safari on hundreds of millions of iPhones and iPads.

To celebrate this we’ve launched a cool little demo to discover the new (and not quite released) iPhone 6. Take a look, and remember now it works on desktops, on Android and on iPhones and iPads!

iPhone 6

 

Share this with your iPhone using friends: http://phone.playcanvas.com/

WebGL on iPhone in less than a minute

If you’ve been following the tech news over the last few months you’ll have noticed that Apple is about to launch the latest version of their mobile operating system iOS 8. For us game developers this is awesome news because iOS 8 supports WebGL in mobile Safari (the news we broke on this blog a few months ago).

It’s not just browser support for PlayCanvas games we’re interested in though. We also want to make sure you can get your PlayCanvas into the App Store. So, in advance of the iOS 8 release, we’re really pleased to be launching a new feature today for our Pro users.

PlayCanvas iOS Export

It’s now dead simple to get your PlayCanvas game running as a native iOS application. Take a look at our little video introduction.

It’s just one click to get a XCode project which is easy to build into a iPhone application.

Web vs Native

PlayCanvas is designed to use all the best features of the web, online collaboration, accessible from every device and shareable links. But that doesn’t mean we don’t see the advantages of native applications, especially on mobile. Installed games are run offline and can be easier to monetize.

You can now get the best of both worlds by releasing your games on the web and on iOS. Use the web to build viral, shareable games and release the same game on iOS, where the audience is ready to monetize.

Give it a try

If you’re a Pro account holder, you’ll see the iOS download right now in your exports tab. Get yourself a copy of the XCode 6 GM from the Apple Developer site and try it out. If you’re not a Pro account holder, what are you waiting for? Get yourself upgraded right now! 😉

developer.playcanvas.com is open source

os-all-the-things

As part of our continuing drive to make PlayCanvas more open and a better service we’ve moved the source to our developer resources site: developer.playcanvas.com onto github.

This means that the community can be more involved in building tutorials, making sure everything is up-to-date and improving the experience for other PlayCanvas users.

How do I get involved?

Fork it!

First take a fork of our github project: https://github.com/playcanvas/developer.playcanvas.com

Find problems

If you find problems, bugs, spelling mistakes or any other issue with the developer site. Either let us know via the issue tracker on github project, or if you feel up to it, fix the problems in your fork and send us a pull request.

Create new tutorials

Got an idea for a new tutorial? Great, we’d love to have more tutorials on the site. But, before you spend your hard earned time off creating one let us know what your plans are with a new issue in the github repo, that way we can make sure we’re able to help you make the best tutorial possible. And prevents you wasting your time if it’s not something that we can use on the site.

 

Platform Game Starter Kit

Our new hero

Our new hero

Today we’re pleased to introduce the updated, all new and fancy Platform Game Starter Kit. We’ve worked hard with the talented artist  from SWOOOP to provide a complete set of code and assets for you to build your own platform games.

From today, when you choose to create a new project you’ll be given the option to start using the new Platform Game Starter Kit. Your new project will contain a short, but full, platform game.

 

Contents

The Starter Kit contains the following assets:

  • Our hero Playbot – a fully rigged and animated robot character for you to use.
  • Idle, Run, Jump and Die animations for Playbot
  • A set of platforms in various shapes and sizes from 1×1 upto 4×4
  • Spike, our dumb and stupid AI bot
  • Punch, still pretty dumb, but don’t get too close or he’ll shoot.

We’re also supplying all the code for the game:

  • Platform Character Controller – the player
  • Enemy – a simple enemy AI
  • Enemy Punch – a simple enemy AI which can shoot at you
  • Mover – a moving platform
  • Goal – the target for the level
  • Damagable – add health and damage to an Entity

We’ll be writing more about the Platform Game Starter Kit in the next week to give you tips and challenges so that you can make the best use out of it. But before they arrive, create a new project using the kit, try it out and dig into the code to see how it was made.

Have fun, and look out for Punch!

Punch - the bad guy

Punch – the bad guy

 

PlayCanvas Update 13/06/14

construction_kit-001

After a busy week here in the PlayCanvas office, we thought what better way to champion our efforts than to give you a taste of whats happened at HQ. We plan to start a series of weekly updates so you know what is keeping PlayCanvas at its best. This week; 

  • We completely reworked our back-end API. All page loads are now 50% to 1000% times quicker.
  • We have also made an improvement to the manoeuvrability of Entities as we introduced a new default Snap option. This function allows you to move incrementally within the PlayCanvas Designer (find more information on the Snap function here).
  • Lastly we are happy to introduce a brand new platform starter kit which features a contribution from the artist who worked with us on Swooop! (read all about it here).

Stay In The Loop

Follow us on Twitter, @playcanvas, for largely technical updates on PlayCanvas.

Like the PlayCanvas Facebook page for our whimsical views on the game dev scene.

Join and start discussions on the PlayCanvas Forum.

Get expert responses to your questions on PlayCanvas Answers.