testing out: radial gradients, stop tweening, projectile templates

Author: htmlcoderexe

Animation.js

@@ -183,6 +183,15 @@ class AnimatedPath
                     }
                     return grad;
                 }
+                case "radial":
+                {
+                    let grad = ctx.createRadialGradient(...graddef.coords);
+                    for(let i=0;i<graddef.stops.length;i++)
+                    {
+                        grad.addColorStop(graddef.stops[i],graddef.colours[i]);
+                    }
+                    return grad;
+                }
             }
         }
 
@@ -191,16 +200,20 @@ class AnimatedPath
     {
         let finalcoords=[];
         let finalcolours=[];
+        let finalstops = [];
         a.coords.forEach((val,i)=>{
             finalcoords.push(a.coords[i]+(b.coords[i]-a.coords[i])*t);
         });
         a.colours.forEach((val,i)=>{
             finalcolours.push(AnimatedPath.tweenHex(a.colours[i],b.colours[i],t));
         });
+        a.stops.forEach((val,i)=>{
+            finalstops.push(a.stops[i]+(b.stops[i]-a.stops[i])*t);
+        });
         return {
             type: a.type,
             coords:finalcoords,
-            stops:a.stops,
+            stops:finalstops,
             colours:finalcolours
         };
     }

gameObjects/Player.js

@@ -122,13 +122,12 @@ class Player extends Actor
                 this.shootingCoolDown=0;
             }
             // spawn a bullet at player's location
-            let bb = new Projectile();
+            let bb = Projectile.fromTemplate(ProjectileData.projectiles.basic2);
             bb.x=this.x;
             bb.y=this.y;
             // make it home towards the point straight ahead of the player
             bb.targetX=this.x;
             bb.targetY =-1;
-            bb.speed = 1200;
             this.scene.addObject(bb);
         }
     }

gameObjects/Projectile.js

@@ -11,48 +11,13 @@ class Projectile extends GameObject
     Damage dealt by this projectile on hitting a target
      */
     damage = 4;
-    test1 = {
-        "idle": [[
-            {
-                fill: "#FFFFFF",
-                time: 0.0,
-                path: "M 0 30 C -15 -20 15 -20 0 30 z"
-            }
-        ]]
-    };
-    test2 = {
-        "idle": [[
-            {
-                fill: {
-                    type: "linear",
-                    coords: [0, -5, 0, 30],
-                    stops: [0,1],
-                    colours: ["#FFFF00FF","#FF780030"]
-                },
-                time: 0.0,
-                path: "M 0 30 C -15 -20 15 -20 0 30 z"
-            }
-        ]]
-    };
-    constructor()
+    constructor(shape)
     {
         super("bullet");
         // default oblong projectile
         this.hitbox = new Rectangle(-5,-5,10,30);
         this.originalHitbox = new Rectangle(-5,-5,10,30);
-        this.sprite=VectorSprite.fromRawObject(this.test2);
-    }
-    draw(ctx)
-    {
-        super.draw(ctx);
-            return;
-        // define a trail fading from yellow to orange
-        // #TODO: something less hardcoded
-        const grad = ctx.createLinearGradient(this.x,this.y-5,this.x,this.y+30);
-        grad.addColorStop(0, "rgb(255 255 0)");
-        grad.addColorStop(1,"rgb(255 120 0 / 0.2)");
-        ctx.fillStyle = grad;
-        ctx.fillRect(this.x-5,this.y-5,10,30);
+        this.sprite=VectorSprite.fromRawObject(shape);
     }
     /**
      * Defines what happens when this collides with an entity
@@ -75,4 +40,13 @@ class Projectile extends GameObject
             this.isDead=true;
         }
     }
+    static fromTemplate(template)
+    {
+        let result = new Projectile(ProjectileData.graphics[template.sprite]);
+        result.hitbox = new Rectangle(...template.rect);
+        result.speed = template.speed;
+        result.damage = template.damage;
+
+        return result;
+    }
 }

gameObjects/ProjectileData.js

@@ -0,0 +1,78 @@
+class ProjectileData
+{
+    static graphics = 
+    {
+        basic_flame:
+        {
+            "idle": 
+            [
+                [
+                    {
+                        fill: {
+                            type: "linear",
+                            coords: [0, -5, 0, 30],
+                            stops: [0,1],
+                            colours: ["#FFFF00FF","#FF780030"]
+                        },
+                        time: 0.0,
+                        path: "M 0 30 C -15 -20 15 -20 0 30 z"
+                    }
+                ]
+            ]
+        },
+        basic_orb:
+        {
+            "idle": 
+            [
+                [
+                    {
+                        fill: {
+                            type: "radial",
+                            coords: [0, 0, 1, 0, 0, 20],
+                            stops: [0,0.2,0.4,0.7,1.0],
+                            colours: ["#CE00CEFF","#CE00CE00","#CE00CE00","#FFA0FFFF","#CE00CE00"]
+                        },
+                        time: 0.0,
+                        path: "M -20 -20 H 20 V 20 H -20 V -20 z"
+                    },
+                    {
+                        fill: {
+                            type: "radial",
+                            coords: [0, 0, 1, 0, 0, 20],
+                            stops: [0,0.2,0.8,0.9,1.0],
+                            colours: ["#FFA0FFFF","#CE00CE00","#CE00CE00","#FFA0FFFF","#CE00CE00"]
+                        },
+                        time: 0.2,
+                        path: "M -20 -20 H 20 V 20 H -20 V -20 z"
+                    },
+                    {
+                        fill: {
+                            type: "radial",
+                            coords: [0, 0, 1, 0, 0, 20],
+                            stops: [0,0.2,0.4,0.7,1.0],
+                            colours: ["#CE00CEFF","#CE00CE00","#CE00CE00","#FFA0FFFF","#CE00CE00"]
+                        },
+                        time: 0.4,
+                        path: "M -20 -20 H 20 V 20 H -20 V -20 z"
+                    }
+                ]
+            ]
+        }
+    };
+    static projectiles = {
+        basic1: {
+            sprite: "basic_flame",
+            rect: [-5,-5,10,30],
+            speed: 1200,
+            damage: 4,
+            trajectory: "straight"
+        },
+        basic2: {
+            sprite: "basic_orb",
+            rect: [-10,-10,10,10],
+            speed: 900,
+            damage: 6,
+            trajectory: "straight"
+        }
+    };
+}

index.html

@@ -25,6 +25,7 @@
     <script src="gameObjects/Pickup.js"></script>
     <script src="gameObjects/PickupData.js"></script>
     <script src="gameObjects/Projectile.js"></script>
+    <script src="gameObjects/ProjectileData.js"></script>
     <script src="gameObjects/BgStar.js"></script>
     <script src="gameObjects/Hostile.js"></script>
     <script src="gameObjects/HostileData.js"></script>