From 8003e408e109e2ce4b6169b4b26bfde27421266b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20Madar=C3=A1sz?= Date: Sun, 8 Oct 2023 17:53:48 +0200 Subject: [PATCH] html5: fix canvas resize and fullscreen + HighDPI support --- demos/html5/MAKE.bat | 4 ++-- demos/html5/demo_collide.c | 3 +-- demos/html5/template.html | 38 ++++++++++++++------------------------ engine/bind/v4k.lua | 6 +++--- engine/joint/v4k.h | 24 ++++++++++++------------ engine/split/v4k.x.inl | 1 + engine/split/v4k_ds.h | 12 ++++++------ engine/split/v4k_window.c | 11 +++++------ engine/v4k | 1 + engine/v4k.c | 11 +++++------ engine/v4k.h | 12 ++++++------ 11 files changed, 56 insertions(+), 67 deletions(-) diff --git a/demos/html5/MAKE.bat b/demos/html5/MAKE.bat index 003ec84..e397df1 100644 --- a/demos/html5/MAKE.bat +++ b/demos/html5/MAKE.bat @@ -1,4 +1,4 @@ -if "%1"=="" MAKE.bat demo_ddraw.c +if "%1"=="" MAKE.bat demo_collide.c del index.html 2>NUL >NUL del index.worker.js 2>NUL >NUL @@ -19,5 +19,5 @@ rem cook art rem host webserver, compile and launch rem start python -m http.server --bind 127.0.0.1 8000 -call emcc %* -g ..\..\engine\v4k.c -I..\..\engine -o index.html -pthread -s FULL_ES3 -s USE_PTHREADS -s USE_GLFW=3 -s SINGLE_FILE=1 -s PRECISE_F32=1 -s TOTAL_MEMORY=256mb -s ALLOW_MEMORY_GROWTH=1 -s ENVIRONMENT=worker,web --shell-file template.html -Wfatal-errors --preload-file .art[00].zip@index.zip -lidbfs.js +call emcc %* -g ..\..\engine\v4k.c -I..\..\engine -o index.html -pthread -s FULL_ES3 -s USE_PTHREADS -s USE_GLFW=3 -s SINGLE_FILE=1 -s DISABLE_DEPRECATED_FIND_EVENT_TARGET_BEHAVIOR=0 -s PRECISE_F32=1 -s TOTAL_MEMORY=256mb -s ALLOW_MEMORY_GROWTH=1 -s ENVIRONMENT=worker,web --shell-file template.html -Wfatal-errors --preload-file .art[00].zip@index.zip -lidbfs.js rem emrun index.html diff --git a/demos/html5/demo_collide.c b/demos/html5/demo_collide.c index c97b46d..8ac651b 100644 --- a/demos/html5/demo_collide.c +++ b/demos/html5/demo_collide.c @@ -5,7 +5,6 @@ #include "v4k.h" -// -- demo int paused; camera_t cam; @@ -58,7 +57,7 @@ void game_loop(void *userdata) { view = add2(view, vec2(touch_view.x, -touch_view.y)); // apply inputs - camera_move(&cam, move.x,move.y,move.z); + camera_moveby(&cam, move); camera_fps(&cam, view.x,view.y); } diff --git a/demos/html5/template.html b/demos/html5/template.html index 2202476..fb83976 100644 --- a/demos/html5/template.html +++ b/demos/html5/template.html @@ -100,13 +100,15 @@ }, canvas: (function() { var canvas = document.getElementById('canvas'); - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; + var dpi = window.devicePixelRatio; + canvas.width = window.innerWidth*dpi; + canvas.height = window.innerHeight*dpi; window.addEventListener('resize', () => { - if (canvas.canResize && !window.isFullscreen) { - canvas.width = window.innerWidth; - canvas.height = window.innerHeight; + if (canvas.canResize) { + dpi = window.devicePixelRatio; + canvas.width = window.innerWidth*dpi; + canvas.height = window.innerHeight*dpi; } }) return canvas; @@ -135,27 +137,15 @@ diff --git a/engine/bind/v4k.lua b/engine/bind/v4k.lua index e1ac648..148493d 100644 --- a/engine/bind/v4k.lua +++ b/engine/bind/v4k.lua @@ -1574,9 +1574,9 @@ pair** sorted; char *cc4str(unsigned cc); char *cc8str(uint64_t cc); enum { -cc_1 = '1', cc_2, cc_3, cc_4, cc_5, cc_6,cc_7, cc_8, cc_9, cc_0, cc__, cc_ = ' ', -cc_A = 'A', cc_B, cc_C, cc_D, cc_E, cc_F,cc_G, cc_H, cc_I, cc_J, cc_K,cc_L, cc_M, cc_N, cc_O, cc_P,cc_Q, cc_R, cc_S, cc_T, cc_U,cc_V, cc_W, cc_X, cc_Y, cc_Z, -cc_a = 'a', cc_b, cc_c, cc_d, cc_e, cc_f,cc_g, cc_h, cc_i, cc_j, cc_k,cc_l, cc_m, cc_n, cc_o, cc_p,cc_q, cc_r, cc_s, cc_t, cc_u,cc_v, cc_w, cc_x, cc_y, cc_z, +cc__1 = '1', cc__2, cc__3, cc__4, cc__5, cc__6,cc__7, cc__8, cc__9, cc__0, cc___, cc__ = ' ', +cc__A = 'A', cc__B, cc__C, cc__D, cc__E, cc__F,cc__G, cc__H, cc__I, cc__J, cc__K,cc__L, cc__M, cc__N, cc__O, cc__P,cc__Q, cc__R, cc__S, cc__T, cc__U,cc__V, cc__W, cc__X, cc__Y, cc__Z, +cc__a = 'a', cc__b, cc__c, cc__d, cc__e, cc__f,cc__g, cc__h, cc__i, cc__j, cc__k,cc__l, cc__m, cc__n, cc__o, cc__p,cc__q, cc__r, cc__s, cc__t, cc__u,cc__v, cc__w, cc__x, cc__y, cc__z, }; typedef union vec2i{ struct { int X,Y; }; struct { int x,y; }; struct { int r,g; }; struct { int w,h; }; struct { int min,max; }; struct { int from,to; }; struct { int src,dst; }; int v2[2]; int array[1]; } vec2i; typedef union vec3i{ struct { int X,Y,Z; }; struct { int x,y,z; }; struct { int r,g,b; }; struct { int w,h,d; }; struct { int min,max; }; struct { int from,to,step; }; struct { int src,dst; }; int v3[3]; int array[1]; } vec3i; diff --git a/engine/joint/v4k.h b/engine/joint/v4k.h index 7fecac1..729084b 100644 --- a/engine/joint/v4k.h +++ b/engine/joint/v4k.h @@ -14758,18 +14758,18 @@ API char *cc4str(unsigned cc); API char *cc8str(uint64_t cc); enum { -# define _(a,b,c,d,e) cc_##a, cc_##b, cc_##c, cc_##d, cc_##e - cc_1 = '1', _(2,3,4,5,6),_(7,8,9,0,_), cc_ = ' ', - cc_A = 'A', _(B,C,D,E,F),_(G,H,I,J,K),_(L,M,N,O,P),_(Q,R,S,T,U),_(V,W,X,Y,Z), - cc_a = 'a', _(b,c,d,e,f),_(g,h,i,j,k),_(l,m,n,o,p),_(q,r,s,t,u),_(v,w,x,y,z), +# define _(a,b,c,d,e) cc__##a, cc__##b, cc__##c, cc__##d, cc__##e + cc__1 = '1', _(2,3,4,5,6),_(7,8,9,0,_), cc__ = ' ', + cc__A = 'A', _(B,C,D,E,F),_(G,H,I,J,K),_(L,M,N,O,P),_(Q,R,S,T,U),_(V,W,X,Y,Z), + cc__a = 'a', _(b,c,d,e,f),_(g,h,i,j,k),_(l,m,n,o,p),_(q,r,s,t,u),_(v,w,x,y,z), # undef _ }; #ifdef BIG -#define cc4(a,b,c,d) ((uint32_t)(cc_##a<<24) | (cc_##b<<16) | (cc_##c<<8) | (cc_##d<<0)) +#define cc4(a,b,c,d) ((uint32_t)(cc__##a<<24) | (cc__##b<<16) | (cc__##c<<8) | (cc__##d<<0)) #define cc8(a,b,c,d,e,f,g,h) (((uint64_t)cc4(a,b,c,d) << 32ULL) | cc4(e,f,g,h)) #else -#define cc4(a,b,c,d) ((uint32_t)(cc_##d<<24) | (cc_##c<<16) | (cc_##b<<8) | (cc_##a<<0)) +#define cc4(a,b,c,d) ((uint32_t)(cc__##d<<24) | (cc__##c<<16) | (cc__##b<<8) | (cc__##a<<0)) #define cc8(a,b,c,d,e,f,g,h) (((uint64_t)cc4(e,f,g,h) << 32ULL) | cc4(a,b,c,d)) #endif @@ -580289,6 +580289,7 @@ SQLITE_API const char *sqlite3_sourceid(void){ return SQLITE_SOURCE_ID; } #undef Table #undef rehash #undef NB +#undef threadid #endif // V4K_3RD /* game framework. * - rlyeh, public domain @@ -601761,7 +601762,7 @@ int window_swap() { static void (*window_render_callback)(void* loopArg); -static vec2 last_canvas_size; +static vec2 last_canvas_size = {0}; static void window_resize() { @@ -601770,14 +601771,13 @@ void window_resize() { if (g->flags&WINDOW_FIXED) return; EM_ASM(canvas.canResize = 1); vec2 size = window_canvas(); - do_once last_canvas_size = size; if (size.x != last_canvas_size.x || size.y != last_canvas_size.y) { w = size.x; h = size.y; g->width = w; g->height = h; - glfwSetWindowSize(g->window, w, h); - // emscripten_set_canvas_size(w, h); + last_canvas_size = vec2(w,h); + emscripten_set_canvas_size(w, h); } #endif /* __EMSCRIPTEN__ */ } @@ -601815,8 +601815,8 @@ void window_loop_exit() { vec2 window_canvas() { #if is(ems) - int width = EM_ASM_INT_V(return canvas.width || window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth); - int height = EM_ASM_INT_V(return canvas.height || window.innerHeight || document.documentElement.clientHeight|| document.body.clientHeight); + int width = EM_ASM_INT_V(return canvas.width); + int height = EM_ASM_INT_V(return canvas.height); return vec2(width, height); #else glfw_init(); diff --git a/engine/split/v4k.x.inl b/engine/split/v4k.x.inl index 15a56c2..6454c75 100644 --- a/engine/split/v4k.x.inl +++ b/engine/split/v4k.x.inl @@ -176,4 +176,5 @@ errno_t fopen_s( #undef Table #undef rehash #undef NB +#undef threadid #endif // V4K_3RD diff --git a/engine/split/v4k_ds.h b/engine/split/v4k_ds.h index 0d45642..03b53d1 100644 --- a/engine/split/v4k_ds.h +++ b/engine/split/v4k_ds.h @@ -434,18 +434,18 @@ API char *cc4str(unsigned cc); API char *cc8str(uint64_t cc); enum { -# define _(a,b,c,d,e) cc_##a, cc_##b, cc_##c, cc_##d, cc_##e - cc_1 = '1', _(2,3,4,5,6),_(7,8,9,0,_), cc_ = ' ', - cc_A = 'A', _(B,C,D,E,F),_(G,H,I,J,K),_(L,M,N,O,P),_(Q,R,S,T,U),_(V,W,X,Y,Z), - cc_a = 'a', _(b,c,d,e,f),_(g,h,i,j,k),_(l,m,n,o,p),_(q,r,s,t,u),_(v,w,x,y,z), +# define _(a,b,c,d,e) cc__##a, cc__##b, cc__##c, cc__##d, cc__##e + cc__1 = '1', _(2,3,4,5,6),_(7,8,9,0,_), cc__ = ' ', + cc__A = 'A', _(B,C,D,E,F),_(G,H,I,J,K),_(L,M,N,O,P),_(Q,R,S,T,U),_(V,W,X,Y,Z), + cc__a = 'a', _(b,c,d,e,f),_(g,h,i,j,k),_(l,m,n,o,p),_(q,r,s,t,u),_(v,w,x,y,z), # undef _ }; #ifdef BIG -#define cc4(a,b,c,d) ((uint32_t)(cc_##a<<24) | (cc_##b<<16) | (cc_##c<<8) | (cc_##d<<0)) +#define cc4(a,b,c,d) ((uint32_t)(cc__##a<<24) | (cc__##b<<16) | (cc__##c<<8) | (cc__##d<<0)) #define cc8(a,b,c,d,e,f,g,h) (((uint64_t)cc4(a,b,c,d) << 32ULL) | cc4(e,f,g,h)) #else -#define cc4(a,b,c,d) ((uint32_t)(cc_##d<<24) | (cc_##c<<16) | (cc_##b<<8) | (cc_##a<<0)) +#define cc4(a,b,c,d) ((uint32_t)(cc__##d<<24) | (cc__##c<<16) | (cc__##b<<8) | (cc__##a<<0)) #define cc8(a,b,c,d,e,f,g,h) (((uint64_t)cc4(e,f,g,h) << 32ULL) | cc4(a,b,c,d)) #endif diff --git a/engine/split/v4k_window.c b/engine/split/v4k_window.c index 0fd4d5b..11efedf 100644 --- a/engine/split/v4k_window.c +++ b/engine/split/v4k_window.c @@ -737,7 +737,7 @@ int window_swap() { static void (*window_render_callback)(void* loopArg); -static vec2 last_canvas_size; +static vec2 last_canvas_size = {0}; static void window_resize() { @@ -746,14 +746,13 @@ void window_resize() { if (g->flags&WINDOW_FIXED) return; EM_ASM(canvas.canResize = 1); vec2 size = window_canvas(); - do_once last_canvas_size = size; if (size.x != last_canvas_size.x || size.y != last_canvas_size.y) { w = size.x; h = size.y; g->width = w; g->height = h; - glfwSetWindowSize(g->window, w, h); - // emscripten_set_canvas_size(w, h); + last_canvas_size = vec2(w,h); + emscripten_set_canvas_size(w, h); } #endif /* __EMSCRIPTEN__ */ } @@ -791,8 +790,8 @@ void window_loop_exit() { vec2 window_canvas() { #if is(ems) - int width = EM_ASM_INT_V(return canvas.width || window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth); - int height = EM_ASM_INT_V(return canvas.height || window.innerHeight || document.documentElement.clientHeight|| document.body.clientHeight); + int width = EM_ASM_INT_V(return canvas.width); + int height = EM_ASM_INT_V(return canvas.height); return vec2(width, height); #else glfw_init(); diff --git a/engine/v4k b/engine/v4k index 1307065..b63b4b1 100644 --- a/engine/v4k +++ b/engine/v4k @@ -562507,4 +562507,5 @@ SQLITE_API const char *sqlite3_sourceid(void){ return SQLITE_SOURCE_ID; } #undef Table #undef rehash #undef NB +#undef threadid #endif // V4K_3RD diff --git a/engine/v4k.c b/engine/v4k.c index 80b81e0..0c87a15 100644 --- a/engine/v4k.c +++ b/engine/v4k.c @@ -21469,7 +21469,7 @@ int window_swap() { static void (*window_render_callback)(void* loopArg); -static vec2 last_canvas_size; +static vec2 last_canvas_size = {0}; static void window_resize() { @@ -21478,14 +21478,13 @@ void window_resize() { if (g->flags&WINDOW_FIXED) return; EM_ASM(canvas.canResize = 1); vec2 size = window_canvas(); - do_once last_canvas_size = size; if (size.x != last_canvas_size.x || size.y != last_canvas_size.y) { w = size.x; h = size.y; g->width = w; g->height = h; - glfwSetWindowSize(g->window, w, h); - // emscripten_set_canvas_size(w, h); + last_canvas_size = vec2(w,h); + emscripten_set_canvas_size(w, h); } #endif /* __EMSCRIPTEN__ */ } @@ -21523,8 +21522,8 @@ void window_loop_exit() { vec2 window_canvas() { #if is(ems) - int width = EM_ASM_INT_V(return canvas.width || window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth); - int height = EM_ASM_INT_V(return canvas.height || window.innerHeight || document.documentElement.clientHeight|| document.body.clientHeight); + int width = EM_ASM_INT_V(return canvas.width); + int height = EM_ASM_INT_V(return canvas.height); return vec2(width, height); #else glfw_init(); diff --git a/engine/v4k.h b/engine/v4k.h index 1a8593c..6420602 100644 --- a/engine/v4k.h +++ b/engine/v4k.h @@ -825,18 +825,18 @@ API char *cc4str(unsigned cc); API char *cc8str(uint64_t cc); enum { -# define _(a,b,c,d,e) cc_##a, cc_##b, cc_##c, cc_##d, cc_##e - cc_1 = '1', _(2,3,4,5,6),_(7,8,9,0,_), cc_ = ' ', - cc_A = 'A', _(B,C,D,E,F),_(G,H,I,J,K),_(L,M,N,O,P),_(Q,R,S,T,U),_(V,W,X,Y,Z), - cc_a = 'a', _(b,c,d,e,f),_(g,h,i,j,k),_(l,m,n,o,p),_(q,r,s,t,u),_(v,w,x,y,z), +# define _(a,b,c,d,e) cc__##a, cc__##b, cc__##c, cc__##d, cc__##e + cc__1 = '1', _(2,3,4,5,6),_(7,8,9,0,_), cc__ = ' ', + cc__A = 'A', _(B,C,D,E,F),_(G,H,I,J,K),_(L,M,N,O,P),_(Q,R,S,T,U),_(V,W,X,Y,Z), + cc__a = 'a', _(b,c,d,e,f),_(g,h,i,j,k),_(l,m,n,o,p),_(q,r,s,t,u),_(v,w,x,y,z), # undef _ }; #ifdef BIG -#define cc4(a,b,c,d) ((uint32_t)(cc_##a<<24) | (cc_##b<<16) | (cc_##c<<8) | (cc_##d<<0)) +#define cc4(a,b,c,d) ((uint32_t)(cc__##a<<24) | (cc__##b<<16) | (cc__##c<<8) | (cc__##d<<0)) #define cc8(a,b,c,d,e,f,g,h) (((uint64_t)cc4(a,b,c,d) << 32ULL) | cc4(e,f,g,h)) #else -#define cc4(a,b,c,d) ((uint32_t)(cc_##d<<24) | (cc_##c<<16) | (cc_##b<<8) | (cc_##a<<0)) +#define cc4(a,b,c,d) ((uint32_t)(cc__##d<<24) | (cc__##c<<16) | (cc__##b<<8) | (cc__##a<<0)) #define cc8(a,b,c,d,e,f,g,h) (((uint64_t)cc4(e,f,g,h) << 32ULL) | cc4(a,b,c,d)) #endif