How to create states in the same main.js file - Specific case

[viohlet]

Hi guys,

I've tried everything, but still cannot get my game to have states. I hate to post my whole code but I have no idea what else to do. If anyone has a bit of time, please let me know what you think. A noob in these matters, I still don't get why I have to use 'this'.

Also tried to do this in different files but nothing. I just want a basic 'play' menu, the actual game, and then the 'play again'. Am I doing something wrong in the code that prevents this to have states?

I also tried the game.pause = true, but as it pauses everything and buttons won't work.

'use strict';


let game = new Phaser.Game(800, 600, Phaser.CANVAS, 'showgame', {
  preload: preload,
  create: create,
  update: update,
  render: render,
});


function preload () {
  game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
  game.scale.pageAlignHorizontally = true;
  game.scale.pageAlignVertically = true;
  game.stage.backgroundColor = '#000';
  game.load.image('ground', './assets/scripts/game/images/ground.jpg');
  game.load.image('star', 'assets/scripts/game/images/star.png');
  game.load.image('sadmicrowave', 'assets/scripts/game/images/sadmicrowave.png');
  game.load.atlasJSONHash(
    'sprites',
    './assets/scripts/game/images/spritesheet-mini.png',
    './assets/scripts/game/images/spritesheet-mini.json'
  );
  game.load.atlasJSONHash(
    'enemies',
    './assets/scripts/game/images/students.png',
    './assets/scripts/game/images/students.json'
  );
}

let sadmicrowave;
let katie;
let students;
let tables;
let cursors;
let score = 0;
let scoreText;
let timerText;
let weapon;
let fireButton;
let table1;
let showgame = document.getElementById('showgame');
let scorediv = document.getElementById('scorediv');
let scorelabel = document.getElementById('label');

function create() {

  let ground = game.add.image(0, 0, 'ground');
  ground.fixedToCamera = true;


  //	Enable p2 physics
	game.physics.startSystem(Phaser.Physics.P2JS);

  game.physics.p2.setImpactEvents(true);

  game.physics.p2.defaultRestitution = 0.8;

  // Collission Groups
  let playerCollisionGroup = game.physics.p2.createCollisionGroup();
  let studentCollisionGroup = game.physics.p2.createCollisionGroup();
  let table1CollisionGroup = game.physics.p2.createCollisionGroup();

  game.physics.p2.updateBoundsCollisionGroup();

  let x = game.world.randomX;
  let y = game.world.randomY;

  //weapon - does not work yet
  weapon = game.add.weapon(30, 'sprites', 'chair.png');

  weapon.bulletKillType = Phaser.Weapon.KILL_WORLD_BOUNDS;
  weapon.bulletSpeed = 500;
  weapon.fireRate = 600;

  // main character
  katie = game.add.sprite (700, 300, 'sprites','katie.png');

  game.physics.p2.enable(katie);
  katie.body.setCircle(30);
  katie.body.setZeroDamping();
  katie.scale.x *= -1;

  katie.anchor.set(0.5);
	katie.body.fixedRotation = true;
  katie.smoothed = false;

  katie.body.setCollisionGroup(playerCollisionGroup);
  katie.body.collides(studentCollisionGroup, hitStudent);
  katie.body.collides(table1CollisionGroup, hitTable);

  game.camera.follow(katie);

  weapon.trackSprite(katie, 0, 0, true);

  fireButton = this.input.keyboard.addKey(Phaser.KeyCode.SPACEBAR);

  let students = game.add.group();
  students.enableBody = true;
  students.physicsBodyType = Phaser.Physics.P2JS;
  students.smoothed = false;

  for (let i = 0; i < 23; i++)
  {
    // let student = students.create(190 + 69 * i, -90, 'enemies', i);
    let student = students.create(x, y, 'enemies', i);
    student.body.setRectangle(30,30, 0, 0, 4);

    student.body.setZeroDamping();

    student.body.fixedRotation = true;
    student.body.setCollisionGroup(studentCollisionGroup);
    student.body.collides([ studentCollisionGroup, playerCollisionGroup, table1CollisionGroup ]);
  }

  students.setAll('inputEnabled', true);
  students.setAll('input.useHandCursor', true);

  let tables = game.add.physicsGroup();
  tables.enableBody = true;
  tables.physicsBodyType = Phaser.Physics.P2JS;
  tables.smoothed = false;
   //
  for (let i = 0; i < 100; i++)
  {
    let table1 = tables.create(x, y, 'sprites', 'table.png');
    table1.body.setRectangle(10,10, 0, 0, 0);
    table1.body.setZeroDamping();
    table1.body.setCollisionGroup(table1CollisionGroup);
    table1.body.collides([ studentCollisionGroup, playerCollisionGroup ]);
    }

  let door = game.add.sprite (20, 500, 'sprites', 'door.png');

  cursors = game.input.keyboard.createCursorKeys();

  scoreText = game.add.text(16, 16, 'Score: 0', { fontSize: '32px', fill: '#000' });

  timerText = game.add.text(530, 16, 'Time: ', { fontSize: '32px', fill: '#000' });
  game.time.events.add(Phaser.Timer.SECOND * 30, fadePicture);
}

  function hitStudent(katie, student) {
    // student.health = 2;
    // for each {student.sprite.alpha -= 0.5};
    student.sprite.alpha -= 1;
    score += 10;
    student.destroy();
  }

  function hitTable(katie, table1) {
    // student.health = 2;
    // for each {student.sprite.alpha -= 0.5};
    table1.sprite.alpha -= 0.5;
  }

// GAME OVER
function gameover () {
  game.destroy();
  console.log('game destroyed');
}

function fadePicture() {
  game.add.tween(katie).to( { alpha: 0 }, 2000, Phaser.Easing.Linear.None, true);
  game.add.tween(scoreText).to( { alpha: 0 }, 2000, Phaser.Easing.Linear.None, true);
  }

function update() {

  katie.body.setZeroVelocity();

  if (cursors.left.isDown)
    {
      katie.body.moveLeft(350);
    }
  else if (cursors.right.isDown)
    {
      katie.body.moveRight(350);
    }
  if (cursors.up.isDown)
    {
      katie.body.moveUp(350);
    }
  else if (cursors.down.isDown)
    {
      katie.body.moveDown(350);
    }
  if (fireButton.isDown)
    {
    weapon.fire();
    }
}


function render() {
  scoreText.text = 'Score: ' + score;
  timerText.text = 'Time Left: ' + game.time.events.duration;
  if (
    game.time.events.duration === 0
  ) {
    gameover();
  }
}

 

[drhayes]

Here's a link to a post I made recently about "this": 

 

As to the rest: your code is not using states, exactly. You've got one state there, in the object you passed when you made the Phaser.Game object with the preload, create, update, and render properties.

Chances are there are errors being displayed in the development console of your browser. Try and open it and see what they are and paste them here. Search around and find it, it's worth it to see when developing any JS application, including a game.

I would remove everything out of the "render" method, including the "if" statement that isn't valid JS. And come back with what error the browser has that is preventing the game from working.

[samme]

Hi @viohlet, states are tricky at first. Here's a skeleton. Within the state callbacks (preload, create, update), this represents the current state, but you don't have to use it — you can keep using the game reference.

let game = new Phaser.Game(800, 600, Phaser.CANVAS, 'showgame');

let menuState = {
  preload: function () {},
  
  create: function () {
    // … onInputDown.add ->
    // game.state.start('game');
  }
};

let gameState = {
  preload: function () {},
  
  create: function () {},
  
  update: function () {}
};

let gameOverState = {
  preload: function () {},
  
  create: function () {
    // … onInputDown.add ->
    // game.state.start('game');
  }
};

game.state.add('menu', menuState);
game.state.add('game', gameState);
game.state.add('gameOver', gameOverState);

game.state.start('menu');

 

[lifesuxtr]

On 22.12.2016 at 10:47 PM, samme said:

Hi @viohlet, states are tricky at first. Here's a skeleton. Within the state callbacks (preload, create, update), `this` represents the current state, but you don't have to use it — you can keep using the `game` reference.

let game = new Phaser.Game(800, 600, Phaser.CANVAS, 'showgame');

let menuState = {
  preload: function () {},
  
  create: function () {
    // … onInputDown.add ->
    // game.state.start('game');
  }
};

let gameState = {
  preload: function () {},
  
  create: function () {},
  
  update: function () {}
};

let gameOverState = {
  preload: function () {},
  
  create: function () {
    // … onInputDown.add ->
    // game.state.start('game');
  }
};

game.state.add('menu', menuState);
game.state.add('game', gameState);
game.state.add('gameOver', gameOverState);

game.state.start('menu');

 

 

Hi thanks for the answer but  i cant use that  let gameOverState = { preload: function () {}, create: function () { // … onInputDown.add -> // game.state.start('game'); } }; 
structure in my typescript file.It says constructor method... needed for it.I am trying to create states in 1 file.

[samme]

That may be fixed in the newest Phaser CE. But you can try

let menuState = Object.assign(new Phaser.State(), {
  preload: function () {},
  
  create: function () {}
});

 

[lifesuxtr]

14 hours ago, samme said:

That may be fixed in the newest Phaser CE. But you can try

let menuState = Object.assign(new Phaser.State(), {
  preload: function () {},
  
  create: function () {}
});

 

 

 

I still have 

[samme]

Oh, that's a syntax problem. Weird. Does it not like let?