Typescript Kamera für ein Mario-Spiel

Question

Ich versuche ein Mario-Spiel für Bildungszwecke zu machen (keine phaserjs oder andere Motoren).

Was ich im Grunde jetzt tun möchte, ist eine Art Kamera, die Mario folgt.

In diesem Moment kann Mario in eine Richtung gehen und vom Bildschirm verschwinden. Ich suche nach einer Möglichkeit, eine Art Kamera zu implementieren, die Mario folgt.

Ich habe eine Leinwand wie diese suchen

var w = 720, h = 480; 

var canvas: HTMLCanvasElement; 
var ctx: CanvasRenderingContext2D; 
var downForce = 2; 

HTML

<canvas id="canvas" width="720" height="480" style="border:1px solid #c3c3c3;"></canvas> 

Mein GameLoop wird an der aktuellen Moment wie diesen suchen.

function gameLoop() { 

    requestAnimationFrame(gameLoop); 
    ctx.clearRect(0, 0, w, h); 
    ctx.fillStyle = "rgb(174,238,238)"; 
    ctx.fillRect(0, 0, w, h); 
    ctx.fillStyle = "rgb(14,253,1)"; 
    var floor = ctx.fillRect(0, h - 45, w, 45); 
    mario.drawSprite(); 
    pipe.drawSprite(); 
    mario.addGravity(); 
} 

Ich habe eine Camera.ts

Datei

class Camera { 

    x: number; 
    y: number; 
    width: number; 
    height: number; 

    constructor(){} 

    View(input: any):any { 
     this.x = 0; 
     this.y = 0; 
     this.width = canvas.width; 
     this.height = canvas.height; 
    } 
} 

Wenn ich richtig bin, sollte die Kamera mit dem Lauf Mario bewegt werden. wie der Suche dieses

function keyboardInput(event: KeyboardEvent) { 


switch (event.keyCode) { 
    case 65: case 37: //a 
     mario.setSpriteUrl("graphics/mario/small/Running-mario-left.gif"); 
     mario.numberOfFrames = 4; 
     mario.position.x -= 10; 

     Camera.View = Math.floor(mario.position.x + (mario.frameWidth/2) - (Camera.prototype.View.width/2)) 
     break; 

Ich bin nicht sicher, ob das die richtige Berechnung ist, um zu ‚bewegen‘ die Kamera. Visual Studio zeigt jedoch, dass die Eigenschaftsansicht nicht vorhanden ist.

Ich bin fest mit der Integration einer Kamera-Funktion. Ich würde es sehr schätzen, wenn mir jemand helfen könnte. Ich vermute, dass ich auch die Gameloop ändern sollte, um die Kamera zu "arbeiten"

Answer 1

Der Ausdruck Camera.prototype.View.width macht keinen Sinn, weil View eine Methode von Camera ist. Mit anderen Worten, der folgende Code kompiliert:

var c = new Camera(); 
c.View(null); 

dieser Fehler gegeben, es scheint, Sie sind verwirrt über die Klassen und Instanzen und Methoden, sollten Sie lernen, wie Klassen arbeiten in Typoskript here. Wenn Sie Camera.View möchten, sollten Sie über statische Eigenschaften aus dem Artikel lernen.

Wenn Sie eine Standardansicht Leinwand Breite und Höhe schaffen soll, sollten Sie dies tun:

var view = new Camera(); 
view.x = 0; view.y = 0; 
view.width = canvas.width; view.height = canvas.height; 

jedoch der Code Camera.View = Math.floor(...) gar nicht sinnvoll, weil Camera.View nicht sein definiert etwas. Möglicherweise haben Sie die X-Position der Ansicht festgelegt. Wenn dies der Fall ist, können Sie unter der view Variable folgendes tun:

view.x = Math.floor(mario.position.x + (mario.frameWidth/2) - (view.width/2));