Problemas con surface.setResizable(true) y fullscreen

Hola que tal.

Estoy intentando hacer un pequeño juego de naves a una resolucion de 640x480,el problema que tengo es que cuando uso la funcion surface.setResizable(true) y maximizo la ventana,la imagen del juego no se estira,si no que quedan unos bordes negros abajo y a la derecha de la imagen.

Me pasa lo mismo cuando utilizo la funcion fullscreen,alguna solucion para esto.
Un amigo me comento que creara una superficie con createGraphics() y pintara todos los objetos en esa superficie pero tampoco me ha funcionado,ya no se que hacer mas.

1 Like

I guess the problem is that you are using static values in your sketch. Here is a very simple example that shows you how to create a responsive sketch. The margin between the right border and the circle is always 100. In your game, you always have to take the current width into account and of course the screen ratio (4:3).

void setup() {
  size(500, 500);
  
  surface.setResizable(true);
}

void draw() {
  background(55);
  
  circle(width - 100, height / 2, 50);
}
2 Likes

Ya he podido solucionarlo creando una superficie con
createGraphics() y pintando todo hay.Tengo otra duda,me gustaria que al ponerlo en pantalla completa o maximizar la ventana no se estire la imagen,en vez de eso quiero que mantenga un apecto de 4:3 con el fondo centrado y no en una esquina.

Have a look at imageMode:

imageMode(CENTER)
image(canvas, width / 2, height / 2);

To keep the ratio, you have to calculate it with simple math:

  1. find ratio between canvas width & height
  2. find out which length to scale (canvas width or height) by using the sketch width & height
  3. scale the longer one to the sketch size and apply the same length multiplied with the ratio to the other length (for example: canvas_height = height; canvas_width = height * ratio;)
2 Likes

Gracias por la ayuda. :+1: