Why I am not using Appcelerator Titanium anymore

19. June 2012

 

A couple months back took a long look at Appcelerator and initially I loved what I saw.  For those of you unaware, Appcelerator allows you to develop “native” applications for Android and iOS in JavaScript that execute in a special version of the V8 JavaScript Engine. I started developing a prototype app of a simple Android game for my daughter and got surprisingly good results quickly.  It was a very encouraging start, but then the wheels fell off.  I notice a number of people end up on this site from search engines looking for an Appcelerator review ( for some reason? ) so I thought I would share my experiences.

 

For whatever reason, I got distracted and put it down for a while, I came back to it recently and intended to finish off that prototype.  Here is the kicker, the exact same code from a couple months ago, unchanged, no longer works on my Transformer tablet.

 

I will say, this is frustrating to say the least.  Now, since the code didn’t change it was obviously an update to Android that broke things, I can’t exactly blame that on Appcelerator Titanium ( oh the joys of Android device compatibility… ) but I can blame them for what came next…

 

You can’t debug on device.  At all.  With the exception of printing comments to logcat, you are basically blind.  This obviously leads to a problem, as here is what happens when I run the app.  ( Which by the way, still runs perfectly fine on my Galaxy Note running Android 2.3.x, its just on my Asus Transformer that it breaks ):

 

appcell

 

Since I can’t debug on device, this is the results I get from connecting with the Delvik Debug Monitor:

 

06-19 09:56:51.090: I/TiApplication(1823): (main) [0,0] checkpoint, app created.
06-19 09:56:51.130: I/TiApplication(1823): (main) [46,46] Titanium 2.0.2 (2012/05/30 10:21 2ff31a3)
06-19 09:56:51.170: D/dalvikvm(1823): GC_CONCURRENT freed 268K, 5% free 6703K/7047K, paused 2ms+2ms
06-19 09:56:51.380: D/dalvikvm(1823): GC_CONCURRENT freed 314K, 6% free 6898K/7303K, paused 2ms+2ms
06-19 09:56:51.450: E/TiApplication(1823): (KrollRuntimeThread) [318,364] APP PROXY: ti.modules.titanium.app.AppModule@4112e910

 

 

And, that is it.  Since I can’t debug on the device, I am pretty much DOA here.  The forums answer nothing ( although I did find other people having similar problems ).  I of course could debug in the emulator with two exceptions.  a) the error only occurs on the actual device b) the debugging experience on Android is still awful.

 

This is another area with Appcelerator Titanium I always found infuriating… the emulator.  Getting it to actually run with your running emulator was a nightmare, you had to match up the Android build version and run configuration exactly with the version of the running emulator, then it was still a 50/50 chance that it would actually use your emulator, or start a new one.  If you’ve worked with Android before, you know how fun waiting for the emulator is!  There is light and the end of the tunnel with the recently release Intel emulator running a heck of a lot quicker, but unfortunately the JavaScript V8 virtual machine Appcelerator relies on doesn’t work with it.

 

It’s a shame to be tripped up on such a thing, but actually being able to debug on your device is an absolute requirement, as is demonstrated by this situation.  There are other annoyances with using Appcelerator certainly…  the binaries it generates are “large” to be extremely kind, performance can be a bit spotty at times and you virtually have to write two applications if you want to support iOS and Android, but none of these was enough to make me give up. 

 

Not being able to debug on device, coupled with some remarkably meh support.. that is.  Combined with the fact my application was broken by an Android update… if I can’t get my code working with my three devices reliably, what happens when I release to the masses with their millions of different devices?

 

Which is disappointing, as I really liked working with Appcelerator.  I even liked Appcelerator Titanium as an IDE, which is shocking as I hate Eclipse, which it is based on. 

 

There is potentially light at the end of the tunnel, as there is an open ticket for debugging on device.  Unfortunately, its been assigned medium priority and has already been open for almost a year.

 

Appcelerator Titanium is an interesting and encouraging product, but for the above reasons, I just can’t commit to using it.  Add native debugging support, and I will certainly reconsider.

General , , ,




Setting up JetBrains WebStorm to work with Cocos2D

7. June 2012

 

After spending so many years as a Windows/Visual Studio developer, Intellisense is a simple must have in my arsenal.  In fact, I believe my repeated use of Intellisense actually severedWebStormAndCocos2d the part of my brain that remembers functions and variables!

 

As I’ve been doing a lot of JavaScript development recently ( between Node.js and now Cocos2D ), I needed to recreate the Visual Studio experience.  I am an avid Notepad++ fan, but I never did get autocomplete working to my liking.  Then I discovered JetBrain’s WebStorm IDE and everything was right with the world.  If you want a full blown IDE for HTML and JavaScript development, you really can’t beat WebStorm ( it is however, not free software ).  Working with Node, auto-competition worked right out of the box.  With Cocos2D-html, there is a bit more work to do.

 

Here, we are going to cover that configuration process.  This process actually applies to configuring any JavaScript library to work with WebStorm, not just Cocos2D.

 

First things first, we need a project.  I am going to create one out of the code I created in the second Cocos2d tutorial. A WebStorm project is simply a directory full of code.  Let’s create one now.

 

Load up WebStorm ( I’m using 4.0.1 ).  Select File->New Project:

image

 

In the Create New Project dialog, under the location select the folder containing your project’s code, then in the Project name field enter your app directory name.  You may have to fight a bit with the UI to get it to work right, it really wants to create a new directory.  If you are creating a completely new project, you can ignore this bit.

 

image

 

Now it will prompt  you:

 

image

 

This is what we want, click yes.  This will simply create a .idea folder within your directory with the project data.  If all went well, you should now have a project like this:

 

image

 

Now the we have a working project, we can adjust the settings on it.  In the menu, select File->Settings:

image

 

Now scroll down and expand JavaScript and select Libraries:

image

 

On the right had side of the screen, locate and click the Add button:

image

 

Name it Cocos2D and click the Attach button:

image

 

Navigate to and select the Cocos2d folder, then click OK:

image

 

You may want to repeat the process for box2d and CocosDenshion ( audio library ) if you wish to use them as well.  Click OK when done.

 

Back in the settings menu, Click the Apply then OK button.

image

 

Now, when you are editing your JavaScript code, you will now have complete auto-completion data for the entire Cocos2D library:

 

image

 

 

Ahhhh, just like being back in Visual Studio with full Intellisense support. My brain can happily go back to forgetting all about functions and member variables! Smile

 

 

If you are looking for a solid JavaSript IDE, you really should check out WebStorm.  If you are looking for a great HTML5 based game library, you should check out Cocos2d-html. As you can see, they work well together.

 

The eagle-eyed viewer may have noticed the Sublime text project files. This is another great IDE (sorta) option that is worth checking out.  I switch back and forth between the two.

General , , ,




Adobe moves to the cloud, new subscription offers all you can eat at 50$ a month!

23. April 2012

 

 

Photoshop has always been the big boy in the 2D imaging world and I have always found it a bit too expensive at the @ 800$ a license.  What would you say though if you could insteadimage buy Photoshop CS on a subscription basis for 50$ a month?

 

How about if I threw in some cloud based features like online storage?  Still not sold?

 

Ok, how about if I threw in Photoshop Touch as well?  Still not convinced?

 

Oh, how about I threw in say… Illustrator, Lightroom, InDesign, Muse, Acrobat Pro, Flash Pro, Flash Builder Premium, Dreamweaver, Edge, Fireworks, Premiere, After Effects, Audition, SpeedGrade, Prelude, Encore, Bridge, Encoder, Proto, Ideas, Debut, Collage and Kuler?  Did that get your attention?

 

 

Because that is exactly what Adobe just did!

 

 

The newly announced Creative Cloud appears to be a an all you can eat subscription to pretty much everything Adobe makes, coupled with their fairly new web services, like 2GB of cloud storage.

 

Pricing starts at 50$ on a annual commitment basis, rises to 75$ on a month by month basis.  If you are already paying for one or more CS products, this represents a massive discount.  Oh, speaking of already paying, if you are an existing subscriber, it is available until August 31 at 30$ a month!.

 

 

 

Tempted yet? Winking smile

 

 

 

EDIT: I suppose I should point out, you can’t actually buy it yet, its in pre-order at the moment. 

General, Art




Photoshop CS6 now available in free beta

22. March 2012

 

 

Adobe has recently made Photoshop CS 6 available as beta, which will last until CS6 is PSCS6released.  In order to activate, you need to have an Adobe ID ( freely available ) within 7 days of installing.  The Mac installer is now 64bit only and weighs in at just under 1GB, while the Windows install is closer to 1.7GB.

 

 

 

The biggest new features in Abobe’s own words are:

 

  • Content-Aware Patch — Patch images with greater control using the newest member of the Content-Aware family of technologies. Choose the sample area you want to use to create your patch, and then watch Content-Aware Patch magically blend pixels for a stunning result.
  • Blazingly fast performance and a modern UI — Experience unprecedented performance with the Mercury Graphics Engine, which gives you near-instant results when you edit with key tools such as Liquify, Puppet Warp, and Crop.* Plus, a refined, fresh, and elegant Photoshop interface features dark background options that make your images pop.
  • New and re-engineered design tools — Create superior designs fast. Get consistent formatting with type styles, create and apply custom strokes and dashed lines to shapes, quickly search layers, and much more.

 

 

The content aware tools are easily the biggest new feature, and look pretty impressive as demonstrated in this video:



Another good video showing off the new features is Russel Brown's 6 favorite new features:

 

 



Lynda.com have also made a number of tutorials freely available for CS6.


So, if you are interested in Photoshop CS6, or just want a free copy for a limited time, head on over to labs.adobe.com and give it a download.

News, Art




Creating a spritesheet using Daz Studio and The GIMP

13. February 2012

 

 

I have been playing around a bit with Daz 3D Studio since it was recently made freely available. At first I struggled to find an actual use for the program, then I realized how exceptionally easy it made creating animated sprites. The following tutorial will walk through creating the following walk cycle using Daz Studio:



The above image is actually a web animation generated from this spritesheet that we will create. All told, the process will take about 5-10 minutes, most of it will be you waiting for your computer!  If the above image isn’t animating, that means your browser ( most likely Internet Explorer ) doesn’t support the keyframes CSS attribute.  Trust me, it works. Smile

 

 

You are going to need a couple things to follow along this tutorial, all of which are (currently) freely available.

 

You will need:

 

 

 

Install all of these products.  Now we fire up Daz Studio.

 

We are going to use the default human, feel free to drag and drop and design your guy however you want.  That said, do not move the person from the default screen location.

 

Once your guy or gal is dressed/decorated however you want, its time to add some animations.  On the left hand panel, select Content Library, Walks then start-(N) and drag it down to the beginning of the timeline.

 

Like so:

 

imageimage

 

If done correctly, if you press play your character will now have a walk cycle.  You can drag down as many animations as you would like to capture, just add them one after another in the timeline.  In this example we are just going to do the single walk cycle animation.

 

Now comes the key part, you don’t actually want your character to be moving like it does currently, you want him to remain stationary.  First lets frame things into the left.  Click the view selector box to rotate to the left view.

 

image

This is the guy you are looking for, click the red section labeled left.  Now ideally your window should look something like this:

 

image

 

 

Now we need to strip out the movement part from the animation.  To do so, first we need to convert to Studio keyframes.  This is done by right clicking in the blank gray area above the timeline and selecting Bake to Studio Keyframes, like so:

 

image

 

You will get the following message:

 

image

 

Simply click Yes.  Now we can edit out your animation.  What we want to do is remove movement along the Z-axis.  In order to do this, select Parameters along the right hand panel, then you want to select the Hip ( the root of all animations ).  You can do this by either clicking it within the scene Window, or selecting it from this drop down:

 

image

 

 

Now that you have the Hip selected, in the Parameters panel ALT+Left click the zTranslate panel:

image

 

This process should reset it’s value to 0.  Now if you press play on the timeline, your animation should now be stationary.  Now its time to render our images out.  To do so in the menu select Render->Render Settings…  like so:

 

image

 

The following window will appear:

 

image

 

If not already done, make sure at the bottom right it is set to “Show Advanced Settings”.  Now drag the quality/speed slider down to 3 ( or it will take forever, for little visible gain ).  Now you want to scroll the options down a bit.  First we want to set our image render resolution.  I personally went with 128x96, but you can use whatever you want.

 

image

 

 

Now scroll the options down a bit more and select the Render To: drop down.  You want to select Image Series like this:

image

 

 

Now we want to select where to render it to.  Leave Start and End Frame at the defaults ( the entire animation ), file in a name and leave it as PNG so we get transparencies.  Switch the location from Library to Folder and pick a directory you want it to save your renderings to, like so:

image

 

Now click the green “Render” button.  You will get a warning like the following:

image

 

Simply click OK.

 

Now we wait… there is absolutely no indication it’s actually doing anything, but Daz Studio is now rendering your sprites.  The only real indicator it’s doing anything is the spinning “busy” mouse icon.  Let it do it’s thing, it took approximately 4 minutes on my PC.

 

Once it is completed, in Explorer navigate to the directory you told it to render to.  If all went well, your directory should be populated with 51 PNG images.  Here’s mine:

 

image

 

 

Now that we have our sprites, we need to make them into a sprite sheet.  If you haven’t already, install The GIMP and the sprite sheet plugin I linked earlier.  Now load up The Gimp.

 

In GIMP select File->Open As Layers…

image

 

Navigate to the folder you saved your images to, then CTRL+A to select them all ( or CTRL + Click to select them one by one ).  When finished press Open:

image

 

If everything worked correctly, your layers list should look like this:

 

image

 

Now select the Filters Menu->Sprite-Sheet->Create From Layers…  If this menu option doesn’t show up, you haven’t installed the spritesheet plugin correctly.

 

image

 

Gimp will now merge all of the layers together into a single sprite sheet in a new window like so:

 

image

 

 

Simply save this file and you are done.  My end results are this.  You may want to do some editing, like making your spritesheet square instead of one wide and short image, but this can be accomplished in a few minutes of copy and paste.  All told, one remarkably fast way to generate a walk cycle sprite animation.  Rendering other angles or different animations is simply a matter of repeating the process from a different angle or dragging and dropping different animation sets.

 

Of course, you can also create your own animations quite simply in Daz.  You can also import your own meshes and props, although I haven’t really experienced this part yet, so I do not know how painful the process is. 

Art , ,