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.”

What’s new? HTML Assets, New Gizmos, Viewport improvements

It’s been a busy few weeks at PlayCanvas towers. We’ve launched a bunch of new features today and over the last few weeks. So here’s a quick summary:

3D view updates

Collision Mesh

Today we released a whole bunch of changes to the editor, with a focus on making the viewport simpler, better, and easier to use. We’ve de-cluttered by turning off camera, light and collision gizmos unless you have the entity selected. We’ve also added a proper view for the collision mesh type so you can see just how many triangles your colliding against 🙂

Also, we’ve added convenient icons for all the entity types, so you can see and select everything from inside the viewport.

icons

HTML and CSS assets

You can now upload .html and .css files as assets. This is incredibly useful when you want to build UIs as part of your applications. No more HTML and CSS in strings.

Collaborative editing

We’ve also got full collaborative editing for text based assets, that is: HTML, CSS, text and JSON files. This means you can comfortably edit with a friend where ever they are in the world.

Project Export / Import

A heavily requested feature for our enterprise users is the ability to take a complete back up of everything you’ve got in PlayCanvas. So for ORG level account holders, we’ve added the Project Export feature. From the new projects interface, use the drop down to select Export Project and you’ll get a link to a zip file containing everything in your projects. Assets, Scenes, Scripts, etc.

Project Export

 

Importing is just as simple, on the same page you’ll see an import project button. Use this to upload the zip file you received from exporting and we’ll create a new project with all the data from the archive.

Custom Loading Screens

Another feature for the ORG user’s. Sometimes you’ve got a client who just doesn’t want to see that PlayCanvas logo upfront when loading your application (crazy people!). So now you have access to a custom loading script which lets you do as you please during the preload phase of application loading. You’ll find the Loading Screen option at the bottom of the Settings panel in the Editor.

The full list:

There have been loads more little bonus features to help you build games and applications using PlayCanvas. Here’s a big list.

* Upload HTML and CSS assets types
* Project exporting / importing [ORG Plans]
* Custom loading screens [ORG Plans]
* New projects tab
* Online Collaborative Editing for HTML, CSS, text and JSON assets
* De-clutter viewport by hiding gizmo’s for unselected entities
* Added gizmo for collision component of `asset` type, now it renders asset on top with overlay
* Improved gizmos for spot lights.
* Added icons to entities without model
* Added icons size setting to designer settings (bottom left corner)
* Fixed focusing, now it takes in account children entities
* Right mouse button now does only look around, and ignores any picking and gizmo interactions
* Renaming entity by double clicking in a tree.
* Icon `*` visible on top right corner of each asset in an asset panel, when asset is considered as “possibly unused”.
* Added `skyboxIntensity` and `skyboxMip` selectors to Scene Settings.
* Added UV Selector for textures in material inspector
* Added Use Vertex Color for each slot to material inspector, it will use vertex color instead of texture for that particular slot

Humble Game Making Bundle

PlayCanvas is delighted to be part of the Humble Game Making Bundle.

If you’ve just bought the bundle and you’re looking for some help here’s a few pointers.

Activating your Promo

account-promo-code

 

Once you’ve signed up. Head over to your account page, scroll down the Promotional Codes section, enter your code and Submit.

This will give you 3 months with all the Pro features (like private projects and more storage). At the end of the 3 months, don’t worry you won’t be charged, your account will revert to a Free account. Hopefully, if you’ve enjoyed using PlayCanvas, you can upgrade your account back to Pro.

Tutorials and Documentation

Learning to use a new program is always a challenge, but we’ve tried hard to make sure as much as possible is covered in our documentation and tutorials site.

Devlogs and Community

One of the best parts of PlayCanvas is the community of developers and game makers building stuff on the site.

Once you’ve got started and published your first build, be sure to tell everyone about it on your devlog.

When you see projects that you like, don’t forget to Watch and Star them.

Questions and Chat

If you’re struggling with a problem, hit up the answers site to ask the community. If you just want to chat about the game your making try our forum.

PLAYHACK and Game Making Contests

Every month we run a friendly game jam called the PLAYHACK. This month we’re running the PLAYHACK in parallel with the Game Dev Fort Indie Game Making Contest. It’s the perfect way to get used to a new game engine and there are even prizes to be won!

Hope you enjoy using PlayCanvas. See you in the devlogs!

 

PLAYHACK: July ’15 – Join the Indie Game Maker Contest

We’ve timed this month’s PLAYHACK to coincide with the Indie Game Maker Contest 2015. There are great cash prizes to be won!

banner-small

This month’s content is a gorgeous little car and a set of track pieces for you to design tracks with. Get coding to get your car driving. Add extras like obstacles, power-ups, and AI racers. Build your own racing game!

You’ve got until August 7th to enter the Indie Game Maker Contest

1. Fork the project
2. Build your game
3. Publish
4. Best entry by the 7th August will be featured by us.
5. (Don’t forget to enter the Indie Game Maker Contests too)

GET PLAYHACKING

PLAYHACK BANNER_1

P.S. Don’t forget to check their rules and conditions.

Feature update: Real-time asset support

Big changes to some of the underlying architecture of PlayCanvas this week. The powerful features that let you edit your scenes collaboratively with other users where ever they are in the world now applies to all Asset data too.

This means you can update your materials, cubemaps and textures and share those changes in real-time with your team mates around the world.

PBR Assets

 

This isn’t just about collaborating with remote friends though. Our unique ability to synchronize your scene across the internet means that you can edit you scene on your desktop and watch in wonder as it live updates on a mobile device. Perfect for testing on all platforms.

PBR Mob update

Try it now: just launch your application from the editor and visit the URL in your mobile browser.

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: We have a winner!

PLAYHACK April ended last week and we’ve spent the weekend rolling balls and dodging platforms.

Many strong entries this month, but we chose our winner based on how they delivered the complete package. Over 32 levels designed, audio, user interface, a tutorial. And it becomes the second PLAYHACK game to make it on the Chrome Web Store .

marbleous

 

Congratulations to svensei_coder who made Marbleous our favorite game this PLAYHACK.

We also wanted to do a big shout out to our runners up, hoshi , roonio and knownasilya who all made awesome games as well. Try them out below.

hOSHIs_Coins_-_PLAYCANVAS
zebawl
Tumble_-_PLAYCANVAS

Inspired?

Why not try your hand at building a game this month. Our new PLAYHACK is under way right now. Get Started, you can win a Google Cardboard.

Happy Building

PLAYHACK May: Spaceships and win a Google Cardboard

ships_small

PLAYHACK May is upon us. (Which means the PLAYHACK April winner will be announced soon)

Why not join us and create a Space Game. Lunar Lander, Space Invaders, Asteroids, Elite, are a few of the game styles you could try out. We’re giving you 3 spaceship models and 2 asteroid models FREE to build your game with.

How does it work:

1. Fork the project
2. Build a game by the 1st June
3. Winner’s game will be featured on the site and will win a Google Cardboard.

This month’s PLAYHACK is the perfect opportunity to learn about the particle system component. We’ve added one for you, but why not create so other effects for your game. Smoke or worm-holes, for example.

ship_small

Win a Google Cardboard

We’ll pick our favourite entry (make sure you have a published build for us to play) at the end of the month, and we’ll send the winner a Google Cardboard which lets you browse VR scenes just using your phone. It’s the future!

START PLAYHACKING


 

Terms and Conditions

These Terms defined below apply to the PLAYHACK May Competition.

  1. By entering the Competition, entrants agree to be bound by the Terms. In addition, all entrants are required to comply with the PlayCanvas Terms of Use.
  2. PlayCanvas reserves the right to cancel or amend Competitions or the Terms at its sole discretion.
  3. In the event of any dispute regarding the Terms, conduct, results and all other matters relating to a Competition, the decision of PlayCanvas shall be final and no correspondence or discussion shall be entered into.
  4. PlayCanvas reserves the right to disqualify any entrant if it has reasonable grounds to believe the entrant is not eligible or has otherwise breached any of the Terms.
  5. PlayCanvas does not guarantee to use any entry. PlayCanvas may also, in appropriate circumstances, and at its sole discretion, reject, edit, remove or disable access to entries that it considers may be legally or otherwise problematic.
  6. By entering the Competition entrants are also confirming that they own the rights to or have permission for all work submitted and any violation of this disqualifies them from the competition.
  7. By entering the Competition entrants give PlayCanvas permission to use your game and details for any marketing purposes.
  8. The competition Start Date is May 1st, 2015.
  9. The competition Closing Date is May 31st, 2015.
  10. All Entries must be created using PlayCanvas and final games must be published and hosted on the PlayCanvas site.
  11. Judging will consist of playing the published primary app in the submitted project.
  12. The following prizes will be awarded based on the set criteria for the competition: A Google Cardboard.
  13. If the entry was made by a team, the person who owns the account used for submission is eligible for the prize.
  14. PlayCanvas employees are not eligible to enter the competition.
  15. All entrants under the age of 18 must have their parents’ permission before any prizes are awarded.
  16. There is no limit to the number of entries that an entrant can submit.
  17. Each game can only be entered once.
  18. In order to participate in the competition entries must:
    – Be created using the online PlayCanvas platform and game engine.
    – Be a fork of the original PLAYHACK May project.
    – Include and use the contents of the PLAYHACK May project.
    – Have a published primary app.
  19. Winners will be notified by PlayCanvas on or before Friday, June 5th, 2015.
  20. Competition winners will be announced via the PlayCanvas website.

 

 

Developer Spotlight: Rustam Zinurov

After two successful entries into the PLAYHACK game jam, we thought it was time to share some insights from one of our star community members: Rustam Zinurov.

rzinurov

I liked the idea that I didn’t need to install anything – all I needed was a browser

Hi Rustam, tell us a little about yourself?
I’m 29 years old, born in St. Petersburg, Russia, currently living in Copenhagen, Denmark, married, have a Scottish Fold cat. I’ve been a software developer since 2007

What is your background in game development? Have you been doing it long?
I think I have been dreaming about game development since my school days if not from my childhood. My first experience was Java 2ME, it was probably 2006 and I had a Siemens C65 cell phone. Later on I made several games using Flash and successfully sold them on auction to different sponsors. It was a very interesting experience because at some point I decided to collaborate with artists and music composers to make my games look and sound better and it felt like I was playing at real software development business but with low stakes. At some point it become clear that Flash is dying and I wanted to switch to something different. I was looking for a universal solution that is easy to try and not too platform specific. After some investigation I found playcanvas.com. Game development is only one of my spare time activities. It’s a hobby and it has never been a common speciality for me.

How long have you been using PlayCanvas?
Since January, 2015

What led you to start using PlayCanvas?
I watched all your videos and checked most of tutorials. The feeling was that I can start doing something and getting the results with this platform very fast and it was true. I liked the idea that I didn’t need to install anything – all I needed was a browser, so I decided to give it a chance.

space_buggy_start

Try to start with some simple tasks. I’ve seen a lot of guys who were trying to implement a very difficult game as a first project here. If you do that you will definitely fail.

You’ve won two of our monthly game jams PLAYHACK. Congratulations! How do you decide what sort of game you are going to build for the PLAYHACK?
Thanks a lot! I like that you guys are giving us an initial kick with the model you provide for every PLAYHACK. Frankly, I’m usually thinking about spending a minimal time effort to get a complete product within one month because it’s kind of a motivation deadline for me. I’ve abandoned a lot of very cool projects after this period because I get bored fast.

Tell us a bit about the design process you go through with the games?
I think I spend first week prototyping and forming the overall concept, also checking some of the most risky points that I’m not sure about. The next week is for the game process implementation. Third week is for UI and polishing and fourth is for bug-fixing and last minute changes based on the feedback

Are you an artist as well as a developer? How do you get artwork for you games?
Nope. I used to play the accordion when I was a kid. At the last year of my school and at university I experimented with electronic music and then I switched to games. I think I just need to create something all the time. As for the artwork – I’m trying to use basic shapes and minimalistic style. If it’s not possible I’m searching for royalty free models and textures and adjusting them a little bit

Do you have future plans for Yet Another Gems and Space Buggy?
I’m going to try optimizing them to run faster on a limited hardware

What advice do you have for other people building games for PLAYHACK?
Try to start with some simple tasks. I’ve seen a lot of guys who were trying to implement a very difficult game as a first project here. If you do that you will definitely fail and feel very demotivated afterwards. Getting the results and seeing things work as you wanted – that’s the best motivation, at least for me. And motivation is a ‘must have’ if you make games

What would be your dream game to develop?
Not sure about the genre but it should be a dark space game with a lot of metal and scary robots

Thanks to Rustam for taking the time to talk to us. You try his winning PLAYHACK entries, Yet Another Gems and Space Buggy on PlayCanvas. All his projects are open for inspection and are great learning tools for getting to grips with PlayCanvas.

Try your hand at the latest PLAYHACK going on now.