mercredi 23 septembre 2015

AS3 AIR: Smooth scrolling for mobile

So, I'm building fairly simple application for portrait mode only, and it will have vertical scrolling for content.

Content is basicly a MovieClip containing image as background and other minor elements (couple small MovieClips as buttons etc).

The problem is that I don't seem to find a smooth way to scroll my content. I would love it to be smooth and accurate, and I've tried numerous different ways for it.

For testing purposes the background I'm using (inside my content MovieClip) is 533x1250 jpg from library.

This is how I add my content mc and backround into it:

scaleXFactor = stage.stageWidth / 640; //my stage is 640x960
...
addChild(content); //which is new MovieClip()
var bg:bg1 = new bg1();
bg.x = p1bg.y = 0;
bg.width = 640 * scaleXFactor; 
bg.scaleY = bg.scaleX;
content.width = bg.width;
content.height = bg.height;
content.addChild(bg);

For scrolling I assumed I'd be safe by just simply using MOUSE_DOWN & MOUSE_UP event listeners and basic ENTER_FRAME function like this:

mouseLastPos = stage.mouseY;
if(MouseUpVar == 1){                                                        
    mousePosDiff = (mouseOriPosY-mouseLastPos);         
}                                                       

content.y -= mousePosDiff*1.2;
mouseOriPosY = stage.mouseY;                            

if(MouseUpVar == 0){ //Smoothening which is allowed by MOUSE_UP
    if(mousePosDiff > 0){
        mousePosDiff -= 0.001;
    }else if(mousePosDiff < 0){
        mousePosDiff += 0.001;
    }
}
if(content.y < (content.height - stage.stageHeight)*-1){                
    content.y = (content.height - stage.stageHeight)*-1;
}else if(content.y > 0){
    content.y = 0;
}

In debug player it's as smooth as you can ever imagine, but in real device (Samsung Note4) it's very laggy and clumsy.

I've also tried freshplanet's script, which is not as laggy, but still a little clumsy, and messes up my scaleY for some reason. And IScrollerComponent seems to have some issues on AIR, and I didn't get any visual elements on my screen with it. Rendering settings or cacheAsBitmap didn't seem to have any effect on this.

How should this be done right? Is it normal that this 'small' image (533x1250) causes bad lag? I really need to use AS3 and AIR for this, so I'm hoping to find a good and "simple" solution (yeah, that doesn't happen too often).

Thanks, kaarto

Aucun commentaire:

Enregistrer un commentaire