Vernetzte Räume

Aus hyperdramatik
Wechseln zu: Navigation, Suche

Das Seminar "Vernetzte Räume" diente dazu, während der Corona-Pandemie einen geteilten Online-Raum zu ermöglichen, der Begegnungen möglich macht. Dieser wurde auf dem Server ladenlokal.hyperdramatik.net eingerichtet. Das Seminar behandelte High Level Netzwerke, Server-Client Infrastruktur, sowie unterschiedliche Perspektiven auf vernetzte virtuelle Welten. Das Seminar berücksichtigte sowohl technische Erklärungen, praktische Anwendungen als auch soziale Merkmale vernetzter Räume. Dieser Eintrag soll für Studierende des Studiengangs Spiel&Objekt nachvollziehbar machen, welche Inhalte behandelt wurden und sie dokumentieren. Der Nachtrag unter dem strukturieren Eintrag ist das Protokoll des Seminars.


Netzwerke

Protocols & Internet Standards

Netzwerk Protokolle sind formale Standards und Richtlininen von Regeln, Prozessen und Formaten, die Kommunikation zwischen zwei oder mehr Geräten über ein Netzwerk definieren. Ein Protokoll definiert ein Regelwerk, dass zwei (oder mehr) Parteien nutzen um miteinander zu interagieren und somit etwas passieren zu lassen. Ein Standard ist ein formalisiertes Protokoll, dass von den Parteien, die es implementieren, akzeptiert wird. Es sind also eine Protokolle Standards, aber nicht alle Standards Protokolle. Oder auch: Ein Protokoll ist eine Sprache, ein Standard ein Lexikon einer Sprache. In der Sprache können Leute, die sie verstehen, sich unterhalten und im Lexikon stehen Definitionen der verwendeten Wörter.

Prominente Beispiele wären:

  • TCP - transmission control protocol
  • PPOE - peer to peer over ethernet (router --> ISP)
  • UDP - user datagram protocol
  • DNS - domain name service (a hierarchical and decentralized naming system for computers, services, or other resources connected to the Internet or a private network)
  • IP - internet protocol
  • OSC - open sound control
  • MQTT - Message Queuing Telemetry Transport (a lightweight messaging protocol for small sensors and mobile devices, optimized for high-latency or unreliable networks)
  • HTTP - Hypertext Transfer Protocol
  • FTP - file transfer protocol
  • SMTP - secure mail transfer protocol
  • SSH - Secure Shell (a cryptographic network protocol for operating network services securely over an unsecured network)


Fun Times with FK: I could tell you a UDP joke, but you might not get it. This is very, very funny because UDP does not check if messages arrived, but only sends them. Ha! There’s also a TCP joke, ask him for that one! Just know, that TCP checks if things arrived in the right order.

Network

Wie die Vernetzung verschiedener Computer und Anwendungen funktioniert, wird hier am Beispiel dieses sehr hübschen Schaubilds erklärt.

Netzwerk setup.png


Leoni sitzt zuhause an ihrem Computer und hat Firefox und Unity geöffnet. Diese beiden Programme kommunizieren beide über die Netzwerkkarte des Computers mit dem Internet. Damit die Netzwerkkarte weiß, welche Informationen für welches Programm sind, benutzen diese unterschiedliche Ports. Jede Software kommuniziert also über einen anderen Kanal mit der Netzwerkkarte. Die Netzwerkkarte kommuniziert nun mit dem W-Lan-Standard mit dem Router, der wiederum mit dem Internet verbunden ist und auf Webserver zugreifen kann. Die Informationen des Webservers werden vom Browser abgerufen und vom Webserver wieder an Leonis Computer übermittelt. Der Browser greift auf ladenlokal.hyperdramatik.net zu, darauf läuft eine WebGL-Anwendung. Der Webserver ladenlokal.hyperdramatik.net wurde vorher von Friedrich angelegt und per FTP-Clientprogramm (WinSCP) wurde dort die WebGL-Anwendung abgelegt. Diese WebGL Anwendung wurde vorher mit Unity erstellt. Unity can do!

Leonis Computer lädt also über den Webserver ladenlokal.hyperdramatik.net die WebGL Anwendung in den Browser. Die WebGL Anwendung ist eine Multiplayer-Anwendung und läuft bei mehreren Leuten gleichzeitig. Unterschiedliche Leute können also in der selben Oberfläche unterschiedliche Dinge tun, die die jeweils anderen mitbekommen. Diese wurde von Friedrich erstellt und, da, es sich um eine Linux-Anwendung handelt, per Shell (also der Hülle eines Betriebssystems innerhalb eines anderen Betriebssystems) und FTP-Clientprogramm von Friedrichs Computer auf dem Host ladenlokal.spielundobjekt.de hochgeladen. Das Tool für die Serververwaltung des Linux-Servers ist MobaXTerm.

Um sich mit den anderen Spielenden zu vernetzen, muss nun innerhalb der WebGL Anwendung ein Host definiert werden, in diesem Fall ist es der definierte Unity-Linux-Server ladenlokal.spielundobjekt.de. Leonis Computer greift nun also gleichzeitig auf den Webserver ladenlokal.hyperdramatik.net und auf den Host der WebGL Anwendung, ladenlokal.spielundobjekt.de zu. Vom Webserver empfängt sie jedoch ausschließlich Informationen, an den Host sendet sie auch Daten, bspw. die Position ihrer Figur. Dieser Host verteilt ihre Daten dann auch weiter an alle anderen Spieler*innen und vice versa.

Nun möchte Leoni ihre eigene WebGL Anwendung bauen. Freundlicherweise hat Friedrich das Unity-Projekt seiner WebGL-Anwendung bei GitHub hochgeladen und immer wieder mal gepusht. Leoni nun gern ihre eigene WebGL Anwendung bauen und hat deswegen das Unity-Asset von GitHub ( Link GitHub in Unity) installiert und die Daten von Friedrich gepulled. So kann sie Dateien immer dann ziehen, wenn es ihr passt, Friedrich hat wenig Mehraufwand damit.

Online Multiplayer

Das Seminar

Zeitraum: 21. - 23.04. und 28. - 30.04 jeweils 11:00 - 13:00 und 14:00 - 16:00 Uhr

Inhalt: Auf Basis von von uns zur Verfügung gestelltem Unity Code werden wir einen gemeinsam geteilten virtuellen Raum untersuchen und sowohl technisch als auch ästhetisch verändern. Wir lernen High Level Netzwerke, Server-Client Infrastruktur, sowie unterschiedliche Perspektiven auf vernetzte virtuelle Welten kennen.

Der von uns zur Verfügung gestellte, gut dokumentierte Unity Code läuft auf Windows, Android (mit ARCore), Oculus Go, sowie im Browser und ist über einen Linux Server vernetzt. Ebenso wird es eine Schnittstelle zu Arduino geben. Wir werden euch einen eigenen Linux Server für den Workshop zur Verfügung stellen, auf dem ihr eure eigenen vernetzten online-Räume ausprobieren könnt. Und wir erklären verständlich, wie das alles funktioniert.

Im Rahmen des Workshops werden wir diskutieren, welche Handlungsmöglichkeiten in vernetzten virtuellen Räumen sinnhaft sind, wie sinnhaftes geteiltes Erleben gelingen kann, und welche Unterschiede und Möglichkeiten in virtuellem Embodiment bestehen.

Im Rahmen des Workshops wird es konzeptionelle und technische Aufgaben geben, die ausserhalb der Workshopzeit bearbeitet werden sollen.

see also: FROM SPACE TO SPACE

Five-analytical-planes.png

Inhalte nach Ablauf

PREPARE

create your character (optional)

character tutorials

simply download this file and edit:
friedrich_character.png

download && install stuff

1. Installieren von Unity 2019.3.10f1 auf eurem NUC über den Unity Hub (bitte nutzt immer den Unity Hub!)

(Bitte habt Verständnis, dass wir leider keine Kapazitäten haben, andere Installationen zu betreuen)

2. Download und Installation des Programms WinSCP: https://winscp.net/eng/download.php

3. Download und Installation von MobaXterm - Home Edition: https://mobaxterm.mobatek.net/download.html


THE PLACE

Die genutzte Infrastruktur liegt auf http://ladenlokal.hyperdramatik.net/

Die Struktur dieses Servers kann für bis zu 1000 Leute genutzt werden.


PART1: definitions and explanations

What is a network?

What is a network protocol? Network protocols are formal standards and policies made up of rules, procedures and formats that defines communication between two or more devices over a network.

  • TCP - transmission control protocol
  • PPOE - peer to peer over ethernet (router --> ISP)
  • UDP - user datagram protocol
  • DNS - domain name service (a hierarchical and decentralized naming system for computers, services, or other resources connected to the Internet or a private network)
  • IP - internet protocol
  • OSC - open sound control
  • MQTT - Message Queuing Telemetry Transport (a lightweight messaging protocol for small sensors and mobile devices, optimized for high-latency or unreliable networks)
  • HTTP - Hypertext Transfer Protocol
  • FTP - file transfer protocol
  • SMTP - secure mail transfer protocol
  • SSH - Secure Shell (a cryptographic network protocol for operating network services securely over an unsecured network)

protocols build upon one another... IP --> TCP --> HTTP (our daily use of internet) IP --> UDP --> OSC (used in many S&&O projects)

TCP vs. UDP Friedrich's Lieblingswitz: I could tell you a UDP joke, but you might not get it TCP checks if things arrived in the right order

What is a standard? Difference between a standard and a protocol? all protocols are standards not all standards are protocols

COMPUTER <---> ROUTER <---> FRANKFURT (COMPUTER IN DATACENTER)

Data Center / Server Farm serverfarm-foto-eshopper-dotco.png

5G --> frequency and hardware required

Q: how does THE INTERNET know what datapackets are for who/where? A: PORTS!

PORT 80 - the internet port PORT 21 -

Port numbers 0 to 1024 are reserved for privileged services and designated as well-known ports. This is a list of TCP and UDP port numbers used by protocols of the Internet protocol suite for operation of network applications. >> https://en.wikipedia.org/wiki/List_of_TCP_and_UDP_port_numbers

(Certificates)

What happens when I open a website?

setup: PC (personal computer, hardware, material reality) --> OS (operating system) --> Firefox (software, browser) PC: processor, storage, network chip.... network chip (hardware) --> network adaptor (OS)

image:

script:

computer sends code that then runs on receiving computer. end of communication,

Client: website! (multiplayer.spielundobjekt.de) // actually: a readable IP address

all the website does is distribute the code file to the computers that access it

Servercom.png

Netzwerk.png


///////////////////LUNCH///////////////////

PART2: unity && git

Assets & Git in Unity


im Folgenden wollen wir:

  • 1. ein Plugin für unity aus dem Asset store installieren
  • 2. über dieses Plugin auf den Code zugreifen
  • 3. In Unity Eine VErsion für den Server builden
  • 4. In Unity eine Version für die Webseite builden
  • 5. Grosse Freude haben!

Nun zu den einzelnen Dingen Falls ihr Unity offen habt, schliesst es bitte wieder öffnet dann bitte den Unity Hub

Unity Hub Installs (2019) --> Add Modules --> schaut bitte auch das Linux Build Support und WebGL Build Support angeklickt sind --> INSTALL. . . . . . . . . (can take some time)

nachdem alle modules installiert sind, gehen wir zurück auf "Projects" und dann klicken wir auf "New":

  • select 3D
  • name project
  • where to save
  • create!

In Unity, klickt auf den "Asset Store" Tab:

und gebt dann im Suchfeld "git" ein:

drückt dann "Enter"

und klickt dann auf "GitHub for Unity"

click: Download --> Accept --> Import --> Import (sign in if requested)

in eurem Assets Folder sollte dann auch noch ein Folder namens "Plugins" sein: dann unter "Window -> GitHub"

dann kommt rechts anstelle des Inspectors ein neues fenster auf "settings" tab klicken:

dann das ausfüllen:

  • name
  • email

click: "save user"

switch to "initialize" tab click: "initialize a git repository"

auf "Settings" klicken:

  • new*: Repository Configuration

paste into "remote: origin": "https://github.com/spielundobjekt/Unity-Basic-Multiplayer" click: save repository

wir haben es fast geschafft! https://tenor.com/view/dont-stop-dont-give-up-kid-advice-motivation-gif-4496803

auf "Changes" klicken: Dann mit der rechten Maustaste auf "Assets"klicken: dann discard dann, bei nachfrage, einfach mal sicher sein, und discard drücken bei mir ist github dann abgestürzt

sodele weiter gehts wir schliessen unity und öffnen das soeben angelegte Projekt aus dem Hub nochmal dann löschen wir den Ordner "Plugins":

dann iportieren wir das github plugin nochmal aus dem asset store daraufhin klicken wir wieder bei "Window -> GitHub" und dann wieder auf "Changes"

und dann auf das kleine "All":

enter some text (these are not commands): commit summary: "anfang" commit description: "something"

klickt dann gerne auf "Commit to [master]"

daraufhin sollte der inhalt aus dem fenster verschwinden.

klickt dann oben auf "pull" evtl. kommt eine fehlermeldung click: pull changes from remote origin

can ignore: warning: no common commits..... refusing to merge.....

als nächstes: klickt auf "Branches" tab

und dann doppelklickt auf "dev"

dann drückt gerne kurz mal auf "refresh" or "fetch"

und dann doppelklickt auf "dev" sagt ja zum checkout!


dann erscheint dev auch bei euch in den local branches dann dort doppelklicken

dann wird unity eine menge dinge importieren

falls fehler: schliseen und neustart wenn ihr unity wieder geöffnet habt, rechts wieder zurück auf den Inspector klicken fehler hören auf, nachdem ihr auf den inspector geklickt habt

dann könnt ihr "Clear" drücken bei der Console geht dann bitte in scenes und öffnet "2D Multiplayer"

in der hierarchy oben links, klickt auf das kleine pfeilchen bei "GameManagement"

und dann klickt auf "Network" ihr seht rechts im inspector die eigenschaften des Network Objektes:

sehr viele dinge keine sorge, ich möchte nur auf eine sache aufmerksam machen diese hier: Player Object

Das Projekt benutzt eine Open-Source Library für Networking. Diese library heisst "Mirror" daher kommt dieses Objekt

innerhalb dieses Objektes, kann man angeben, welches Prefab (von uns vorbereitete GameObject) als Spielerin entstehen soll, sobald jemand dem Spiel beitritt und wie wir gut sehen können, steht da: player_2D dieses von mir gemachte GameObject findet ihr im Ordner "Prefabs"

das könnt ihr dort doppelklicken, und schauen, aus was für Scripts es besteht und aus was für Komponenten


TileData und Surroundings sind noch nicht relevante Skripte Alles was "Network" im Namen hat, ist von der Netzwerklibrary Mirror.

Tutorial link:

ich wollte euch nur kurz die von mir gemachten scripte zeigen die könnt ihr euch nachher gerne mal durchlesen sie sind serh, sehr ausführlich dokumentiert

wir können das prefab schliessen und zurück zur szene

in der hierarchy gibt es zwei objekte, die heissen Spawn (1) und (2)

von F gemachten scripte? alle ohne "Network" im namen PlayerData, MoveScript2D, PlayerCameraMovement2D AnimationScript2D

wir kommen nachher nochmal an den Ordner ich wollte euch nur zeigen, wo sie im Editor eingebaut sind

damit ihr euch einen Überblick verschaffen könnt, was passiert in der hierarchy gibt es zwei objekte, die heissen Spawn (1) und (2) Das Network Objekt generiert ein neues player_2D GameObject an einem dieser Punkt, sobald das Spiel losgeht wie ihr seht, sind diese Punkt auf einem Bett alle wandstücke und gegenstände im Raum sind einzelne GameObjects unter 2D in der Hierarchy

du kannst auf "Bed 1" doppelklicken dann siehst du es in der Scene View

Whiteboard 210420.png


Bevor es zu ende geht für heute: drückt bitte alle einmal play es öffnet sich ein interface oben links dieses interface kommt von der Netzwerk Library das Spiel und unsere Skripte starten erst, wenn wir "Host (Server + Client)" gedrückt haben drückt das mal

im AnimationScript2D könnt ihr in den Code kommentaren nachlesen, wie das funktioniert

ich erkläre jetzt nochmal in Bildern:


eure Aufgabe bis morgen ist: macht euch einen eigenen Character, legt ihn in Resources/Characters, und spielt als sie

DAY 2: MORE NETWORK STUFF

SCHEDULE

11-12:00 skype (video call) pause 12:15-13:00 skype (video call) lunch 14-16:00 discord (chat)


PART3: MobaXterm???

WebGL vs. HTML


////////////////////////////////////LUNCH//////////////////////////////////

PART4: ???

wir haben folgendes getan:

  • 1. unity und das projekt geöffnet
  • 2. rechts im interface auf github geklickt
  • 3. unter changes geschaut, was dort steht


Der erste Workaround des tages! was macht ihr also alle, wenn ihr unity öffnet, und bei github nur "initialized"steht? refresh und sonst neustart


wir haben jetzt folgende situation: dinge haben sich auf unserem computer seit dem letzten commit geändert auf github - der webseite - steht jetzt neuer code bereit. welche schritte müssen wir gehen, damit wir an diesen neuen code rankommen?


unseren stand comitten und den anderen pullen


kurze erläuterung


beginn ------

wenn ihr in unity auf play drückt dann startet ihr ja euren unity code auf eurem computer und dieser code verbindet sich mit einem computer mit der adresse, die recht neben dem kleinen client knopf steht also: multiplayer.spielundobjekt.de diese adresse ist die adresse des orangenen linux rechners wenn ihr auf die webseite ladenlokal.spielundobjekt.de geht, dann ladet ihr ein programm herunter, das quasi auch aus unity kommt, und genauso auf eurem rechner lauft. Ihr führt es aber im browser aus. dieses programm verbindet sich mit demselben server

  • wir haben gestern ein neues unity projekt gemacht
  • in diesem Projekt legt unity automatisch (wie von Anna Vera auch schon angesprochen) eine sample Scene an
  • danach haben wir github installiert
  • dann haben wir ein repository auf unserem computer angelegt
  • dann haben wir die dateien aus unserem unity projekt in dieses repository committed
  • die zu diesem zeitpunkt geöffnete Szene, mit dem namen "Sample Scene"war noch geöffnet
  • darauffolgend haben wir den Branch "dev" vom Repository auf github (in USA) ausgecheckt
  • das hat dateien in unserem unity Ordner verändert
  • Wichtig: in diesem Branch "dev"befindet sich keine Datei mit dem Namen "Sample Scene"
  • die Sample Scene war allerdings auch zu diesem Zeitpunkt in Unity noch offen
  • als wir die Szene "2D_multiplayer" geöffnet haben, hat unity gefragt, ob ihr die momentan geöffnete Szene "Sample Scene" speichern wollt
  • wer das getan hat, hat damit die Datei "SampleScene" in den Ordner Scenes geschrieben
  • daher kommt die Sample Scene

ende -----

DAY3 recap

git - fetch, commit, pull, push...

challenge: make a pull solution:


//////////////////// BREAK /////////////////////////


AUFGABE: baue einen eigenen raum

  • create a folder with out name in the project folder
  • copy paste all 3 scenes from scenes folder into folder with our name

!!!don't delete:

  • GameManagement
  • EventSystem
  • Spawn1 and 2
  • 2D--> camera tripod

!!!save all our creations into our own folder

HOW TOs:

  • how to turn off big pink arrows: select UI-MoveInterface in Hierarchy menu and deactivate (untick box) in the Inspector


//////////////////////// LUNCH ///////////////////////////


linux server (in Frankfurt)

http://multiplayer.spielundobjekt.de/


web server (Unity, Linux)

http://ladenlokal.spielundobjekt.de/ <-----???????????????

http://ladenlokal.hyperdramatik.net/


export for servers....

WebGL Bild machen

Linux Bild machen

transfer to servers

WinSCP: used to transfer WebGL Bild —> http://ladenlokal.hyperdramatik.net/

MobaXterm: used to dial into the ORANGE LINUX UNITY SERVER


PLAY?

client: multiplayer.spielundobjekt.de



THINK ABOUT

  • what would you like to be possible in such a space?
  • what would you like people to do in such a space?
  • write a script that allows you to walk faster when you press "shift"

FRAGEN

was ist der unterschied zwischen...?

http://ladenlokal.hyperdramatik.net/

Diese Seite hier unten, das war ein Test. Die wird durch SSL verschlüsselt, und ich habe noch keine Ahnung, wie ich diese Verschlüsselung in die Netzwerksache einbauen kann. Deswegen diese folgende Seite nicht benutzen: http://ladenlokal.spielundobjekt.de/
???

GLOSSAR

WinSCP

Free and open-source SFTP, FTP, WebDAV, Amazon S3 and SCP client for Microsoft Windows. Its main function is secure file transfer between a local and a remote computer. Beyond this, WinSCP offers basic file manager and file synchronization functionality.

MobaXterm

Free X server for Windows with tabbed SSH terminal, telnet, RDP, VNC, Xdmcp, Mosh and X11-forwarding.