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.

Snappy New Update

Game developers and the idea of perfection are never far apart and we are pleased to announce a new feature that allows you to be as precise as your project demands. If you were thinking what we were thinking then…SNAP!

snap screenshot

Due to popular demand (coming in particular from PlayCanvas user Crefossus), Entities now move incrementally as default. This feature allows you to quickly measure and perfectly place where your Entities need to be, no need to rotate the camera to make sure your items are perfectly in line.

However if the fate of your game rests on being between our increments, have no fear. Holding shift will disable Snap while in the PlayCanvas Designer, you can also check and toggle the status of the snap function by using the magnet icon on your toolbar. Here’s some help, just in case.

snap_tool

http://developer.playcanvas.com/user-manual/designer/designer-settings/

Happy Snapping!

PlayCanvas goes open source

When we first started PlayCanvas (over 2,716 commits ago) WebGL was just beginning to make it’s way from Chrome and Firefox Nightlies into stable releases. Fast-forward to 3 years and WebGL is everywhere, Firefox and Chrome have strong support both on desktop and on mobile. And just this week the final player Apple have joined us with WebGL support for both Safari and iOS.

SWOOOP background

Today, we have some more great news for WebGL fans, game developers and web developers alike.

PlayCanvas Engine is now open source.

The entire runtime engine is available right now on github under the lovely MIT license. Which means you can download it, fork it, and generally use it for anything you like.

Why open source, why now?

Ever since we started the engine open source was always on our mind. We’ve never hidden the source code from developers. Minified versions are available for performance reasons, but during development users always have had full access to the un-mangled engine. This is critical for debugging and fulfilling our mantra to make game development easier.

In reality the engine has been open source since the get go. Officially open sourcing the project was just a matter of time, and the time is now. The engine is mature enough that we’ve established the basic structure, style and functionality but contributors will still be able to make a meaningful contributions to the engine. And of course we’ve now found the time to lay down the foundations of the developer documentation, the API reference, the samples and all the other stuff that makes game development a joy not a chore.

For developers who just want to hack on the code with the overhead of the tools this news is great. Simply download the engine, open up your text editor and get cracking. For those of you who want more structure, and higher level tools, the PlayCanvas platform is a perfect addition to accelerate your game production.

So, this engine? What is it?

In case you haven’t come across the PlayCanvas Engine before, it’s a JavaScript library engineered specifically for building video games. It implements all of the major components that you need to write high quality games:

  • Graphics: model loading, per-pixel lighting, shadow mapping, post effects
  • Physics: rigid body simulation, ray casting, joints, trigger volumes, vehicles
  • Animation: keyframing, skeletal blending, skinning
  • Audio engine: 2D and 3D audio sources
  • Input devices: mouse, keyboard, touch and gamepad support
  • Entity-component system: high level game object management

Design Goals

We had a couple of goals in mind when we originally designed the engine.

  1. It had to be easy to work with.
  2. It had to be blazingly fast.

Simple Yet Powerful

As a developer, you want well documented and well architected APIs. But you also want to be able to understand what’s going on under the hood and to debug when things go wrong. For this, there’s no substitute for a carefully hand-crafted, unminified, open source codebase.

Additionally, you need great graphics, physics and audio engines. But the PlayCanvas Engine takes things a step further. It exposes a game framework that implements an entity-component system, allowing you to build the objects in your games as if they were made of Lego-like blocks of functionality. So what does this look like? Let’s check out a simple example on CodePen

playcanvas_codepen

As you can see from the Pen’s JS panel, in just over 100 lines of code, you can create, light, simulate and view interesting 3D scenes. Try forking the CodePen and change some values for yourself.

Need For Speed

To ensure we get great performance, we’ve built PlayCanvas as a hybrid of hand-written JavaScript and machine generated asm.js. The most performance critical portion of the codebase is the physics engine. This is implemented as a thin, hand-written layer that wraps Ammo.js, the Emscripten-generated JavaScript port of the open source physics engine Bullet. If you haven’t heard of Bullet before, it powers amazing AAA games like Red Dead Redemption and GTAV. So all of this power is also exposed via the PlayCanvas engine. Ammo.js executes at approximately 1.5x native code speed in recent builds of Firefox so if you think that complex physics simulation is just not practical with JavaScript, think again.

But what about the non-asm.js parts of the codebase? Performance is clearly still super-important, especially for the graphics engine. The renderer is highly optimized to sort draw calls by material and eliminate redundant WebGL calls. It has also been carefully written to avoid making dynamic allocations to head off potential stalls due to garbage collection. So the code performs brilliantly but is also lightweight and human readable.

Powering Awesome Projects

play-canvas-engine-500

The PlayCanvas Engine is already powering some great projects. By far and away, the biggest is the PlayCanvas web site: the world’s first cloud-hosted game development platform.

For years, we’ve been frustrated with the limitations of current generation game engines. So shortly after starting work on the PlayCanvas Engine, we began designing a new breed of game development environment that would be:

  • Accessible – Using any device with a web browser, plug in a URL and instantly access simple, intuitive yet powerful tools.
  • Collaborative – See what you teammates are working on in real-time or just sit back and watch a game as it’s built live before your eyes.
  • Social – Making games is easier with the help of others. Be part of an online community of developers like you.

PlayCanvas ticks all of these boxes beautifully. But don’t take our word for it – try it for yourself and discover a better way to make games.

Speaking of Games

It’s all very well talking about engines and tools, but engines are only as good as the games they let you make. Fortunately we’ve got a doozy for you.

SWOOOP title

SWOOOP – mobile browser game built using the PlayCanvas Engine

SWOOOP is a great demonstration of what you can achieve with HTML5 and WebGL today. The game runs great in both mobile and desktop browsers and PlayCanvas also supports publishing to App Stores through third-party tools like Ludei’s CocoonJS or the open source Ejecta project.

Want!

So you want to help us make the best damn 3D engine on the web? Great! Head over to our github page. Get cloning, starring and forking while it’s fresh!

Stay in the Loop

Lastly, stay in touch, we’re a friendly bunch.

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.

We’re super excited to see what the open source community will do with the PlayCanvas Engine. Get creative and be sure to let us know about your projects.

Toodle pip!

PlayCanvas joins Autodesk for Nordic Game

This week, thousands of indie developers are making their way to Malmö, Sweden for a very special conference. That’s right folks – Nordic Game is here again!

NG-Award-2014(1)

 

Of course, PlayCanvas will be there to join the fun! And first things first – we want to meet you! If you love making games, you’re going to love PlayCanvas so come and check out the latest build. But where? Well, this year, we will be demoing on Autodesk’s booth (C1) and demonstrating a workflow to effortlessly publish Maya LT content as realtime 3D in the browser and on mobile. So make sure you drop by and find out why PlayCanvas is a better way to make games. If you would like to arrange anything beforehand, just send an email to info@playcanvas.com.

Game Jam

But wait, there’s more. Autodesk and PlayCanvas will be partnering on a game jam at Nordic Game. There are some great prizes on offer, such as a top of the line AMD graphics card, and not to mention Pro subscriptions to PlayCanvas.

So sign up, get jamming and discover why Maya LT and PlayCanvas make such a hot couple!

See you at the show!

How to Make a Video Game in 48 Hours

Making a video game in 48 hours is tough. In fact, it’s one of the most gruelling mental challenges you can face. But every 4 months, thousands of die hard game developers enter Ludum Dare, a game jam of epic proportions. And they’re not doing it for the prizes (there aren’t any) or even the glory. They’re doing it to give the gift of a game. And when it’s a game you have created yourself, it’s a very personal and powerful gift.

So I took part in Ludum Dare once more on the 26th-27th of April. Before I even knew the theme, I developed a number of aims:

  • I was going to be using PlayCanvas and I was going to be pushing the tools as hard as I possibly could.
  • I was going to be building my game more transparently than any other game jammer in history. Seriously.
  • I wanted to make something 3D and physics based.

As usual, the theme was announced in the early hours of Saturday morning: ‘Beneath The Surface’. Ordinarily, I would settle on an obscure interpretation of a theme, but this time around, my creative juices were not in full flow so I took the literal route. I was going to make a game where you would pilot a submarine.

After about 30 minutes, I had the basic physics of a twin propeller sub implemented (arrow keys to control):

http://apps.playcanvas.com/will/beneaththesurface/v1

I was off to a flying start! But making video games is art. It’s practically a spectator sport and I was determined to give the internet full access to my creative process. And this is what makes PlayCanvas so cool. I could simply invite the internet into my project:

Screen Shot 2014-05-06 at 00.25.19

And indeed, I had a steady flow of curious spectators dropping in and out of my project as it slowly took shape. If nothing else, it kept me super-motivated.

The Twitter comms continued throughout the weekend. In all, I published 10 interim builds of the game plus the final ‘gold’ release at submission time. You can find them all on the ‘Published Apps’ page on the project’s dashboard. So it’s great to show the world your game rising from its foundations, but are there any other benefits to this ‘bare all’ strategy? Why yes! You get feedback on your game design, you graphical design, your audio, everything! Your Twitter followers are your QA team. Use them!

So I was absolutely nailing the comms side of things. But there was the little matter of actually making the game. I had my simple prototype and now I had to build it out. I slowly developed the concept where the player has to explore an undersea environment to locate and salvage 10 pipes and return them to a ‘drop off’ point. I also added the necessity to keep the sub topped up with fuel by visiting refuelling points. There were a number of challenges that I had to solve. I’ll go through the main ones now:

Terrain

I needed a dramatic undersea landscape. Unfortunately, my modelling skills suck so I resorted to a sneaky procedural solution. Step 1: Generate a heightmap. Check out this tutorial that shows you how to do that in Photoshop. Step 2: Create a 150×150 division plane in 3DS Max and apply a Displace modifier. Then set the heightmap as the source texture for the displacement:

terrain

 I also exported a 75×75 division version which I would use for environment collision which would essentially be an optimisation for the physics engine. It would have been nice if I had had time to texture map it. In Ludum Dare, you have to avoid getting caught up in the detail. Keep your eye on the goal and if you have time left at the end, come back and polish.

Building the Submarine

As I mentioned, my modelling skills are pretty horrendous. Perhaps the hardest thing I had to build was the submarine (I also made a Flappy Bird-esque pipe, a refuelling station and a drop off point). So between 2AM and 5AM on Sunday morning, I built this in 3DS Max:

submarine

So it wasn’t pro-level art production, but I was proud that I had improved my skills in this area. I built the propeller separately since they were controlled independently in PlayCanvas. Anyway, I had a lot of fun learning all about powerful 3DS Max features like boolean geometry (for combining meshes in different ways) and various modifiers for skewing and warping meshes.

Game UI

HUDs can be a nightmare to build and build fast. Luckily, there’s a handy PlayCanvas extension that renders bitmap fonts beautifully. It was developed originally for the game SWOOOP and it worked so well, it was open sourced on GitHub. I found an open source approximation of the Flappy Bird font and imported it into my project. Super easy and it looked great:

pipewars_splash

Audio

I’ve already mentioned that I can’t model for toffee. My composing skills are even worse. So what’s a Ludum Darer to do? I googled: ‘Ludum Dare procedural music’. Top link:

http://www.ludumdare.com/compo/2013/02/19/procedural-music-generator/

The Abundant Music procedural music generator is great:

am_screenshot_1

Check it out for yourself!

Hopefully, that gives you a good idea of how I spent a lot of my time while developing the game. Do check out the project for yourselves to learn more and, hey, if you want to see the finished game:

PLAY NOW!!

So I guess the moral of the story here is that you don’t need to be a Leonardo de Vinci to make artwork or Mozart to make game audio. There are tools out there that can do 90% of the heavy lifting. You just need to know which buttons to press. Doing your research in advance of a game jam will help you. And the more jams you do, the more tricks you will have up your sleeve.

I’ve been making video games for decades now and I’m still learning. I guess that’s what keep me coming back for more. See you all for Ludum Dare #30 in August!

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!