Running Phaser as a Chrome Application

When I was testing out different mobile platforms for my new Lynda.com course, HTML5 Game Development with Phaser, I wanted to also explore how everything runs in both desktop and mobile browsers. Just pulling something up in Chrome for Android (for instance) works wonderfully… but you have to deal with browser chrome.

I found a neat way to get around that and allow use of the prepared icon set to function as a shortcut to launch the game inside a nice, simple Chrome engine instance without all the browser UI.

WindowsTaskbar This works for Chrome, in both the desktop (Windows 8.1, above) and mobile Android. I cannot speak for OSX or iOS… and haven’t tried other browsers either.

screensflow
On Android…

  1. Use the Chrome browser to navigate to the URL of our Phaser game.
  2. Hit the Android SETTINGS button and choose “Add to homescreen”.
  3. The shortcut (using our prepared icon!) will appear on the homescreen.
  4. Use this to launch a chrome-less version of the game!

windowsshortcutFor desktop…

  1. Use the Chrome browser to navigate to the URL of our Phaser game.
  2. Enter Chrome settings and choose “Create application shortcuts…”.chromedesktop You can add the shortcut to either the Desktop or the Taskbar (or both) in Windows. 
  3. Click “Create” and the shortcut (using our prepared icon!) will appear at the selected locations.
  4. Use either to launch a chrome-less version of the game!

Mobile App Tool with Brackets and TopCoat

I came across this new tool from Intel this morning: Intel XDK. I remember looking at this a while back in it’s previous incarnation but it wasn’t as appealing at the time. It didn’t offer much over other IDEs and the relience upon a login with Intel was off-putting.

Since that time… and after the pain involved in teaching a course on PhoneGap – I’ve been looking for a solid tool I can recommend to my students which integrates a lot of the steps and tooling involved in mobile app development using PhoneGap. I want something you can code in, design with, and emulate upon… Intel may have just delivered the goods along with help from Adobe, Apache, and others!

Intel XDK

So what makes it of interest today? A lot of things:

Brackets code editor (from Adobe)
Yep – it has Brackets built into the IDE as a “Code” view. If you open it up without any file selected you can even see the Brackets logo as the background. Cool.
Brackets

Apache Ripple emulation
I just learned about the major changed to the Ripple emulator yesterday from Ray Camden. I even posed the question to Ryan Stewart at Adobe: “Why not build Ripple into Edge Code or Brackets?” Looks like Intel has already done this. Super convenient!
Ripple

TopCoat skinning
This thing even includes Adobe TopCoat for UI components alongside Bootstrap 3, jQuery Mobile, and Intel’s library. Not only that, but it has a neat drag and drop design view similar to Flash Builder. Great for beginners – I can see using this tool when teaching PhoneGap for sure since it has so much of this stuff in one place.
TopCoat

Weinre debugging
Remote debugging with built-in Weirne too. This is the same underlying tech that Adobe Edge Inspect uses.

Samples
A boatload of neat sample apps to examine and re-purpose. Graet for learning how to go about X, Y, and Z.
Samples

Again – when I looked at this tool earlier in 2013 I wasn’t that impressed. With the “new” version, this has changed. I am impressed and to see a bunch of Apache and Adobe technologies integrated into this thing really does display the usefulness and flexibility of open source solutions. Would be great to have Apache Flex integrated for mobile dev as well ;)

Another update to LevelUp for Photoshop CC: Level 5

LevelUp

LevelUp for Photoshop is a game of missions — and points and rewards — that guide you along the way of learning basic Adobe® Photoshop® CC software skills. If you are just starting to use Photoshop, this is the game for you.

We just shipped an updated version of LevelUp that contains a new, fifth, level. This new level has missions to help you create a poster, which is a bit different from the first four, which are all related to photography.

New in this version (1.1.0) of LevelUp for Photoshop CC:

  • An additional level to attain – Level 5: Create a Poster
  • Level 5 has three missions: Create a Poster, Add Text, and Add a Picture.
  • A new set of Quiz questions
  • Freeform Bonus Round

To install this update, navigate to Window > Extensions > Adobe Exchange:
Extension Panel

Then simply perform a search within the panel for “LevelUp”:
LevelUp

Flash Professional CC – Toolkit for Dart

Toolkit for Dart

With Flash Professional CS6, Adobe released an extension called “Toolkit for CreateJS” which allowed Flash Professional content to be exported for use in the HTML5 canvas element via CreateJS libraries. With Flash Professional CC – the toolkit is actually integrated into the core product.

Why stop at CreateJS?

Along with Flash Professional CC – Adobe is also releasing an additional toolkit as an extension… “Toolkit for Dart“. From the FAQ:

The Toolkit for Dart is an extension to Flash Professional CC to publish artwork and animation to the Dart language, which is a class-based, object-oriented language and compiles to efficient JavaScript that is being developed as open source by Google. The extension creates a fully functional and cleanly organized Dart project, leveraging the StageXL for Dart library to reproduce Flash runtime features.

Learn more at http://toolkitfordart.github.io/.