376137_219716018098056_119264868143172_499051_609147412_n

Intro

0

Hello reader

I decided to start series of articles that will follow my progress on a personal project for mobile/web.  My goal with this is to display that flash is a viable platform for deployment on multiple systems. Almost a year ago i took upon myself to develop a game for android, Dr. Darwin, you can find it in the store if interested. The outcome is simple smooth game that is running on display list with flex. It was fun for a while to develop it, but as soon as i decided to add proper graphics and animations to it, the FPS dropped to 3 which is not acceptable for today’s market, so i came to conclusion that i need to scrap it and pretty much start from scratch. This may seem like an overkill, but i want to learn the new technologies available for flash and its seems like a good time to do it. Flash 11 sand storm dust has settled and some of the standards are now available for usage. My project will use the following:

  • mvcExpress – Framework designed specifically to be faster lighter and easier to learn than anything else on the market
  • Starling – Stage3D accelerated 2D rendering engine
  • Feathers UI – Stage3D based UI framework
  • In-App billing extension – AIR native extension for in app purchases for android
  • Bitbucket.org – GIT based source control repository

Goals of the project:

  1. Performance and speed while using graphics heavily
  2. Deploy capability on multiple platforms with the same code base
  3. Document the problems and their solutions
  4. Monetize (Duh!)
  5. Learn

Its gonna be a ride for me, so stay tuned if interested and lets code :)

376137_219716018098056_119264868143172_499051_609147412_n

Flash 2.0

0

This is going to be a series of documentary articles for what i will be doing in the upcoming months. The Goal is to develop a cross platform game using all the latest technologies in flash arsenal. Starling, Feathers ui, ASC 2. Then deploy on google play store, apple app store, facebook. Use the same code as much as possible between platforms.

376137_219716018098056_119264868143172_499051_609147412_n

Publishing ideas nowadays

0

So, i haven’t written anything in quite a while and i would like to change that. This article is a round up of the things i did to deploy AIR mobile app on Google play market and Facebook. You might not be aware, but for quite some time i was working on my personal project for mobile devices called “Dr. Darwin”. It was my first attempt at making an indie game. The game is a puzzle game inspired by “Triple town” and “Natural chemist”. Goal of the game is to merge items on the screen by type evolving them to higher levels. I mentioned “Triple town”, because of the way they monetize the game, it really inspired me to start with an idea that has been growing inside my head for a while. I gathered a couple of friends, told them about my plan and we started working. Let me start by saying that writing a cross platform code is now easier then deploying the application itself. The game was written targeting exclusively android devices. Open source for me is the way to go, so I used technologies like AIR mobile, Apache Flex, Flashdevelop and so on. The result of it can be found here https://play.google.com/store/apps/details?id=air.com.riawolf.dr.darwin and you should be aware that its still work in progress.

The code of the client is written in mxml and ActionScript, pureMVC single-core was used to tie things together and Flashdevelop with batch scripts were used for the deploy build. The ease of development with flash is stunning comparing with 3-4 years ago. All of the tools setup with clicks alone and it feels like working with really professional tools that cost around 1000 bucks for license. Anyway, the app was done and deployed, Google app store accepted it in no time and for a while i sat back and relaxed. Today i had an idea to attempt to publish to Facebook. Changing the code from mobile to web version took me in total 24 minutes. That is amazing, i would have never suspected how easy it is. And then the fun ended, turns out Facebook requires SSL urls for embedding items in canvas.I tried bypassing the requirement with bit.ly, didnt work, then i considered actually getting SSL for my domain but the prices and regulations required are like alimony to 5 kids ant 3 ex wives, so i used what Facebook suggested, Heroku. Its a git repository that basically accepts everything that you push in and then deploys the root of your repository as Facebook app. Now you can check out the game at https://apps.facebook.com/dr_darwin/

Like i mentioned before, this is not a complete game, i published it to figure out required circles of hell to get it online. Have fun

376137_219716018098056_119264868143172_499051_609147412_n

My random utils

0

Just sharing very small class that i use on daily business. First function is simply silent DisplayObject removal. Second one is a deep comparison scan of two objects, very useful in flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
package com.riawolf.utils
{
  import flash.display.DisplayObject;
  /**
   * ...
   * @author me
   */

  public class RandomUtils
  {
   
    public static function cleanRemoveChild(value:DisplayObject):void {
      if (value) {
        if (value.parent) {
          value.parent.removeChild(value);
        }
      }
    }
   
   
    public static function isEqual(a:Object, b:Object):Boolean {
      if (a !== b) {
        return false;
      }
      for (var key:* in a) {
        if (!isEqual(a[key], b[key])) {
          return false;
        }
      }
      for (key in b) {
        if (!isEqual(a[key], b[key])) {
          return false;
        }
      }
      return true;
    }
  }

}
376137_219716018098056_119264868143172_499051_609147412_n

The king is dead, long live the king

0

Well, by now you have probably already heard the news about Adobe canceling flash plugin for mobile devices. Great news for mac addicts, late Steve’o was right once again, for the wrong reasons, but still. Now just to see the big picture lets forward the time to 2-3 years in future. There are couple of things happening in the mobile browsing experience. First of all there are no flash banners, w00t for users, bad for marketing, that means web campaigns are extremely not effective, less money gets invested in advertising, less money in the market of web development, so developers are shifting towards apps. Casual browser gaming is back to 2005, text based Omerta style games for core gamers. Less visual appeal = smaller market = less money = less developer focusing on these solutions. And so on and so forth.

Now you might object by saying that HTML5 can do all of those things that flash can, and i respond- bullshit. HTML5 is pretty and blinking and no plugins, bla bla bla. At the end of the day, you are still stuck with JavaScript, a DOM type language that should have not survived the crossover to the new millennium. You might also object that banners can be made with HTML5, but you would be missing the security issue. Most banners are hosted off the website servers, meaning if you embed HTML5 banner, you ember a cross site script, good luck with sandboxing that. HTML5 got to where it is because Apple decided to ban flash plugin so Apple had to push browser engines really hard because it needed to catch up with flash and HTML5 nowhere near that point. I just hope that new Macromedia pops up very soon to cover the gap, and this time they wont sell out.

376137_219716018098056_119264868143172_499051_609147412_n

Custom dynamic hit-zones for flash objects

0

Lets say you need a hit-zone for a transparent bitmap that matches the images non transparent pixels. What do you do? The answer is quite simple, you find all those pixels that you need and draw a square on top of it. Or so i thought, turns out if you draw a square using

1
shape.graphics.drawSquare(x,y,w,h)

You create a bunch of squares inside shape object and they are not merged, so when ever you move your mouse on top of the hit zone, performance peaks for hit test calculations. The solution i came to use was in Marching squares algorithm. The goal of the algorithm is to provide you with a set of shape outline coordinates that you can use with shape.graphics.lineTo(x,y) to draw the outline you need and fill it.
The library i used is located here
and the code is here

1
2
3
4
5
6
7
8
9
10
11
12
13
14
    public static function getOutline(b : BitmapData, xpos : int = 0, ypos : int = 0, zone : Shape = null) : DisplayObject {
      if (!zone) {
        zone = new Shape();
      }
      var points:Vector.<Point>=MarchingSquares.getBlobOutlinePointsClockwise(b);
      zone.graphics.beginFill(0, 1);
      zone.graphics.moveTo(points[0].x, points[0].y);
      for (var i:int = 1; i < points.length;++i) {
        zone.graphics.lineTo(points[i].x, points[i].y);
      }
      zone.graphics.endFill();
      return zone;

    }

Now once you have the shape, there is one more trick you need to do

1
2
3
4
5
6
var result:DisplayObject = FieldUtils.getOutline(_bitmapData, 0, 0, null);
// create a SimpleButton instance to contain the shape
var simpleButton:SimpleButton = new SimpleButton(null, null, null, result);
// add the simple button to sprite so that flash understands the presence of the hit zone and reacts to mouse input
_hitBoxContainer.addChild(simpleButton);
_bitmapData.dispose();

if you simply add hit zone to display list and try to listen for events they will not fire, you need to go inception on the button, putting it one level deeper and adding event listeners on the sprite containing the SimpleButton instance

376137_219716018098056_119264868143172_499051_609147412_n

Strategy pattern

0

Couple of months ago i joined a high complexity project that a team of multiple developers were working on. This required some adjusting to my usual workflow, but it was for the better. I learned a lot and one of those things is a strategy pattern. This pattern goes well with pureMVC and definitely produces reusable code in the project. The core concept behind the pattern is to use a strategy object for every interface method that covers some group of actions. For example your object needs to flip on Y axis every click. This is how you would do this action in strategy pattern.

1
2
3
4
5
6
7
8
9
10
11
12
package  
{
  /**
   * ...
   * @author Martynas Bajoraitis
   */

  public interface IFlip
  {
    function flip():void;
  }
 
}

now the strategy interface:

1
2
3
4
5
6
7
8
9
10
11
12
package  
{
  /**
   * ...
   * @author Martynas Bajoraitis
   */

  public interface IFlipStrategy
  {
    function flip():void;
  }
 
}

now the strategy class itself

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package
{
  import flash.display.DisplayObject;
 
  /**
   * ...
   * @author Martynas Bajoraitis
   */

  public class FlipStrategy implements IFlipStrategy
  {
    private var _target:DisplayObject;
    public function FlipStrategy(target:DisplayObject) {
      _target = target;
    }
    public function flip():void {
      _target.scaleY *= -1;
    }
  }
 
}

and finally the implementation

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
package
{
  import flash.display.Sprite;
 
  /**
   * ...
   * @author Martynas Bajoraitis
   */

  public class Flipper extends Sprite implements IFlip
  {
    private var _flipStrategy:IFlipStrategy;
    public function Flipper() {
      _flipStrategy = new FlipSptrategy(this);
    }
    public function flip():void {
      _flipStrategy.flip();
    }
  }
 
}

this example very crude and basic, but it shows the usability of strategy pattern. Using the strategy class i can extend every display object and make it to have the same action just by passing the right parameter to the strategy constructor

376137_219716018098056_119264868143172_499051_609147412_n

Tips’n'Tricks for pureMVC on Titanium

0

Howdy people, its been a while. Anyway, here are some useful info on pureMVC framework. Titanium is not really meant for OOP, classes are not really welcome inside this framework. Most of the files are meant to be included as if they were AS2 #include somefile.as with procedural code instead of real OOP. This has its own advantages and drawback, main advantage is that newbies can quickly set up something that they later name as “Application”. Reminds me the times of flash 7 where designers used to tweak code directly on timeline and later they would say “i fixed it”. However the drawback is that you cant control the display tree and the whole structure application goes through the window. That is not how a real professional app should be built. pureMVC comes in to save the day with the encapsulation of most views and windows and a strong event based UI interaction. But lets get to the point here.

Heres tip #1:
All of your windows should be at least a viewComponent of a mediator. Even better is to use a separate component to wrap the window inside a class and just attach simple events to the component. Usually any outcome of UI interaction with the window is either open another window or close the window and go back to the previous one. Surely there are a lot of things you do inside a window, like input text, move stuff around etc, but at the end of it all ist still a back or next action. pureMVC has a good control on its components and if you remove a mediator or a component from memory, its is gone for good, no memory leaks at all.

Tip #2:
Use commands, A LOT, they will save your butt, its your best friend. Don’t be afraid of huge amount of classes, its normal, and the more classes you have the more localized your bug is and easier to find/resolve

Tip #3:
Remove unused mediators, reinitiating a mediator requires very little time, event if you have a huge table component, dont be affraid of killing it.

Tip #4:
If you have any piece of code that is similar to something you used before, write a wrapper component class for it. A good example is a custom title bar on the head of the window.
instead of using this piece of code in every window you create

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
    var backBTN=Ti.UI.createImageView({
      image:'images/components/back_btn.png',
      width:65,
      height:24,
      top:0.5*(57-25),
      left:10
    });
    var title=Ti.UI.createView({
      width:'100%',
      height:57,
      backgroundImage:'images/components/title_background.png',
      top:0
    });
    title.add(backBTN);
    backBTN.addEventListener('click',this.doBackClick.bind(this));
   
                var titleLabel= Ti.UI.createLabel({
      text:'Some title',
      width:200,
      height:24,
      textAlign:'center',
      color:'#FFFFFF',
      top:0.5*(57-25)
    });
    titleLabel.font={fontWeight:'bold',fontSize:16};
    title.add(titleLabel);
    this.view.add(title);

You can use component and save yourself a lot of time by doing this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
TitleBarComponent=new Class({
  Extends: Events,
    view:null,
    initialize:function(title,hasBack){
    this.view=Ti.UI.createView({
          width:'100%',
          height:57,
          backgroundImage:'images/components/title_background.png',
          top:0
        });
    if(hasBack){
      var backBTN=Ti.UI.createImageView({
        image:'images/components/back_btn.png',
        width:65,
        height:24,
        top:0.5*(57-25),
        left:10
      });
      this.view.add(backBTN);
      backBTN.addEventListener('click',this.doBackClick.bind(this));
    }
    var titleLabel= Ti.UI.createLabel({
          text:title,
          width:200,
          height:24,
          textAlign:'center',
          color:'#FFFFFF',
          top:0.5*(57-25)
    });
    titleLabel.font={fontWeight:'bold',fontSize:16};
    this.view.add(titleLabel);
  },
    getView:function(){
    return this.view;
  },
  doBackClick:function(){
    this.fireEvent('back');
  }
});

and once you have this, simply create a class

1
this.window.add(new TitleBarComponent('Some Title').getView() );
376137_219716018098056_119264868143172_499051_609147412_n

Titanium + Aptana a match made in heaven

0

This is like bread and butter. I could not have imagined a better merge of two companies. Aptana is the best IDE based on Eclipse, however they were not going anywhere. Aptana studio is good, and that’s it, no direction, no really big goals or anything. Its just stands there being good. Titanium, on the other hands has everything except a proper IDE, it has funding like crazy, army of developers using it(~100000) who are also debuggers at the same time, the appeal of open source and so on. What it lacks is something that Aptana has and that something is best free IDE out there.

From this merge 2 things will definitely happen, #1 JavaScript debugger with strong code hinting, that should be the main focus for both of the companies. #2 Aptana will become even stronger in IDE market and hopefully remain free.

While I do have high hopes for the new version of IDE, i doubt that its going to come close to FlashDevelop in capabilities, which is hands down the best tool for Actionscript developers out there (even though Adobe has their own eclipse based IDE). If anyone from Aptana is reading this: don’t take an example from eclipse based IDE’s, take an example from the best

376137_219716018098056_119264868143172_499051_609147412_n

Titanium SDK, hangover after first crush

4

So, Ive been messing around with titanium SDK for 2 weeks and it is horrible. Bye bye to the love at first sight and welcome to marriage in a trailer park with 7 kids and no job. That is exactly how i feel right now. To start off, Titanium is most stable on windows, but who cares bout that? On windows you can only build android apps, and if i would build only android apps, I’d rather go for Java then some poorly knitted interpreter/compiler hybrid. I had my basic app running in 20 min and its great that you can do that so fast. Launching the emulator for android takes forever, but that’s not for titanium guys to solve. Still debugging is a pain in the butt when working like that. But never mind android, the real fun starts when you try to run the same app on iPhone emulator. First of all there are inconsistencies in the docs, and not just in some in depth communication with GPU or something, no no, something as basic as width or height requires to use this:


1
top:usernameTXT.top + (usernameTXT.size.height || usernameTXT.height) + 3

one height is for iPhone and the other one for android.

But wait, there’s more. Sometimes Titanium forgets that Titanium.API.info(‘some debug message’); is actually a part of Titanium API. Then you need to go to /build/iphone/build and delete all of the content there. Then there are mobile SDK issues, like, if you set your SDK to 1.5.1 (which is beta) and for some unimaginable reason you switch to stable SDK, compiling things for iPhone becomes not possible at all, as Titanium cant even load the list of available iPhone SDK’s, without picking one you cant compile.

Now lets say you did managed to get it running on emulator, both android and iPhone, and they actually look alike when put side by side. Which is where i was yesterday. Next step was to try it out on a device, just to see how it works, reasonable, right? Well guess what, there are gazillion of certificates you need to have and approve from apple. And even if you manage to get them, Titanium cant tell you if you have them or not. I am not kidding, this is their actual message on the screen:

We cannot verify all steps, so once you've completed them all, click "Package"

One guy on the Q & A page has started a topic: Spent 4 hours writing my iPhone app, and another 48 hours trying to get it to run on my phone, the part that surprises me the most, is that it took him 48 hours to cry out for help. Patience like that deserves a medal.

To sum up, almost every point that makes Titanium great compared to writing native app is actually worse than writing a native app, it is not faster, it is not more stable, it is not cross platform, its unusable most of the time, its undeveloped, support is slow to respond and even if they do, usually its not correct. I looked up their prices and for professional support they charge 200$/month. My guess is that for those 200 bucks, some dude in China or India actually writes you two native apps and just gives them to you.

Go to Top