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! ūüėÄ

Virtual Reality and the future of Web Based Gaming

On Thursday 19th of June we will be showcasing some of our recent work with the amazing and exciting Oculus Rift Development Kit. In the build up and anticipation to this event we hope to convey why Virtual Reality and revolutionary hardware from¬†Oculus VR¬†are set to be a part of our future at¬†PlayCanvas. Playing a game in VR is one thing. Making a game in VR…now that really is the future. playcanvas oculus1

What is the Oculus Rift?

Developed first by then 18 year old Palmer Luckey, two evolutions of its development kit amongst other improvements makes it arguably the most promising virtual reality system to date. The Oculus Rift is a low latency,head-mounted display that receives two independently rendered images to a screen to be viewed through stereoscope lenses.

Why Virtual reality?

Many virtual reality experiences target immersion, where users interaction can open the door to a reality (even if only partially) that is not their own.  However the technology behind the Oculus lets the user into a much deeper experience. Where extreme latency and narrow fields of vision have prevented previous Virtual Reality technologies from being immersive, they have often proved successful in creating nausea. As humans are sensitive to latencies as low as 20 milliseconds it is important for the technology in question to be as precise and fast as possible.

Usually leaving users craning necks and grabbing thin air in disbelief, the Oculus takes over 1000 readings per second and so far is effective enough to trick the mind and simulate a physical presence. The VR industry is now closer to ‘telexistance’ than ever before. Mark Zuckerberg, the current owner of the technology (following an¬†acquisition worth $2 billion by Facebook) described its potential, exclaiming ¬†“Imagine enjoying a courtside seat at a game, studying in a classroom of students and teachers all over the world, or consulting with a doctor face-to-face‚ÄĒjust by putting on goggles in your home.‚ÄĚ. The Oculus promises that in (hopefully few) years to come, gamers may be able to act and react naturally in what is still a virtual setting.

The Oculus Rift and PlayCanvas

Dave wearing Oculus Rift head mounted display

Oculus Rift support coming soon to PlayCanvas

Imagine a future where you open your Internet browser, select a VR ready online game, enable your Oculus headset and transport yourself into the game immediately. Mind blowing? Potentially yes.¬†This is why we here at PlayCanvas are committed to intertwining the paths of both WebGL and HTML5 technologies with the capabilities of the Oculus Rift. It’s crazy to think that VR games could be played and developed by simply opening your favourite web browser.

Firefox are already thinking about VR on the web, Chrome are too. Be sure that when VR support fully comes to the web, PlayCanvas will be ready to help you get there faster. Game Developer’s have so many challenges to overcome while developing their game that adding VR (or Head-Mounted Display) support¬†could become just another one of the¬†features that you’d love to try but never quite have time to do.¬†However, using PlayCanvas it’s simple. Just drop the OculusCamera script onto your camera and we’ll do all the magic to make your game render ready for the headset.

Hyper-realistic gaming experiences should not be limited to core gaming platforms. When web-based gaming can involve products like the Oculus we’re opening up an whole new class of¬†immersive gaming experiences. The best of the features of the web; low-friction, accessible and shareable; with the best features of the Oculus, immersive, high-end experiences. It’s brave new world!

Dave Evans (CTO at PlayCanvas) will be showcasing some of our work with the Oculus Rift on June 19th at the Scenario Bar. Check out the Event link here and maybe we will see you there!

Publishing HTML5 Games on the Chrome Web Store

If you’re building HTML5 games, chances are that you want as many people to play your game as possible and, in an ideal world, you’ll make some money in the process. Monetization on the web is harder than it is on mobile app stores, where payment processing is standardised and credit card details are stored. But there are still a number of options. One great platform you should consider for your game is the Chrome Web Store.

It’s a carefully curated app store for the desktop version of Chrome (available on Win, Mac, Linux and Chrome OS). Publishing your game here will expose it to a wider audience and offer you a simple mechanism for taking payments. In this article, I won’t cover the options for charging money for your game (a story for another day). Instead, let’s step through the process for publishing a free game.

So what are the options? Google lets you publish your game as a hosted app or a packaged app.

Hosted Apps

Hosted apps are essentially vanilla websites with a little extra metadata. Why are hosted apps good?

  • Your game will be discoverable by Chrome Web Store users.
  • Chrome Web Store users can install your hosted app to their Apps page in Chrome which is really just a beefed up bookmark for your game. This will be synched across the different devices on which you use Chrome (if you’re signed in).

So this sounds great. More people will be installing and playing your game. PlayCanvas has published a hosted app; a game called Dungeon Fury.

dungeonfury_promo_920x680

Check it out on the Chrome Web Store here.

To get started, hit the cog icon at the top right of the landing page for the Chrome Web Store and select Developer Dashboard. Sign in and click the button labelled ‘Add New Item’.

Here’s a little checklist of things that you’ll need to publish a hosted app:

  • A zip file containing a manifest and a 128×128 icon for your game. Google supplies a reference for the manifest file format and¬†guidelines for creating icons (and other images related to your submission).
  • A description for your game. Make it fun and exciting! Remember, you’re trying to persuade somebody to install your game so make it sound amazing.
  • A number of screenshots and YouTube links to give potential users an idea of what your game is like to play.
  • A number of images that Google can use to promote your game in the Web Store. Depending on how successful your game becomes, it may be displayed in a small, medium or large (marquee) tile. Spend time ensuring that you provide all of these images. A great game can be let down by uninspiring promotional images!
  • Verification that you own the URL of your hosted app. You should do this using Google’s WebMaster Tools.

There are a few other options that cover Google Analytics, game category, regions where your game will be listed and so on. When you’re done, hit ‘Publish’. Note that Google spends a little time (no longer than 60 minutes but should be much faster) to scan your upload before it is made live in the store.

Packaged Apps

So hosted apps are great, but they have some problems:

  • Users may think you’ve been lazy! ‘Hey! This is just a link to their web-site! Grrr!’. Users expect a little more from something that is being installed to their browser.
  • Hosted apps won’t run offline (unless you make clever use of the browser’s local storage).
  • Hosted apps are just web pages and don’t feel like applications.
  • If your game consists of a large quantity of data and doesn’t do any caching, load times can be long.

Enter packaged apps! These are essentially apps that are fully installed to Chrome, can run offline and launch in there own window minus Chrome’s browser decoration (although this can be added if you wish). And because they’re loaded from local storage, they start up extremely quickly.

PlayCanvas has also published an example of a packaged app in the Chrome Web Store. It’s a game called SWOOOP:

SWOOOPbann_440x280

Check it out for yourself here.

Generating a packaged app from a PlayCanvas game takes a little more effort than a hosted app. Here’s a run down of the steps required to package and publish a game like SWOOOP:

  • Download the most recently exported version of the game from the Exports tab of the¬†Project Dashboard.
  • Unzip the contents.
  • In the index.html, there are two externally referenced resources: the PlayCanvas engine (playcanvas-0.144.3.min.js and¬†PLAY_FLAT_ORANGE3.png). Download these resources and change the paths so they are relative to the index.html file.
  • Create a manifest.json file . For SWOOOP, it looks like this:
    {
      "name": "SWOOOP",
      "description": "Loop and swoop your bi-plane around the magical island. What's your highscore?",
      "version": "1.0",
      "app": {
        "background": {
          "scripts": ["background.js"]
        }
      },
      "icons": { "16": "swooop16.png", "48": "swooop48.png", "128": "swooop128.png" }
    }
  • Create background.js that contains the following to configure how the game is launched:
    chrome.app.runtime.onLaunched.addListener(function() {
     chrome.app.window.create('index.html', {
       'bounds': {
         'width': 1280,
         'height': 720
       }
     });
    });
  • Create the icons referenced from the manifest and place them in the same folder as the index.html.
  • Transfer any script tag blocks of JavaScript in index.html into externally referenced JS files (there are two). This is because Chrome treats this as a security threat.
  • Remove the following statement (which causes another security error in Chrome) from playcanvas-0.144.3.min.js (search for ‘unload’):
    window.addEventListener("unload", function() {
      o.disconnect();
      o = null
    });
  • Check to see if your game uses the LocalStorage HTML5 API. Packaged apps can’t use this API,¬†although they can use a Chrome specific alternative.
  • We’re done! Zip up the game’s files again and upload to your new item in the CWS Developer Dashboard. Fill out the rest of the form as you would for a hosted app (although you now don’t need to show ownership for a hosted app URL since there isn’t one any more).

So hopefully this gives some insight into how simple it is to publish your game to the Chrome Web Store. Whether you choose to publish a hosted or packaged app is up to you and, as we’ve shown, both have their advantages and disadvantages. My recommendation to you is to experiment. It’s an awesome publishing platform that anyone can start to use today, so try it out for yourself!

 

 

Leap Motion + PlayCanvas = Physics Playground

Today, we plugged a magical Leap Motion device into one of our USB ports and fired up PlayCanvas.

leap-motion

30 minutes and 20 lines of code later, we had a fun little demo app that shows the power of the device.

If you are the proud owner of your own Leap Motion, you can run the demo by clicking here.

And if you’re curious to see how we built the demo, why not explore the project and get inspired to build your own Leap Motion powered masterpiece!

 

HTML5 APIs for game developers

One of the best and worst things about making games for web browsers is that the platform is a moving target. New features are constantly proposed, specced out and implemented. At the moment while many features are in a nascent state, keeping track of which features are available in which browsers is a bit of a pain.

This page is an effort to supply a list of HTML5 APIs that I think game developers want to know about and their availability in different browsers. Hopefully we’ll gradually see this all go green.

…