How Recalc Web Cocos Environment(Javascript)

godwish · March 3, 2023, 12:00am

iOS Safari Fullscreen Problem.

scroll up safari brower
hide address bar
cocos creator canvas change screen ratio (scale up (up and down)) not normal
i want refresh change screen environment apply (design ratio)

Addition)

I Want Div’s touch Event → send Cocos Creator

code not working.

function ProcTouch(evt){
let cv = document.getElementById(“GameCanvas”);
cv.style.width = window.innerWidth+‘px’;
cv.style.height = window.innerHeight+‘px’;
cv.dispatchEvent(evt);
}
window.addEventListener(“touchstart”, ProcTouch);
window.addEventListener(“touchmove”, ProcTouch);
window.addEventListener(“touchend”, ProcTouch);

Plz Share your knowledge

godwish · March 3, 2023, 12:05am

cocos version 2.4

muxiandong · March 6, 2023, 9:23am

Hi, the problem is because the engine side handles the touch event registered by window.addEventListener and stops the event from bubbling upwards, thus making it invalid.
Way 1: is to customize the engine (by modifying the code in that part and compiling the engine).
way 2: after building, by modifying the engine source code after building.

github.com

cocos/cocos-engine/blob/v2.4.11/cocos2d/core/platform/CCInputManager.js#L587-L598

      
        
            let registerTouchEvent = function (eventName) {
                let handler = _touchEventsMap[eventName];
                element.addEventListener(eventName, (function(event) {
                    if (!event.changedTouches) return;
                    let body = document.body;
            
            
        canvasBoundingRect.adjustedLeft = canvasBoundingRect.left - (body.scrollLeft || window.scrollX || 0);
                    canvasBoundingRect.adjustedTop = canvasBoundingRect.top - (body.scrollTop || window.scrollY || 0);
                    handler(selfPointer.getTouchesByEvent(event, canvasBoundingRect));
                    event.stopPropagation();
                    event.preventDefault();
                }), false);

godwish · March 6, 2023, 10:43pm

thank you
But I decided to do it another way
Someday I’ll use the way you talked
I think my problem is different now

godwish · March 6, 2023, 11:14pm

I found api

cc.view.setFrameSize(window.innerWidth,window.innerHeight);
cc.view.setCanvasSize(window.innerWidth,window.innerHeight);

canvas size change - ok
touch position - different

i want change size cocos creator html tag canvas
Same as changing in browser

godwish · March 7, 2023, 12:22am

i try call funtions

cc.view.setCanvasSize(window.innerWidth,window.innerHeight);
cc.view._resize();
cc.internal.inputManager._updateCanvasBoundingRect();
cc._widgetManager.onResized();

but different touch position…

cocos creator 2.4.8 version

muxiandong · March 7, 2023, 2:58am

Can you provide me with a demo?

godwish · March 7, 2023, 3:11am

environment

ios phone (me iphone14 pro), landscape

ios safari full screen problem

test url
http://grapegaming.synology.me:22780/full/

change landscape mode
drag up (scroll up) → Hide Address Bar

portrait button - ok
landscape button - not working

godwish · March 7, 2023, 5:05am

I commented on the post.
Please confirm.

muxiandong · March 7, 2023, 8:00am

Hi, through your test link, I can reproduce your problem, this problem, can you provide a test project?

godwish · March 7, 2023, 9:33am

full_project.zip (1.4 MB)
full_build.zip (2.3 MB)

godwish · March 7, 2023, 9:39am

upload project and build result
index file in build result == (drag up) see
I tried many option. but failed

I have to satisfy a need to be able to easily switch to fullscreen on ios.
This site works fine.

Just play the demo.
If you rotate it horizontally, it will ask you to drag it up, and if you drag it, it will be full screen.

I want to do like that site too.

godwish · March 13, 2023, 1:17am

How is your research going?