2D à défilement latéral, vue de la caméra en html5

Je me demandais comment je pouvais faire un appareil photo comme point de vue où je pourrais faites défiler jusqu'à un niveau dans un élément canvas comme cela:

http://playbiolab.com/

+1: très vieille école et addictif jeu. 😉
Simple. save(); translate (caméra.x, -de la caméra.y); drawItAll(); restauration();

OriginalL'auteur Oni Enzeru | 2011-10-26

26

Donc, vous voulez un 500x500 toile pour afficher quelque chose (d'un niveau de jeu) qui est vraiment 9000x500.

C'est très bien. Ce que vous faire est de penser à la toile comme une "fenêtre" pour une plus grande scène. Vous traduisez la toile (ou tout autre) à l'endroit approprié et en tirer toutes les choses à l'endroit.

Voici un exemple:

http://jsfiddle.net/hKrrY/

Cliquer sur la toile et maintenez votre touche flèche gauche pour voir la scène d'aller par tout le joueur rouge dot reste "encore".

Comme vous le faites défiler par la toile 100x100, vous êtes à voir les objets qui sont en cours d'élaboration à la fois à l'écran des endroits comme (330,50). La traduction de la toile met en vue.

Je suppose que sa vaut la peine de mentionner que c'est là que des optimisations dans une toile commence à vraiment de l'importance. L'exemple que j'ai donné ci-dessus est un très simpliste moyen de faire une fenêtre d'affichage, et que votre code progresse, vous allez avoir à penser de plus en plus sur ce qu'il est vous êtes le dessin et comment beaucoup vous êtes le dessin. Vous voulez éviter de dessiner les objets qui sont complètement hors de l'écran, par exemple, et si votre jeu ou application a un fond qui est 9000x500 vous ne voulez probablement pas à tirer la chose entière à chaque fois!

De sorte que le concept est la vente à emporter ici, mais vous aurez envie de réfléchir à comment la mettre en œuvre et de la quantité de travail que vous faites de la toile. Si vous vous retrouvez avec des problèmes de performance dans votre side-scrolling application, assurez-vous de nous le faire savoir 🙂

Voir mon autre commentaire. Il peut être fait de mieux de nos jours, la réduction de la pixels de contact avec javascript et enableing pwnage mode 🙂

OriginalL'auteur
6

J'ai toujours trouvé que c'est plus efficace pour envelopper votre toile dans un div avec la largeur et la hauteur de votre fenêtre d'affichage et le dépassement de la valeur hidden puis juste attirer votre ensemble de la toile et de faire défiler la div à l'endroit où vous où vous souhaitez l'afficher.

De sorte que le html serait:
```
<div id='wrapper' style='width: 200px; height: 200px; overflow: hidden;'>
     <canvas width='1000' height='1000'></canvas>
</div>
```
et le javascript serait quelque chose comme
```
function scrollWrapper(x, y){
    var wrapper = document.getElementById('wrapper');  
    wrapper.scrollTop = x;
    wrapper.scrollLeft = y;
}
```
Puis il suffit d'appeler la fonction avec les x et y que vous souhaitez afficher. vous pourriez l'envelopper dans un setTimeout ou quelque chose si vous voulez déplacer au lieu de simplement sauter.

Dessin de l'ensemble de la toile doit être lente.
si vous venez de dessiner la toile une fois, puis il suffit de mettre à jour ce qui change c'est bon, surtout si vous êtes juste de garder une trace de et pas vraiment de dessin, quelle que soit l'évolution de l'écran.
+1 pour ce chemin. Pour vous donner une idée: mon 640*480px toile de mouvement avec getImageData et putImageData sur requestAnimationFrame a fallu près de 80% d'un cœur de PROCESSEUR (i7 4770k Haswell); à l'aide de cette approche, je l'ai coupé en baisse d'environ 10%! C'est près d'un ordre de grandeur et quel que soit le compteur de fps dit, il se sent BEAUCOUP plus lisse (sans doute parce que l'anti-aliasing à partir d'un navigateur défilement des coups de pied dans. Tutoriel: Faire une petite DIV entourant avec overflow:scroll, lier la molette de la souris-événement func avec e.preventDefault() et de l'utilisation .scrollTop! Cela rend tout plus de plaisir!
ajouter overflow:hidden pour le wrapper div
bonne prise

OriginalL'auteur

Vous devez vous connecter pour publier un commentaire.