dimanche 22 novembre 2015

Optimum tile size/layout in a space

This is for an air app but I'm sure it's a common issue for other things.

I've really been struggling to work out the best way to size tiles in a grid. I've got something like the code below, which kind of works but the problem I'm having is that the whole thing scales down too much on small screens.

I'm trying to find an optimum way of scaling a number of tiles so they fit the screen and stay the largest size possible. I could implement scrolling but I'd like to avoid that.

Is there a less convaluted/more effective way of arranging and scaling tiles to fit in a space?

        var scaleFactor:Number = Model.appScale * this.scaleX;


        var gap:Number = 10 /scaleFactor;
        var _width:Number = stage.fullScreenWidth / scaleFactor;
        var sampleWidth:Number = sample.width;
        var sampleHeight:Number = sample.height;

        var _scale:Number = 1;
        var colWidth:Number = sampleWidth + gap;
        var totalWidth:Number;
        var columns:Number = 0;
        var rows:Number = 0;


            do{
                rows ++;
                columns = Math.ceil(_children.length/rows);
                totalWidth = columns * colWidth;

                if(rows > Math.sqrt(_children.length) && totalWidth > _width)
                    _scale = (_width/totalWidth) * _scale;

                totalWidth = columns * colWidth * _scale;
            }
                while(totalWidth > _width)




        var top:Number = - ((rows * (sampleHeight + gap)) + (gap *2)) * _scale;

        // if it's too big scale it down
        var pt:Point = localToGlobal(new Point(0, 0));

    if(Math.abs(top) > pt.y/scaleFactor){

            _scale = (((pt.y - (bg.height + gap))/scaleFactor)/Math.abs(top)) * _scale;
            top =  -pt.y/scaleFactor;
        }


        var col:int = 0;
        var row:int = 0;

        for each(var button:MenuRenderer in _children)
        {

            Tweener.addTween(button,{
                x : _0x +  (((sampleWidth + gap) * _scale) * col),
                y : top +  (((sampleHeight + gap) * _scale) * row),
                scaleX: _scale,
                scaleY: _scale,
                time: 0.05 * button.order,
                transition: "easeInOut"
            });

            col ++;

            if(col == columns)
            {
                row ++;
                col = 0;
            }

        }

Aucun commentaire:

Enregistrer un commentaire