Fix scaling on mobile
All checks were successful
Build & deploy web version / Build WebAssembly & deploy (push) Successful in 1m0s
All checks were successful
Build & deploy web version / Build WebAssembly & deploy (push) Successful in 1m0s
This commit is contained in:
parent
c4f7565d18
commit
ba2d649de7
5 changed files with 55 additions and 5 deletions
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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ő
|
||||||
|
|
|
||||||
|
|
@ -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[]);
|
||||||
|
|
|
||||||
|
|
@ -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.
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue