Multiple problems with my phaser-project

[Arnon]

Hello everyone,

at the moment I'm stuck with my phaser-project in a dead end and would really need help with it.

 

About my project:

It's a top-down-game, in which the player, who controls an avatar on the game world, has to collect 8 collect-objects in a random selected order and after that, to move to the exit. If the avatar touches the current required collect-object, it disappears and the next one is chosen by the game. If the avatar touches a current not required collect-object or the exit before having collect all the other objects, nothing happens.

The game world is 11x11 tiles big with a border of wall-tiles and 16 free standing wall tiles in the middle (bomberman-like). The game objects (player, collect-objects, exit) will be randomly placed on the free tiles in the game world, the movement of the player is tile-based. The tiles and the game objects have a size of 100 x 100 px each.

The thematic goal of the game is to repel the attacks of the enemy (walking over the respective symbol) as fast as possible and as least to leave the game world via the exit.

Later there should be added an UI with an menu (inclusive an timer and pause-function) under the game world, but it's not a part of my current problems.

The example project I use is https://github.com/jansensan/test-phaser-js-tile-based-movement. Main reason is, that the tile-to-tile movement is the best working for my needs.

What I had changed sucessful at the moment on it:

I was able to remove the NPC from the project and changed the game world to what I wanted, inclusive the pixel-size of the all tiles and game objects. I found a way to bring another single game object (exit) into the game world (but without being able to interact with). All needed placeholder spritesheets, tilemaps and images are finished in correct size.

Current target for the project:

All game objects are placed on defined positions. The player collects the collect-objects in a set order (1-8) and then goes to the exit.

What are my exactly problems and what have I try out yet:

1. Displaying: The game isn't shown completely on the screen (at least not on my 2160 x 1440 monitor). The lower part of the game is missing and only complete visible at 70 % zoom factor. For this problem, I have tried many different things to work with _game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL , but everytime without sucess. I have put it in the game.js inside the initPhaser- as well as in the create-function. I know that it's possible to show the whole game with the wanted stats on my screen, because it worked fine in the pacman/car example from the phaser-website. -SOLVED-

2. I don't know, how to operate with my game objects as groups in my example and place them on defined positions. Reason for this is, that I don't understand some parts of the example completely and in my former projects, I always used references in an object-layer inside of a json-file to define the positions of the game objects. Because of this, I wrote an another Spielobjekte.json [game objects] where all the game objects (except player) are summarized.

3. Interaction of the player with other game objects: I cannot correctly activate the necessary Arcade.Physics and enable physics.arcade on game objects won't work too. I have tried to enable it in the init-function of the player.js and ausgang.js [exit], only got errors in the process. But I need it to work later with game.physics.arcade.overlap to get the interactions beween game objects. The check for the correct order can I later finish with if(Sammelstatus==SammelID) [if(collect status==collectID)].

Distant problems and ideas:

4. Random collect order: My idea is, to put the Ids of the attacks in an array. Then I use emoveRandomItem to take a random value out of it, who is compared when touching an game objects with if(AngriffID== SammelID) [if(attackID==collectID)]. If the array gives null as attackID, the player can use the exit.

5.Random placement of game objects: For this, I would work with safeTile-values I define in map.js and take from the collision-layer in the map.js. The way I want to use is „take 10 random safeTile-values and assign every game object 1 random value“. A personal problem for me is, that I'm not as much experienced with arrays at the moment.

 

Pastebin-links to my files (current status, some has senseless code because of testings).

index.html: https://pastebin.com/AH1GdbD8

game.js: https://pastebin.com/VPbaEfRn

map.js: https://pastebin.com/JSKtuvDc

abstract-image.js: https://pastebin.com/PCjJddi7

abstract-sprite.js: https://pastebin.com/L7Ku8ZZk

ausgang.js: https://pastebin.com/8WTN3rUS

player.js: https://pastebin.com/hwCSnpZu

Sammelobjekte.js: https://pastebin.com/4mjPsfvE

image-constants.js: https://pastebin.com/e4wmgxB3

sprite-constants.js: https://pastebin.com/nrEb50Ss

map.json: https://pastebin.com/KqGsmFRJ

Spielobjekte.json: https://pastebin.com/y05YDPWW

 

Translation note german = english:

Hintergrund = background

Angriff = attack

Abwehr = defend

Spielobjekte = game objects

Spieler = player

Ausgang = exit

Sammelobjekte = collect objects

Sammelstatus = collect status

 

Thank you for helping me

Arnon

[jdotr]

@Arnon dropped by the discord ask asked about this -- I did some digging and came up with the following change to their `create()` method in `game.js` which achieves the behavior they were looking for:

  function create() {
 
    _game.physics.startSystem(Phaser.Physics.ARCADE);
    // set references
    _keyboardInput = _game.input.keyboard;
 
    // in theory ScaleManager.setMinMax doesn't work with SHOW_ALL (see docs
    // at https://photonstorm.github.io/phaser-ce/Phaser.ScaleManager.html#setMinMax)
    // but empirical evidence definitely suggests that this works and is way
    // better than EXACT_FIT because of a weird tendency to scale only in
    // the X direction when resizing larger after the game has shrank.
    _game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    // make sure that our max is set to the max that the lesser of the width
    // and height -- this is because we don't want scale manager to use the
    // wrong axis as a scale guide. We could probably get away without doing
    // this if I understood how SHOW_ALL selected scaling axis better
    var sz = Math.min(window.innerWidth, window.innerHeight)
    // Make sure that the game doesn't scale anything larger than our selected
    // size. There is some interplay here between the aspect ratio (meaning we
    // can just use the same value) but that's left handwaved away.
    _game.scale.setMinMax(0, 0, sz, sz)
 
    // when the canvas resizes the window width/height changes which may mean
    // our game is no longer appriately sized. This will recompute all that
    // shit we just talked about
    _game.scale.setResizeCallback(function() {
      var newSz = Math.min(window.innerWidth, window.innerHeight)
      _game.scale.setMinMax(0, 0, newSz, newSz)
    })
 
    // init game objects
    _map.init();
    _player.init();
    _ausgang.init()
  }

 

[samme]

@Arnon could you put the whole project on GitHub, or attach a zip file?

[Arnon]

Ok, here is the actual status. Now thanks to jdotr with working scale and on Phaser v2.10

Don't be surprised, something is in german, like Sicherungen (=Backup).

Bewegung_Playground.rar

[samme]

Danke.

[Arnon]

Old post:

Ok, I was able to solve sucessful a part of my problem with phsics.arcade and was able to give the player and exit an physics body. _game.physics.startSystem(Phaser.Physics.ARCADE); was still working and what I had done now was to add this.sprite.enableBody = true; in player.js and this.image.enableBody = true; in ausgang.js in the respective function init(tile) { .I checked it with console.log(this.image/sprite.enableBody);  ,  both results are true .

player.js

    this.sprite.enableBody = true;
    console.log(this.sprite.enableBody);

ausgang.js

    this.image.enableBody = true;
    console.log(this.image.enableBody);

 

Now I wanted to test it with  _game.physics.arcade.overlap in function update() inside game.js . Got " functions cannot be labelled" error. Code is below (BetreteAusgang = EnterExit).

game.js

function update() {
    _player.update(...
    );

    //Kollision
  _game.physics.arcade.overlap(this.Player, this.Ausgang, this.BetreteAusgang, null, this);

  }

  BetreteAusgang: function(Player, Ausgang) {
   console.log('Test2');
  }

 

EDIT: I think, Arcade.Physics don' work at the moment. I have done a check with  console.log(Phaser.Physics.ARCADE);  and got 0 so I think it hasn't started. Can someone help me with this please?

Bewegung_Playground2.rar

Edited February 19, 2018 by Arnon
Added new workfiles

[samme]

@Arnon try: 

 

Bewegung_Playground.zip

[Arnon]

@samme @jdotr

Thank you so much for helping me. Really, it makes me crying and means a lot to me.

 

[Arnon]

Ok, next problem. I have tried to bring my collect objects as a group in the game (working with objects.js). I wanted to make it similiar like in map.js (with AssetsPaths and Image_Names) and inside the objects preload I used _objects.load.json/image and the init-function. For better working with groups, I use a Spielobjekte.json , where I define the image, the type (which group the object is), the x and the y tile (xTile, yTile, both will be removed later for random placement) of an object. Also created a modified abstract-image2.js with changed properties who will be used as gameReference by objects.js . To create the objects based on the types, I used functions from my working first example (which did not have tile-based movement) , these are ErschaffeSammelobjekte (CreateCollectingobjects) and findObjectsByType. The both are used from Game.js of Hackergame_Backup.rar .

The problem now is, that I get an error " _objects is not defined" and I don't know where and how I can define it in the correct form. Already try it with _objects = object; inside function Class or use _game.load.json instead. Did not work.

Thank you for helping me.

Arnon

Current code

function Class(game, map) {

    _.extend(this, new AbstractImage2(game, map));

    // set properties
    var JSON_NAME = 'Spielobjekte',
    // 
    Image_Names = {
        ABWEHR1: 'abwehr1',
        ABWEHR2: 'abwehr2',
        ABWEHR3: 'abwehr3',
        ABWEHR4: 'abwehr4',
        ABWEHR5: 'abwehr5',
        ABWEHR6: 'abwehr6',
        ABWEHR7: 'abwehr7',
        ABWEHR8: 'abwehr8'
      },
    //
    AssetsPaths = {
        JSON:    'assets/tilemaps/Spielobjekte.json',
        ABWEHR1: 'assets/images/images/abwehr1.png',
        ABWEHR2: 'assets/images/images/abwehr2.png',
        ABWEHR3: 'assets/images/images/abwehr3.png',
        ABWEHR4: 'assets/images/images/abwehr4.png',
        ABWEHR5: 'assets/images/images/abwehr5.png',
        ABWEHR6: 'assets/images/images/abwehr6.png',
        ABWEHR7: 'assets/images/images/abwehr7.png',
        ABWEHR8: 'assets/images/images/abwehr8.png'
      };
  }

 function preload() {

  _objects.load.json(JSON_NAME,AssetsPaths.JSON);    //this is where I get the error
  _objects.load.image(Image_Names.ABWEHR1, AssetsPaths.ABWEHR1);
  _objects.load.image(Image_Names.ABWEHR2, AssetsPaths.ABWEHR2);
  _objects.load.image(Image_Names.ABWEHR3, AssetsPaths.ABWEHR3);
  _objects.load.image(Image_Names.ABWEHR4, AssetsPaths.ABWEHR4);
  _objects.load.image(Image_Names.ABWEHR5, AssetsPaths.ABWEHR5);
  _objects.load.image(Image_Names.ABWEHR6, AssetsPaths.ABWEHR6);
  _objects.load.image(Image_Names.ABWEHR7, AssetsPaths.ABWEHR7);
  _objects.load.image(Image_Names.ABWEHR8, AssetsPaths.ABWEHR8);


    AbstractImage2.gameReference.load.image(
      this.Image_Names,
      this.AssetsPaths,
      ImageConstants.SIZE,
      ImageConstants.SIZE
    );

  }

function init(tile) {

    _objects.cache.getJSON('Spielobjekte');

    _objects.Sammelobjekte = this.game.add.group();
    _objects.Sammelobjekte.enableBody = true;   
    result = _objects.findObjectsByType('Abwehr', Spielobjekte.json);
    result.forEach(function(element){
    // set position vars
    this.initialTile = tile;

    // add sprite
    this.image = this.gameReference.add.image(
    this.getTileX(Spielobjekte.Spielfeldobjekte.xTile),
    this.getTileY(Spielobjekte.Spielfeldobjekte.yTile),
    this.Image_Names,
    );

    // set anchor
    this.image.anchor.setTo(0.5,0.5);
    this.image.enableBody = true;
    console.log(this.image.enableBody);
  })}

function findObjectsByType(type, json) {
    var result = new Array();
    _objects.forEach(function(element){
      if(element.properties.type === type) {
        result.push(element);
      }      
    })
    return result;
  }

  })();

 

Bewegung_Playground.rar

Hackergame_Backup.rar

 

Edit: have added a codeshare-page here: https://codeshare.io/al968m. It's some kind of codesharing combined with livechat.