Come limitare il movimento click'n'drag a un'area?

Mi scuso per il titolo piuttosto generico. Non ho davvero idea di come realizzare ciò che sto cercando di fare, il che rende ancora più difficile la ricerca di una possibile soluzione.

Sto cercando di implementare una sorta di marker di percorso (forse c'è un nome più adatto per questo, ma questo è il migliore che ho potuto trovare).

Davanti al giocatore ci sarà un segnalino percorso, che determinerà come il giocatore si muoverà una volta terminata la pianificazione del suo turno. Il giocatore può fare clic e trascinare il marker nella posizione prescelta, ma il marker può essere spostato solo all'interno di un'area di lavoro definita (il bit grigio).

Quindi ora sono bloccato con due problemi:

Prima di tutto, come dovrei definire esattamente quell'area lavorabile? Posso immaginare forse due vettori che hanno il giocatore come punto di partenza per formare l'angolo praticabile, e forse quei due archi potrebbero provenire da cerchi che hanno il loro centro dove si trova il giocatore, ma sicuramente non so come metterlo tutto insieme.

In secondo luogo, dopo aver definito l'area in cui è possibile posizionare il marker, come posso imporre che il marker rimanga solo all'interno di quell'area? Ad esempio, se il giocatore fa clic e trascina il segnalino in giro, può muoversi liberamente all'interno dell'area di lavoro, ma non deve lasciare i confini dell'area. Quindi, ad esempio, se il giocatore inizia a trascinare il marcatore verso l'alto, si sposterà verso l'alto fino a quando non colpisce la fine dell'area di lavoro (primo diagramma di seguito), ma se successivamente il giocatore inizia a trascinare lateralmente, il marcatore deve seguire il trascinamento mentre è ancora fermo all'interno dell'area (secondo diagramma in basso).

Spero che non sia stato tutto troppo confuso. Grazie ragazzi.

Modifica: se questo fa la differenza, sto usando C ++ con Marmalade SDK.

Puoi definire un'area lavorabile come quella nella tua domanda con tre valori:

float innerRadius;
float outerRadius;
float maxAngle;

Questi valori saranno basati su un punto centrale che può essere o meno la posizione del giocatore. La forma dell'area lavorabile dipende da dove si posiziona questo punto.

Nell'esempio sopra la posizione centrale si trova una certa distanza (diciamo 50 unità) dietro il giocatore. Questo potrebbe essere facilmente calcolato come:

float offset = -50;
Vector2 centerPosition = playerPosition + offset * playerForward;

Per limitare la posizione del marker a quell'area lavorabile, per prima cosa sposta il marker come faresti normalmente. Quindi convalidare la distanza tra il punto centrale e il marker:

Vector2 direction = markerPosition - centerPosition;
float distance = direction.Length();
direction.Normalize();
markerPosition = centerPosition + direction * clamp(distance, innerRadius, outerRadius);

Infine, convalida l'angolo del marker nell'intervallo specificato. Userò pseudocodice per questo:

- Find angle between vector C->M and vector playerForward
- If abs(angle) <= maxAngle Then do nothing
- Else If angle > 0 Then rotate M around C by maxAngle-angle
- Else If angle < 0 Then rotate M around C by -maxAngle-angle

Guarda come ruotare un punto attorno a un altro. Può essere fatto con la trigonometria o una matrice di trasformazione.

Potresti anche prendere in considerazione le dimensioni del marker e ridurre leggermente il raggio e l'angolo per compensare.

Modifica: Ripensandoci, potrebbe sembrare più naturale se si convalida prima l'angolo, quindi la distanza, quindi provare entrambe le alternative!

Stavo pensando a come risolvere il problema se la forma fosse irregolare e non si potesse definirla matematicamente. Attenzione: questa è una soluzione sporca, non per i deboli di cuore.

1. Prendi la tua zona:

2. E convertilo in bitmap monocromatica:

e chiamalo scale_0

3. Clonare la bitmap e ridimensionarla al 50%:

e chiamalo scale_1

4. E così via, finché non c'è una bitmap inferiore a 4 pixel di larghezza / altezza:

scala: 2, 3, 4, 5, 6

5. Ora abbiamo la nostra area come bitmap monocromatiche di diverse risoluzioni:

6. Prendi l'ultima immagine (qui "scale_6") e scorre tutti i pixel.

• traduci le coordinate di ciascun pixel in coordinate dello schermo: x = Math.pow ( 2, scale_level );dove scale_level è il numero che abbiamo aggiunto dopo "scale_". Potremmo anche chiamarlo a livello di albero quad, anche se non stiamo davvero lavorando con un albero quad. Fai lo stesso con y.
• controlla se il pixel tradotto in x & y è nero. In caso contrario, non fa parte della forma e dovresti semplicemente continuepassare al passaggio successivo del ciclo
• controlla se il pixel è più vicino al cursore del mouse rispetto al pixel precedentemente controllato - in caso affermativo, salva le coordinate del pixel - usa le coordinate prima della traduzione, ovvero le coordinate all'interno della bitmap.
• alla fine del ciclo, moltiplica queste coordinate per 2: x *= 2; y*=2;per tradurle in coordinate nell'immagine successiva (scala precedente)

7. Prendi l'immagine precedente (qui "scale_5"), ma non scorrere tutti i pixel; inizia con x = saved_x e termina con x = saved_x + 2, lo stesso con y. Cioè, da ora passerai attraverso 4 pixel per ogni livello! Il resto è come a p. 6.

8. Prendi la prima immagine (la più grande = quella con la più grande risoluzione), continua ad attraversare 4 pixel e finalmente hai il pixel più vicino al cursore del mouse:

9. Tuttavia, sto trattando "M" come un punto qui. Se vuoi che sia un cerchio che si adatti completamente, devi prima contrarre (ridurre) la forma di circle.radiuspixel.

Ho pensato di aggiungere che questo algoritmo funzionerà solo se non utilizzerai immagini monocromatiche ma in scala di grigi e tratterai un pixel come "pieno" se non è bianco e come "vuoto" se è esattamente bianco ... O se il tuo ridimensionamento l'algoritmo cambia ogni gruppo di 4 pixel in 1 pixel nero ogni volta che almeno uno di questi 4 pixel non era bianco.