Interazioni – OpenAda – Applicazioni Digitali per l'Arte

Programmi: UPBGE, ARMORY 3D, A-FRAME, VVVV

Gruppo: Frida Hassemer, Vicentiu Gabriel Copoeru, Shihang Yi, Dengyuan Ma

LINK presentazione: https://slides.com/fridahassemer/interazioni/fullscreen

UPBGE

https://upbge.org/docs/latest/manual/manual/release/index.html#/download

UPBGE è un motore di gioco 3D open source derivato dal vecchio Blender Game Engine (prima seguito dalla stessa Blender Foundation). È un motore di gioco costruito su Blender 3D, è integrato interamente in modo tale che ciò che vedi nel viewport di Blender (EEVEE) è ciò che vedrai nel gioco.

PRO:

Un flusso di lavoro unificato e questo è il suo punto di forza principale, puoi realizzare il tuo gioco dall’inizio alla fine senza uscire da Blender perché infatti le aree di lavoro, gli editor, i pannelli e i nodi specifici del motore di gioco seguono le stesse convenzioni e standard di Blender stesso.
Non è necessaria una pipeline di import-export. Poiché Blender supporta la modellazione 3D, la scultura e la mappatura UV, tutto ciò che è stato realizzato nell’UPBGE può essere utilizzato “così com’è”.
Iterazione rapida: premendo il tasto “P” il gioco inizierà nella vista attiva, permettendoti di ottenere un feedback immediato visivo ed anche in termini di gameplay e logica.
Aggiornamenti impliciti: tutte le nuove funzionalità di Blender sono automaticamente incluse in ogni versione UPBGE.

CONTRO:

Limitazioni nel click and drop.

Interfaccia strana da gestire se non si è ordinati di sé.

LICENZA:

Blender e UPBGE/BGE sono concessi in licenza come GNU GPL, il che significa che anche i tuoi giochi (se includono il software Blender) devono essere conformi a tale licenza.

NOTE DI INSTALLAZIONE:

UPBGE +0.3 è compatibile per le ultime versioni di Blender; se si ha una versione precedente alla 2.79.2 di Blender allora è consigliato installare UPBGE +0.2. Scaricare il programma ed estrarre il file zip nella cartella nella cartella della versione più recente presente nel proprio computer.

Quando esce la schermata file già esistenti, sovrascrivere e sostituire.

Appena finito il processo, aprire il programma.

COMANDI E SHORTCUTS:

https://docs.google.com/document/d/1zPBgZAdftWa6WVa7UIFUqW_7EcqOYE0X743RqFuJL3o/edit#heading=h.ftqi9ub1gec3

INTERFACCIA:

L’interfaccia di Blender è divisa in aree di lavoro con diverse funzionalità e modalità; inoltre sono presenti numerosi strumenti. Nella parte inferiore possiamo creare un’area in cui utilizziamo in particolare il Logic Bricks Editor che utiliziamo per diverse funzioni: creare comandi di movimento, materiali, reazioni fisiche, luci.

MOTORE DI RENDER:

In Blender esistono vari tipi di motori di render, i più conosciuti sono EEVEE e Cycles. UPBGE utilizza EEVEE, un motore viewport real time di render, cioè in tempo reale ed è un motore di render basato fisicamente che utilizza un sistema di base a nodi.

Video differenza tra EEVEE e Cycles: https://www.youtube.com/watch?v=QBKLIdubu2U

SISTEMA DI ANIMAZIONE:

Il sistema di animazione UPBGE è lo stesso di Blender, per questo motivo, UPBGE dispone di uno dei sistemi di animazione più potenti in circolazione.
Quasi tutte le proprietà di UPBGE possono essere animate.

Per realizzare animazioni, lo sviluppatore può utilizzare uno dei seguenti sistemi supportati dal motore di gioco: Keyframes, Armatures, Shape keys, Drivers, Actions, Geometry nodes.

SCRIPT E CODICI:

Esistono 3 metodi che lo sviluppatore del gioco può utilizzare:

Il sistema Logic Bricks: questo sistema è un sistema ben testato (circa 20 anni) ed i suoi principali vantaggi sono la velocità e la facilità d’uso. Per utilizzarli non è richiesta alcuna conoscenza di programmazione.
Il sistema dei nodi logici: questo sistema è un sistema di scripting visivo sviluppato sull’interfaccia del nodo UPBGE per creare elementi di gioco all’interno dell’editor UPBGE. I suoi principali vantaggi sono la versatilità e la facilità d’uso. Per utilizzarli non è richiesta alcuna conoscenza di programmazione.
Il sistema dei componenti Python: fondamentalmente sono moduli che possono essere collegati agli oggetti del gioco. Ognuno ha uno scopo specifico. Per utilizzarli è richiesta una piccola conoscenza di programmazione, ma una conoscenza più approfondita è necessaria per lo sviluppo di componenti nuovi o personalizzati.

CASO STUDIO:

Caricare modello 3D già realizzato e creiamo i Logic Bricks.

Labirinto (2)Download

VIDEO TUTORIAL:

ARMORY 3D

https://armory3d.org/download

Armory 3D è un motore di gioco open-source integrato, sotto forma di add on, all’interno del software 3D Blender. È opera di una singola persona, che ha tentato di riempire il vuoto lasciato dall’abbandono da parte dei developer di Blender del motore di gioco integrato nel software stesso.

MacOs, come abbiamo constato a lezione, non è adatto ad utilizzare il software.

PRO:

Gratuito
Annesso a Blender, dunque dotato di un reparto 3D molto conosciuto.
Adozione del sistema di gestione e generazione di texture e materiali di Blender.
Possibilità di utilizzare un sistema di nodi chiamato Logic Nodes, alternativa al codice
Haxe su cui si basa il programma.
Possibilità, grazie all’affidamento al framework multimediale Kha, di esportare per
smartphone, oltre che per computer, browser e console.
Design che permette di utilizzare qualsiasi motore fisico. Di default, il programma ha
installato al suo interno un sistema dedicato per i proiettili e l’Oimo physics.

CONTRO:

Un pò confusionario per utenti inesperti di software open-source, dove non è chiaro
cosa è già integrato nel sistema e cosa vada aggiunto in seguito all’installazione.
Gestito da una sola persona, anche se con l’aiuto di una community. Lenta
implementazioni degli aggiornamenti e risoluzione dei bug.
Poco utilizzato nell’ambiente rispetto a Godot, Unreal Engine e Unity.
Ogni tanto crasha.

LICENZA:

zlib/libpng License – Libero utilizzo commerciale e di distribuzione. Non è consentita la
dichiarazione di paternità del software utilizzato. Dichiarare il software utilizzato è
apprezzato anche se non obbligatorio. Se il software è stato modificato è necessario

NOTE DI INSTALLAZIONE:

È consigliato utilizzare una versione di Blender che sia LTS, ovvero Long Term Support; inquesto caso Blender 3.6 LTS. Scaricare il programma ed estrarre il file zip. Successivamente aprire Blender 3.6 LTS, cliccare la voce “modifica” in alto a sinistra, selezionare “preferenze”, aprire la categoria “add-ons”, cliccare “installa”, trovare il file estratto e selezionare “armory.py”.
Per attivare l’add-on controllare, sempre nella sezione “add-ons” che “Game Engine:Armory” sia selezionato. Se necessario utilizzare la funzione cerca sotto il pulsante “installa” per trovare l’add-on.

COMANDI E SHORTCUTS:

https://docs.google.com/document/d/1zPBgZAdftWa6WVa7UIFUqW_7EcqOYE0X743RqFuJL3o/edit#heading=h.ftqi9ub1gec3

INTERFACCIA:

L’interfaccia è quella di Blender, se non per alcune funzioni nuove dentro al programma stesso. Ogni strumento nella selezione verticale ha al suo interno almeno una voce dedicata ad Armory 3D.

Nell’immagine sottostante vediamo invece la sezione “Logic Node Editor”.

MOTORE DI RENDER:

Armory 3D utilizza un motore di render proprio che assomiglia moltissimo nella resa grafica a Eevee di Blender.

SCRIPT E CODICI:

Come accennato prima, Armory 3D utilizza Haxe, un linguaggio open-source.
In alternativa è possibile utilizzare i Logic Nodes, molto più adatti a chi non è abituato a programmare in codice.

CASO STUDIO:

Tutorial dell’ideazione di un gioco molto semplice da fare in classe.

GIOCO 3 Download

VIDEO TUTORIAL

A-FRAME

https://aframe.io

A-Frame è un framework di realtà virtuale. È un framework di sviluppo web facile da usare per creare applicazioni di realtà virtuale (VR). A-Frame è molto più di un semplice motore di rendering di scene 3D o un linguaggio di markup. L’idea centrale è fornire una struttura di programmazione dichiarativa, estensibile e componita basata su Three.js.

PRO:

Produzione VR semplificata, HTML dichiarativo, VR multipiattaforma, architettura entità-componente, prestazioni elevate, strumenti di ispezione visiva e produzione VR semplificata.
Utilizzare HTML e un semplice linguaggio di markup per creare scene 3D, riducendo la curva di apprendimento.
Supporta l’esecuzione su diversi dispositivi e browser, inclusi dispositivi desktop e mobili.
Dispone di un enorme supporto da parte della community e di una ricca libreria di risorse che include
componenti, modelli e strumenti.
Puoi creare rapidamente prototipi e sviluppare applicazioni web 3D, migliorando l’efficienza dello sviluppo. Basato su tecnologie web come HTML, CSS e JavaScript, si integra perfettamente con le tecnologie di sviluppo web esistenti.

CONTRO:

Per i principianti, l’apprendimento di A-Frame può richiedere del tempo, soprattutto se sei nuovo alla programmazione.
Sebbene A-Frame tenti di fornire supporto multipiattaforma, potrebbero esserci ancora alcuni problemi di compatibilità, soprattutto tra browser e dispositivi diversi.
Sebbene A-Frame offra molte funzioni, la sua funzionalità può essere relativamente limitata rispetto ad altri motori 3D più specializzati.
La comunità A-Frame sia ampia, ma il suo ecosistema è relativamente piccolo rispetto ad altri popolari progetti open source, il che potrebbe limitare la disponibilità di alcune funzionalità e risorse.
Per scene e animazioni complesse, le prestazioni potrebbero risentirne, soprattutto sui dispositivi mobili.

LICENZA:

A-Frame utilizza la licenza MIT, il che significa che è open source e può essere utilizzato gratuitamente in progetti commerciali e non commerciali,
purché si rispettino i termini della licenza.

NOTE DI INSTALLAZIONE:

A-FRAME non necessita di nessun tipo di download, basta accedere alla pagina. Quando si apre il sito, bisogna fare attenzione a questo fattore: assicurati di scegliere una versione di A-Frame compatibile con le esigenze del progetto e con il browser (qualsiasi versione corrente principale è accettabile).

COMANDI E SHORTCUTS:

https://docs.google.com/document/d/1zPBgZAdftWa6WVa7UIFUqW_7EcqOYE0X743RqFuJL3o/edit#heading=h.ftqi9ub1gec3

INTERFACCIA:

Per quanto riguarda l’interfaccia, i comandi e i tasti di scelta rapida, A-Frame fornisce alcuni concetti e funzioni fondamentali: Crea scene e interazioni 3D scrivendo markup e script, principalmente basati su HTML e JavaScript. Ad esempio, usa i tasti WASD per controllare il movimento
della telecamera, usa il mouse per trascinare per cambiare la prospettiva, ecc.

MOTORE DI RENDER:

A-Frame utilizza il motore di rendering WebVR. WebVR è una tecnologia per creare esperienze di realtà virtuale (VR) e realtà aumentata (AR) in un browser
Web, consentendo agli sviluppatori di creare scene di realtà virtuale interattive utilizzando JavaScript e HTML

SCRIPT E CODICI:

Gli script e i codici utilizzati da A-Frame si basano principalmente su JavaScript e HTML. Gli sviluppatori possono scrivere script utilizzando JavaScript per aggiungere interattività, animazione e logica alle scene A-Frame. Inoltre, utilizza il linguaggio di markup HTML per creare e organizzare entità, scene e componenti 3D. Questi script e codici possono essere utilizzati per creare ricche esperienze di realtà virtuale (VR) e realtà aumentata (AR).

CASO STUDIO:

Cerchiamo di capire insieme come funziona e giocare con le immagini.

FOTO FATTE IN ACCADEMIA CON L’ACTION CAM 360° IL 03/05/2024:

File di codice

Aggiungi un dodecaedro:

<a-dodecahedron position="-2 3 -3" rotation="0 45 0" color="#FF926B" radius="1"></a-dodecahedron>

Aggiungi un testo:

<a-text position="0 3 -3" rotation="0 0 0" color="#4CC3D9" value="NIHAO!"></a-text>

Aggiungi fuochi artificiali. Inserire la prima riga “script” nell’intestazione sotto “script” e la seconda nella scena. Per far funzionare il sistema di particelle è necessario modificare la versione di A-frame caricata: bisogna utilizzare la 0.8.0.

<script src="https://unpkg.com/aframe-particle-system-component@1.0.x/dist/aframe-particle-system-component.min.js"></script>

<a-entity position="0 2.25 -10" particle-system="color: #EF0000,#44CC00"></a-entity>

<script src="https://unpkg.com/aframe-animation-component@^4.1.2/dist/aframe-animation-component.min.js"></script>

<a-cylinder position="2 3 -3" rotation="0 45 0" color="#F55" radius="0.5"
animation="property: color; dir: alternate; dur: 1000;
easing: easeInSine; loop: true; to: #5F5"
animation__scale="property: scale; dir: alternate; dur: 200;
easing: easeInSine; loop: true; to: 1.2 1 1.2"
animation__yoyo="property: position; dir: alternate; dur: 1000;
easing: easeInSine; loop: true; to: -2 2 -3"></a-cylinder>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>360°Imagi</title>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-text
        position="0 3 -3"
        rotation="0 0 0"
        color="#FFFFFF"
        value="Ciao!"
      ></a-text>
      <a-sky
        src="noi.jpg"
        rotation="0 0 0"
      ></a-sky>
    </a-scene>
  </body>
</html>

A-Frame_Esercizio Download

Demo link：https://slides.com/dengyuanma/minimal-cbaf48/fullscreen

glitch.com/~aframe

VIDEO TUTORIAL:

VVVV

https://vvvv.org/downloads

VVVV è uno strumento interattivo sviluppato dall’azienda tedesca MESO per la creazione in tempo reale di nuove installazioni multimediali, con particolare attenzione alla sintesi video in tempo reale e presenta interfacce fisiche, grafica in movimento in tempo reale, audio e video. Questo programma utilizza metodi di flusso di dati e interfacce di programmazione visiva per la prototipazione e lo sviluppo rapidi.

PRO:

VVVV può gestire facilmente un gran numero di oggetti, siano essi grafici o dati, e gli utenti possono completarlo facilmente senza troppi sforzi.
Nella programmazione visiva VVV utilizza la programmazione visiva, consentendo agli utenti di creare progetti interattivi complessi senza dover approfondire i linguaggi di programmazione.
VVVV fornisce una ricca libreria di nodi che supporta l’elaborazione e la generazione di grafica, video, audio e altri media.
A livello di supporto comunitario possiamo dire che esiste una comunità di utenti attiva che fornisce un gran numero di tutorial, esempi e plug-in per facilitare agli utenti l’apprendimento e l’espansione delle funzioni.

CONTRO:

VVVV può essere utilizzato solo su piattaforma Windows perché utilizza DirectX in Windows e il Mac deve installare il sistema Windows prima di poter essere utilizzato.
Dopo che VVVV ha completato il progetto, può fornire solo i file sorgente ad altri. Tutti i programmi eseguiti da VVVV devono essere installati ed eseguiti con la patch originale.
Anche se la programmazione visiva abbassa la soglia di programmazione, per i principianti richiede comunque una certa curva di apprendimento per padroneggiare il funzionamento del software e le funzioni dei nodi. Quindi non è semplice.

LICENZA:

VVVV è gratuito senza alcuna restrizione per uso commerciale. L’uso per fini commerciali richiede una licenza.

NOTE DI INSTALLAZIONE:

COMANDI E SHORTCUTS:

1.Ctrl+p Nuovo commando

2. Fare doppio clic con il pulsante sinistro del mouse: viene visualizzata la finestra di comando 3. Rotella del mouse autonoma:barra delle applicazioni

4. Clic singolo e doppio con il tasto destro: casella del valore

5. Ctrl + S viene utilizzato per salvare il progetto,

6.F5 viene utilizzatoper eseguire il programma

INTERFACCIA:

MOTORE DI RENDER:

Il motore di rendering utilizzato da VVVV è DirectX. VVVV è un ambiente di programmazione visiva per la generazione e l’elaborazione in tempo reale di immagini, animazioni e dati. Si basa principalmente sul motore di rendering DirectX per ottenere rendering e interazione grafica in tempo reale.

SCRIPT E CODICI:

I principali script e codici utilizzati da VVVV sono basati sul Visual Programming Language (VPL), un linguaggio di programmazione grafica. In VVVV gli utenti creano programmi e contenuti interattivi collegando vari nodi (Node) senza scrivere il tradizionale codice testuale. Questi nodi rappresentano diverse funzioni e operazioni, come il rendering grafico, l’elaborazione dei dati, l’input e l’output, ecc. VVVV supporta anche i nodi definiti dall’utente, consentendo agli utenti di estenderne le funzionalità.

CASO STUDIO:

Prova di sistema di particelle.