[WIP] Topdown and sidescrolling game boilerplate

Showcase
1

Hi,

After my proposition of making a collective boilerplate, I started working on it. I’ve already made previously a topdown and a side-scroller example, both working with spritesheet animations. I’ve just finished another variation of the sidescroller, that now uses Spine skeletal animations. The game looks so much better like this, with more advanced animations. Since I had access to more animations, I’ve added new features like crouching and running.

Here are the controls for the sidescroller (spritesheet and spine):

  • left and right: move
  • up: jump
  • down: crouch
  • shift: run
  • ctrl: fireball for spritesheet version and sword slash for spine version

And the controls for the topdown version:

  • left click to move, long left click to shoot fireball
  • arrow keys to move, ctrl key to shoot fireball

All examples mostly use the same code, making features available on all versions. On all examples, you can talk to non playable characters, you’ll have to avoid monsters, there are level entrances and exits… Most part of the code is common between the three games.

There are still many things to do.

I didn’t take the time to open-source the code on github but I plan to do it later.
Don’t hesitate to tell me if you would like it to be available as soon as possible.

This are simple example, not real games. If you are game designer or graphist and willing to make advanced version, with real game mechanism or better graphism, don’t hesitate to contact me-

Beware that the spine animated characters are not free assets available to everyone. Please do not use them on commercial project.

3 Likes
2

thats are really look like perfect.

i want to try speech baloon on my player’s head like yours. how can i do that?

thanks in advance

3

Thanks a lot.

You can find the speech bubbles source code here, in the Phaser examples.

I adapted it to create the following class:

export default class UI_SpeechBubble {

  constructor(scene) {
    // Create variables
    this.bubbleWidth;
    this.bubbleHeight;
    this.arrowHeight = 20;
    this.bubblePadding = 15;

    // Create visible elements
    this.bubble = scene.add.graphics();
    this.content = scene.add.text(0, 0, '', { fontFamily: 'Arial', fontSize: 18, color: '#000000', align: 'center' });
  }

  update(x, y, quote){
    // The width depends on the quote length
    if(quote.length<15){
      this.content.setWordWrapWidth()
      this.bubbleWidth = 100 + ( 2 * this.bubblePadding ) ;
    }else{
      this.content.setWordWrapWidth(200);
      this.bubbleWidth = 220 + ( 2 * this.bubblePadding ) ;
    }

    // Change the content and draw the speech bubble
    this.content.setText(quote);
    this.drawBubble();

    // Set the position
    var b = this.content.getBounds();
    this.bubble.x = x - Math.floor(this.bubbleWidth / 7);
    this.bubble.y = y - Math.floor(this.bubbleHeight + this.arrowHeight);
    this.content.setPosition(Math.floor(this.bubble.x + (this.bubbleWidth / 2) - (b.width / 2)), Math.floor(this.bubble.y + (this.bubbleHeight / 2) - (b.height / 2)));
  }

  drawBubble(){
    // TODO: replace graphics by shapes?
    // https://rexrainbow.github.io/phaser3-rex-notes/docs/site/shape-roundrectangle/

    var b = this.content.getBounds();
    this.bubbleHeight = b.height + (2 * this.bubblePadding);

    // Remove any previous bubble
    this.bubble.clear();

    //  Bubble shadow
    this.bubble.fillStyle(0x222222, 0.5);
    this.bubble.fillRoundedRect(6, 6, this.bubbleWidth, this.bubbleHeight, 16);

    //  Bubble color
    this.bubble.fillStyle(0xffffff, 1);

    //  Bubble outline line style
    this.bubble.lineStyle(4, 0x565656, 1);

    //  Bubble shape and outline
    this.bubble.strokeRoundedRect(0, 0, this.bubbleWidth, this.bubbleHeight, 16);
    this.bubble.fillRoundedRect(0, 0, this.bubbleWidth, this.bubbleHeight, 16);

    //  Calculate arrow coordinates
    var point1X = Math.floor(this.bubbleWidth / 7);
    var point1Y = this.bubbleHeight;
    var point2X = Math.floor((this.bubbleWidth / 7) * 2);
    var point2Y = this.bubbleHeight;
    var point3X = Math.floor(this.bubbleWidth / 7);
    var point3Y = Math.floor(this.bubbleHeight + this.arrowHeight);

    //  Bubble arrow shadow
    this.bubble.lineStyle(4, 0x222222, 0.5);
    this.bubble.lineBetween(point2X - 1, point2Y + 6, point3X + 2, point3Y);

    //  Bubble arrow fill
    this.bubble.fillTriangle(point1X, point1Y, point2X, point2Y, point3X, point3Y);
    this.bubble.lineStyle(2, 0x565656, 1);
    this.bubble.lineBetween(point2X, point2Y, point3X, point3Y);
    this.bubble.lineBetween(point1X, point1Y, point3X, point3Y);
  }

  setVisible(value){
    this.bubble.setVisible(value);
    this.content.setVisible(value);
  }

  setDepth(depth){
    this.bubble.setDepth(depth);
    this.content.setDepth(depth + 1);
  }
}

Hope this will help!

1 Like
4

Thank you. It’s very helpful for me. I will show you my project with this bubbles when it finished

5

The boilerplate is now available on Github:

1 Like
6

This is awesome, where can i find the source code of the side-scroller? And there is a 500 error when i trying to talk with the npcs.
image

7

Thank you to warn me about that. My server HDD was full, so it wasn’t working properly. I really need to add more space! Anyway, it works correctly now.

You can find the sidescroller source on GitHub.

All this examples share most of the code, so I organised everything into different folders, each one being a new layer that can be added to the core one:

  • src/core: the core code for all games
  • src/topdown: the code specific to topdown games
  • src/sidescroller: the code specific to sidescrollers
  • src/sidescroller-spine: the code specific to the sidescroller example with spine animation
  • src/sidescroller-spritesheet: the code specific to the sidescroller example with spritesheet animation

For the sidescroller with spritesheet animation, it starts with init.js that creates a new game and launches the Preload Scene and the Tiled Scene. Then, you can make your way up to the global sidescroller layer and to the core layer (where most of the code is).

Same for the sidescroller with spine animation, except that you have to start from the sidescroller-spine layer instead of the sidescroller-spritesheet one.

I am planning to reorganise few stuff to make it clearer and to add more comments.

Oh, and if you want to make it fully work on your computer, you should replace src/core/controler/Talk.js by src/core/controler/Talk2.js, so it won’t connect to Sandbox Adventure website to load the discussions.

Don’t hesitate if you have more questions.

1 Like