Il mio front-end personale

Frontend per cabinati... chi, cosa, come!!!
Avatar utente
motoschifo

Gold Medal Donatore
Progetto Arcade Database
Progetto Arcade Database
Messaggi: 3271
Iscritto il: 12/07/2013, 20:29
Medaglie: 2
Città: Parma
Località: Parma
Grazie Inviati: 32 volte
Grazie Ricevuti: 31 volte
Contatta:

Il mio front-end personale

Messaggio da motoschifo »

Ciao a tutti,
volevo segnalarvi che sto scrivendo una nuova GUI per il Mame un po' particolare rispetto a quelle che ho visto in giro.
Il lavoro è ancora lungo ma funziona già a dovere, mancano un sacco di fiorellini che arriveranno in futuro. Ora sto curando la parte di integrazione con altri emulatori, specialmente sul cabinato.

Pensavo di postare solo una volta concluso ma magari potete darmi qualche consiglio su cosa migliorare o aggiungere.

Le linee guida che ho seguito sono queste:
- la gui parte in automatico all'avvio del cabinato
- deve essere usabile con stick e pulsanti
- deve essere semplice e con poche opzioni da scegliere (tasti direzione + button1/button2)
- possibilità di essere usato da diversi pc (es. cabinato, desktop, netbook)
- sempre aggiornata da qualsiasi pc la utilizzi
- può usare qualsiasi emulatore (mame, nes, snes, daphne, dosbox, ecc) perchè sceglierò il gioco, non la piattaforma
- utilizzo di Linux (in casa ho solo quello, mi sembrava giusto continuare con la tradizione...)
- si deve vedere sul cabinato in maniera molto chiara, quindi font semplici di grandi dimensioni ed immagini extra large

Detto questo, in realtà il progetto si è esteso parecchio rispetto alla mia idea iniziale, anche perchè avevo un sacco di dubbi prima di iniziare.

Ho scelto di usare un'interfaccia web e non ho visto altri che lo hanno fatto, forse per la complessità di comunicazione con il client.
Principalmente l'ho fatto per avere un programma sempre aggiornato e secondariamente perchè gli effetti del css sono di facile accessibilità e molto carini, quindi a costo zero ho tutto quello che mi serve per manipolare la gui (es. piccoli effetti come il panning delle immagini su/giù/destra/sinistra in base al momento dello stick, l'audio di sottofondo, fading, obbreggiature).
Il sito si integra con la mia intranet ed accede ad un database MySql mentre il server web è Apache2 con due paginette in PHP, ovviamente su Linux. Completano uno script in bash che resta in ascolto all'avvio dell'interfaccia ed un'area condivisa tramite NFS per i programmi e le rom. Nella mia configurazione utilizzo in realtà pc virtuali tramite Xen e Debian, quindi ancora una volta Linux, e distano qualche decina di metri con connessione gigabit, ma tutti i servizzi possono anche risiedere sullo stesso pc.
Il risultato lo vedere nelle foto che ho allegato.

Dal menu principale è possibile scegliere una categoria e poi entrare nella lista dei giochi usando semplicemente i tasti del cabinato (se la pagina viene visualizzata da lui) oppure i tasti invio/escape se viene visualizzata da pc. Ho dovuto fare questa distinzione perchè i tasti CTRL ed ALT (mappati sul cabinato in BUTTON1 e BUTTON2) sono troppo importanti nel pc, quindi non avrei potuto premere ALT+TAB per passare ad un'altra applicazione.
Invece con destra/sinistra si cambia la tipologia delle immagini: al momento sono gestite solo snap e titles, ma prevedo di aggiungere anche le altre tipologia (cabinato, volantino, altri snaps, shortplay, longplay, manuali, ecc).

In futuro aggiungerò l'audio per avere un sottofondo musicale durante la scelta del gioco.

Gli emulatori vengono eseguiti in maniera parametrica e nativa sotto Linux (in particolare esistono entrambe le architetture a 32 e 64 bit) mentre se l'emulatore non è supportato viene usato Wine. Vengono richiamati usando tutti i parametri necessari (per il mame la lista è lunghissima!) e per ogni gioco è possibile indicare la versione del Mame da usare, dato che vige la regola che una volta verificato il gioco questo non verrà mai più toccato (ossia rom ed eseguibile non saranno più modificati in futuro). Se avrò necessità di un Mame nuovo (es. quando uscirà la versione 0.150) allora configurerò quella versione per essere usata con quello specifico gioco e quelli che verranno dopo di lui.
In realtà sono fermo alla versione 0.146 e dovrò compilare la 0.149 quando mi verrà voglia di farlo... è un po' macchinoso e dovrò farlo per entrambe le architetture.
Le impostazioni (tasti, controlli, schermo) sono separate per computer in quando la cartella di configurazione viene indicata anche lei come parametro. Questo significa che sul cabinato i joystick funzionano normalmente ma per fare la pausa o resettare un gioco ho impostato combinazioni particolari, mentre da pc uso i default "P" ed "F3".
Le immagini, così come qualsiasi altro parametro della gui, sono dinamiche e richiamate dal sito, quindi non sono dentro alla cartella condivisa. In questo modo una modifica al db è visibile a tutti i pc senza problemi ma soprattutto se l'immagine non esiste ne viene caricata una di default. Ad esempio l'immagine per Bubble Bobble è "game_list.php?oper=image&id=45". Però tutte queste cose sono automatiche, non devo di certo ricordarmi l'id del gioco... :)

Ci sono due tabelle:
- giochi: ho impostato il nome della rom, il titolo del gioco (molto corto), il titolo completo, il genere (multivalore, ad es. "race/vertical"), se funziona oppure no, l'emulatore da usare ed altri campi secondari
- emulatori: ci sono tutti i percorsi, parametri, nomi degli eseguibili, ecc. In funzione dell'architettura (i686, x86_64, ecc) viene usato l'eseguibile opportuno.

La suddivisione in generi è del tutto personale:
- classic -> tutti i giochi più famosi che facevo da ragazzo
- fight -> i picchiaduro come Street Fighter, Final Fight, Mortal Kombat, ecc
- vertical -> le astronavi stile 1942 e tutta la serie Cave come DonPachi
- mario -> giochi con Mario, Luigi, Yoshi, ecc.
- clone -> versioni alternative del gioco (cloni, duplicati, copie simili)
- race -> giochi corsa auto, moto, altro
- platform -> da Bubble Bobble in poi
- puzzle -> rompicato, labirinti, ecc.
- flipper -> giochi del flipper (come Future Pinball)
- sport -> giochi sportivi (calcio, basket, tennis, ecc.)
- pc -> giochi normalmente eseguiti su pc (es. Monkey Island)

Nel mio menu una voce può includere più generi e dovrò aggiungere altre 4 icone per altrettanti generi (flipper, pc, platform, puzzle).
La parte più lunga forse è stata quella del menu in quanto ho dovuto cercare le immagini adatte in alta risoluzione e poi applicare filtri, trasparenze, ritagli e ridimensionamenti per un monitor arcade. Tramite fogli di stili css questo menu potrà essere cambiato in funzione della risoluzione, ma per ora mi sta bene così.

Una particolarità: il gioco parte senza richiedere nulla e senza mostrare messaggi informativi a video. Inoltre recupera l'ultimo salvataggio per averlo nello stesso punto di quando è stato spento, salva lo stato alla chiusura e se nel frattempo sono stato cambiate alcune opzione (es. i tasti) li salva nell'apposita cartella distinta per ciascun computer. Gli hiscore invece sono condivisi per tutti quanti.

Questo qui è ad esempio il comando che mi fa partire l'emulatore Mame con il gioco 1944:

Codice: Seleziona tutto

#!/bin/bash
cd "/usr/mamecab/mame/"
/usr/mamecab/mame/mame146_i686 -noreadconfig -writeconfig -rompath "/usr/mamecab/mame/bios;/usr/mamecab/mame/roms" -samplepath "/usr/mamecab/mame/sample" -artpath "/usr/mamecab/mame/artwork" -ctrlrpath "/usr/mamecab/mame/ctrlr" -inipath "/usr/mamecab/mame/ini.hostname" -cheatpath "/usr/mamecab/mame/cheat" -crosshairpath "/usr/mamecab/mame/crosshair" -cfg_directory "/usr/mamecab/mame/cfg.hostname" -nvram_directory "/usr/mamecab/mame/nvram" -memcard_directory "/usr/mamecab/mame/memcard" -input_directory "/usr/mamecab/mame/inp" -state_directory "/usr/mamecab/mame/sta" -snapshot_directory "/usr/mamecab/mame/snap" -diff_directory "/usr/mamecab/mame/diff" -comment_directory "/usr/mamecab/mame/comment" -autosave -multithreading -noartwork_crop -nouse_backdrops -nouse_overlays -nouse_bezels -nouse_cpanels -nouse_marquees -keepaspect -sound -coin_lockout -nojoystick -cheat -skip_gameinfo -multikeyboard -verbose -waitvsync -noswitchres "1944"
rm -f /var/lock/mamecabd
che è stato generato a partire dai dati memorizzati su db:

Codice: Seleziona tutto

{EMUPATH}mame146_{ARCH} -noreadconfig -writeconfig -rompath "{EMUPATH}bios;{EMUPATH}roms" -samplepath "{EMUPATH}sample" -artpath "{EMUPATH}artwork" -ctrlrpath "{EMUPATH}ctrlr" -inipath "{EMUPATH}ini.{HOSTNAME}" -cheatpath "{EMUPATH}cheat" -crosshairpath "{EMUPATH}crosshair" -cfg_directory "{EMUPATH}cfg.{HOSTNAME}" -nvram_directory "{EMUPATH}nvram" -memcard_directory "{EMUPATH}memcard" -input_directory "{EMUPATH}inp" -state_directory "{EMUPATH}sta" -snapshot_directory "{EMUPATH}snap" -diff_directory "{EMUPATH}diff" -comment_directory "{EMUPATH}comment" -autosave -multithreading -noartwork_crop -nouse_backdrops -nouse_overlays -nouse_bezels -nouse_cpanels -nouse_marquees -keepaspect -sound -coin_lockout -nojoystick -cheat -skip_gameinfo -multikeyboard -verbose -waitvsync -noswitchres "{ROMNAME}" 
Ho utilizzato strumenti open che può scaricare chiunque per realizzare tutto quanto: pluma (editor di testo), Gimp (editor grafico), Eclipse/PDT (colora la sintassi per PHP), Mysql (database), Apache2 (web server), Mint (sistema operativo), bash (shell script), nfs (condivisione file in rete), wine (esegue programmi Windows sotto Linux), PHP (script server), Chrome (client rendereing), ecc.

Dopo aver sistemato il mio Magic Nevada ed aver scritto questa mini-interfaccia web, credo che mi riposerò un pochino prima di continuare lo sviluppo.

Come vi sembra?

Fatevi avanti con i suggerimenti mi raccomando! :)

EDIT 19-apr-2014
Ho cambiato e migliorato il front-end integrandolo con il mio sito, quindi permettendo di cercare e modificare i dati da pagina web usando copia/incolla, editor full screen, drag&drop di immagini, visualizzazioni estese e pure la possibilità di eseguirlo direttamente via browser da queste pagine per provarlo senza dover avviare il front-end.
E' stata aggiunta la gestione multipagina e nella seconda schermata ho messo l'elenco suddiviso per lettera. Altre modifiche che ricordo sono la gestione completa anche da pc usando il mouse anzichè i tasti freccia, gestione profilo cabinato o pc automatica (i giochi che necessitano di un pc non saranno visibili sul cabinato), aggiunta gestione tag e funzionalità utili per filtrare la ricerca, nuova modalità per ottenere screenshot completi senza ripetizione di header/footer.
Messo anche qualche immagine nuova :)
Inoltre ho fatto degli screenshot completi (e giganteschi) per chi è curioso di vedere i miei giochi: https://drive.google.com/folderview?id= ... sp=sharing. L'immagine più grande è quasi 32 mila pixel, ho dovuto ridurre lo zoom visto che png più grandi non si possono fare... <-sbav->

EDIT 28-giu-2014
Miglioramento delle pagine (specialmente animazioni e render), aggiunta della sezione anteprima video, gestione giochi "hack" (es. Bubble Bobble Lost cave).
Alcuni file pubblicati: Video del funzionamento e foglio elettronico con l'elenco aggiornato dei giochi.
Non hai i permessi necessari per visualizzare i file allegati in questo messaggio.
Ultima modifica di motoschifo il 28/06/2014, 13:36, modificato 2 volte in totale.
Motoschifo
CAB ›MameOriz ›MameVert ›PCB ›NeoGeo ›TopDrive ›Tekken3 Wishlist ›PacMan ›Arkanoid
Flipper ›HighSpeed Wishlist ›MedievalMadness ›MonsterBash ›HighSpeed2 WebArcadeDatabase
Avatar utente
pucci
Moderatore
Moderatore
Messaggi: 4747
Iscritto il: 19/07/2005, 18:52
Città: San Clemente (RN)
Località: Rimini
Grazie Ricevuti: 62 volte

Re: Il mio front-end personale

Messaggio da pucci »

carino!
Avatar utente
NEOGENIO
Cab-maniaco
Cab-maniaco
Messaggi: 1318
Iscritto il: 11/07/2013, 3:53
Città: Sicilia

Re: Il mio front-end personale

Messaggio da NEOGENIO »

Bravissimo motoschifo... io di codice non me ne intendo, ma se ti serve un beta tester sono disponibile, basta che mi mandi l'eseguibile e faccio anche io le mie prove!
<-clap->
Arcade a vita... dagli anni '80 per sempre!
Avatar utente
r77

Silver Medal Donatore
God of Arcade
God of Arcade
Messaggi: 2817
Iscritto il: 08/07/2009, 10:37
Medaglie: 2
Città: Verona
Grazie Ricevuti: 2 volte

Re: R: Il mio front-end personale

Messaggio da r77 »

Progetto molto interessante, sono curioso di vederlo in azione, bravo
CLRMAMEPRO guida passo a passo viewtopic.php?f=27&t=11373
Avatar utente
gio
Affezionato
Affezionato
Messaggi: 208
Iscritto il: 29/04/2013, 8:42
Città: treviso

Re: Il mio front-end personale

Messaggio da gio »

Bravo motoschifo...ma una curiosità l'aereo verde da che gioco lo hai estrapolato?
Avatar utente
motoschifo

Gold Medal Donatore
Progetto Arcade Database
Progetto Arcade Database
Messaggi: 3271
Iscritto il: 12/07/2013, 20:29
Medaglie: 2
Città: Parma
Località: Parma
Grazie Inviati: 32 volte
Grazie Ricevuti: 31 volte
Contatta:

Re: Il mio front-end personale

Messaggio da motoschifo »

E' un disegno trovato sulla rete e volevo qualcosa che mi ricordasse 1942, come simbolo per i giochi in verticale.
Avrei preferito un'astronave mentre sparava qualche colpo ma quella è la cosa migliore che ho trovato.
Probabilmente in futuro rivedrò questi disegni e li farò molto più simili a quelli originali con pixel giganteschi...
Motoschifo
CAB ›MameOriz ›MameVert ›PCB ›NeoGeo ›TopDrive ›Tekken3 Wishlist ›PacMan ›Arkanoid
Flipper ›HighSpeed Wishlist ›MedievalMadness ›MonsterBash ›HighSpeed2 WebArcadeDatabase
Avatar utente
NEOGENIO
Cab-maniaco
Cab-maniaco
Messaggi: 1318
Iscritto il: 11/07/2013, 3:53
Città: Sicilia

Re: Il mio front-end personale

Messaggio da NEOGENIO »

motoschifo una domanda... ma se partito da zero come progetto, con cosa lo stai realizzando?
<-think->
Arcade a vita... dagli anni '80 per sempre!
Avatar utente
motoschifo

Gold Medal Donatore
Progetto Arcade Database
Progetto Arcade Database
Messaggi: 3271
Iscritto il: 12/07/2013, 20:29
Medaglie: 2
Città: Parma
Località: Parma
Grazie Inviati: 32 volte
Grazie Ricevuti: 31 volte
Contatta:

Re: Il mio front-end personale

Messaggio da motoschifo »

Intendo dire che l'ho realizzato scrivendo io le pagine php ed html, quindi senza l'ausilio di framework esterni.
Ultimamente sto usando Eclipse per avere una sintassi colorata del codice e quindi essere un po' più produttivo.
Motoschifo
CAB ›MameOriz ›MameVert ›PCB ›NeoGeo ›TopDrive ›Tekken3 Wishlist ›PacMan ›Arkanoid
Flipper ›HighSpeed Wishlist ›MedievalMadness ›MonsterBash ›HighSpeed2 WebArcadeDatabase
Avatar utente
NEOGENIO
Cab-maniaco
Cab-maniaco
Messaggi: 1318
Iscritto il: 11/07/2013, 3:53
Città: Sicilia

Re: Il mio front-end personale

Messaggio da NEOGENIO »

Ottimo, ma quindi sarà un eseguibile a tutti gli effetti?
<-think->
Arcade a vita... dagli anni '80 per sempre!
Avatar utente
motoschifo

Gold Medal Donatore
Progetto Arcade Database
Progetto Arcade Database
Messaggi: 3271
Iscritto il: 12/07/2013, 20:29
Medaglie: 2
Città: Parma
Località: Parma
Grazie Inviati: 32 volte
Grazie Ricevuti: 31 volte
Contatta:

Re: Il mio front-end personale

Messaggio da motoschifo »

Purtroppo no, è un sito web e non credo possa diventare facilmente un eseguibile.
Si può riciclare tutto quanto (comandi di shell, immagini, ecc) anche se a quel punto conviene puntare su programmi più completi come Feel di questo stesso forum.

Il mio tempo libero non è molto e per ora lo sviluppo rimane a questo stadio, dato che va benissimo e tutti i miei giochi preferiti funzionano.
Poi mi sta venendo voglia di sistemare un secondo cabinato Magnum per l'inverno e solo per giochi a scorrimento verticale con una bella tv grande grande... :)
Motoschifo
CAB ›MameOriz ›MameVert ›PCB ›NeoGeo ›TopDrive ›Tekken3 Wishlist ›PacMan ›Arkanoid
Flipper ›HighSpeed Wishlist ›MedievalMadness ›MonsterBash ›HighSpeed2 WebArcadeDatabase
Rispondi

Torna a “Frontend”