Refactored rendering information into separate Sprite class to prepar…

…e for animated sprites
Philipp-S · Sep 19, 2020 · 1a9abe7 · 1a9abe7
1 parent 6649b77
commit 1a9abe7
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 51 deletions.
diff --git a/build/img/explosion.png b/build/img/explosion.png
diff --git a/build/index.html b/build/index.html
@@ -1,6 +1,8 @@
 <!DOCTYPE html>
 <head>
     <script src = "js/types.js"></script>
+    <script src = "js/entity.js"></script>
+    <script src = "js/sprite.js"></script>
     <script src = "js/init.js"></script>
     <script src = "js/input.js"></script>
     <script src = "js/player.js"></script>

diff --git a/cursor.ts b/cursor.ts
@@ -2,8 +2,8 @@ class Cursor extends Entity {
 
     constructor() {
         super( {x:0, y: 0})
-        this.renderPivot = {x:7, y:7}
-        Resources.setImage(this, ImageResource.CURSOR)
+        this.sprite = new SimpleSprite(ImageResource.CURSOR)
+        this.sprite.renderPivot = {x:7, y:7}
     }
 
     update(deltaTime: number, state: State) : void {

diff --git a/entity.ts b/entity.ts
@@ -0,0 +1,10 @@
+abstract class Entity {
+    public pos: Point
+    public sprite?: Sprite
+    collisionRadiusSqare: number = 0
+
+    constructor(pos: Point) {
+        this.pos = { x: pos.x, y: pos.y }
+    }
+    public update(deltaTime: number, state:State) : void { };
+}
diff --git a/mob.ts b/mob.ts
@@ -2,14 +2,11 @@
 
 
 class Mob extends Entity {
-    pos: Point
-    sprite: CanvasImageSource
-    renderPivot: Point
 
     constructor(pos: Point) {
         super( pos )
-        Resources.setImage(this, ImageResource.BALLOON)
-        this.renderPivot = { x: 32, y: 32}
+        this.sprite = new SimpleSprite(ImageResource.BALLOON)
+        this.sprite.renderPivot = { x: 32, y: 32}
         this.collisionRadiusSqare = CONST.MOB_BALLOON_RADIUS * CONST.MOB_BALLOON_RADIUS 
     }
 

diff --git a/player.ts b/player.ts
@@ -1,15 +1,13 @@
 class Player extends Entity {
-    pos: Point
-    sprite: CanvasImageSource
-    renderPivot: Point = {x:32, y:32}
 
     private isGrounded = false
     private timeSinceLastRocket = 0
     private velocity: Point = {x: 0, y:0}
 
     constructor() {
         super( { x: 0, y: -500} )
-        Resources.setImage(this, ImageResource.PLAYER)
+        this.sprite = new SimpleSprite(ImageResource.PLAYER)
+        this.sprite.renderPivot = {x:32, y:32}
     }
 
     update(deltaTime: number, state: State) : void {

diff --git a/renderer.ts b/renderer.ts
@@ -31,11 +31,11 @@ class Renderer {
                 this.ctx.save()
                 this.ctx.translate( Math.round(r.pos.x + offset.x),
                                     Math.round(r.pos.y + offset.y) )
-                if (r.rotation !== 0) { 
-                    this.ctx.rotate(r.rotation)
+                if (r.sprite.rotation !== 0) { 
+                    this.ctx.rotate(r.sprite.rotation)
                 }
-                this.ctx.translate( -r.renderPivot.x, -r.renderPivot.y) 
-                this.ctx.drawImage(r.sprite, 0 , 0 )
+                this.ctx.translate( -r.sprite.renderPivot.x, -r.sprite.renderPivot.y) 
+                this.ctx.drawImage(r.sprite.getImage(), 0 , 0 )
                 this.ctx.restore()
             }
         })

diff --git a/resources.ts b/resources.ts
@@ -4,19 +4,4 @@ enum ImageResource {
     BALLOON = "img/balloon_red.png",
     CURSOR = "img/cursor.png",
     ROCKET = "img/rocket.png"
-}
-
-class Resources {
-
-
-    public static setImage(entity: Entity, res: ImageResource) : void {
-        let image = new Image();
-        image.src = res;
-        image.onload = () => {
-            entity.sprite = image;
-        }
-        image.onerror = () => {
-            console.error("Could not load image " + res);
-        }
-    }
 }
diff --git a/rocket.ts b/rocket.ts
@@ -5,6 +5,9 @@ class Rocket extends Entity {
 
     constructor(pos: Point, direction: Point, initialVelocity: Point) {
         super(pos)
+
+        this.sprite = new SimpleSprite(ImageResource.ROCKET)
+        this.sprite.renderPivot = {x: 19, y: 9}
 
         let distx = direction.x
         let disty = direction.y
@@ -13,12 +16,9 @@ class Rocket extends Entity {
         this.direction = { x: distx / dist, y: disty / dist }
         this.velocity = { x: this.direction.x * CONST.ROCKET_VELOCITY + initialVelocity.x,
                           y: this.direction.y * CONST.ROCKET_VELOCITY + initialVelocity.y }
-        //this.rotation = Math.atan(-this.direction.x / -this.direction.y)
-        this.rotation = Math.atan(this.direction.y / this.direction.x)
-        if (this.direction.x < 0) this.rotation += Math.PI
+        this.sprite.rotation = Math.atan(this.direction.y / this.direction.x)
+        if (this.direction.x < 0) this.sprite.rotation += Math.PI
 
-        this.renderPivot = {x: 19, y: 9}
-        Resources.setImage(this, ImageResource.ROCKET)
     }
 
     update(deltaTime: number, state: State) : void {

diff --git a/sprite.ts b/sprite.ts
@@ -0,0 +1,29 @@
+abstract class Sprite {
+    public rotation: number = 0
+    public renderPivot: Point = { x:0, y:0 }
+
+    public abstract getImage() : CanvasImageSource
+}
+
+class SimpleSprite extends Sprite {
+
+    private image: CanvasImageSource;
+    public isLoaded: boolean;
+
+    public constructor(src: ImageResource) {
+        super()
+        this.image = new Image();
+        this.image.src = src;
+        this.image.onload = () => {
+            this.isLoaded = true
+        }
+        this.image.onerror = () => {
+            console.error("Could not load image " + src)
+        }
+    }
+
+    public getImage() : CanvasImageSource {
+        return this.image
+    }
+}
+
diff --git a/types.ts b/types.ts
@@ -3,20 +3,4 @@
 interface Point {
     x: number
     y: number
-}
-
-abstract class Entity {
-    public pos: Point
-    public sprite?: CanvasImageSource
-    public rotation: number = 0
-    public renderPivot: Point
-    collisionRadiusSqare: number = 0
-
-    constructor(pos: Point) {
-        this.pos = { x: pos.x, y: pos.y }
-        if (this.renderPivot === undefined) {
-            this.renderPivot = { x: 0, y: 0 }
-        }
-    }
-    public update(deltaTime: number, state:State) : void { };
 }