frontale 2D a scorrimento telecamera in HTML5

Question

mi chiedevo come avrei potuto fare per fare una macchina fotografica di vista simile a dove ho potuto scorrere un livello all'interno di un elemento di tela proprio come questo:

http://playbiolab.com/

Answer 1

Quindi vuoi una tela 500x500 per mostrare qualcosa (un livello di gioco) che è veramente 9000x500 circa.

Questo va bene. Quello che fai è pensare alla tela come a un "punto di vista" per una scena più ampia. Traducete la tela (o qualsiasi altra cosa) nel punto appropriato e disegnate tutte le cose rilevanti in quel punto.

Ecco un esempio:

http://jsfiddle.net/hKrrY/

Cliccare sulla tela e tenere premuto il tasto freccia sinistra per vedere la scena che passa, mentre il giocatore punto rosso rimane "fermo".

Come si scorre per la tela 100x100, si vedono oggetti che vengono disegnati in posizioni off-screen come (330,50). La traduzione della tela li porta alla luce.

---

immagino la sua pena ricordare che questo è dove fanno ottimizzazioni in una tela inizia a importa. L'esempio che ho dato sopra è un modo molto semplicistico di creare una finestra e, mentre il tuo codice progredisce, vorrai pensare sempre di più a ciò che stai disegnando e quanto stai disegnando. Dovrai evitare di disegnare oggetti completamente fuori schermo, ad esempio, e se il tuo gioco o la tua app hanno uno sfondo di 9000x500 probabilmente non vorrai disegnare l'intera cosa ogni volta!

Quindi il concetto è il take-away qui, ma vorrete pensare molto a come lo implementate e quanto lavoro state facendo alla tela. Se si riscontrano problemi di prestazioni nell'app di scorrimento laterale, accertarsi di comunicarcelo :)

Answer 2

Ho sempre trovato più efficiente avvolgere la tela in un div con la larghezza e l'altezza della vista e l'overflow è impostato su nascosto, quindi disegna l'intera tela e scorri il div verso il punto in cui desideri visualizzarlo.

Così l'HTML sarebbe:

<div id='wrapper' style='width: 200px; height: 200px; overflow: hidden;'> 
    <canvas width='1000' height='1000'></canvas> 
</div> 

e il javascript sarebbe qualcosa di simile

function scrollWrapper(x, y){ 
    var wrapper = document.getElementById('wrapper'); 
    wrapper.scrollTop = x; 
    wrapper.scrollLeft = y; 
} 

Poi basta chiamare la funzione con la X e Y che si desidera visualizzare. potresti avvolgerlo in un setTimeout o qualcosa del genere se vuoi spostarti lì invece di saltare lì.