Scaling UP (1.5) the whole sketch. Problems with non-working buttons.

inarts

Hi Everyone,

I coded a game for the screen size 600x600. Now, somebody complained that it is too small, so I would like to scale it up 1.5 times (to 900x900).

I have some variables defined in the very beginning, then some in the void setup(){..}, and so as a first option I tried to do the following:

   void setup(){
       size(900,900);    // changing from size(600,600); 
    }

void draw(){
       scale(1.5);   // changing from scale(1); 
}

The buttons do not work... seems like the mouseX and mouseY positions are as they were in the original 600x600 frame, even though the visuals are scaled up.

I also thought that maybe automatically scaling a Processing.js sketch to fit the browser window could solve this issue.

As a second option, I thought that including this code in jQuery could work:

function doResize()
{
var setupHeight = Math.max($(document).height(), $(window).height());
$('#GAME').width($(window).width());
$('#GAME').height(setupHeight);
size($(window).width(), setupHeight);
}
$(window).resize(doResize);

Then in void setup(), I replaced size(800, 800) with doResize().

Still I could not make it.

I would appreciate any suggestions or examples related to scaling up the whole sketch at once. Thanks in advance!

(ps. the code is too long to paste it here.)

PhiLho

"seems like the mouseX and mouseY positions are as they were in the original 600x600 frame, even though the visuals are scaled up"
Actually, no, but when you scale up, the buttons are farther (moved down and to the right) and bigger, so the test for rectangle hit must compensate this...

inarts

@PhiLho it seems like that hitting in the "previous" positions, highlights the new shifted buttons... If i click somewhere up and to the left, the button to the right and down gets highlighted.

inarts

.

camperos

for scale 1.5

try all "mouseX and MouseY, mouseX/1.5 and mouseY/1.5

calsign

For clarification... the mouse coordinates (mouseX and mouseY) aren't adjusted by scale(). This function only affects things that are drawn. You have to scale the mouse coordinates yourself.

PhiLho

Yes, either you scale down mouseX/Y as shown, to move back these coordinates into the unscaled button position / size, or you multiply the values you test against.

camperos

this example work correctly in 19201080 (draw) 1024820 android Acer 800 * 480 android samsung SII

void setup() { //size (1000,700); size (displayWidth, displayHeight); } void draw () { scale (1.5);
fill (255, 0, 0); if (mouseX/1.5 >250 && mouseX/1.5< 350 && mouseY/1.5 > 250 && mouseY/1.5 < 350) { fill (255, 0, 255); } ellipse (300, 300, 40, 40 ); }

camperos

    void setup()
    {
      //size  (1000,700); 
      size  (displayWidth, displayHeight);
    }
    void draw () {
      scale (1.5);  
      fill (255, 0, 0);
      if (mouseX/1.5 >250 && mouseX/1.5< 350 && mouseY/1.5 > 250 && mouseY/1.5 < 350)
      {
        fill (255, 0, 255);
      }
      ellipse (300, 300, 40, 40 );
    }

camperos

with "translate", example

 void setup()
{
  size  (600, 600); 
  //size  (displayWidth, displayHeight);
}
void draw () {
  scale (1.5);  
  translate (50, 30);
  fill (255, 0, 0);
  if (mouseX/1.5-50 >150 && mouseX/1.5-50< 250 && mouseY/1.5-30 > 150 && mouseY/1.5-30 < 250)
  {
    fill (255, 0, 255);
  }
  ellipse (200, 200, 40, 40 );
}

inarts

Thank you @PhiLho, @calsign, @camperos for your excellent suggestions, and clarifications!

I followed the first example by @camperos to modify my game code and the buttons started working again:

boolean sclOn = true; 
float sclFctr; 

void setup()
{
  if (sclOn) {
    size  (900, 900);
     sclFctr= 1.5;
  } 
  else { 
    size  (600, 600);
    sclFctr= 1.0;
  }
}

void draw () {
  scale (sclFctr);
} 
void checkFocus() {
  isFocused = (mouseX/sclFctr) > 100 && (mouseX/sclFctr) < 200 && (mouseY/sclFctr) > 100 && (mouseY/sclFctr) < 200;
}

I also had to change some int variables (the ones depending on mouseX and mouseY) into floatones. Then in one instance I had to convert the division to int:

void onMouse() {
  if (this.contains((int)(mouseX/sclFctr), (int)(mouseY/sclFctr))) {

    pressed = !pressed;
    redraw();
  }
}

After the buttons were working, I then faced another issue: some graphics were also displaced due to some other system variables, specifically: height and width that were used to draw graphics.

I replaced those variables with the fixed variables sH=600 and sW=600. I believe, however, the same scaling down method (height/sclFctr and width/sclFctr) could have worked in this case as well.

In addition, the following part of the code did not work for my needs:

  size  (displayWidth, displayHeight); 

It looked great, but was way too large and irregular to accommodate the graphics that were drawn to fit a square frame. So stayed with initial size(900, 900);

Thanks again for your help!

inarts

UPDATE: the sketch does not work in JavaScript... at some state of the game, the graphics start growing with the frame rate and explode crashing the browser. It appears as it was scaling the drawing infinitely.