Tree Planet Dev-Team

PUT and DELETE

Since our web server provides a RESTful service, we must handle CRUD operations by specifying method in HTTP header.

But, unfortunately, as3 does not support PUT and DELETE method directly. so we use POST method and X-HTTP header, like this.

request.method = "POST";

request.requestHeaders = [new URLRequestHeader("X-HTTP-Method-Override", "DELETE")];

So, we can send the PUT and DELETE methods now.

CRUD

So, we can implement a class that sending CRUD operations.

CREATE by POST + object (POST, JSON)

READ by GET + parameter (id) --> Object

UPDATE by PUT + parameter (id) + object (POST, JSON)

DELETE by DELETE + parameter (id)

and

LIST by GET --> Array of Objects

So, we have implemented a class with 5 public methods.

Resource

The next step is associating an objects with a resource.

We can make "save" method to combine CREATE and UPDATE, since whether _id parameter is there or not says trivially the data is new one, or existing one.

public function toJson():String{

return JSON.stringify(this,serialize);

}

//override this

protected function serialize( key:String, value:* ):*

{

return ( key == "id" ) ? value : undefined;

}

by using this methods, we can avoid seriallizing unnecessary variables.

Anyway, we can implement update method similarly..

Remaining two things are confusing.

Since list operation must return an array of objects,  we can use static method (I hate factory in this situation.).

Implementing read have two options. whether making instance first, and receive data, or using static method. I prefer the last one.

Summery (in my opinion)

- instance methods

 update()

 save()

- static methods

 get(id: int)

 list()

useful tip: 

To use Korean font, we needed to find and transform all the textfields in the movieclip.

The transforming function is like this:

public static function transform(textField:TextField, force:Boolean = false):void {

    if(!registered) {

        try {

            var obj:Object = (CitrusEngine.getInstance().state.getObjectByName("Nanum"));

            var mc:MovieClip = (CitrusEngine.getInstance().state.view as AnimatedSpriteView).asMovieClip(obj);

            var kls:Class = mc.loaderInfo.applicationDomain.getDefinition("Nanum") as Class;

            Font.registerFont(kls);

            registered = true;

        }

        catch (e:Error) {

            ;

        }

    }

    if((textField.embedFonts == true) && (force == true || I18n.l.substr(0, 2) == Locales.ko.Name)) {

        //var font:FontNanum = new FontNanum();

        var tm:TextFormat;

        tm = textField.defaultTextFormat;

        textField.embedFonts = false;

        tm.font = "NanumGothic";

        tm.bold = true;

        tm.size = (textField.defaultTextFormat.size as Number) * 0.9;

        textField.defaultTextFormat = tm;

        textField.setTextFormat(tm);

    }

}

This code load the font from the CitrusEngine, and  transforms the textfield's font when the user's locale is Korean.

My first approach to get all the textfields' list is like this:

static public function recTransform(dOC:DisplayObjectContainer):void

{

    var except:Array = ["TxtAssetCoin", "TxtAssetAcorn", "TxtUnlockCost", "TxtRewardCoin",

        "TxtRewardExp", "TxtRipeTime", "TxtCoin", "TxtAcorn", "TxtEnergy", "TxtLevel",

        "TxtSponsorCool", "TxtFertilizerCount", "TxtFriendLevel", "TxtFriendCool"];

    var n:Number = dOC.numChildren;

    for(var i:Number = 0; i < n; i++) {

        var child:DisplayObject = dOC.getChildAt(i);  

        if(child is TextField && except.indexOf(child.name)==-1) {

            I18n.transform(child as TextField);

            TextField(child).text = I18n.t(TextField(child).text);

            if(TextField(child).type != TextFieldType.INPUT)

            TextField(child).mouseEnabled = false;

        }

        if(child is DisplayObjectContainer)

            recTransform(child as DisplayObjectContainer);

    }

}

So it would just recursively find all the textfields.

But we have been missing some textfields. SimpleButtons has some states, and their children must be explored individually!

static public function recTransform(dOC:DisplayObjectContainer):void

{

    var except:Array = ["TxtAssetCoin", "TxtAssetAcorn", "TxtUnlockCost", "TxtRewardCoin",

        "TxtRewardExp", "TxtRipeTime", "TxtCoin", "TxtAcorn", "TxtEnergy", "TxtLevel",

        "TxtSponsorCool", "TxtFertilizerCount", "TxtFriendLevel", "TxtFriendCool"];

    var n:Number = dOC.numChildren;

    for(var i:Number = 0; i < n; i++) {

        var child:DisplayObject = dOC.getChildAt(i);  

        if(child is TextField && except.indexOf(child.name)==-1) {

            I18n.transform(child as TextField);

            TextField(child).text = I18n.t(TextField(child).text);

            if(TextField(child).type != TextFieldType.INPUT)

            TextField(child).mouseEnabled = false;

        }

        if(child is SimpleButton) {

            if(SimpleButton(child).downState is DisplayObjectContainer)

                recTransform(SimpleButton(child).downState as DisplayObjectContainer);

            if(SimpleButton(child).overState is DisplayObjectContainer)

                recTransform(SimpleButton(child).overState as DisplayObjectContainer);

            if(SimpleButton(child).upState is DisplayObjectContainer)

                recTransform(SimpleButton(child).upState as DisplayObjectContainer);

        }

        if(child is DisplayObjectContainer)

            recTransform(child as DisplayObjectContainer);

    }

}

Our game needed some fancy progress bars like:

Although there can be many solutions, my solution is using mask images. It is:

Simple to implement

Dynamic to change values

The shape of the progress bars not important. For the left bar, we used rightside-rounded image, and for the right image, we used star-shaped image. For the right image, we can made just a simple bar-shaped image, and overlapped the transparent PNG image above it. So just one remaining thing to do is to make the masked bars.

At first, we can make a new Sprite object and set the mask image:

be = _mc.getChildByName("BarEnergy"); // get the object from the parent movie clip

if(be){

mskEnergy = new Sprite();

setMask(be, mskEnergy);

}

So, the setMask function is like:

private function setMask(dObj:DisplayObject, s:Sprite):void {

s.x = dObj.x;

s.y = dObj.y;

_mc.addChild(s); // Add to the movieclip

s.cacheAsBitmap = true;

dObj.cacheAsBitmap = true;

dObj.mask = s;

}

the cacheAsBitmap flag must be set to true.

Now, we can implement the progress bar by drawing a rectangle in the mskEnergy object.

mskEnergy.graphics.clear();

mskEnergy.graphics.beginFill(0x0);

mskEnergy.graphics.drawRect(0,0,be.width * energy / maxEnergy, height);

mskEnergy.graphics.endFill();

Hello World!

We are Tree Planet Development Team, Treeplanet is a young startup with the intention to gamify aid for environmental issues.

This blog will contain our team's learning experience in the course of developing a Social Network Game. We will post:

discoveries and things of interest for us in a frequent interval

solutions, code and tutorials, as often as we produce something useful

and opinions and general posts, just to show of a bit ;)

We want to post these things to strengthen and verify our learning process as a team. The mantra is: If you can't write it, you don't understand it!