Vraag 2D zijwaarts schuivende cameraweergave in html5


Ik vroeg me af hoe ik een camera-achtige weergave kon maken waarin ik een niveau binnen een canvas-element op dezelfde manier kon scrollen:

http://playbiolab.com/

Biolab screenshot


14
2017-10-26 22:14


oorsprong


antwoorden:


Dus je wilt dat een canvas van 500x500 iets weergeeft (een spelniveau) dat echt zo'n 9000x500 is.

Dit is goed. Wat je doet is het canvas beschouwen als een "viewport" voor een grotere scène. Je vertaalt het canvas (of al het andere) naar de juiste plek en tekent alle relevante dingen op die plek.

Hier is een voorbeeld:

http://jsfiddle.net/hKrrY/

Klik op het canvas en houd uw linker pijltoets ingedrukt om de scène voorbij te zien gaan terwijl de rode spelerpunt "stil" blijft.

Terwijl je langs het 100x100 canvas scrolt, zie je objecten die in één keer worden getekend - buiten beeldlocaties zoals (330,50). Het vertalen van het canvas brengt hen in beeld.


Ik denk dat het de moeite van het vermelden waard is dat dit is waar het maken van optimalisaties op een canvas er echt toe doet. Het voorbeeld dat ik hierboven gaf, is een zeer simplistische manier om een ​​viewport te maken. Naarmate je code vordert, wil je steeds meer nadenken over wat je tekent en hoeveel je tekent. U wilt bijvoorbeeld voorkomen dat objecten geheel uit het beeld worden gehaald en als uw game of app een achtergrond heeft van 9000x500, wilt u waarschijnlijk niet elke keer het hele ding tekenen!

Dus het concept is de afhaalmaaltijd hier, maar je zult heel hard willen nadenken over hoe je het implementeert en hoeveel werk je aan het canvas doet. Als je met prestatieproblemen in je side-scrolling-app komt, laat het ons dan weten :)


26
2017-10-27 04:23



Ik heb altijd gevonden dat het efficiënter is om je canvas in een div te wikkelen met de breedte en hoogte van je viewport en de overloop ingesteld op verborgen, teken dan gewoon je hele canvas en scrol de div naar waar je wilt weergeven.

Dus de html zou zijn:

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

en het javascript zou zoiets zijn

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

Bel vervolgens de functie met de x en y die u wilt bekijken. je zou het kunnen inpakken in een setTimeout of zoiets als je daarheen wilde verhuizen in plaats van er gewoon heen te springen.


6
2017-10-27 21:16