Giochi Pseudo-3D

3
  • 2 favourites

Index

Tagged

Attached Files

The following files have been attached to this tutorial:

.capx

Stats

7,580 visits, 9,433 views

Tools

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Bene, adesso sono sicuro che tu ti stia chiedendo "Come può il raggio di Construct tracciare qualsiasi cosa!?". Bene, non può, ma questo non vuol dire che non possiamo FALSARE ciò. ;) Il concetto di base è che l'oggetto di base ha bisogno di essere TRASFORMATO alla posizione dello schermo (chiamato "screen space"), basata su profondità e posizione orizzontale. Abbiamo semplicemente bisogno di sapere dove disegnare un immagine sullo schermo, basato sulla profondità, e quale scala dargli! Per farlo, abbiamo bisogno di un'equazione per trasformare la posizione delle x,y,z dell oggetto allo schermo, e determinare la scala.

Nota: C'è un modo più veloce per farlo, guarda il fondo della pagina. Questa parte succesiva continua a funzionare, e ho un bel modo per fare qualche trig. ;)

Vediamo come fare. Innanzitutto, diciamo che l'occhio del giocatore è in posizione 0,0,0 (x,y,z),e l'oggetto (il cerchio nell'immagine sopra) è a -100,100,200 (x,y,z). Innanzitutto, possiamo portare questi oggetti qualsiasi dappertutto, dovrebbe diventare 0 quando lo portiamo al punto di partenza (dov'è l'occhio del player), quindi:

| ScreenX = ObjectX [*] 0

| ScreenY = ObjectY [*] 0

Ma, sicuramente, TUTTI gli oggetti saranno portati alla posizione 0,0 (centro dello schermo). Lo schermo stesso è in una posizione diversa di fronte al player (di nuovo, come una finestra). L'oggetto disegnato nella "finestra" rispecchierebbe, in uno spazio 2D, dove l'oggetto è in 3D. E' più semplice guardare un piano alla volta, quindi esploriamo il piano X/Z.

Nel piano X/Z, la posizione X dell'oggetto è proporzionale alla posizione Z. Dato questo, possiamo fare questo:

| X = Z [*] W, dove 'W' qui c'è in fattore della scala orizzontale.

Per esempio, se W=1, che alla distanza di 100 dal player, la posizione X è la stessa, che è una linea con l'angolo di 45°(la linea nera spessa nell'immagine sopra). Se'W' fosse 0.5, quindi ogni posizione Z darà Z[]0.5 per X, o META' di Z (anche l'angolo sarà metà ). possiamo vedere qui come i fattori dell angolo della scala e sembrano relative! La difficoltà sta nel capire che "W" è la distanza data di un oggetto, e lavorare al contrario* verso lo schermo!Entriamo in un po'in trigonometria...

Quindi, vediamo le linee'a', 'o', e 'h' nell'immagine sopra. La formula basicaper trovare l'angolo 'h', dato 'a' e 'o' è la seguente:

| tan(angolo) = o/a (FYI: Lavorerò in gradi, e non radianti)

| angolo = atan(o/a) [atan(), o arcotangente,è il contrario di tan()]

Questo dà l'angolo del cerchio dal punto 0,0 (x, y), ma vogliamo la parte 'o', che è:

| tan(angolo) [*] a = o

| (or "x = tan(angolo) [*] z")

La 'a' qui rappresenta la profondità ('z'), e la 'o' rappresenta la posizione 'x'. Alla distanza data a 'a' (or 'z') possiamo trovare 'x'! Adesso, è tutto apposto, ma ricorda, noi vogliamo la posizione dello SCHERMO, che è dove la linea 'h' incrocia la linea blu (lo schermo). Riesci a capire ora come trovare i pixel dello schermo 'x' per il cerchio sopra? ;) Hai già la formula

La distanza x = distanza dal player (0,0), dal centro dello schermo (0,z), volte del tangente dell angolo sopra l'oggetto, quindi:

| ScreenX = tan(AngoloAllOggettoorizzontale) [*] zDistanzaDalloSchermo

Possiamo fare anche la stessa cosa per Y:

| ScreenY = tan(AngoloAllOggettoverticale) [*] zDistanzaDalloSchermo

Okay, quindi mettiamo insieme tutto ciò trovare la posizione dello schermo del cerchio!

Posizione dell oggetto cerchio: -100,100,200 (x,y,z - in pixel) ('z' diventerà una nuova istanza variabile aggiunta)

Distanza dello schermo dal giocatore (z): 50 pixel (le unità possono essere, solo consistenti - dal momento che sto facendo una posizione 1:1 per l'oggetto all'interno dello spazio dello schermo,per la mia profondità viene utilizzata la stessa unità. Questi esempi sono tutti artificiali e non realistici! ;) )

| AngoloAllOggettoorizzontale = atan(x/z) [ricordare tangente inversa]

| AngoloAllOggettoorizzontale = atan(-100/200)

| AngoloAllOggettoorizzontale = -26.565° (0°è dritto)

Bene, adesso sappiamo cehccosa sia l'angolo ORIZZONTALE dell oggetto. Mettiamoci alla posizione dello schermo:

| SchermoX = tan(AngoloAllOggettoorizzontale) [*] zDistanzaDelloSchermo

| SchermoX = tan(-26.565°) [*] 50

| SchermoX = -25 (25 pixel alla sinistra dello schermo centrale, o SchermoCentraleX + SchermoX)

Adesso facciamolo per lo schermo verticale:

| AngoloAllOggettoverticale = atan(y/z)

| AngoloAllOggettoverticale = atan(100/200)

| AngoloAllOggettoverticale = -26.565°

| SchermoY = tan(AngoloAllOggettoverticale ) [*] zDistanzaDelloSchermo

| SchermoY = tan(26.565°) [*] 50

| SchermoY = 25 (25 pixel sopra lo schermo centrale, or SchermoCentraleY - SchermoY)

Adesso,tutto quello detto, puoi spararmi più tardi perché c'è un altro modo. ;) Il punto nel quale i raggi si intersecano lo schermo puo essere anche così:

| SchermoX = OggettoX / (SchermoZ/OggettoZ)

| SchermoY = OggettoY / (SchermoZ/OggettoZ)

Ricorda solo che SchermoZ è dal player 0,0,0, e quindi è OggettoZ.

Ecco! Phew, l'abbiamo fatto. Non è stato tanto difficile questo! ;) Tutto ciò che devi testare è che la posizione dello schermo sia fuori da confine dello schermo(prendendo le dimensioni dell'oggetto in considerazione!), poi renderlo invisibile e ignorarlo.

Adesso, che cosa approposito della scala dell oggetto!? ...

  • 0 Comments

  • Order by
Want to leave a comment? Login or Register an account!