javascript – I’m trying to develop a 2D game with Java Script using Phaser 3, but I need help, where can I hire a professional to teach me?

I have to develop a browser game in javascript, it has to have server side functionality and requires you to fetch any kind of API, as requirements for the project.

I’m considering creating a 2D game, something like “The Legend of Zelda”, a character that can move around and defeat monsters. For the API requirement I’m considering fetching the Discord API to add chat functionally. For the server side requirement, my idea is just storing the state of the game into the server when you hit save, and restores it when you hit load.

Therefore I’m trying to come up with all the steps I have to go through:

  1. I need to learn how to use Phaser 3 framework to create the html pages that run the game
    • I also have to understand what are dust files and how to use them
  2. Learn how to use NodeJS and Mongoose to create the server and its routes
    • I already kinda know how to set up request and response, but do I have to care about synchronisation?
  3. Learn how to use socket.io in order to enable multiplayer?
  4. Learn how to put everything together.

I’m sure there are other details and important things that I have forgot to add in the list above, and it already sounds very overwhelming as is, and this is the reason why I want to hire a professional, having someone to guide me through all of the items will be a great experience overall.

Do you know where I could hire a person/company that would help me on the idea I have described?

phaser – Camera bounds with container overflow

I’m using Phaser to create a small web based game, but I would like some advice on how to handle multiple resolutions and scrolling.

Basically what I would like to achieve is the following :

  • The game view must fit in a container (maybe smaller than the browser window) of any size and still cover it all
  • The aspect ratio must be maintained
  • The camera must follow the player and stop scrolling when the world’s bounds are reached

The world has a fixed size that never changes (pretty small).

The framework seems to already have everything required to do what I described.

For the game config I use:

{
    width: 1280,
    height: 700,
    scale: {
        mode: Phaser.Scale.ENVELOP
    },
    ...
}

Then for the camera:

this.cameras.main.startFollow(this.player);
this.cameras.main.setBounds(0, 0, this.gridSizeX * this.gridCellSize, this.gridSizeY * this.gridCellSize);

Very basic stuff, but the scale mode make the game area overflow its container.
That’s exactly what I want but the camera bounds become incorrect as demonstrated here:

enter image description here

Do you know a way to setup the camera to scroll until the end of the overflowing area ?

Thanks a lot!

phaser – Wait for the scene to start

In my game, the player creates a character (TODO) and then starts the game. The game begins by placing a tile on the board

At the moment I only have one GameController that is a phaser scene

In the game controller, I want to have instances on the board and in the UI menu so that I can communicate with the other scenes during the game

The problem I currently have (and I think it's because of the JS single-threaded nature) is that I have to wait for the board's build method to finish before I can call the other methods, but scene.run doesn't start until Game.create is finished (and I tried Game.preload)

So the question is whether there is a way to wait / recognize until scene.run is finished. I know that there are certain events that trigger a scene, but I can join events of other objects such as on('Board:transitioncomplete',()=>)

Is there a cleaner way to structure the order of these events?

create() {
  this.board = this.scene.get('Board');
  this.board = this.scene.get('UI');
  this.scene.run('Board');
  this.startGame();
}

startGame() {
  this.board.createRoom(0, 0, 'N');

}

Javascript – Start the event at the end of an animation using Phaser 3

I'm starting to develop in Phaser 3 and I'm really a beginner.

I'm trying to attack an archer sprite, but I can't do it right …

This is how I defined the things related to the fight:

class Jugador extends Phaser.Physics.Arcade.Sprite {

    constructor(escena, x, y) {
        super(escena, x, y, "jugador");
        this.escena = escena;
        this.escena.add.existing(this);
        this.escena.physics.add.existing(this);

        this.createVariables();
        this.createControls();
        this.createAnimations();
  }

  createAnimations(){
    this.defineAttackAnimation();
    /// Some others...
  }

  defineAttackAnimation(){
    this.attackAnimation = {};
    this.attackAnimation.key = "attack";
    this.attackAnimation.frames =
      this.escena.anims.generateFrameNames("attack",
      {
        prefix: "attack",
        start: 1,
        end: 6
      });
    this.attackAnimation.frameRate = this.attackFrameRate;
    this.attackAnimation.repeat = 1;
    var atkListener = () => {
      this.arrow();
    };
    this.escena.anims.create(this.attackAnimation);
    this.escena.anims.get("attack")
      .addListener("animationcomplete", atkListener);
  }

  arrow(){
    console.log("arrow");
  }

  attack(){
    if(this.body.onFloor() && this.attackButton.isDown){
      this.setVelocityX(0);
      this.setVelocityY(0);
      this.play("attack", true);
    }
  }

  update() {
    if ( this.body.onFloor() ){
      this.setVelocityY(0);
    }

    this.facing();
    this.idle();
    this.walk();
    this.jump();
    this.attack();

    if (this.body.velocity.y < 0){
      this.play("jump");
    } else if (this.body.velocity.y > 0 && !this.body.onFloor()){
      this.play("falling");
    }

  }
}

What I want to do is:

  1. The player presses the attack button.
  2. Attack animation is played. I want it to be played until it ends, but now I have to keep pushing the attack button.
  3. When the attack animation ends, the arrow function is executed to make an arrow appear.

Thank you in advance.

Set the background color in phaser

I want to set a background color for my game.

I found this solution:

function create() {
  this.cameras.main.setBackgroundColor("#d5d5d5");
}

but I want to make sure there is no standard way to do this, since editing the camera property means that the background would be different for another camera.

Thank you for your help.

phaser – set background color

I want to set a background color for my game.

I found this solution:

function create() {
  this.cameras.main.setBackgroundColor("#d5d5d5");
}

but I want to make sure that there is no standard way to do this, since editing the camera property means that the background would be different for another camera.

Thank you for your help.

phaser – portrait and landscape design

I have a turn-based game that was built using the HTML 5 gaming framework and runs fine in landscape mode. I'm trying to figure out how the game works in both portrait and landscape modes so that the game runs smoothly even when the player turns the screen in landscape mode or the game transition between landscape and portrait is smooth.

I can record the orientation change event fired. My question is how should I design the game for both orientations.

I am currently trying to create a shared file that will then call up my separate orientation layouts created for the game. But is this the right way?
Many thanks

Phaser + Cordova or Unity for a mobile game

I will create a word game for iOS and Android. I developed the first version of the game with Starling Framework and was very happy with the development and release process.

With the Starling community getting smaller and smaller, and Adobe support slowly declining, I think I need to switch to another framework to create the second version of the game.

There are some requirements for which I do not want to spend a lot of time during development, including:

  • In-app purchases
  • Game Center integrations

I think there are three main routes. Godot, Unity and Phaser + Cordova. I exclude Godot because I do not want to spend time learning a new language. I'm an experienced C # and JavaScript developer (TypeScript), so Unity and Phaser seem to be alright for me. I also have experience in Unity and creating the game with Unity is not a problem, but for a wordplay I want to create, Unity seems exaggerated.

The ability to create a game with TypeScript sounds really good, but I'm not sure if I can develop or publish phaser. It looks like people are using phaser for web games rather than mobile games.

I ask experienced people:

  • What is the development experience?
  • Does it work smoothly on all devices?
  • What is the store integration?
  • What tools do you use to create a Phaser mobile game?

A clarification would be very welcome.