Starling Virtual List Test on iOS

Compilation in ipa-ad-hoc :

FPS for iOS :
- iPhone 3GS            : from 5 to 60, average 7
- iPhone 4S retina      : from 7 to 60, average 10
- iPad 1            : from 1 to 60, average 1
- iPad 3 non retina         : from 5 to 60, average 10

/**
 * The main class
 */
package fr.babostesting.examples.stage3d.starling.virtual
{
    import flash.display.Sprite;
    import flash.display.StageAlign;
    import flash.display.StageQuality;
    import flash.display.StageScaleMode;
    import flash.events.Event;
    import flash.geom.Rectangle;
    import flash.utils.setTimeout;
    import starling.core.Starling;

    /**
     * @author ZoulouX
     */
    public class StarlingVirtualListTest extends Sprite
    {
        protected var _starling:Starling;

        public function StarlingVirtualListTest ()
        {
            if (stage != null)
                init();
            else
                addEventListener(Event.ADDED_TO_STAGE, init);
        }

        private function init (event:Event = null):void
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);

            stage.align = StageAlign.TOP_LEFT;
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.quality = StageQuality.LOW;
            stage.autoOrients = false;

            stage.addEventListener(Event.RESIZE, stageResizedHandler);

            setTimeout(startUI, 1);
        }

        protected function stageResizedHandler (event:Event):void
        {
            if (_starling != null)
            {
                _starling.viewPort = new Rectangle(0, 0, stage.stageWidth, stage.stageHeight);

                _starling.stage.stageWidth = stage.stageWidth;
                _starling.stage.stageHeight = stage.stageHeight;
            }
        }

        protected function startUI ():void
        {
            _starling = new Starling(ListBaseClass, stage);

            _starling.showStats = true;

            _starling.antiAliasing = 0;

            _starling.start();
        }
    }
}



/**
 * The starling main class. Get touch events and generate lines.
 */
package fr.babostesting.examples.stage3d.starling.virtual
{
    import com.greensock.easing.Back;
    import com.greensock.easing.Strong;
    import com.greensock.TweenMax;
    import flash.geom.Point;
    import flash.net.URLLoader;
    import flash.net.URLRequest;
    import fr.babos.graphic.tools.BitmapCache;
    import fr.babos.utils.ArrayUtils;
    import starling.display.Sprite;
    import starling.events.Event;
    import starling.events.Touch;
    import starling.events.TouchEvent;
    import starling.events.TouchPhase;

    /**
     * @author ZoulouX
     */
    public class ListBaseClass extends Sprite
    {
        protected var _container:Sprite;

        protected var _elements:Array;
        protected var _twitterData:Object;
        protected var _currentPosition:Point;
        protected var _delta:Number = 0;

        protected var _totalElementToShow:int;
        protected var _bitmapCache:BitmapCache;

        public function ListBaseClass ()
        {
            addEventListener(Event.ADDED_TO_STAGE, init);
        }

        protected function init (event:Event):void
        {
            _totalElementToShow = 160;

            var serviceURL:String = "http://search.twitter.com/search.json?q=as3&rpp=" + _totalElementToShow.toString(10) + "&include_entities=true&result_type=mixed";

            var urlLoader:URLLoader = new URLLoader(new URLRequest(serviceURL));
            urlLoader.addEventListener("complete", dataLoadedHandler);
            trace("loading");
        }

        public function dataLoadedHandler (event:Object):void
        {
            (event.currentTarget as URLLoader).removeEventListener("complete", dataLoadedHandler);

            trace("loaded");

            _twitterData = JSON.parse((event.currentTarget as URLLoader).data);

            if (_twitterData["results"] != null)
                _twitterData = _twitterData.results;

            _totalElementToShow = _twitterData.length;

            _bitmapCache = new BitmapCache();

            _elements = [];

            _container = new Sprite();

            addChild(_container);

            addEventListener(Event.ENTER_FRAME, enterFrameHandler);
            addEventListener(TouchEvent.TOUCH, touchEventHandler);
        }

        protected function touchEventHandler (event:TouchEvent):void
        {
            var touch:Touch = event.getTouch(stage);
            var location:Point = touch.getLocation(stage);

            var minPosition:int = 0;
            var maxPosition:int = - (_totalElementToShow) * 100 + stage.stageHeight;

            if (touch.phase == TouchPhase.BEGAN)
            {
                _currentPosition = location.clone();

                TweenMax.killTweensOf(_container);

                _delta = 0;
            }
            else if (touch.phase == TouchPhase.MOVED)
            {
                _delta = location.y - _currentPosition.y;

                if (_container.y > minPosition || _container.y < maxPosition)
                {
                    _delta /= 2;
                }

                _container.y = int(_container.y + _delta - .5);
                //_container.y += _delta;

                _currentPosition = location.clone();
            }
            else if (touch.phase == TouchPhase.ENDED)
            {
                if (_delta != 0)
                {
                    trace(_delta);

                    var destination:Number = _container.y + _delta * 6;

                    var ease:Function = Strong.easeOut;

                    if (destination > minPosition)
                    {
                        destination = minPosition;

                        if (_container.y < minPosition)
                            ease = Back.easeOut;
                    }
                    else if (destination < maxPosition)
                    {
                        destination = maxPosition;

                        if (_container.y > maxPosition)
                            ease = Back.easeOut;
                    }

                    TweenMax.to(_container, .8, {
                        roundProps: ["y"],
                        y: destination,
                        ease: ease
                    });
                }
            }
        }

        protected function enterFrameHandler (event:Event):void
        {
            updateElements();
        }

        protected function updateElements ():void
        {
            var start:int = int(- _container.y / 100) - 1;
            var end:int = start + Math.ceil(stage.stageHeight / 100) + 1;

            //trace(">", start, "/", end);

            var i:int = start;
            var element:LineElement;

            for each (element in _elements)
            {
                if (element.index < start || element.index > end)
                {
                    trace("DELETE", element.index);

                    _elements = ArrayUtils.deleteElement(_elements, element);

                    element.removeFromParent(true);
                }
            }

            while (i <= end)
            {
                element = null;

                for each (var currentElement:LineElement in _elements)
                {
                    if (currentElement.index == i)
                    {
                        element = currentElement;
                        break;
                    }
                }

                if (element == null)
                {
                    element = needElementAt(i);

                    if (element != null)
                    {
                        trace("ADD ELEMENT", i);

                        _elements.push(element);

                        element.index = i;

                        element.y = i * 100;

                        _container.addChild(element);
                    }
                }

                i ++;
            }
        }

        protected function needElementAt (pAt:int):LineElement
        {
            var item:Object

            if (pAt in _twitterData)
            {
                item = {
                    avatar: _twitterData[pAt].profile_image_url,
                    username: _twitterData[pAt].from_user_name,
                    text: _twitterData[pAt].text
                };
            }

            return new LineElement(item, _bitmapCache);
        }
    }
}





/**
 * The class for one line in the virtual list
 */
package fr.babostesting.examples.stage3d.starling.virtual
{
    import com.greensock.TweenMax;
    import flash.display.BitmapData;
    import flash.text.TextFormatAlign;
    import fr.babos.graphic.tools.BitmapCache;
    import starling.display.Image;
    import starling.display.Quad;
    import starling.display.Sprite;
    import starling.events.Event;
    import starling.text.TextField;
    import starling.textures.Texture;
    import starling.textures.TextureSmoothing;

    /**
     * @author ZoulouX
     */
    public class LineElement extends Sprite
    {
        protected static var __backgroundTexture        :Texture;


        protected var _item                             :Object;

        protected var _background                       :Image;

        protected var _image                            :Image;

        protected var _title                            :TextField;

        protected var _text                             :TextField;

        protected var _backImage                        :Quad;

        protected var _bitmapCache                      :BitmapCache;


        public var index                                :int;


        public function LineElement (pData:Object, pBitmapCache:BitmapCache)
        {
            _item = pData;
            _bitmapCache = pBitmapCache;

            addEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);
        }

        protected function addedToStageHandler (event:Event):void
        {
            // Générer l'image de fond des cases
            if (__backgroundTexture == null)
            {
                var backgroundBitmapData:BitmapData = new BitmapData(2, 100, false, 0xFFFFFFFF);
                backgroundBitmapData.setPixel(0, 99, 0xCCCCCC);
                backgroundBitmapData.setPixel(1, 99, 0xCCCCCC);

                __backgroundTexture = Texture.fromBitmapData(backgroundBitmapData);
                __backgroundTexture.repeat = true;
            }

            // Le fond de la case
            _background = new Image(__backgroundTexture);
            _background.smoothing = TextureSmoothing.NONE;

            _background.width = stage.stageWidth;
            _background.height = 100;

            addChild(_background);

            if (_item != null)
            {
                // Le fond de l'avatar
                _backImage = new Quad(80, 80);

                _backImage.setVertexColor(0, 0xDDDDDD);
                _backImage.setVertexColor(1, 0xDDDDDD);
                _backImage.setVertexColor(2, 0x999999);
                _backImage.setVertexColor(3, 0x999999);

                _backImage.width = 80;
                _backImage.height = 80;

                _backImage.x = 10;
                _backImage.y = 10;

                addChild(_backImage);

                _bitmapCache.load(_item.avatar, avatarSuccessHandler);

                // Le titre
                _title = new TextField(stage.stageWidth - 120, 20, _item.username, "Verdana", 11, 0x666666);
                _title.hAlign = TextFormatAlign.LEFT;
                _title.vAlign = "top";

                _title.x = 102;
                _title.y = 12;

                addChild(_title);

                // Le contenu
                _text = new TextField(stage.stageWidth - 120, 70, _item.text);
                _text.hAlign = TextFormatAlign.LEFT;
                _text.vAlign = "top";

                _text.x = 102;
                _text.y = 30;

                addChild(_text);
            }
        }

        protected function avatarSuccessHandler (pBitmapData:BitmapData, pFromCache:Boolean):void
        {
            if (_backImage == null)
                return;

            _image = new Image(Texture.fromBitmapData(pBitmapData));
            //_image.smoothing = TextureSmoothing.NONE;

            _image.width = 80;
            _image.height = 80;

            _image.x = 10;
            _image.y = 10;

            addChild(_image);

            _image.texture = Texture.fromBitmapData(pBitmapData);

            TweenMax.from(_image, pFromCache ? 0 : .25, {
                alpha: 0,
                onComplete: _backImage.removeFromParent,
                onCompleteParams: [true]
            });
        }
    }
}