ios - 在iOS App中, Controller 未点击屏幕右侧

原文 标签 ios unity3d airconsole

我为 AirConsole 应用程序创建了一个简单的controller.html。其内容如下:

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta content='width=device-width, initial-scale=1, maximum-scale=1 user-scalable=0' name='viewport'>
        <title>AirConsole Controller</title>
        <link href='https://fonts.googleapis.com/css?family=Play:400,700' rel='stylesheet' type='text/css'>
        <!-- 3rd Party Libs -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <!-- AIRCONSOLE -->
        <script type="text/javascript" src="https://www.airconsole.com/api/airconsole-latest.js"></script>
        <script type="text/javascript" src="controller/libs/airconsole_view_manager.js"></script>
        <script>
            var airConsole = null;
            var viewManager = null;
            var deviceId = null;
            var isReady = false;
            var isLoadingActive = true;
            /**
              * Sets up the communication to the screen.
              */
            function init() {
                airConsole = new AirConsole ( { orientation: AirConsole.ORIENTATION_LANDSCAPE } );
                airConsole.onMessage = function ( from, data ) {
                    if ( data.action == "REMOVE_LOADING" ) {
                        if ( isLoadingActive ) {
                            isLoadingActive = false;
                            showScreen ( "Ready" );
                        }
                    } else if (data.action == "SHOW_READY_SCREEN") {
                        showScreen ( "Ready" );
                    } else if ( data.action == "READY_RECEIVED") {
                        deviceId = data.info.deviceId;
                        showScreen ( "DoneReady" );
                    } else if ( data.action == "GAME_STARTED" ) {
                        showScreen ( "Waiting" );
                    } else if ( data.action == "START_GAME" ) {
                        showScreen ( "Controls" );
                    } else if (data.action == "GAME_END") {
                        showScreen ( "PerformEndGame" );
                    } else {
                        alert ( "Message: " + data.info.deviceId );
                    }
                }

                airConsole.onActivePlayersChange = function ( player_number ) {
                    // alert ( "Active Players Change" );
                } 

                airConsole.onReady = function () {
                    // alert ( "On Ready" );
                    viewManager = new AirConsoleViewManager ( airConsole );
                }

                // Listen for view changes
                airConsole.onCustomDeviceStateChange = function ( deviceId, data ) {
                    viewManager.onViewChange ( data, function ( view_id ) {
                        // view has changed
                        alert ( "VIEW MANAGER WORKING" );
                    } ); 
                };

                airConsole.onConnect = function ( id ) {
                    //alert ( "Device ID RECEIVED: " + id );
                    isReady = false;
                }

                airConsole.onGameEnd = function () {
                    alert ( "On Game End" );
                }
            }
        </script>
        <style type="text/css">
            *{
                padding: 0px;
                margin: 0px auto;
            }

            html, body {
                -ms-user-select: none;
                -moz-user-select: none;
                -webkit-user-select: none;
                user-select: none;
                height: 100%;
                overflow: hidden;
            }

            #controller-container {
                background-color: #ff0000;
                text-align: center;
                font-family: sans-serif;                
                width: 100%;
                height: 100vh;
                position: relative;
            }

            .container_div {
                position: relative;
                display: flex;
                background-color: #ff0000;
                width: calc(100% -10px);
                height: calc(100% -10px);
                padding: 5px;
            }           

            .inner_div{
                display: flex;
                width: 100%;
                justify-content: center;
                align-items: center;
                height: calc(100vh - 10px);
                background-color: green;
            }

            .controls_div {
                padding: 5px;
                display: flex;
                flex-direction: row;
            }

            .button_div {
                width: calc(50% - 5px);
                float: left;
            }

            .right_button{
                float: right;
            }

            .control {
                flex: 1;
                justify-content: center;
                align-items: center;
                height: calc( 100vh - 10px );
                background-color: cadetblue;
                float: left;
            }

            .hidden_initially {
                display: none;
            }

            .btn {
                position: absolute;
                width: 100%;
                height: 100%;
            }

            .btn_left {
                width: 40%;
                left: 2%;
            }

            .btn_right {
                width: 40%;
                right: 2%;
            }

            .center_align {
                text-align: center;
            }
        </style>
    </head>
    <body onload="init()">
        <div id="controller-container">
            <!-- CREATED BY ME -->
            <div id="loading_container_id_div" class="container_div">
                <div class="inner_div">LOADING</div>
            </div>
            <div id="ready_container_id_div" class="container_div view hidden_initially" onmousedown="sendReadyMessage ( 'READY' )">
                <div class="inner_div">TAP TO READY</div>
            </div>
            <div id="done_ready_container_id_div" class="container_div hidden_initially">
                <div class="inner_div">GAME is ABOUT to START</div>
            </div>
            <div id="controls_container_id_div" class="container_div controls_div hidden_initially">
                <div id="jump" class="inner_div button_div" onmousedown="sendMessage ( 'JUMP' )">JUMP</div>
                <div id="dash" class="inner_div button_div right_button" onmousedown="sendMessage ( 'DASH' )">DASH</div>
            </div>
            <div id="waiting_container_id_div" class="container_div hidden_initially" onmousedown="alert ( 'BINGO' )">
                <div class="inner_div">WAITING for Game to END</div>
            </div>
        </div>
        <script>            
            var controlsContainer = document.getElementById ( "controls_container_id_div" );
            var doneReadyContainer = document.getElementById ( "done_ready_container_id_div" );
            var loadingContainer = document.getElementById ( "loading_container_id_div" );
            var readyContainer = document.getElementById ( "ready_container_id_div" );
            var waitingContainer = document.getElementById ( "waiting_container_id_div" );

            function sendReadyMessage ( action ) {                
                airConsole.message ( AirConsole.SCREEN, { "data": { "action": action } } );
            }

            function sendMessage ( action ) {
                airConsole.message ( AirConsole.SCREEN, { "data": { "action": action } } );
            }

            function hideScreens () {
                controlsContainer.style.display = "none";
                doneReadyContainer.style.display = "none";
                loadingContainer.style.display = "none";
                readyContainer.style.display = "none";
                waitingContainer.style.display = "none";
            } 

            function showScreen ( screen ) {
                hideScreens ();
                switch ( screen ) {
                    case "Waiting":
                        waitingContainer.style.display = "block";
                        break;
                    case "Controls":
                        controlsContainer.style.display = "block";
                        break;
                    case "Ready":
                        readyContainer.style.display = "block";
                        break;
                    case "DoneReady":
                        doneReadyContainer.style.display = "block";
                        break;
                    case "PerformEndGame":
                        waitingContainer.style.display = "block";
                        break;
                }
            }
        </script>
    </body>
</html>

当我在任何设备(Android ( both app and browsers )iOS ( browsers ))上运行它时,下面粘贴的部分:
<div id="controls_container_id_div" class="container_div controls_div hidden_initially">
    <div id="jump" class="inner_div button_div" onmousedown="sendMessage ( 'JUMP' )">JUMP</div>
    <div id="dash" class="inner_div button_div right_button" onmousedown="sendMessage ( 'DASH' )">DASH</div>
</div>

屏幕截图:

enter image description here

当在iOS AirConsole应用程序上播放时,尽管同一部分无法完全检测到“ onmousedown ”事件,但工作正常。似乎点击事件基本上发生在靠近屏幕中心的区域,而其余区域无法检测到任何用户交互。

为什么只有iOS AirConsole app显示这种异常行为?我要怎么做才能使两个按钮都单击?

我的CSShtml内容是否有缺陷?请引导我朝正确的方向前进。

这是AirConsole上的the game

最佳答案

我没有iOS手机对此进行测试,但是据我所知,您使用它似乎很奇怪

.inner_div {
    width: 100%;
}

...其中 .inner_div 用于“跳转”和“破折号”按钮,但是您也可以使用
.button_div {
    width: calc(50% - 5px);
    float: left;
}

那么,为什么对于相同的DIV元素有两个不同的宽度值?

另外,我可能会做些不同的操作以减少代码量并使事情更简单。如果您有兴趣,我可以举个例子。

但是,我希望这对您有所帮助。

关于ios - 在iOS App中, Controller 未点击屏幕右侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50504873/

相关文章:

ios - 使用UIWindow获取visibleViewController吗?

c# - 在WorldSpace中沿2轴移动相机

javascript - 有没有办法在Airconsole对象上切换HTML Controller ?

ios - {Module_name} -Swift.h文件仅在与Swift 3.2不同的Swift 4项目中无法正常工作

ios - iOS-核心数据自动生成的模型-无法识别的选择器

c# - 如何在 Unity 运行时加载 FBX 文件?

c# - 游戏开发xna/unity3d

javascript - 话务台代码:navigator.vibrate

c# - Airconsole和Unity集成问题

objective-c - 在IOS Xcode程序中的Char数组中搜索字符串?