Renaun Erickson

Adobe Creative SDK Update v0.5.2062

Renaun Erickson — Fri, 24 Oct 2014 16:08:24 +0000

In the latest update to the Creative SDK released this week there are a few changes to look at. First the SDK now requires Xcode 6. There is also updates to various iOS 8 issues that are fixed now.

The AdobeUXAssetBrowser class has a new method for launching the asset browser component. It has the method:

- (void)popupFileBrowserWithParent:(id)parent configuration:(id)configuration onSuccess:(id)successBlock onError:(id)errorBlock

For no filters on mime types (png, jpeg, psd, ai, etc…) or data sources (Creative Cloud files, Brushes, etc…) just pass in nil and nothing will be filtered. To filter the AdobeUXAssetBrowser you would create an instance of the AdobeUXAssetBrowserConfiguration class and add the appropriate filters to the properties on that class.

Here is a quick look at the AdobeAssetDataSource options for an idea of how it works:

Here is some sample code for configuring the AdobeUXAssetBrowser.

AdobeUXAssetBrowserConfiguration *conf = [[AdobeUXAssetBrowserConfiguration alloc ] init]; conf.dataSourceFilter = [[AdobeAssetDataSourceFilter alloc ] initWithDataSources:@[AdobeAssetDataSourceFiles] filterType:AdobeAssetDataSourceFilterInclusive];

The code above sets the browser to only show files from the Creative Cloud files not other sources like Adobe Brush CC or Adobe Illustrator Draw.

Go grab the latest version of the Adobe Creative SDK at http://creativesdk.adobe.com.

The post Adobe Creative SDK Update v0.5.2062 appeared first on Renaun Erickson.

Adobe Creative SDK

Renaun Erickson — Wed, 08 Oct 2014 00:46:07 +0000

There has been a lot of announcements at Adobe MAX 2014. I have been busy working closely with the Adobe Creative SDK. I helped Threadless create their brand new Threadless Make iPad application that leverages the Adobe Creative SDK. The Creative SDK was made publicly available just yesterday. There are a other applications that worked with the beta SDK and have launched in the App Store. Here are few of them:

Flowboard
Fabrika App
Concepts: Smarter Sketching
Rhonna Designs
Storehouse – Visual Storytelling
Snapwire

What is the Creative SDK?

The Creative SDK is a rich set of iOS components creating a new era of connected creativity and a seamless workflow between your mobile applications and Adobe Tools and Creative Cloud services, reaching millions of new users.

Hows does a developer get the Creative SDK?

A developer can get the Creative SDK by going to http://creativesdk.com and signing in with their Adobe ID then download the iOS frameworks.

You see in the picture above what the download page looks like. The main frameworks of the Creative SDK are in the iOS section under “Download iOS”. The “Device Extensions” under that button is are classes to support 3rd party input devices (Wacom, Fifty Three) under one API and UI experience in connection with Adobe’s Ink and Slide hardware. The Android section is an early build of the SDK for Android. And finally the far right section is a sample application that can be downloaded, hooked up to the Creative SDK and run to see it all work, full of code samples to started from.

How easy is it to use?

The Creative SDK is made up of components and low level API calls. It is still in the beginning it will continue to grow to support mobile, desktop and web. But for now the first version is focused on iOS with pre-built components to make it easy to integrate with. Here is a quick code sample and the result of what you get in objective-C:

AdobeUXAssetBrowserOptions testOptions = 0;
testOptions |= EnablePSDLayerExtraction;

// testOptions |= EnableMultiSelect;
// testOptions |= ShowMultiSelectOnPopup;
// testOptions |= ShowGridViewOnPopup;
// testOptions |= SortAlphabeticallyOnPopup;

[[AdobeUXAssetBrowser sharedBrowser] popupFileBrowserWithParent: self
withOptions: testOptions
withFilter: nil
withFilterType: AdobeUXAssetBrowserFilterTypeUnspecified
onSuccess: ^(NSArray *itemSelections)
{
AdobeSelectionAsset *itemSelection = [itemSelections lastObject];
AdobeAsset* item = (AdobeAsset *)itemSelection.selectedItem;
if ( IsAdobeAssetFile(item) )
{
AdobeAssetFile* file = (AdobeAssetFile *)item;

[file getRenditionWithType: AdobeAssetFileRenditionTypePNG
withSize: CGSizeMake(1200,1200)
withPriority: NSOperationQueuePriorityNormal
onProgress: ^(double fractionCompleted) {
}
onCompletion: ^(NSData *data, BOOL fromCache) {
// [UIImage imageWithData: data] withName:file.href]; }
onCancellation:^ { }
onError:^(NSError *error) { }];
}
}
onError:^(NSError *error) {}];

The code above launches the file browser component which looks like the following image in an iPad application:

Conclusion

Go check out the existing applications that have integrated the Creative SDK. Then download the Creative SDK for yourself and get started leveraging the power of the Adobe Creative Cloud.

The post Adobe Creative SDK appeared first on Renaun Erickson.

Live Texture Updater Plugin for Photoshop CC

Renaun Erickson — Thu, 26 Sep 2013 18:38:33 +0000

Photoshop CC has a new Node.js based feature called Adobe Generator for Photoshop CC. What this means for developers is they can build plugins with Node.js libraries and JavaScript. I showed off how to do live texture updating of a three.js app using the standard Image Assets Adobe Generator for Photoshop CC plugin here.

In this blog post and video I want to show off how a custom plugin called, Live Texture Updater, lets you have more control of where the outputted images are from the PSD file as well as implementing WebSockets for update notification (no polling of images).

For example the default Image Assets plugin that I modified pushed all assets into a folder with the name of the PSD file + “-assets”. Also layers could not have certain characters like “/” in them. What I did was extend the plugin to allow the designer to set where to output the assets by looking for a top most empty layer with the name of “root=./” where the path could be relative or full path. This root path is then used instead of the PSD filename + “-assets”.

The other feature I added was the ability to add folders in the layer or group names that you are exporting. So you could have “images/enemy/ship1.png” and “images/ui/panel.png” in the same PSD and they would be put in the root + layer/group name folder. This new layer/group name is also what is sent through the WebSocket logic to the client to tell it what has changed to make the live texture update.

I used Pixi.js in the example below but the plugin just send generic image filename data over WebSockets and could easily be used in other frameworks that want to have live texture updating. There is a HTML5 game framework called Phaser that uses Pixi.js so you could use the example code below to do live design of your textures in your Phaser games.

What do you need?

Live Texture Updater Adobe Generator for Photoshop CC plugin
Adobe Photoshop CC
Sample Pixi.js Application

How to Use

Grab the code off https://github.com/renaun/WorkflowExamples
Copy the live-texture-updater folder into your /Applications/Adobe Photoshop CC/Plugins/Generator folder (create the Generator folder if it does not exist).
Restart Adobe Photoshop CC if it was open.
Open up the GameAssets.psd in the PhotoshopCCGeneratorPixiJS folder.
Go to File -> Generate and make sure the Live Texture Updater plugin is checked.
Create a webserver (I use httpster) on the PhotoshopCCGeneratorPixiJS folder and run index.html page.
Now make changes to the layers or group in the GameAssets.psd and watch the texture update in real time.

Here is a video showing off the plugin and Pixi.js app running on the desktop:

Here is a video showing off the plugin and Pixi.js app running on the a mobile device:

The post Live Texture Updater Plugin for Photoshop CC appeared first on Renaun Erickson.

Live three.js Texture Updating with Photoshop CC

Renaun Erickson — Mon, 16 Sep 2013 20:46:39 +0000

Check out the video below that explains how to live update textures in your three.js application using Adobe Generator for Photoshop CC. The source code for the example shown in the video is available at:

https://github.com/renaun/WorkflowExamples/tree/master/PhotoshopCCGeneratorThreeJS

If you are wondering how I get three.js to update its texture check out this JavaScript code:

/**
Author: Renaun Erickson @renaun http://renaun.com
Live three.js Texture Update Plugin

Meant for development of designing textures in connection with
Photoshop CC Generator feature.

You will have to point your assets urls to the folder generated by
Photoshop CC Generator.

Usage:
include renaun.three.ltup.js after three library

// After you instantiate your threejs renderer add this code
renderer.addPostPlugin(new RENAUN.LiveTextureUpdatePlugin());
**/
var RENAUN = {
cacheLiveTextureUpdates: {},
updateFrameRate: 30
};

THREE.ImageUtils.loadTexture = function ( url, mapping, onLoad, onError ) {

var loader = new THREE.ImageLoader();
loader.crossOrigin = this.crossOrigin;

var texture;
if (!RENAUN.cacheLiveTextureUpdates[url])
{
texture = new THREE.Texture( undefined, mapping );
RENAUN.cacheLiveTextureUpdates[url] = {size: 0, texture: texture, url: url };
}
else
{
texture = RENAUN.cacheLiveTextureUpdates[url].texture;
}

var image = loader.load( url, function () {

texture.needsUpdate = true;

if ( onLoad ) onLoad( texture );

} );
texture.image = image;
texture.sourceFile = url;

return texture;
}

RENAUN.LiveTextureUpdatePlugin = function () {

var count = 0;

this.init = function ( renderer ) { }

this.render = function ( scene, camera, viewportWidth, viewportHeight ) {
count++;
if (count % RENAUN.updateFrameRate !== 0)
return;
for (var key in RENAUN.cacheLiveTextureUpdates)
{
THREE.ImageUtils.loadTexture(key);
}
if (count > 300000000)
count = 0;
}
}

To use the live texture update plugin all you need to do in your three.js application is add this:

var renderer = new THREE.WebGLRenderer();
renderer.addPostPlugin(new RENAUN.LiveTextureUpdatePlugin()); // Added for Live Texture Updates

The constant updating of the actual texture comes from the Adobe Generator for Photoshop CC. The new “Image Assets” generator plugin constant updates Photoshop folders or layers with a .jpg/.png suffix. If you want to learn about creating your own Photoshop CC generator plugins here are some links:

Intro to Photoshop Generator by Lee Brimelow
Script your first Adobe Generator Plugin

The post Live three.js Texture Updating with Photoshop CC appeared first on Renaun Erickson.

Cross Compiling your ActionScript Starling Games to WebGL and JavaScript

Renaun Erickson — Thu, 12 Sep 2013 13:13:02 +0000

Want to see it in action? Check out the demo here:

http://renaun.com/html5/randoristarlingtest/hero.html

Summary

Soure Code:
Your Code +
Starling Source +
KontikiJS (WebGL/HTML5 implementation of Flash API) +
Randori Guice Framework

Feed to Compiler:

Randori Compiler

Output:

JavaScript version of your code.

Why have an ActionScript 3 to JavaScript Workflow

The short answer is to give ActionScript 3 developers who have built Starling games a path to JavaScript. Things change fast in the current landscape and there are many new platforms and languages that developers can choose to start a new project. At the least this provides a transition path for those developers building Starling based games.

This is not meant to be a general purpose solution for all AS3 code. In other words not all Flash APIs are implemented in KontikiJS. Having said that KontikiJS is an open source project and people can add any needed functionality.

Simple Tutorial: Compiling the Example

I have created a zip file that contains all the bits of code you need to try out compiling AS3 code into JavaScript. Download the following code:
http://renaun.com/html5/HungryHeroJSExample.zip.

The zip file contains two folders: HungryHeroJS and common. The source files of the HungryHero AS3 game are in HungryHeroJS, whereas the “common” folder contains the four subfolders: KontikiJS, randori-compiler-latest, randori-sdk, and Starling-Framework. All of these are open source Github repos (list of repos at the end of the post) but I provided them here to have a known working set of code to start from.

Also note this is JavaScript so if things don’t work check the developer tools and make sure to also understand where WebGL and Web Audio is supported. I can’t help with browser limitations of WebGL and Web Audio.

Basic Steps

Unzip HungryHeroJSExample.zip
Open up Terminal (Mac) or Cmd Prompt (Windows) and navigate to the unzipped HungryHeroJS folder
Run buildjs.sh (Mac) or buildjs.bat (Windows)
Start a web server in this folder, or copy the index.html, media folder, and js-randori folder to a webroot. I use httpster (Node.js package) to start up a web server in this folder

You should see some output in the console that looks like this:

Randori Compiler v0.2.6.5_renaun
Compiling file: /Code/WebRelated/RandoriExamples/HungryHeroJS/js-randori/starling/filters/FragmentFilter.js
Compiling file: /Code/WebRelated/RandoriExamples/HungryHeroJS/js-randori/starling/filters/DisplacementMapFilter.js
Compiling file: /Code/WebRelated/RandoriExamples/HungryHeroJS/js-randori/flash/events/EventDispatcher.js
Compiling file: /Code/WebRelated/RandoriExamples/HungryHeroJS/js-randori/flash/display/DisplayObject.js
Compiling file: /Code/WebRelated/RandoriExamples/HungryHeroJS/js-randori/flash/display/InteractiveObject.js
Compiling file: /Code/WebRelated/RandoriExamples/HungryHeroJS/js-randori/flash/display/DisplayObjectContainer.js

Compiling Your Project

The easiest method for now to try out your own code is to reuse some of the files in the HungryHeroJS folder. I would copy over the folder and rename it to your project. Remove the media folder and src folder. Then copy in your source files into a new “src” folder. Then change the index.html file to reference your main AS3 class file instead of “HungryHero”.

Things you will probably run into:

You need all AS3 source files, no SWCs
Embed statements need another piece of metadata [Factory], see the com.hsharma.hungryHero.AssetsHungeryHero.as file for an example.

Github Repo Links

KontikiJS – https://github.com/renaun/KontikiJS
Randori Compiler (my fork) – https://github.com/renaun/randori-compiler My changes will hopefully make it back into the main branch at some point.
Randori SDK – https://github.com/RandoriAS/randori-sdk
Starling-Framework (my fork with minor changes) – https://github.com/renaun/Starling-Framework
HungryHero AS3 Sample Code – https://github.com/renaun/RandoriExamples/tree/master/HungryHeroJS

The post Cross Compiling your ActionScript Starling Games to WebGL and JavaScript appeared first on Renaun Erickson.