Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Is there a function to generate possible x,y,w,h values for n rectangles to fit on phone screen?

in Questions Posts: 46

So basically i'm just trying to make a card game. I've got the prototype in Codea running on an Ipad in landscape mode, but I'm having difficulty figuring out what the card dimensions should be for an iphone in either landscape or portrait mode. Here is the project that i posted days ago (https://codea.io/talk/discussion/8198/card-game-dropbox-zip-file-no-installer#latest)

What i did do was make a big list by hand of x, y, x2, y2 values for each potential card, but only In ipad Landscape mode.

There are up to 16 cards, as well as one deck. So seventeen tables of x,y,x2, y2 values. REALLY don't want to rewrite this by hand for each possible screen orientation and device. I thought I could try making a function to generate this automatically, but no luck - is beyond my knowledge. help?

P.s. I haven't decided what width and height of cards would be good to fit on a phone screen. I was using 140 x 196 on the iPad, but on a phone screen (320x480) that will not fit. Maybe 70 x 98? The hard part is trying to figure out where everything should go. I don't want to use any magnification or scrolling, rather just have everythiing fit on screen. If not possible, then... well, function first, practicality after, with a function like that it would still make this easier

P.s.s. Do i have to program again for the dimensions of an iphone 6+ screen? Or is it automatically scaled up from a normal iphone screen?

Comments

  • Posts: 21

    To make the cards scale with the screen size, you could just use the variables WIDTH and HEIGHT. WIDTH/18 could be the width of a card and HEIGHT/16 could be the height of the same card. Just put everything that might change on a different size screen in terms of WIDTH and HEIGHT.

  • dave1707dave1707 Mod
    Posts: 5,620

    @xThomas See the discussion I show below. I have a program in there that scales the screen for different sizes. You can look at that to see how I did it.

    https://codea.io/talk/discussion/8026/best-way-to-scale-ui-elements-for-all-screen-sizes
    
  • dave1707dave1707 Mod
    edited March 19 Posts: 5,620

    @xThomas I modified my original code to include the iPad Pro, the 38mm Watch, and the 42mm Watch. Since I don't have an iPad Pro, the 42mm or 38mm Watch, I'm not sure if this show the correct information for those sizes. If anyone has one of them, let me know if there's a problem.

    displayMode(FULLSCREEN)
    
    function setup()  
        device={"iPad Pro","iPad Air","iPhone7 Plus","iPhone7","iPhone 5","Watch 42mm","Watch 38mm"}
        rectMode(CENTER)
        fontSize(40)
        font("Baskerville-Italic")
        x=300
        y=100
        xv=3
        yv=3
        dev=1
        if WIDTH<HEIGHT then
            tab={vec2(1024,1366),vec2(768,1024),vec2(414,736),
                    vec2(375,667),vec2(320,568),vec2(156,195),vec2(136,170)}
        else
            tab={vec2(1366,1024),vec2(1024,768),vec2(736,414),
                    vec2(667,375),vec2(568,320),vec2(195,156),vec2(170,136)}
        end 
        wm=WIDTH
        hm=HEIGHT 
    end
    
    function orientationChanged()
        setup()
    end
    
    function draw()
        background(0)
        fill(255)   
        stroke(255)
        strokeWidth(3)
    
        -- same code for all devices
        w=tab[dev].x    -- width of device from table
        h=tab[dev].y    -- height of device from table
        mw=wm     -- largest width of all devices
        mh=hm     -- largest height of all devices
        ar=(w/h)/(mw/mh)    -- aspect ratio
    
        scale(w/mw,h/mh)    -- scale of device to largest screen
    
        sprite("Planet Cute:Character Pink Girl",x,y,101,171*ar)
        sprite("Planet Cute:Character Cat Girl",100,600,101,171*ar)
    
        text("Tap screen to show different device sizes.",mw*.38,mh*.25)
        text(device[dev],mw*.2,mh*.45)
        text(tab[dev].x.."  "..tab[dev].y,mw*.2,mh*.4)
    
        noFill()
        ellipse(mw/2,mh/2,50,50*ar)
        ellipse(mw*.75,mh*.75,100,100*ar)
    
        line(mw/2,mh/2,0,mh)
        line(mw*.75,mh*.75,200,100)
    
        rect(mw/2,mh/2,mw,mh)
        rect(200,100,100,100*ar)
        -- end of same code for all devices
    
        -- calculate motion of sprite
        x=x+xv
        y=y+yv
        if x>=mw or x<=0 then
            xv=-xv
        end
        if y>=mh or y<=0 then
            yv=-yv
        end    
    end
    
    function touched(t) -- display different device size
        if t.state==BEGAN then
            dev=dev+1
            if dev>#device then
                dev=1
            end
        end
    end
    
Sign In or Register to comment.