GM:S 1.4 How to make it responsive?

Discussion in 'Programming' started by klvb, Jun 4, 2018.

  1. klvb

    klvb Member

    Joined:
    Nov 17, 2017
    Posts:
    29
    Hello, i have script for menu. On desktop it working well, but in mobile phone not.

    Init script:
    Code:
    // This script will init all the required variables for the menu to work.
    
    // ItemClickedId: To detect if the mouse clic is released on the same item as when pressed
    ItemClickedId = -1;
    
    // Change the font by the one you use on your project.
    // You may be required to also change the scale value in dtext functions
    // called in scrSelectDrawGUI() to fit your own font.
    Font = font_default;
    
    // Grid Settings:
    ItemPerRow = 5;
    ItemPerCol = 3;
    ItemSize = sprite_get_width(sLevelSelect_Item);
    ItemSepH = (room_width/1.33)/ItemPerRow;
    ItemSepV = (room_height/1.56)/ItemPerCol;
    GridBaseX = (room_width/2)-((ItemPerRow-1)*ItemSepH)/2 // center the grid on the screen
    GridBaseY = (room_height/2)-((ItemPerCol-1)*ItemSepV)/2
    GridPage = 0;
    GridItemScale = 0;
    
    
    
    
    // ItemNumber: Number of total items.
    // For exemple if you're storing your actual levels in a ds_list
    // you can use ItemNumber = ds_list_size(list);
    // In this exemple we'll use 50.
    ItemNumber = 50;
    
    // Cosindex: This variable will be used for animations along with the cos() and sin() functions.
    /**** EXPLANATION ****
    Cosindex is an always incrementing variable (see the scrSelectStep script), and the cosinus/sinus function
    transform Cosindex into a number between -1 and 1 in a circle way.
    
    Exemple:
    if Cosindex = 0               then cos(Cosindex) = 1
    if Cosindex = 3.14 (or Pi)    then cos(Cosindex) = -1
    if Cosindex = 6.28 (or 2*Pi)  then cos(Cosindex) = 1 again 
    
    So by incrementing every step the Cosindex variable, it can be useful for animations to use this simple trick
    as we can for exemple increase and decrease the scale or the rotation of an object over time only using one variable ! :) */
    Cosindex = 0;
    
    DrawGUI script:
    Code:
    /* **************** Drawing the TITLE *************/ 
    draw_sprite(sLevelSelect_TitleBack,0,room_width*0.5,50);
    dtext("Level Select",room_width*0.5,50,Font,1,c_white,1,1,1,0);
    
    /* **************** Drawing the GRID OF ITEMS *************/
    // itemIndex: This temp variable hold the index of the first item relating to the current page.
    var itemIndex= GridPage*ItemPerRow*ItemPerCol;
    var loopIndex = 0
    for (j=0; j<ItemPerCol;j+=1)
        for (i=0; i<ItemPerRow; i+=1)
            {
            if itemIndex < ItemNumber
                {
                var itemX = GridBaseX+i*ItemSepH
                var itemY = GridBaseY+j*ItemSepV;
              
                /* itemUnlocked: true/false - Change this temp variable accordingly
                   to how in your project the player unlock the level.
                   in this exemple, only the first 20 levels will be unlocked */
                var itemUnlocked = (itemIndex <= global.level);
                
                var itemHover = MouseIn(itemX-ItemSize*0.5,itemY-ItemSize*0.5,itemX+ItemSize*0.5,itemY+ItemSize*0.5);
                var itemScale = GridItemScale/loopIndex;
                if itemScale > 1
                    itemScale = 1
                var itemRot = 0;
                if itemHover
                    {
                    itemScale = 1.1+0.05*cos(Cosindex);
                    itemRot = 3*sin(Cosindex);
                    }
                    
                /* itemStars: range 0 - 3
                   Change this temp variable accordingly to your project.
                   Exemple: if you saved how many stars the player has unlocked
                   for a particular level in a array called global.StarsUnlocked[],
                   you can use something like itemStars = global.StarsUnlocked[itemIndex]
                   in this exemple a fictive number of stars will be generated on the fly*/
                var itemStars = itemIndex mod(4);
                
                if itemUnlocked
                    {
                    if itemHover && mouse_check_button_pressed(mb_left)
                        ItemClickedId = itemIndex;
                    
                    if itemHover && mouse_check_button_released(mb_left)
                        {
                        if ItemClickedId == itemIndex 
                            {
                            ItemClickedId = -1 // reset
                            
                            /* This is where you go to the right room. If all room
                            are stored in a array you can use room_goto(global.Levels[itemIndex])
                            or global.Levels[| itemIndex] for a list.
                            You can also play a sound or whatever you want here.*/
                            
                            room_goto(asset_get_index("room_level"+string(itemIndex+1)))
                            }
                        }
                    
                    draw_sprite_ext(sLevelSelect_Item,1,itemX,itemY,itemScale,itemScale,itemRot,c_white,1);
                    // we add +1 to itemIndex as array always start at 0. But 'Level 0' is weird for the player.
                    // So by adding 1 to itemIndex, we will draw 1 isntead of 2, 2 instead of 1...   
                    dtext(itemIndex+1,itemX,itemY-5,Font,0.8*itemScale,c_white,1,fa_center,fa_center,itemRot);
                    draw_sprite_ext(sLevelSelect_Stars,itemStars,itemX,itemY+38,itemScale,itemScale,itemRot,c_white,1);
                    }
                else
                    { // Item locked.
                    draw_sprite_ext(sLevelSelect_Item,0,itemX,itemY,itemScale,itemScale,0,c_white,1);
                    }
                }
                itemIndex++
                loopIndex++
            }
    
    /* **************** Drawing the CHANGE PAGE BUTTONS *************/
    // Draw the big arrow to change page if the numbers of levels
    // is greater than what can be displayed on a single page.
    var canP,canN;
    canP = 0
    canN = 0
    
    // Detect if we can clic on the left big arrow to go to the PREVIOUS page
    // if the current page is greater than 0 that mean we can at least go the the previous page
    if GridPage
        canP = 1
    
    // Detect if we can clic on the right big arrow to go to the NEXT page
    // if the total number of levels is greater than the current page * items per page
    // that mean we can at least go to the next page to display the next page of levels.   
    if (GridPage+1)*ItemPerRow*ItemPerCol < ItemNumber
        canN = 1
    
    if canP && clicAt(100,room_height/2,40,80)
        {
        GridItemScale = 0
        GridPage--
        ItemClickedId = -1
        // you can also play a sound, change the background.. to fit your own project
        }
    
    if canN && clicAt(room_width-100,room_height/2,40,80)
        {
        GridItemScale = 0
        GridPage++
        ItemClickedId = -1
        // you can also play a sound, change the background.. to fit your own project
        }
    
    var arrowScaleP = -1; 
    var arrowRotP = 0;
    var arrowScaleN = 1; 
    var arrowRotN = 0;
    
    if canP
        {
        var arrowScaleP = -1+(cos(Cosindex)*0.03);
        var arrowRot = (sin(Cosindex*0.5)*1);
        }
    if canN
        {
        var arrowScaleN = 1+(cos(Cosindex)*0.03);
        var arrowRotN = (sin(Cosindex*0.5)*1);
        }
    
    draw_sprite_ext(sLevelSelectPageArrow,0,75,room_height/2,arrowScaleP,arrowScaleP,arrowRotP,c_white,canP+0.2);
    draw_sprite_ext(sLevelSelectPageArrow,0,room_width-75,room_height/2,arrowScaleN,arrowScaleN,arrowRotN,c_white,canN+0.2);
    
    /* **************** Drawing the MENU BACK BUTTON *************/
    // Bottom arrow to go to the main menu room or whatever.
    var arrowScale = 1+(cos(Cosindex)*0.02);
    var arrowRot = (sin(Cosindex)*1);
    draw_sprite_ext(sLevelSelect_ArrowBack,0,50,room_height-50,arrowScale,arrowScale,arrowRot,c_white,1);
    if keyboard_check_pressed(vk_backspace) or clicAt(100,room_height-100,50,50)
        {
        show_message_async("You've clicked on the Menu Back button.#Change this part of the code to perform your own actions.");
        // you can change the room here, play a sound...
        }
        
    
    
    
    works menu in desktop:

    [​IMG]

    Menu in mobile:
    [​IMG]

    Can anyone help me please?
     
  2. Becon

    Becon Member

    Joined:
    Jul 13, 2016
    Posts:
    109

Share This Page

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice