[TUTORIAL] Rotazione di una picture intorno a un punto ad eventi

[TheVillAngel]

TUTORIAL ROTAZIONE DI UNA PICTURE INTORNO A UN PUNTO

 

Per: Rpg Maker Xp ma applicabile anche agli altri

Autore: TheVillAngel

Descrizione: Come da titolo, questo tutorial spiega come far ruotare una picture intorno ad un punto prefissato, le applicazioni che questo tutorial può avere dipendono dalla vostra fantasia, può essere utile ad esempio per un menù ad anello o un minigame, scegliete voi.

Demo Link: http://www.mediafire.com/?50kss3fpnrjmw5x

 

Requisiti:

-Conoscenza base di switch e variabili e cicli.

-Conoscenza di elementi minimi di trigonometria.

 

Passiamo ora alla spiegazione:

Considerando che su rpg maker lavoriamo essenzialmente su un piano cartesiano (la mappa) possiamo applicare le regole trigonometriche per creare una rotazione intorno a un punto.

La formula per la rotazione intorno a un punto è la seguente:

x1=xr+(x-xr)cos(a) – [+ per la rotazione antioraria] (y-yr)sen(a)

y1=yr+(y-yr)cos(a) + [- per la rotazione antioraria] (x-xr)sen(a)

dove:

[x] è la coordinata x base della picture che abbiamo intenzione di far ruotare.

[y] è la coordinata y base della picture che abbiamo intenzione di far ruotare.

[xr] e [yr] sono le coordinate x e y del centro della rotazione (pivot).

[a] è l’angolo di rotazione e definisce di quanti gradi vogliamo far spostare la nostra picture.

[x1] e [y1] sono le nuove coordinate che la picture andrà ad assumere.

 

Ora partiamo dal presupposto che i valori di seno e coseno, a parte quelli di 90°, 180° e 360°, sono essenzialmente valori decimali e che rpg maker di default non ci permette di utilizzare numeri decimali, bisognerà quindi operare una piccola modifica via script che per XP è spiegata qui: http://www.rpg2s.net...showtopic=13973

 

Per avere una rotazione fluida opteremo per uno spostamento di 1-2 gradi per frame.

Supponiamo di propendere per lo spostamento di un grado:

il valore di sen(1°)=0,0175

il valore di cos(1°)=0,9998

Troverete tutti i valori qui: http://it.wikipedia...._trigonometrica

 

Partiamo ora con l’impostazione degli eventi. Quello di cui avremo bisogno sono 2 eventi in processo parallelo.

 

1° EVENTO

Quello che faremo nel primo evento sarà settare le coordinate di partenza dell’immagine che vogliamo far ruotare ([x],[y]), le coordinate del centro di rotazione ([xr],[yr]) e i valori di seno e coseno dell’angolo prescelto ([sen(a)], [cos(a)]).

Ora, come si calcolano le coordinate della posizione dell’immagine? Questa è una cosa che dovreste sapere, ma la rispiego. Una mappa standard 20*15 è composta da 20 tile da 32 pixel l’uno in larghezza e da 15 tile da 32 pixel in altezza, quindi supponendo di voler far partire la nostra immagine dal centro del tile 10 in larghezza e dal centro del tile 4 in altezza, le operazioni che dovremo fare sono (possiamo farle a parte e non su rpg maker ovviamente):

10*32-16= 304

4*32-16=112

Quindi ora abbiamo

Var 1 [x] = 304

Var 2 [y] = 112

Ora dobbiamo scegliere le coordinate del punto intorno al quale la nostra picture dovrà girare, supponiamo di volerlo al centro della mappa, quindi centro del tile 10 in larghezza e centro del tile 8 in altezza

10*32-16= 304

8*32-16= 240

Quindi ora abbiamo anche

Var 3 [xr] = 304

Var 4 [yr] = 240

L’ultima cosa che ci resta da fare è settare il valore di seno e coseno sulle variabili [sen(a)] e [cos(a)], come abbiamo detto, scegliendo uno spostamento di 1 grado avremo sen(a) = 0,0175 e cos[a] = 0,9998, tuttavia in rpg maker non potremo inserire direttamente valori decimali, quello che faremo sarà quindi:

var 5 [sen(a)] = 175

var 5 [sen(a)] / 10000

var 6 [cos(a)] = 9998

var 6 [cos(a)] / 10000.

 

Ricapitolando quindi l’evento 1 sarà:

Pagina 1

Processo parallelo

Var 1 [x] = 304

Var 2 [y] = 112

Var 3 [xr] = 304

Var 4 [yr] = 240

var 5 [sen(a)] = 175

var 5 [sen(a)] / 10000

var 6 [cos(a)] = 9998

var 6 [cos(a)] / 10000.

Switch 1 ON

 

Pagina 2

Condizione di attivazione Switch 1 ON

Lasicare vuota.

 

Una volta settato il primo evento quello che dobbiamo fare è impostare le equazioni illustrate sopra nel secondo evento. Procediamo.

EVENTO 2

Processo parallelo.

Condizione di attivazione: Switch 1 ON

Loop

Show picture (come coordinate della picture imposteremo le variabili Var 1 [x] e Var 2 [y])

Wait 1 frame (il valore è a vostra scelta, a seconda della velocità che volete dare alla rotazione)

Ora impostiamo una variabile contatore con la quale decideremo dopo quanti gradi di rotazione la picture dovrà fermarsi

Var 7 [contatore] + 1

Ora quello che dobbiamo fare, dal momento che le variabili [x] e [y] subiranno variazioni a causa delle operazioni dell’equazione, è impostare 2 variabili “copia” di ciascuna di queste, nello specifico [x’] [x’’] [y’] e [y’’]

Quindi facciamo

Var 8 [x’] = Var 1 [x]

Var 9 [x’’] = Var 1 [x]

Var 10 [y’] = Var 2 [y]

Var 11 [y’’] = Var 2 [y]

 

Fatto ciò impostiamo la prima delle 2 equazioni e cioè x1=xr+(x-xr)cos(a) – [+ per la rotazione antioraria] (y-yr)sen(a)

Quindi facciamo:

Var 8 [x’] - Var 3 [xr]

Var 8 [x’] * Var 6 [cos(a)]

Var 9 [y’] - Var 4 [yr]

Var 9 [y’] * Var 5 [sen(a)]

Var 8 [x’] – (+ per il senso antiorario) Var 9 [y’]

Var 8 [x’] + Var 3 [xr]

Ora abbiamo ottenuto la nuova coordinata x della picture che equivale a x’, eguagliamo quindi x a x’

Var 1 [x] = Var 8 [x’]

Ora impostiamo la seconda equazione e cioè y1=yr+(y-yr)cos(a) + [- per la rotazione antioraria] (x-xr)sen(a)

Quindi facciamo:

Var 11 [y’’] - Var 4 [yr]

Var 11 [y’’] * Var 6 [cos(a)]

Var 10 [x’’] - Var 3 [xr]

Var 10 [x’’] * Var 5 [sen(a)]

Var 11 [y’’] + (- per il senso antiorario) Var 10 [x’’]

Var 11 [y’’] + Var 4 [yr]

Ora abbiamo ottenuto la nuova coordinata y della picture che equivale a y’’, eguagliamo quindi y a y’’

Var 2 [y] = Var 11 [y’’]

Adesso dobbiamo settare le condizioni di arresto del ciclo, dobbiamo decidere che rotazione la picture deve fare, considerando che ogni frame la picture ruota di 1° e che un giro completo è di 360°, ammettiamo di voler far fare alla nostra picture la rotazione completa, questa sarà completa nel momento in cui la variabile contatore sarà uguale a 360, quindi:

If var 7 [contatore] = 360

Break loop

Switch 2 ON

End.

End loop.

 

Ricapitolando avremo:

EVENTO 2

Pagina 1

Condizione di attivazione: Switch 1

Processo parallelo

Loop

Show picture (come coordinate della picture imposteremo le variabili Var 1 [x] e Var 2 [y])

Wait 1 frame

Var 7 [contatore] + 1

Var 8 [x’] = Var 1 [x]

Var 9 [x’’] = Var 1 [x]

Var 10 [y’] = Var 2 [y]

Var 11 [y’’] = Var 2 [y]

Var 8 [x’] - Var 3 [xr]

Var 8 [x’] * Var 6 [cos(a)]

Var 9 [y’] - Var 4 [yr]

Var 9 [y’] * Var 5 [sen(a)]

Var 8 [x’] – (+ per il senso antiorario) Var 9 [y’]

Var 8 [x’] + Var 3 [xr]

Var 1 [x] = Var 8 [x’]

Var 11 [y’’] - Var 4 [yr]

Var 11 [y’’] * Var 6 [cos(a)]

Var 10 [x’’] - Var 3 [xr]

Var 10 [x’’] * Var 5 [sen(a)]

Var 11 [y’’] + (- per il senso antiorario) Var 10 [x’’]

Var 11 [y’’] + Var 4 [yr]

Var 2 [y] = Var 11 [y’’]

If var 7 [contatore] = 360

Break loop

Switch 2 ON

End.

End loop.

 

Pagina 2

Condizione di attivazione Switch 2 ON

Pagina vuota

 

FINE DEL TUTORIAL, spero possa servire ^^

Edited April 12, 2012 by TheVillAngel

[Zuppo]

..ma...non c'erano il comando "ancora picture a schermo - mappa" e "ancora dal centro - angolo" e "ruota picture"?

 

Ora..magari me li sono sognati ma giuro..ero convinto che c'erano. Insomma...

 

...spe....in qualche rpgmaker han tolto Ruota picture òo? Magari?

[TheVillAngel]

per esserci ci sono, ma la picture ruota su se stessa, o mi sbaglio? Se invece voglio farla girare intorno a qualcosa il discorso cambia, o No? Sinceramente devo verificare pure io

[LazyFox]

il comando c'è, e fa ruotare la picture intorno a se stessa, certo si può spostare coi vari comandi, ma se dev'essere fissata su un punto normalmente non penso si possa fare.. comunque buon lavoro.

[TheVillAngel]

Ti ringrazio ^_^

Ecco si appunto, spostare con i vari comandi si può, ma per una rotazione netta sarebbe un bel casino perché, soprattutto per spostamenti di qualche grado, bisognerebbe calcolarsi manualmente tutte le coordinate, meglio avere la funzione preimpostata così basta cambiare i parametri e il gioco è fatto.

C'è un piccolo problema che ho riscontrato, se la rotazione dura molto, cioè se si fanno molti giri, la picture tende ad avvicinarsi al centro o ad allontanarvisi, a seconda della direzione del moto. Questo credo sia dovuto alle approssimazioni che rpg maker fa in automatico. Per evitarlo basta, ad ogni giro completo, reimpostare la x e la y originarie della picture. Provvederò a inserirlo anche nel primo post appena posso.

Edited April 10, 2012 by TheVillAngel

[Zuppo]

ho chiesto altrove se veramente per poter ruotare e FERMARE una picture, toccava fare questo castello di carte immane e la risposta è stata:

 

"Beh, si."

 

 

 

 

 

O pieroangela...

 

Condoglianze a chi vorrà far ruotare una monetina per sfizio.

[TheVillAngel]

Beh dai a differenza di quanto sembra non è poi Tanto lungo da fare, comunque aggiungerò la demo con l'evento impostato così ognuno potrà far girare tutte le monetine che vuole senza che gli giri altro XD

[Zuppo]

dunque i rens te li do ora (ossia senza il bonus demo) perchè sei tonto e lo hai postato di fretta, o ti grazio ed aspetto domani per quell'un ren? XD

[TheVillAngel]

Ah per i rens come ti viene più comodo, non mi attacco al rens ^_^

[TheVillAngel]

Aggiornato con demo

[Guardian of Irael]

Perso a leggere i vari messaggi post primo non avevo ancora commentato, ora che c'è anche la demo... ottimo lavoro! Almeno si ha anche l'esempio concreto di quel che permette di fare: movimenti circolari sono utili per dare diversi effetti! ^ ^

[TheVillAngel]

Si, si possono fare un sacco di belle cose, inizialmente l'avevo pensato per rendere gli spostamenti del mio menu, poi però ho pensato di utilizzarlo anche sia per mostrare i buff sull'eroe che per un minigame (non so ancora se per il fabbro o per il lockpiking)