Fix scaling on mobile
All checks were successful
Build & deploy web version / Build WebAssembly & deploy (push) Successful in 1m0s

This commit is contained in:
Andras Schmelczer 2026-08-10 08:16:56 +01:00
commit ba2d649de7
5 changed files with 55 additions and 5 deletions

View file

@ -2,6 +2,7 @@
#include "../camera.h" #include "../camera.h"
#ifdef __EMSCRIPTEN__ #ifdef __EMSCRIPTEN__
#include <emscripten.h>
#include <emscripten/html5.h> #include <emscripten/html5.h>
#else #else
#include <unistd.h> #include <unistd.h>
@ -15,10 +16,28 @@ static SDL_Texture* frameTexture;
static int textureWidth, textureHeight; static int textureWidth, textureHeight;
#ifdef __EMSCRIPTEN__ #ifdef __EMSCRIPTEN__
/** \brief Kicsi, elsősorban ujjal kezelt kijelzőn futunk-e?
* Nem ugyanaz a kérdés, mint a touch.c-beli: ott bármilyen érintés elég, itt viszont az
* kell, hogy a fő mutatóeszköz legyen az ujj. Egy érintőképernyős laptop egeret és ujjat
* is ismer, a képernyője viszont akkora, hogy a duplázott felbontást nem bírná el.
* Mindkettő a kijelző tulajdonsága, futás közben nem változik, elég egyszer megkérdezni.
*/
static bool isMobileScreen() {
static int cached = -1;
if(cached < 0) cached = EM_ASM_INT({
return matchMedia('(pointer: coarse)').matches &&
Math.min(screen.width, screen.height) <= $0 ? 1 : 0;
}, mobileScreenLimit);
return cached == 1;
}
///A böngésző pixelarányát adja vissza, a szoftveres rajzolás miatt megszabott plafonig. ///A böngésző pixelarányát adja vissza, a szoftveres rajzolás miatt megszabott plafonig.
static double drawingPixelRatio() { static double drawingPixelRatio() {
double ratio = emscripten_get_device_pixel_ratio(); double ratio = emscripten_get_device_pixel_ratio();
return ratio > maxDevicePixelRatio ? maxDevicePixelRatio : ratio; double maxRatio = isMobileScreen() ? maxMobileDevicePixelRatio : maxDevicePixelRatio;
return ratio > maxRatio ? maxRatio : ratio;
} }
#endif #endif

View file

@ -16,6 +16,21 @@
*/ */
#define maxDevicePixelRatio 1.0 #define maxDevicePixelRatio 1.0
/** \brief Mobilon ennél is elmehetünk, mert ott a vászon css-ben is kicsi.
* Egy telefon képernyője css-pixelben nagyjából ötöde egy asztali ablakénak, így a
* kétszeres arány még mindig kevesebb rajzolandó pixelt jelent, mint amennyivel a
* gépen számolunk. Cserébe a kicsi, sűrű kijelzőn ez látszik meg a legjobban.
*/
#define maxMobileDevicePixelRatio 2.0
/** \brief Eddig a css-pixelben mért rövidebb képernyőoldalig tekintünk egy eszközt mobilnak.
* A mutatóeszköz mellé azért kell a méret is, mert egy nagy, ujjal kezelt panel (például
* egy kihelyezett érintőképernyő) is az ujjat mondja fő mutatóeszköznek, a duplázás
* viszont ott már ugyanolyan drága lenne, mint az asztali gépen. A határ a legnagyobb
* kézbe fogható eszköz rövidebb oldala: efölött már nem telefonról vagy táblagépről van szó.
*/
#define mobileScreenLimit 1024
typedef struct mousePos { typedef struct mousePos {
Uint16 x, y; Uint16 x, y;
} mousePos; } mousePos;

View file

@ -55,10 +55,18 @@ static void initRenderMap() {
* *
*/ */
static void calculateRowsAndColumns() { static void calculateRowsAndColumns() {
magnification = (float) screen -> w / 2 / sensorSize; /* A szenzor hosszabb oldala mindig a képernyő hosszabb oldalára képződik le. Fekvő
columns = 2 * cameraPosition.z * sensorSize / focalLength; * képernyőn ez a szélesség, állón viszont a magasság: egy telefon képernyőjén a
* szélességhez igazodva a pályának majdnem a kétszerese férne ki függőlegesen, amitől
* a kockák aprók lennének, a játékos feje fölött pedig végtelen üres ég maradna.
* Így viszont fekvőn és állón is ugyanakkorák a kockák, csak más alakú részt látunk. */
float longerScreenSide = larger(screen -> w, screen -> h);
magnification = longerScreenSide / 2 / sensorSize;
float longerSideInMeters = 2 * cameraPosition.z * sensorSize / focalLength;
//hogy a négyzet négyzet is maradjon //hogy a négyzet négyzet is maradjon
rows = (float)screen -> h / screen -> w * columns; columns = screen -> w / longerScreenSide * longerSideInMeters;
rows = screen -> h / longerScreenSide * longerSideInMeters;
if(renderMap == NULL) initRenderMap(); if(renderMap == NULL) initRenderMap();
@ -117,6 +125,11 @@ int getColumns() {
return columns; return columns;
} }
///Visszaadja, hogy hány sor látszik a pályából.
int getRows() {
return rows;
}
/** \brief A kamera dollyzását végzi, a kamerát mozgatja /** \brief A kamera dollyzását végzi, a kamerát mozgatja
* A dolly állását staticban tárolja, ezért új dolly eseteén először egy restart = true-val kell meghívni, * A dolly állását staticban tárolja, ezért új dolly eseteén először egy restart = true-val kell meghívni,
* \param ms eltelt idő * \param ms eltelt idő

View file

@ -17,6 +17,7 @@
void followPlayerWithCamera(); void followPlayerWithCamera();
void menuCamera(int* getColumns, int* getRows); void menuCamera(int* getColumns, int* getRows);
int getColumns(); int getColumns();
int getRows();
bool cameraDollyZ(int deltaTime, bool restart); bool cameraDollyZ(int deltaTime, bool restart);
vector2D get2DPoint(vector3D point); vector2D get2DPoint(vector3D point);
void drawCuboid(renderObject object, bool sides[]); void drawCuboid(renderObject object, bool sides[]);

View file

@ -4,9 +4,11 @@
///A menüben lévő havazást kezeli, sokkal olcsóbb, mintha egy mapDrawt hívnánk. ///A menüben lévő havazást kezeli, sokkal olcsóbb, mintha egy mapDrawt hívnánk.
static void drawMenuParticles(int deltaTime) { static void drawMenuParticles(int deltaTime) {
int columns = getColumns(); int columns = getColumns();
//álló képernyőn több sor látszik, mint oszlop, ezért a felső határ a sorok száma
int rows = getRows();
int i; int i;
for(i = 0; i < columns; i++) for(i = 0; i < columns; i++)
drawParticles(i, 0, columns, deltaTime); drawParticles(i, 0, rows, deltaTime);
} }
///A főmenüt rajzolja. ///A főmenüt rajzolja.