[SOLVED] Responsive design with Zone component

[Woodruff]

Hello everybody!

I have built the UI interface of a game but now I have to fully adapt it to be played on mobile. I use the Zone component and until now I defined the widths statically. The trouble is that when I release these constraints and set the pattern to 'grid', the zone does not adapt filling several lines when there is not enough space when I shrink my window, and components on right get off the screen.
To be sure I am not missing something, I have recreated a simple zone from scratch in a void project.

Code: Select all

setup: function( gamedatas )
{
    console.log( "Starting game setup" );
    
    // Create a zone for holding cards with dimensions 182px x 128px
    var zone = new ebg.zone();
    zone.create(this, 'game_play_area', 182, 128);
    zone.setPattern('grid');
    
    // Put 5 div blocks representing the cards in the zone
    var n = 5;
    for (var i=0; i<n; i++) {
        dojo.place("<div id='card_" + i + "' style='background-color:blue;width:182px;height:128px'>" + i + "</div>", dojo.body());
        zone.placeInZone('card_' + i, i);
    }
    
    // Setup game notifications to handle (see "setupNotifications" method below)
    this.setupNotifications();

    console.log( "Ending game setup" );
},

Still the same problem: the zone does not adapt when there is not enough space for 5 objects.

According to documentation about Zone:

'grid' (objects will be put on lines from top left to bottom right, wrapping when there is not enough space left on the line)

Do you have any ideas about what I miss?

Thanks a lot for your help.

Tchebychev

[Victoria_La]

Are you trying on real mobile device or chrome emulation? In later bga code they scale for mobile device, the whole interface scales to fit,
but it does not when you do chrome emulation

[Woodruff]

Hi Victoria_La,

Indeed, when I run my sample on the Chrome emulator, it scales (keeping the dimension ratio). It does not yet the job for the whole game, I think because I have still width declarations.
But this does not solve the problem when for instance I shrink the window manually on computer device.

I've tried on a Samsung tablet a week ago but it did not scale as the Chrome emulator but overflew instead. Is this BGA update recent?

[Woodruff]

On Firefox emulator that does not work either: overflow.

[Victoria_La]

On Firefox emulator that does not work either: overflow.

Did you set minimum width? If you want I can take a look, what is the game? Can send me private message if you want

[Victoria_La]

Did you set minimum width? If you want I can take a look, what is the game? Can send me private message if you want

If this about innovation - the minWidth is not set for some reason in gameinfos, its usually part of template. Not sure if this
reason it does not scale but could be


This section usually goes somewhere after favorit color support in gameinfos.php (Mine is 885 but you can put whatever your min)

Code: Select all

'favorite_colors_support' => true,

// Game interface width range (pixels)
// Note: game interface = space on the left side, without the column on the right
'game_interface_width' => array(

    // Minimum width
    //  default: 740
    //  maximum possible value: 740 (ie: your game interface should fit with a 740px width (correspond to a 1024px screen)
    //  minimum possible value: 320 (the lowest value you specify, the better the display is on mobile)
    'min' => 885,

    // Maximum width
    //  default: null (ie: no limit, the game interface is as big as the player's screen allows it).
    //  maximum possible value: unlimited
    //  minimum possible value: 740
    'max' => null
),

[Woodruff]

Thank Victoria_La,

Sorry I have not read your message until now because I did not notice the change in the thread.
Yes, this is about Innovation. I use the frenchtarot as a blanck project to test the behaviour of the Zone component.

Reguarding the gameinfo parameters, I think I can answer why the default settings for game interface. The project is just so old that I think the parameter was not set at the time it was generated: it's four years old!
I have set the parameters back to default.
Reguarding the Zone component, the BGA admins are currently investingating this...

To be continued...

[Woodruff]

OK, I answer now my own question.

Zone is not defined to be design responsive at all. Objects wraps up when there is no space left relatively to the width you define for the Zone.
Hence, that can't work that way. If you would use a Zone that probably cause an overflow on small screen, don't. Try to use Stock if possible, if your items are rectangular.

For Innovation, since I can't rid off the Zone easily (it isa big part of my design), I will try a workaround by defining the width of the Zone in JS, computing it from the actual width of the window. If the player resizes the window, I consider using window.onresize handler to compute the new width.

[Victoria_La]

Yes that would be next recommendation to use onresize listener, I use it myself so set width dynamically or to apply some "adaptive" layout
classes, so I can use them in css