It’s the first time that I develop H5 game. I have some problems encountered during the development of the game. In this post I will share the solutions of some part of the problem encountered.

stop bubbling when use Phaser 3.x

Some times you don’t want to invoke the call function of the parent’s event. Well, it’s clear how to stop bubbling if you are a front end developer. Yes, stopping bubbling is the same, the code is below.

  let homeBtn = this.add.image(20, 10, 'home-min');
  homeBtn.on('pointerdown', function(point, x, y, e) {

    // stop bubbling
    e.stopPropagation();
    // other code todo other things
  }, this);

Note: It’s not support in Phaser 3.13.x. I am test in Phaser 3.14.x and Phaser 3.15.x.

Picture blur using Phaser

Picture showing blur rendered in canvas is Frequently occurring problems. You may see the picture of your game is such blur when you use some picture if you first time use Phaser. And do not know how to handle it. It’s my solution.

• First, Make you picture enough to big size. The size of picture multiply by 2. You can scale it when coding.
• secondly, use resolution in Phaser config. The code is below.

  const PIXEL_RATIO = (function() {
    var ctx = document.createElement("canvas").getContext("2d"),
    dpr = window.devicePixelRatio || 1,

    // The backing store size in relation to the canvas element
    bsr = ctx.webkitBackingStorePixelRatio ||
    ctx.mozBackingStorePixelRatio ||
    ctx.msBackingStorePixelRatio ||
    ctx.oBackingStorePixelRatio ||
    ctx.backingStorePixelRatio || 1
    return dpr / bsr
  })();
  let delt = document.documentElement;
  let gameConfig = {
    canvas: document.querySelector('#gameMap'),
    type: Phaser.AUTO,
    width: delt.clientWidth,
    height: delt.clientHeight,
    resolution: PIXEL_RATIO,
    autoResize: true,
    backgroundColor: 0x5fa782,
    scene: [GameScene],
  }
  new Phaser.Game(gameConfig);

Center the picture, text or other shape

It’s easy to make text center. The code is below. Changing the x coordinate.

  this.currentScore = this.add.bitmapText(0, 50, 'font', score, 30);
  this.currentScore.x = (OUTER_WRAPER_WIDTH - this.currentScore.width) / 2;

How to controller Adv showing times everyday?

It’s very important for controlling adv showing times. It’s will disturb player if you controlling not good. So you can store the adv showing times through Facebook instant game api. You can update when player enter the game and after showing. The key word is like below.

  let showingAdvTimesDay = ‘2018-11-12_1’;

It means that show one time on Nov.12 2018 in this player. You can parse it and check the times is You Max. You also can use Math.random() to random showing adv.

Please correct me by email shaohua.you@qq.com， If there is a problem with this article.