использование сенсорного запуска приводит к тому, что экран становится нечетким при сенсорном запуске

В настоящее время я тестирую функциональность сенсорного запуска на своем устройстве (Samsung Galaxy S2) для своей игры. Я программирую с использованием javascript и jquery, обернутых телефонной связью в Android, и в настоящее время у меня возникают следующие проблемы:

  • мое событие запуска касания (например, запуск события «touchstart» кнопки атаки для запуска некоторого javascript для выполнения действия атаки) приводит к тому, что мой экран временно становится нечетким, а затем возвращается в нормальное состояние менее чем за секунду, так что больше похоже на мерцание экрана, где изображения стать нервным). Я не использую CSS-преобразования или переходы, просто CSS и изображения.

Может кто-нибудь, пожалуйста, дайте мне знать, если они столкнулись с проблемами, более или менее похожими на мои. Немного в недоумении, является ли это аппаратной проблемой или проблемой сенсорного запуска, где я могу решить эту проблему.

Пример Javascript ниже для моих элементов управления навигацией (влево, вверх, вниз, правое касание):

if ('ontouchstart' in document.documentElement) {
        var left = document.getElementById('left');
        left.addEventListener("touchstart", function(e){
            if(controlsPlayerChar == '')
            {
                return false;
            }

            var l_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
            var l_xy = l_oldCell.split('_');
            var l_x = l_xy[0];
            var l_y = l_xy[1];

            if(l_y == 1)
            {
                direction = "left";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            var l_newCell = l_x + '_' + (parseInt(l_y) - 1);

            //  validate if next cell is empty
            if($('#' + l_newCell + ':has(".shadow")').val() != undefined
            || $('#' + l_newCell + ':has(".ally")').val() != undefined
            || $('#' + l_newCell + ':has(".obstacle")').val() != undefined)
            {
                direction = "left";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            $('#' + l_newCell).append($('#' + controlsPlayerChar));
            $('#' + l_oldCell + ' ' + '#' + controlsPlayerChar).remove();   

            //  set char direction to 'left' and set next footstep
            setDirection('left');
            setFootstep(footstep);
            setCharDynamics(controlsPlayerChar);
        });

        var up = document.getElementById('up');
        up.addEventListener("touchstart", function(e){
            if(controlsPlayerChar == '')
            {
                return false;
            }

            var u_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
            var u_xy = u_oldCell.split('_');
            var u_x = u_xy[0];
            var u_y = u_xy[1];

            if(u_x == 1)
            {
                direction = "up";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            var u_newCell = (parseInt(u_x) - 1) + '_' + u_y;

            //  validate if next cell is empty
            if($('#' + u_newCell + ':has(".shadow")').val() != undefined
            || $('#' + u_newCell + ':has(".ally")').val() != undefined
            || $('#' + u_newCell + ':has(".obstacle")').val() != undefined)
            {
                direction = "up";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            $('#' + u_newCell).append($('#' + controlsPlayerChar));
            $('#' + u_oldCell + ' ' + '#' + controlsPlayerChar).remove();

            //  set char direction to 'up' and set next footstep
            setDirection('up');
            setFootstep(footstep);
            setCharDynamics(controlsPlayerChar);
        });

        var down = document.getElementById('down');
        down.addEventListener("touchstart", function(e){
            if(controlsPlayerChar == '')
            {
                return false;
            }

            var d_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
            var d_xy = d_oldCell.split('_');
            var d_x = d_xy[0];
            var d_y = d_xy[1];

            if(d_x == rows)
            {
                direction = "down";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            var d_newCell = (parseInt(d_x) + 1) + '_' + d_y;
            //  validate if next cell is empty
            if($('#' + d_newCell + ':has(".shadow")').val() != undefined
            || $('#' + d_newCell + ':has(".ally")').val() != undefined
            || $('#' + d_newCell + ':has(".obstacle")').val() != undefined)
            {
                direction = "down";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            $('#' + d_newCell).append($('#' + controlsPlayerChar));
            $('#' + d_oldCell + ' ' + '#' + controlsPlayerChar).remove(); 

            //  set char direction to 'down' and set next footstep
            setDirection('down');
            setFootstep(footstep);
            setCharDynamics(controlsPlayerChar);
        });

        var right = document.getElementById('right');
        right.addEventListener("touchstart", function(e){
            if(controlsPlayerChar == '')
            {
                return false;
            }

            var r_oldCell = $('#' + controlsPlayerChar).parent().attr('id');
            var r_xy = r_oldCell.split('_');
            var r_x = r_xy[0];
            var r_y = r_xy[1];
            if(r_y == cols)
            {
                direction = "right";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            var r_newCell = r_x + '_' + (parseInt(r_y) + 1);

            //  validate if next cell is empty
            if($('#' + r_newCell + ':has(".shadow")').val() != undefined
            || $('#' + r_newCell + ':has(".ally")').val() != undefined
            || $('#' + r_newCell + ':has(".obstacle")').val() != undefined)
            {
                direction = "right";
                setCharDynamics(controlsPlayerChar);
                return false;
            }

            $('#' + r_newCell).append($('#' + controlsPlayerChar));
            $('#' + r_oldCell + ' ' + '#' + controlsPlayerChar).remove();

            //  set char direction to 'right' and set next footstep
            setDirection('right');
            setFootstep(footstep);
            setCharDynamics(controlsPlayerChar);
        });
}

Пожалуйста, дайте мне знать, если вы считаете, что что-то не так в отношении вышеуказанного скрипта. То, как я добавляю событие touchstart, такое же, как и в других областях моего скрипта, например, для запуска атаки или запуска меню параметров.


person Zen Pak    schedule 08.02.2012    source источник
comment
Ха, я только что понял, что это происходит, когда я нажимаю в любом месте на экране мобильного телефона. Мгновенный нечеткий эффект возникает, когда я касаюсь любого места на экране своего мобильного телефона.   -  person Zen Pak    schedule 18.02.2012
comment
Ваша проблема в использовании phonegap! Это ужасно. Но в любом случае, как сказали другие пользователи, вам нужно предоставить некоторый код или дополнительную информацию.   -  person Alexander Holsgrove    schedule 20.02.2012


Ответы (3)


Кажется, это выделение нажатием.

Вы можете попробовать отключить этот эффект, применив свойство CSS -webkit-tap-highlight-color к элементам управления, или отключить его во всех элементах с помощью селектора *.

Например:

.someelement {
    -webkit-tap-highlight-color: transparent;
}
person antyrat    schedule 14.02.2012
comment
спасибо, но это не сработало. Мои изображения не выделяются, а просто дрожат / нечетко, как телевизионный канал, не полностью четкий при настройке на правильный канал, хотя это происходит на мгновение (при сенсорном запуске). - person Zen Pak; 15.02.2012

Мы столкнулись с этой проблемой при использовании преобразований translate3d.

Мы исправили это, установив

* { -webkit-transform: translate3d(0,0,0,); }

так что каждый элемент инициализируется для трехмерного пространства

person Jan Wikholm    schedule 15.02.2012
comment
пробовал. Не устранил проблему. Все еще показывает дрожание экрана при сенсорном запуске. - person Zen Pak; 16.02.2012
comment
тогда для отладки потребуется некоторый исходный код html/css/js - person Jan Wikholm; 17.02.2012

Прежде всего, убедитесь, что вы вызываете preventDefault() для события. Я заметил, что если вы также ориентируетесь на события мыши, они могут срабатывать при касании. В противном случае я использую немного другой метод отключения подсветки касанием. Пытаться:

 -webkit-tap-highlight-color: rgba(0,0,0,0);

В css для вашей кнопки.

person RestingRobot    schedule 16.02.2012