Проблема Написал интерфейс на React в Rage mp, но маленький фпс

[GasikPasik]

Я решил интерфейс на реакте, сейчас на этапе авторизации(учусь).
Проблема в том, что по какой-то причине мало фпс, мой компьютер не такой слабый и на других сервера с ФПС абсолютно всё хорошо.

Захожу на свой сервер через locahost

Лагает даже от одной кнопке, в чём может быть проблема?

Вот код, который запускает браузер:

let vector = { x: 45.74327850341797, y: -1197.7447509765625, z: 37.72600173950195}  
let loginCamera = mp.cameras.new('start', vector, new mp.Vector3(0, 0, -80), 90);
let loginScreen
let player = mp.players.local
mp.events.add({
    'showBrowser': () => {
        player.setInvincible(true)
        player.freezePosition(true)
       

        loginCamera.setActive(true)
        mp.game.cam.renderScriptCams(true, false, 1000, true, false)

        mp.game.ui.displayHud(false)
        mp.game.ui.displayRadar(false)

        mp.gui.cursor.show(true, true);
        mp.gui.chat.show(false)
       
        //loginScreen = mp.browsers.new('package://login/index.html')
        loginScreen = mp.browsers.new("http://localhost:3000/")
        loginScreen.execute("mp.invoke('focus', true)")
    },
    'hideBrowser': () => {
        player.setInvincible(false)
        player.freezePosition(false)

        mp.game.cam.renderScriptCams(false, false, 0, true, false)
        loginCamera.setActive(false)

        mp.game.ui.displayHud(true)
        mp.game.ui.displayRadar(true)

        mp.gui.cursor.show(false, false);
        mp.gui.chat.show(true)

        loginScreen.execute("mp.invoke('focus', false)")
        loginScreen.active = false
    }
})

 

[dooj]

Не используется ли у тебя в стилях, блюр-эффект? Если используется, то удали его и проверь.
Если у тебя включено аппаратное ускорение CEF в настройках Rage Multiplayer, то отключи его и так-же проверь.

 

[Amazingevich]

Тут скорее лучше стили показывать, а не клиентку.
На каком разрешении экрана проблемы возникают? На всех?

 

[kcomba]

Ты при каждом вызове эвента создаёшь новый инстанс браузера, а при закрытии не удаляешь его, надо это исправить.
Но твоя проблема у тебя в браузерной части.

 

[GasikPasik]

Блюра нет.. вроде бы)

Ускорение выключено(ещё даже до захода на сервер)

Вот как бы просто кнопка, нажимаю на неё, но она с задержкой нажимается, и допустим, лишь с 3 клика поменяет цвет...

Вот код самого сайта
App.jsx

import './App.css';

import MainButton from './component/UI/MainButton/MainButton';


function App() {
  return (
    <div className="App">
      <MainButton></MainButton>
    </div>
  );
}

export default App;

App.css

body{
  margin: auto;
  overflow: hidden;
  text-align: center;
  font-family: Comfortaa;

  height: 100%;
  width: 100%;

  margin-block-start: 0em;
  margin-block-end: 0em;
}

MainButton.jsx

import React from "react";
import './MainButton.css'


const MainButton = ({children, ...props}) => {
    return(
        <button className="MainButton">{children}</button>
    );          
       
}
export default MainButton;

MainButton.css

.MainButton{
    position: relative;
    width: 10vw;
    height: 6vh;
   
    outline: none;
   
    letter-spacing: 2px;
    font-size: 1.2vw;
   
    border: 0;
    border-radius: 1vw;
    box-shadow: 0 0 3vw 0.7vw rgba(195, 7, 65, 0.3);
   
    opacity: 90%;
   
    color: rgba(255,255, 255, 0.8);
    background-color: rgba(195, 7, 65, 0.8);
}

.MainButton:active{

    background-color: rgba(0, 255, 98, 0.8);
}

 

[GasikPasik]

Ты при каждом вызове эвента создаёшь новый инстанс браузера, а при закрытии не удаляешь его, надо это исправить.
Но твоя проблема у тебя в браузерной части.

Учту, спасибо большое)

 

[GasikPasik]

Тут скорее лучше стили показывать, а не клиентку.
На каком разрешении экрана проблемы возникают? На всех?

Да, тестил на full hd и щас на 1024x768

 

[kcomba]

Блюра нет.. вроде бы)

Ускорение выключено(ещё даже до захода на сервер)
Посмотреть вложение 5177

Вот как бы просто кнопка, нажимаю на неё, но она с задержкой нажимается, и допустим, лишь с 3 клика поменяет цвет...

Вот код самого сайта
App.jsx

import './App.css';

import MainButton from './component/UI/MainButton/MainButton';


function App() {
  return (
    <div className="App">
      <MainButton></MainButton>
    </div>
  );
}

export default App;

App.css

body{
  margin: auto;
  overflow: hidden;
  text-align: center;
  font-family: Comfortaa;

  height: 100%;
  width: 100%;

  margin-block-start: 0em;
  margin-block-end: 0em;
}

MainButton.jsx

import React from "react";
import './MainButton.css'


const MainButton = ({children, ...props}) => {
    return(
        <button className="MainButton">{children}</button>
    );         
      
}
export default MainButton;

MainButton.css

.MainButton{
    position: relative;
    width: 10vw;
    height: 6vh;
  
    outline: none;
  
    letter-spacing: 2px;
    font-size: 1.2vw;
  
    border: 0;
    border-radius: 1vw;
    box-shadow: 0 0 3vw 0.7vw rgba(195, 7, 65, 0.3);
  
    opacity: 90%;
  
    color: rgba(255,255, 255, 0.8);
    background-color: rgba(195, 7, 65, 0.8);
}

.MainButton:active{

    background-color: rgba(0, 255, 98, 0.8);
}

Я знаю, что когда-то (и скорее всего это не исправили) третья версия Vue имела(имеет) баг именно в CEF'e, который интегрирован в рейдж.
Была такая-же проблема с нажатием кнопок, что они не жались, или переставали жаться спустя какое-то количество действий или времени.
Возможно аналогичная ситуация и тут, я не знаю. Но судя по тому, что ты выложил, там в принципе нечему нагружаться и всё должно работать нормально.
Возможно, ты действительно вызываешь много-раз эвент с созданием браузера, это надо дебажить и в принципе весь клиент-сайд смотреть.
Попробуй измени это
loginScreen = mp.browsers.new("http://localhost:3000/")
На это
if(loginScreen) {
loginScreen.active = true
} else {
loginScreen = mp.browsers.new("http://localhost:3000/")
}

 

[GasikPasik]

Я знаю, что когда-то (и скорее всего это не исправили) третья версия Vue имела(имеет) баг именно в CEF'e, который интегрирован в рейдж.
Была такая-же проблема с нажатием кнопок, что они не жались, или переставали жаться спустя какое-то количество действий или времени.
Возможно аналогичная ситуация и тут, я не знаю. Но судя по тому, что ты выложил, там в принципе нечему нагружаться и всё должно работать нормально.
Возможно, ты действительно вызываешь много-раз эвент с созданием браузера, это надо дебажить и в принципе весь клиент-сайд смотреть.
Попробуй измени это
loginScreen = mp.browsers.new("http://localhost:3000/")
На это
if(loginScreen) {
loginScreen.active = true
} else {
loginScreen = mp.browsers.new("http://localhost:3000/")
}

Не-а, мимо(
В самом браузере всё работает

 

[kcomba]

Не-а, мимо(
В самом браузере всё работает

Попробуй откатись на 17 версию реакта ради теста.

 

[X-Clusiv]

Во VUE была проблема с эвентами. Любыми. Это было связано с временем. Возможно здесь также. Если нажимается не с первого раза.
Вот ссылка на решение проблемы во VUE, мне когда-то помогло.

On Click Event is not reliable in CEF (not triggered recognized every time) · Issue #2897 · vuejs/core

Version 3.0.4 Reproduction link https://jsfiddle.net/5zrqps3n/ Steps to reproduce When using CEF in Game Engine, it seems that some clicks not get triggered every time. Hard to reproduce out of gam...

github.com

 

[GasikPasik]

Попробуй откатись на 17 версию реакта ради теста.

Не сработало(

 

[GasikPasik]

Во VUE была проблема с эвентами. Любыми. Это было связано с временем. Возможно здесь также. Если нажимается не с первого раза.
Вот ссылка на решение проблемы во VUE, мне когда-то помогло.

On Click Event is not reliable in CEF (not triggered recognized every time) · Issue #2897 · vuejs/core

Version 3.0.4 Reproduction link https://jsfiddle.net/5zrqps3n/ Steps to reproduce When using CEF in Game Engine, it seems that some clicks not get triggered every time. Hard to reproduce out of gam...

github.com

С onClick всё супер, проблема именно в class:active в css
Даже hover работает безупречно

 

[GasikPasik]

Ещё я убедился, что проблема не в react, чистый html + css - эффект тот же, не понятная задержка :active

 

[mippoosedev]

Ещё я убедился, что проблема не в react, чистый html + css - эффект тот же, не понятная задержка :active

:active с этой версией сеф очень плохо работает, тоже заметил