Setting up Tutorial Scene and Adding New Spritesheets

assets/json/dialog.json

@@ -28,7 +28,8 @@
 		},
 		{	
 			"speaker" : "anais",
-			"dialog" : "The fabric of the universe was ripped apart by Gumball."
+			"dialog" : "The fabric of the universe was ripped apart by Gumball.",
+			"newSpeaker": "true"
 		}
 	],
 	[
@@ -39,11 +40,11 @@
 		},
 		{
 			"speaker" : "darwin",
-			"dialog" : "Looks like we will need to defeat the main boss to escape."
+			"dialog" : "Looks like we will need to beat the game to escape."
 		},
 		{
 			"speaker" : "anais",
-			"dialog" : "Look at your console and navigate through.",
+			"dialog" : "Sigh, can't be helped. Look at your console and navigate through.",
 			"newSpeaker": "true"
 		},
 		{
@@ -52,11 +53,24 @@
 		},
 		{
 			"speaker" : "anais",
-			"dialog" : "To attack go to the bottom of the menu and press attack."
+			"dialog" : "Try it, look at our names and scroll through with <- and ->."
+		},
+		{
+			"speaker" : "anais",
+			"dialog" : "Remember each one of us has different attacks as well."
 		},
 		{
 			"speaker" : "anais",
-			"dialog" : "We will be obtaining items to use later on so keep an eye on that."
+			"dialog" : "To attack go to the bottom of the menu and press SPACE."
+		},
+		{
+			"speaker" : "anais",
+			"dialog" : "To attack go to the bottom of the menu and press SPACE."
+		},
+		{
+			"speaker" : "darwin",
+			"dialog" : "Oh yeah, by the way you can use the phone to summon friends in battle!!",
+			"newSpeaker": "true"
 		}
 
 	]

src/prefabs/Character.js

@@ -123,6 +123,7 @@ class AttackState extends State {
         console.log(Object.entries(character.attackList)[character.selectedAttack][1][2] == 0)
         if (Object.entries(character.attackList)[character.selectedAttack][1][2] == 0) {
             character.body.setVelocityX(scene.enemy.x - character.x)
+            // character.body.setVelocityX(-1 * 350)
             this.collision = false;
         }
         else {
@@ -144,25 +145,25 @@ class AttackState extends State {
             this.stateMachine.transition('idle')
         }
 
+        // console.log(character.willAttack + " " + character.hasAttacked)
+
         scene.physics.add.collider(character, scene.enemy, () => {
-            // let collision = scene.enemy.projectile.handleCollision(character, scene.dmgToEnemy)
-            // if ( collision == true){
-            //     // reset that projectile once the collision is true
-            //     console.log('collision was true')
-            //     scene.enemy.projectile.resetProj(scene.enemy.projectile.startX, scene.enemy.projectile.startY)
-            //     this.stateMachine.transition('hurt')
-            //     // is entered
-            // }
             if (this.collision == false) {
                 character.body.setVelocityX(0)
-                this.collision = true;                
+                this.collision = true;
+                character.anims.play(`${character.name}_melee`, true)
+                // character.projectile.move(scene.enemy)            
+                character.once('animationcomplete', () => {
+                    // character.projectile.x = centerX
+                    // character.projectile.y = centerY
+                    // character.projectile.resetProj(character.projectile.startX, character.projectile.startY)
+                    console.log("finished melee attack")
+                    character.anims.play(`${character.name}_idle`)
+                    character.willAttack = false
+                    character.hasAttacked = true
+                    character.setVelocityX(-1 * (scene.enemy.x - character.startX))
+                })            
             }
-            character.anims.play(`${character.name}_melee`, true)
-            character.once('animationcomplete', () => {
-                character.willAttack = false
-                character.hasAttacked = true
-                character.setVelocityX(-1 * (scene.enemy.x - character.x))
-            })      
         }, null, scene)
     }
 }

src/prefabs/Enemy.js

@@ -68,12 +68,19 @@ class DefaultState extends State {
             // add a collider to collide with the incoming player projectile
             scene.physics.add.collider(scene.selectionMenu.attackingPlayer.projectile, enemy, () => {
                 // create a collision to transition into damaged
+                console.log(scene.selectionMenu.attackingPlayer)
                 let collision = scene.selectionMenu.attackingPlayer.projectile.handleCollision(enemy, scene.dmgToEnemy)
                 if ( collision == true){
                     scene.selectionMenu.attackingPlayer.projectile.resetProj(scene.selectionMenu.attackingPlayer.projectile.startX, scene.selectionMenu.attackingPlayer.projectile.startY)
                     this.stateMachine.transition('damaged')
                 }
             }, null, scene)
+
+            if (Object.entries(scene.selectionMenu.characters[scene.selectionMenu.availableChar[scene.selectionMenu.current_player]].attackList)[scene.selectionMenu.current_attack][1][2] == 0) {
+                if (scene.selectionMenu.characters[scene.selectionMenu.availableChar[scene.selectionMenu.current_player]].hasAttacked == true) {
+                    this.stateMachine.transition('damaged')
+                }
+            }
         }
 
         // check if the summon was selected instead

src/prefabs/Projectile.js

@@ -28,7 +28,7 @@ class Projectile extends Phaser.Physics.Arcade.Sprite{
         let direction
         if(this.x >= landX){
             direction = 'left'
-            this.anims.play(`${this.character.name}_projectileAttack`)
+            // this.anims.play(`${this.character.name}_projectileAttack`)
             this.body.setVelocityX(-this.moveSpeed)
         }
         else if (landX >= this.x){

src/prefabs/Summon.js

@@ -1,27 +1,40 @@
 class Summon extends Phaser.Physics.Arcade.Sprite {
     // upon selection the summon a summon should appear on screen and attack the enemy
     // the summon should then reset its location
-    constructor(scene, x, y , texture, damage) {
+    constructor(scene, x, y , texture, damage, name) {
         super(scene, x, y, texture)
         scene.add.existing(this)
         this.projectile = new Projectile(scene, this.x + this.width/2, this.y - this.height/2, `${this.name}_projectile`, this)
-
+        this.name = name
         this.scene = scene
         this.hasAttacked = false
         this.summonUses = 2
         this.damage = damage // damage to be added to enemy
+
+        this.attackTimer = 200
     }
 
     attack(){
         // float up to a certain point and cast a projectile
+        this.setVisible(true)
         this.y = centerY
         this.projectile.y = this.y - this.height/2
         this.summonUses -= 1
         console.log("attack")
         // this.hasAttacked = true // for now remove
-        if (this.y == centerY){
+        this.anims.play(`${this.name}_attack`)
+        this.once('animationcomplete', ()=> {
             this.projectile.move(this.scene.enemy)
-        }
+            this.scene.time.delayedCall(this.attackTimer, () => {
+                this.setVisible(false)
+            })    
+        })
+
+
+
+        // if (this.y == centerY){
+        //     this.projectile.move(this.scene.enemy)
+        // }
         // attacking position:  rightPos - tileSize * 3, centerY
         // move summon towards the position
 

src/scenes/Fighting.js

@@ -72,7 +72,7 @@ class Fighting extends Phaser.Scene {
         this.enemy_hp = new HealthBar(this, centerX, tileSize / 4, this.enemy)
         // enemy does not need mana
 
-        this.summon = new Summon(this, rightPos - tileSize * 3, game.config.height + 100, 'nicole', 200).setOrigin(0,1)
+        this.summon = new Summon(this, rightPos - tileSize * 3, game.config.height + 100, 'nicole', 200, 'NICOLE').setOrigin(0,1)
 
 
         // setting up keyboard inputs
@@ -92,7 +92,7 @@ class Fighting extends Phaser.Scene {
         if (this.active_players == 0 || this.active_enemies == 0){
             this.gameOver = true
         }
-        // restart game if game over
+        // restart game if g    ame over
         if (this.gameOver){
             // check gameover condition
             if (this.active_enemies == 0){

src/scenes/Menu.js

@@ -9,6 +9,8 @@ class Menu extends Phaser.Scene{
         this.load.path = './assets/'
         // setting up backgrounds
         this.load.image('background', 'gumball_side_walk_2.png')
+        this.load.image('livingroom', 'livingroom.jpg')
+
         this.load.image('title_image', 'Title.png')
         this.load.image('container', 'container_1.png')
         this.load.image('cursor', 'cursor.png')
@@ -43,8 +45,11 @@ class Menu extends Phaser.Scene{
             frameWidth: 33,
             frameHeight: 34
         })
+
+        this.load.image('anais_talk', 'anais_talking.png')
+
         this.load.spritesheet('darwin', 'darwin_spritesheet.png', {
-            frameWidth: 46,
+            frameWidth: 42,
             frameHeight: 35
         })
         this.load.image('darwin_talk', 'darwin_talking.png')
@@ -54,9 +59,10 @@ class Menu extends Phaser.Scene{
             frameHeight: 60
         })
         this.load.spritesheet('nicole', 'nicole_spritesheet.png', {
-            frameWidth: 40,
-            frameHeight: 72
+            frameWidth: 32,
+            frameHeight: 66
         })
+
 
         this.load.spritesheet('ANAIS_projectile', 'sci_proj_spritesheet.png', {
             frameWidth: 16,
@@ -100,7 +106,7 @@ class Menu extends Phaser.Scene{
         this.anims.create({
             key: 'GUMBALL_melee',
             frameRate: 8,
-            repeat: -1,
+            repeat: 0,
             frames: this.anims.generateFrameNumbers('gumball', { start: 8, end: 15}),
         })
         this.anims.create({
@@ -109,12 +115,12 @@ class Menu extends Phaser.Scene{
             repeat: -1,
             frames: this.anims.generateFrameNumbers('gumball', { start: 8, end: 8}),
         })
-        this.anims.create({
-            key: 'GUMBALL_projectileAttack',
-            frameRate: 8,
-            repeat: 0,
-            frames: this.anims.generateFrameNumbers('GUMBALL_projectile', { start: 0, end: 0}),
-        })
+        // this.anims.create({
+        //     key: 'GUMBALL_projectileAttack',
+        //     frameRate: 8,
+        //     repeat: 0,
+        //     frames: this.anims.generateFrameNumbers('GUMBALL_projectile', { start: 0, end: 0}),
+        // })
 
         this.anims.create({
             key: 'ANAIS_idle',
@@ -128,12 +134,12 @@ class Menu extends Phaser.Scene{
             repeat: -1,
             frames: this.anims.generateFrameNumbers('anais', { start: 8, end: 8}),
         })
-        this.anims.create({
-            key: 'ANAIS_projectileAttack',
-            frameRate: 8,
-            repeat: 0,
-            frames: this.anims.generateFrameNumbers('ANAIS_projectile', { start: 0, end: 7}),
-        })
+        // this.anims.create({
+        //     key: 'ANAIS_projectileAttack',
+        //     frameRate: 8,
+        //     repeat: 0,
+        //     frames: this.anims.generateFrameNumbers('ANAIS_projectile', { start: 0, end: 7}),
+        // })
 
         this.anims.create({
             key: 'DARWIN_idle',
@@ -147,12 +153,12 @@ class Menu extends Phaser.Scene{
             repeat: -1,
             frames: this.anims.generateFrameNumbers('darwin', { start: 8, end: 8}),
         })
-        this.anims.create({
-            key: 'DARWIN_projectileAttack',
-            frameRate: 8,
-            repeat: 0,
-            frames: this.anims.generateFrameNumbers('DARWIN_projectile', { start: 0, end: 0}),
-        })
+        // this.anims.create({
+        //     key: 'DARWIN_projectileAttack',
+        //     frameRate: 8,
+        //     repeat: 0,
+        //     frames: this.anims.generateFrameNumbers('DARWIN_projectile', { start: 0, end: 0}),
+        // })
 
         this.anims.create({
             key: 'PENNY_attack',
@@ -186,6 +192,13 @@ class Menu extends Phaser.Scene{
             frames: this.anims.generateFrameNumbers('penny', { start: 24, end: 24}),
         })
 
+        this.anims.create({
+            key: 'NICOLE_attack',
+            frameRate: 8,
+            repeat: 0,
+            frames: this.anims.generateFrameNumbers('nicole', { start: 0, end: 7}),
+        })
+
     }
 
     update() {