mirror of
https://github.com/BeamMP/Docs.git
synced 2025-07-01 23:45:46 +00:00
Merge branch 'main' into main
This commit is contained in:
O1LER
GitHub
commit
69be1672b4
74
docs/de/game/getting-started.md
Normal file
74
docs/de/game/getting-started.md
Normal file
@ -0,0 +1,74 @@
|
||||
# Erste Schritte
|
||||
|
||||
## **Kompatibilität**
|
||||
|
||||
BeamMP ist vollständig kompatibel mit Windows und Linux, an der Kompatibilität mit MacOS noch wird gearbeitet. Da es sich bei Linux und MacOS jedoch um sekundäre Plattformen handelt, sind Fehler zu erwarten.
|
||||
|
||||
BeamMP funktioniert möglicherweise nicht mit Raubkopien des Spiels.
|
||||
|
||||
## **Installation**
|
||||
|
||||
### **Windows-Installation**
|
||||
|
||||
1. Öffne [beammp.com](https://beammp.com/) und klicke auf die Schaltfläche „Download Client“.
|
||||
2. Extrahiere das Archiv `BeamMP_Installer.zip` .
|
||||
3. Starte `BeamMP_Installer.exe` und folge den Anweisungen.
|
||||
4. Das BeamMP Launcher-Symbol sollte auf dem Desktop erscheinen. Wenn nicht, suchen Sie einfach in der Windows-Suchleiste nach „BeamMP“.
|
||||
5. Sobald der Launcher gestartet ist, sollte ein Terminalfenster angezeigt werden. Kurz darauf sollte BeamNG.drive automatisch starten. Schließe **das Terminalfenster nicht**.
|
||||
6. Klicke nach dem Start von BeamNG im Hauptmenü auf die Schaltfläche `Repository` und stelle sicher, dass `multiplayerbeammp` **der einzige** aktivierte Mod ist.
|
||||
7. Kehre zum Hauptmenü zurück und klicke auf die Schaltfläche „Multiplayer“, um den Multiplayer zu starten.
|
||||
8. Du wirst aufgefordert, dich anzumelden oder als Gast zu spielen (nicht alle Server erlauben Gäste). Du kannst in unserem [Forum](https://forum.beammp.com) ein Konto erstellen und dich dann mit denselben Anmeldeinformationen bei BeamMP anmelden.
|
||||
9. Wählen einen beliebigen Server aus und drücken `Connect` . Viel Spaß!
|
||||
|
||||
Hinweis: *Da beim Verbinden mit einem Server wahrscheinlich Fahrzeuge von anderen Spielern geladen werden müssen, kann der Beitritt länger als erwartet dauern.*
|
||||
|
||||
### **Linux-Installation**
|
||||
|
||||
Derzeit musst du den Launcher selbst erstellen. Dazu benötigst du grundlegende Kenntnisse zum Erstellen einer Anwendung.
|
||||
|
||||
Stelle sicher, dass [`vcpkg`](https://learn.microsoft.com/en-us/vcpkg/get_started/get-started?pivots=shell-bash#1---set-up-vcpkg) sowie grundlegende Entwicklungstools installiert sind, welche oft in Paketen enthalten sind, zum Beispiel:
|
||||
|
||||
- Debian: `sudo apt install build-essential`
|
||||
- Fedora: `sudo dnf groupinstall "Development Tools"`
|
||||
- Arch: `sudo pacman -S base-devel`
|
||||
- openSUSE: `zypper in -t pattern devel-basis`
|
||||
|
||||
Klone das BeamMP-Launcher-Repository mit `git` auf dein System, zum Beispiel: `git clone https://github.com/BeamMP/BeamMP-Launcher.git` [Weitere Informationen zum Klonen eines GitHub-Repos](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository)
|
||||
|
||||
Lade das "Tag", das für die [neueste Version](https://github.com/BeamMP/BeamMP-Launcher/releases/latest) verwendet wurde. Wenn beispielsweise `v2.3.2` in der neuesten Version verwendet wird, führe `git checkout v2.3.2` aus.
|
||||
|
||||
Im Stammverzeichnis des Projekts, führe aus:
|
||||
|
||||
1. `cmake -DCMAKE_BUILD_TYPE=Release . -B bin -DCMAKE_TOOLCHAIN_FILE=~/vcpkg/scripts/buildsystems/vcpkg.cmake -DVCPKG_TARGET_TRIPLET=x64-linux`
|
||||
2. `cmake --build bin --parallel --config Release`
|
||||
|
||||
> Sollte während des Erstellens der Arbeitsspeicher ausgehen, kann man die Anweisung --parallel weglassen. Dann wird weniger Arbeitsspeicher benötigt, da das Erstellen nur noch auf einem CPU-Thread erfolgt.
|
||||
|
||||
Verschiebe die fertige Anwendung aus dem `/bin` Ordner in einen eigenen Ordner und führe sie von dort aus aus.
|
||||
|
||||
Der native Linux BeamMP-Launcher wird gestartet und verwendet das native Linux BeamNG.drive
|
||||
|
||||
#### **Verwenden von beamNG.drive mit Proton**
|
||||
|
||||
Wenn du den nativen Linux BeamMP-Launcher zusammen mit BeamNG.drive, das über Proton läuft, verwenden möchtest, kannst du dies folgendermassen tun:
|
||||
|
||||
Führe den BeamMP-Launcher mit dem Argument `-no-launch` aus (dadurch wird verhindert, dass der Launcher das native Linux-System BeamNG.drive startet). Weitere Informationen zu den Launcher-Argumenten finden sich unter [Development Environment Setup.](../guides/beammp-dev/beammp-dev.md)
|
||||
|
||||
Ändere den Speicherort des Benutzerordners von Proton-BeamNG.drive in den Speicherort von Linux-BeamNG.drive (da der native Linux BeamMP-Launcher derzeit nur in den Benutzerordner des Linux-BeamNG.drive schreibt).
|
||||
|
||||
Dies kann beispielsweise durch die Erstellung eines symbolischen Links erfolgen.
|
||||
|
||||
- Notiere den Speicherort des Benutzerordners des nativen Linux-BeamNG.drive (normalerweise zu finden unter `~/.local/share/BeamNG.drive` ) und benenne ihn um, zum Beispiel in „BeamNG.drive_old“
|
||||
- Notiere den Speicherort des Benutzerordners von Proton-BeamNG.drive (normalerweise zu finden unter `~/.local/share/Steam/steamapps/compatdata/284160/pfx/drive_c/users/steamuser/AppData/Local/BeamNG.drive `).
|
||||
- Erstelle einen symbolischen Link zwischen beiden Benutzerordnern, zum Beispiel: `ln -s ~/.local/share/Steam/steamapps/compatdata/284160/pfx/drive_c/users/steamuser/AppData/Local/BeamNG.drive ~/.local/share`
|
||||
|
||||
---
|
||||
|
||||
## **Bekannte Probleme**
|
||||
|
||||
- Der native Linux BeamMP-Launcher kann sich derzeit nur einmal mit einem Server verbinden, nach dem Trennen der Verbindung muss der Launcher neu gestartet werden. Dies ist möglich, ohne das Spiel zwischendurch schließen zu müssen.
|
||||
- Wenn die Schaltfläche „Multiplayer“ nicht angezeigt wird, stelle sicher, dass der BeamMP-Mod im „Mod Manager“ vorhanden und aktiviert ist, und drücke dann STRG + L.
|
||||
- VPNs jeglicher Art können Verbindungsprobleme verursachen.
|
||||
- Wenn der Launcher Fehler meldet, lies die [FAQ](https://forum.beammp.com/c/faq/35) .
|
||||
|
||||
Solltest du weitere Hilfe bei der Installation benötigen, kannst du einen Beitrag in unserem [Forum](https://forum.beammp.com) erstellen oder auf unserem [Discord-Server](https://discord.gg/beammp) nachfragen.
|
||||
@ -1 +1,266 @@
|
||||
# UI-App Creation
|
||||
# UI-App Creation
|
||||
|
||||
In order to make a UI-App you will need some knowledge of the AngularJS framework, the main documentation can be found here: [AngularJS docs](https://docs.angularjs.org/guide)
|
||||
|
||||
## File structure
|
||||
|
||||
A UI-App needs four important files to work:
|
||||
- app.js | Contains the main code used by the UI-App [Javascript docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
|
||||
- app.html | The code that displays your app [Html docs](https://developer.mozilla.org/fr/docs/Web/HTML)
|
||||
- app.json | Contains the information of the UI-App
|
||||
- app.png | The image file showing in the app selector
|
||||
|
||||
### UI-App style
|
||||
We recommend using the <style> tag to style your app, a .css file will work, but you will not be able to see the changes in real-time.
|
||||
|
||||
## Example
|
||||
|
||||
This example is from DanielW Thanks to him
|
||||
|
||||
ui\modules\apps\ExampleApp\app.html
|
||||
```html
|
||||
<div style="width: 100%; height: 100%;" class="bngApp">
|
||||
<link type="text/css" rel="stylesheet" href="/ui/modules/apps/ExampleApp/app.css" />
|
||||
|
||||
<div id="exampleAppContainer">
|
||||
<span>Gear: <span>{{ gearName }}</span></span>
|
||||
|
||||
<div layout="row" layout-align="center center">
|
||||
<md-input-container flex>
|
||||
<label>Input</label>
|
||||
<input ng-model="message" ng-keydown="sendMessage($event)">
|
||||
</md-input-container>
|
||||
|
||||
<md-button md-no-ink class="md-warn" ng-disabled="!message" ng-click="sendMessage()">Send</md-button>
|
||||
</div>
|
||||
|
||||
<span style="display: block">Messages:</span>
|
||||
|
||||
<!-- Scroll Area -->
|
||||
<ul bng-nav-scroll style="margin: 0; padding: 0; overflow-y: auto; width: 100%; height: 100%; background-color: #37373740;">
|
||||
|
||||
<!-- Iterate over the messages and display them -->
|
||||
<li ng-repeat="message in messages track by $index" style="display: flex; align-items: center; height: 35px;">
|
||||
<span style="padding: 0 0.2em; width: 100%;">{{ message }}</span>
|
||||
|
||||
<!-- Button to delete the message, this calls the `deleteMessage` function in `app.js` -->
|
||||
<md-button md-no-ink class="md-icon-button md-warn" ng-click="deleteMessage($index)">
|
||||
<md-icon class="material-icons">delete</md-icon>
|
||||
</md-button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
Here, you can see a ``<span>`` tag displaying the gear of your vehicle, an input used to send a message to the ``sendMessage()`` function in the Javascript and a repeated ``<li>`` tag using <b>ng-repeat</b> on the ``messages`` variable located in the Javascript
|
||||
|
||||
ui\modules\apps\ExampleApp\app.js
|
||||
```js
|
||||
angular.module('beamng.apps')
|
||||
.directive('exampleApp', [function() {
|
||||
return {
|
||||
templateUrl: '/ui/modules/apps/ExampleApp/app.html',
|
||||
replace: true,
|
||||
restrict: 'EA',
|
||||
scope: true,
|
||||
|
||||
controller: ['$scope', function($scope) {
|
||||
$scope.gearName = '0'
|
||||
$scope.message = ''
|
||||
$scope.messages = []
|
||||
|
||||
// Setup the streams we want. For now, we only want the engine information. You can add more, you'll just have to look around to find the different streams
|
||||
let steamList = ['engineInfo']
|
||||
StreamsManager.add(steamList)
|
||||
|
||||
$scope.$on('destroy', function() {
|
||||
StreamsManager.remove(steamList)
|
||||
})
|
||||
|
||||
// Do I even need to put this comment here explaining what this function does?
|
||||
// Well, I have done it for a lot of other things when they weren't needed. I'll leave this one be...
|
||||
$scope.$on('streamsUpdate', function(event, streams) {
|
||||
if (!streams.engineInfo) // Early return... You probably noticed that without this useless comment though
|
||||
return;
|
||||
|
||||
// `lua/vehicle/controller/vehicleController.lua:538` (or use console.log)
|
||||
let gear = streams.engineInfo[5]
|
||||
|
||||
// Update the gear name in HTML if needed
|
||||
if ($scope.gearName !== gear)
|
||||
$scope.gearName = gear
|
||||
})
|
||||
|
||||
$scope.sendMessage = function(event) {
|
||||
if (event && event.key !== 'Enter')
|
||||
return
|
||||
|
||||
if ($scope.message == '')
|
||||
return
|
||||
|
||||
// Forward the message to the Lua extension to modify it
|
||||
bngApi.engineLua('extensions.exampleMod.modifyMessage("' + $scope.message + '")')
|
||||
$scope.message = ''
|
||||
}
|
||||
|
||||
$scope.deleteMessage = function(idx) {
|
||||
$scope.messages.splice(idx, 1)
|
||||
}
|
||||
|
||||
// The `modifyMessage` function will call this hook with the modified data
|
||||
$scope.$on('MessageReady', function(_, modifiedMessage) {
|
||||
$scope.messages.push(modifiedMessage)
|
||||
});
|
||||
}]
|
||||
}
|
||||
}])
|
||||
```
|
||||
Note the usage of <b>$scope</b>. This is very important because you will need to define your variables and functions within <b>$scope</b> to be able to access it from the <b>Html</b> inside any <b>ng-*</b> tag.
|
||||
So in this example, after the ``sendMessage()`` function being executed from the <b>Html</b> it will send it to a lua file located in the extensions directory of the mod and execute the ``modifyMessage()`` function inside this lua file.
|
||||
|
||||
An example of how the lua side could look like:
|
||||
```lua
|
||||
local function modifyMessage(message)
|
||||
message = message .. " [Modified!]"
|
||||
guihooks.trigger('MessageReady', message)
|
||||
end
|
||||
```
|
||||
^ This is a simplified version of the lua to just show the function
|
||||
|
||||
The main focus here is the usage of <b>guihooks.trigger</b> which triggers an AngularJS event defined with ``$scope.$on()``. As you can see at the very bottom of the Javascript file the event is named MessageReady and will be executed by the <b>guihooks.trigger</b> function with the message payload and then will be pushed inside the ``$scope.messages`` variable to be displayed by the li tag using <b>ng-repeat</b> in the <b>Html</b> file
|
||||
|
||||
The full lua file is just below
|
||||
|
||||
lua\ge\extensions\exampleMod.lua
|
||||
```lua
|
||||
local M = {}
|
||||
|
||||
--[[
|
||||
This is the entry point of our extension, this is what the game loads from our `modScript.lua`.
|
||||
In the modScript file, you can load more extensions and put them in the same directory as this file.
|
||||
|
||||
In this file, we will communicate with the following:
|
||||
1. Our vehicle extension. That extension tells this extension when to send it data, and we send it. Take a look at `vehicle/extensions/auto/exampleVehicleExtension.lua`
|
||||
2. Input. Take a look at `core/input/actions/myActions.json`. When the bounded key is pressed, it will call `onActionKeyDown` (a function we export below)
|
||||
]]
|
||||
|
||||
-- Game Function Hooks
|
||||
--------------------------------------------
|
||||
local function onExtensionLoaded()
|
||||
log('D', "onExtensionLoaded", "Called")
|
||||
end
|
||||
|
||||
local function onExtensionUnloaded()
|
||||
log('D', "onExtensionUnloaded", "Called")
|
||||
end
|
||||
|
||||
-- Custom Functions
|
||||
--------------------------------------------
|
||||
local function onActionKeyDown()
|
||||
log('D', "onActionKeyDown", "Pressed!")
|
||||
end
|
||||
|
||||
local function onVehicleExtensionLoaded(vehID)
|
||||
log('D', "onVehicleExtensionLoaded", "Sending some data to the vehicle")
|
||||
|
||||
local veh = be:getObjectByID(vehID) -- If you don't have the ID, you can also use `be:getPlayerVehicle(0)` to get the current vehicle.
|
||||
if not veh then return end -- The usual error checking
|
||||
|
||||
local data = {
|
||||
["name"] = "Daniel W"
|
||||
}
|
||||
|
||||
veh:queueLuaCommand("extensions.exampleVehicleExtension.onDataReceived('" .. jsonEncode(data) .. "')")
|
||||
end
|
||||
|
||||
local function modifyMessage(message)
|
||||
message = message .. " [Modified!]"
|
||||
guihooks.trigger('MessageReady', message)
|
||||
end
|
||||
|
||||
-- Export Interface
|
||||
--------------------------------------------
|
||||
M.onExtensionLoaded = onExtensionLoaded
|
||||
M.onExtensionUnloaded = onExtensionUnloaded
|
||||
|
||||
M.onActionKeyDown = onActionKeyDown
|
||||
M.onVehicleExtensionLoaded = onVehicleExtensionLoaded
|
||||
M.modifyMessage = modifyMessage
|
||||
|
||||
--[[ Other functions could include:
|
||||
- onPreRender(dtReal, dtSim, dtRaw)
|
||||
- onUpdate(dtReal, dtSim, dtRaw)
|
||||
- onClientPreStartMission(levelPath)
|
||||
- onClientPostStartMission(levelPath)
|
||||
|
||||
To find all of these, search the following in `BeamNG.Drive/lua`: `extensions.hook(`
|
||||
--]]
|
||||
|
||||
return M
|
||||
```
|
||||
|
||||
Note that its very important to return the M (module) variable with the needed functions inside!
|
||||
For example, without the ``M.modifyMessage = modifyMessage`` line, the ``bngApi.engineLua('extensions.exampleMod.modifyMessage("' + $scope.message + '")')`` function will not be able to find the modifyMessage() function
|
||||
|
||||
|
||||
ui\modules\apps\ExampleApp\app.css
|
||||
```css
|
||||
#exampleAppContainer {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
}
|
||||
|
||||
#exampleAppContainer > * {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
```
|
||||
|
||||
ui\modules\apps\ExampleApp\app.json
|
||||
```json
|
||||
{
|
||||
"domElement": "<example-app></example-app>",
|
||||
"name": "Example App",
|
||||
"types": [
|
||||
"ui.apps.categories.debug"
|
||||
],
|
||||
"description": "example-app",
|
||||
"css": {
|
||||
"left": "0px",
|
||||
"height": "auto",
|
||||
"width": "270px",
|
||||
"min-width": "200px",
|
||||
"min-height": "90px",
|
||||
"top": "0px"
|
||||
},
|
||||
"author": "Daniel W",
|
||||
"version": "0.1",
|
||||
"directive": "exampleApp"
|
||||
}
|
||||
```
|
||||
The directive needs to be the same as in the <b>Javascript</b> file
|
||||
|
||||
|
||||
|
||||
|
||||
# Javascript functions provided by BeamNG for UI-Apps
|
||||
|
||||
```js
|
||||
bngApi.engineLua("lua_path.function()")
|
||||
```
|
||||
Useful to run a lua function with or without arguments
|
||||
|
||||
# Lua functions provided by BeamNG for UI-Apps
|
||||
|
||||
```lua
|
||||
guihooks.trigger("EventName", Payload)
|
||||
```
|
||||
The payload can be any type but its better to keep it as an Array / Object or a String to not be lost.
|
||||
|
||||
<b>IMPORTANT</b> : Sometime it can happen that the event name you use is already used internally by something else and cause problems, so for example if your app is named Nickel, it can be a good practice to name every of your Angular event like NKEventName instead of EventName
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user