RAGE MP

//Индексовый файл (Клиент)
let shapeUI = mp.browsers.new("package://cef/npcUI/ui/index.html");
shapeUI.active = false;

let dialogUI = mp.browsers.new("package://cef/npcUI/ui/dialog.html");
dialogUI.active = false;

let player = mp.players.local;
let camera = mp.cameras.new('default', new mp.Vector3( -799.003,  -1337.997, 5.150 + 0.50), new mp.Vector3(0, 0, 145), 50)
var cameraActive = false;


mp.keys.bind(0x45, true, function () {
    if(shapeUI.active == true) {

        camera.setActive(true);
        mp.game.cam.renderScriptCams(true, true, 500, true, false);
        mp.game.ui.displayRadar(false);
        player.freezePosition(true);
        mp.gui.chat.activate(false)
        mp.gui.chat.show(false);

        dialogUI.active = true;

        setTimeout(() => {
            cameraActive = true;
        }, 1000)
    }

    if(cameraActive == true){
        destroyCam(camera);
    }
});


function destroyCam(cam) {
    dialogUI.active = false;
    shapeUI.active = false;
    camera.setActive(false);
    mp.game.ui.displayRadar(true);
    player.freezePosition(false);
    mp.gui.chat.activate(true)
    mp.gui.chat.show(true);
    mp.game.cam.renderScriptCams(false, false, 0, false, false);
}


mp.events.add('playerEnterColshape', () => {
    shapeUI.active = true;
});

mp.events.add('playerExitColshape', () => {
    shapeUI.active = false;

});

//Создание колшейпа (Сервераная часть)
let x = -800.653;
let y = -1340.330;
let z = 5.150;
let range = 1;
let someColShape = mp.colshapes.newSphere(x, y, z, range);

function playerEnterColshapeHandler(player, shape) {
    if(shape == someColShape) {
        //player.outputChatBox("Вы в шейпе");
    }
  }

function playerExitColshapeHandler(player, shape) {
    if(shape == someColShape) {
       // player.outputChatBox("Вы выйшли из шейпа");
 }
}

mp.events.add("playerEnterColshape", playerEnterColshapeHandler);
mp.events.add("playerExitColshape", playerExitColshapeHandler);

//В папке CEF создать папку npcUI в ней ui. В папке ui создать файлы: index.html style.css dialog.html dialog.css
//В файл index.html вставить следующий код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans&display=swap" rel="stylesheet">
    <title>Document</title>
</head>
<body>
    <div id="block">
        <div id="notify">
            Нажмите Е для взаимодействия
        </div>
</div>
</body>
</html>

//В файл style.css вставить следующий код:

body {
    font-family: 'IBM Plex Sans', sans-serif;

}

#block {
    padding-top: 5px;
    text-align: center;
    margin-top: 500px;
    margin-left: 650px;

    width: 300px;
    height: 30px;
    background: #000000;
    opacity: 0.9;
    color: #fff;
    user-select: none;
}


#block {
    opacity: 0.7;
    border-radius: 5px;
    margin-top: 730px;
    margin-left: 650px;
}

//В файл dialog.html вставить следующий код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="dialog.css">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="block">
        Привет, меня Джек зовут, вижу ты только приехал. Поверни голову на право там увидишь скутеры с бесплатной арендой только для новоприбывших.
       Также вот держи тебе деньги для старта и начала успешной жизни. Всё в твоих руках.
    </div>
</body>
</html>

//В файл dialog.css вставить следующий код:

body {
    font-family: 'Roboto', sans-serif;
}

#dialog {
    margin-left: 500px;
    margin-top: 450px;
}
#block {
    padding-top: 5px;
    text-align: center;
    margin-top: 500px;
    margin-left: 650px;

    width: 600px;
    height: 80px;
    background: #000000;
    color: #fff;
    user-select: none;
}


#block {
    opacity: 0.7;
    border-radius: 5px;
    margin-top: 500px;
    margin-left: 430px;
}

//Создаём персонажа (на клиенте)

let noname = mp.peds.new(
    mp.game.joaat('csb_imran'), //можете менять пэд на свой по этой ссылке: https://wiki.rage.mp/index.php?title=Peds
    new mp.Vector3(-800.653, -1340.330, 5.150), -11.121, //в скобка местоположение персонажа, а число за скобками rotation
    0
);