MelonJS key binding not working

[Thuan]

Hi, I'm new to melonJS and wanna make a new game project, so far Ive been following the tutorial on this site http://melonjs.github.io/tutorial-platformer/ until I reach the part about main character,  the character appear but I can't make him move at all, the key binding to left or right doesn't seem to work. Hopefully someone can point out which I was doing wrong. Here is my built app.min js file:

var game = {
  data: { score: 0 },
  onload: function () {
    me.video.init(640, 480, { wrapper: 'screen', scale: 'auto', scaleMethod: 'flex-width' })
      ? (me.audio.init('mp3,ogg'), me.loader.preload(game.resources, this.loaded.bind(this)))
      : alert('Your browser does not support HTML5 canvas.');
  },
  loaded: function () {
    me.state.set(me.state.PLAY, new game.PlayScreen()),
      me.pool.register('mainPlayer', game.PlayerEntity),
      me.input.bindKey(me.input.KEY.LEFT, 'left'),
      me.input.bindKey(me.input.KEY.RIGHT, 'right'),
      me.input.bindKey(me.input.KEY.X, 'jump', !0),
      me.input.bindKey(me.input.KEY.UP, 'jump', !0),
      me.input.bindKey(me.input.KEY.SPACE, 'jump', !0),
      me.state.change(me.state.PLAY);
  },
  resources: [
    { name: 'dst-inertexponent', type: 'audio', src: 'data/bgm/' },
    { name: 'cling', type: 'audio', src: 'data/sfx/' },
    { name: 'jump', type: 'audio', src: 'data/sfx/' },
    { name: 'stomp', type: 'audio', src: 'data/sfx/' },
    { name: 'area01_bkg0', type: 'image', src: 'data/img/area01_bkg0.png' },
    { name: 'area01_bkg1', type: 'image', src: 'data/img/area01_bkg1.png' },
    { name: 'title_screen', type: 'image', src: 'data/img/gui/title_screen.png' },
    { name: 'area01_level_tiles', type: 'image', src: 'data/img/map/area01_level_tiles.png' },
    { name: 'gripe_run_right', type: 'image', src: 'data/img/sprite/gripe_run_right.png' },
    { name: 'spinning_coin_gold', type: 'image', src: 'data/img/sprite/spinning_coin_gold.png' },
    { name: 'wheelie_right', type: 'image', src: 'data/img/sprite/wheelie_right.png' },
    { name: 'area01', type: 'tmx', src: 'data/map/area01.json' },
    { name: 'area01_level_tiles', type: 'tsx', src: 'data/map/area01_level_tiles.tsx' }
  ]
};
(game.PlayerEntity = me.Entity.extend({
  init: function (e, t, i) {
    me.Entity.prototype.init.apply(this, [e, t, i]),
      this.body.setMaxVelocity(3, 15),
      this.body.setFriction(0.4, 0),
      me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH, 0.4),
      (this.alwaysUpdate = !0),
      this.renderable.addAnimation('walk', [0, 1, 2, 3, 4, 5, 6, 7]),
      this.renderable.addAnimation('stand', [0]),
      this.renderable.setCurrentAnimation('stand');
  },
  update: function (e) {
    return (
      me.input.isKeyPressed('left')
        ? (alert('move'),
          this.renderable.flipX(!0),
          (this.body.force.x = -this.body.maxVel.x),
          this.renderable.isCurrentAnimation('walk') || this.renderable.setCurrentAnimation('walk'))
        : me.input.isKeyPressed('right')
        ? (this.renderable.flipX(!1),
          (this.body.force.x = this.body.maxVel.x),
          this.renderable.isCurrentAnimation('walk') || this.renderable.setCurrentAnimation('walk'))
        : ((this.body.force.x = 0), this.renderable.setCurrentAnimation('stand')),
      me.input.isKeyPressed('jump')
        ? this.body.jumping || this.body.falling || (this.body.force.y = -this.body.maxVel.y)
        : (this.body.force.y = 0),
      this.body.update(e),
      me.collision.check(this),
      me.Entity.prototype.update.apply(this, [e]) || 0 !== this.body.vel.x || 0 !== this.body.vel.y
    );
  },
  onCollision: function (e, t) {
    return !0;
  }
})),
  (game.HUD = game.HUD || {}),
  (game.HUD.Container = me.Container.extend({
    init: function () {
      me.Container.prototype.init.apply(this),
        (this.isPersistent = !0),
        (this.floating = !0),
        (this.name = 'HUD'),
        this.addChild(new game.HUD.ScoreItem(5, 5));
    }
  })),
  (game.HUD.ScoreItem = me.Renderable.extend({
    init: function (e, t) {
      me.Renderable.prototype.init.apply(this, [e, t, 10, 10]), (this.score = -1);
    },
    update: function () {
      return this.score !== game.data.score && ((this.score = game.data.score), !0);
    },
    draw: function (e) {}
  })),
  (game.PlayScreen = me.Stage.extend({
    onResetEvent: function () {
      me.levelDirector.loadLevel('area01'),
        (game.data.score = 0),
        (this.HUD = new game.HUD.Container()),
        me.game.world.addChild(this.HUD);
    },
    onDestroyEvent: function () {
      me.game.world.removeChild(this.HUD);
    }
  })),
  (game.TitleScreen = me.Stage.extend({
    onResetEvent: function () {},
    onDestroyEvent: function () {}
  }));
 

[obiot]

18 hours ago, Thuan said:

update: function (e) {
    return (
      me.input.isKeyPressed('left')
        ? (alert('move'),
          this.renderable.flipX(!0),
          (this.body.force.x = -this.body.maxVel.x),
          this.renderable.isCurrentAnimation('walk') || this.renderable.setCurrentAnimation('walk'))
        : me.input.isKeyPressed('right')
        ? (this.renderable.flipX(!1),
          (this.body.force.x = this.body.maxVel.x),
          this.renderable.isCurrentAnimation('walk') || this.renderable.setCurrentAnimation('walk'))
        : ((this.body.force.x = 0), this.renderable.setCurrentAnimation('stand')),
      me.input.isKeyPressed('jump')
        ? this.body.jumping || this.body.falling || (this.body.force.y = -this.body.maxVel.y)
        : (this.body.force.y = 0),
      this.body.update(e),
      me.collision.check(this),
      me.Entity.prototype.update.apply(this, [e]) || 0 !== this.body.vel.x || 0 !== this.body.vel.y
    );
  },

 

 

Hi, welcome ! Definitely I would rewrite this part as this is a series of imbricated if else where at the end if a key is pressed the updated and collision check is never call/done.

if left keypressed

else if right keypressed

else if jump keypressed

else update/collision

and you only wants to return the returned value of the update function.

 

 

 

[Thuan]

On 7/13/2020 at 7:50 AM, obiot said:

 

Hi, welcome ! Definitely I would rewrite this part as this is a series of imbricated if else where at the end if a key is pressed the updated and collision check is never call/done.

if left keypressed

else if right keypressed

else if jump keypressed

else update/collision

and you only wants to return the returned value of the update function.

 

 

 

Thank you for the answer @obiot , I didn't check earlier since I thought my answer wouldn't get approved!! 

About this problem I already solved it. but now I got another issue related to the font to show the score, which is similar to this post here: 

 Fortunately I followed the answers in the post and fix the font issue, but now the console showing me the error

Uncaught TypeError: Cannot read property 'width' of null
    at s.get (melonjs.min.js:36)
    at s.drawImage (melonjs.min.js:36)
    at s.draw [as _patched] (melonjs.min.js:14)
    at s.<anonymous> (debugPanel.js:444)
    at s.<anonymous> (melonjs.min.js:36)
    at s.draw (HUD.js:67)
    at s.draw [as _patched] (melonjs.min.js:14)
    at s.<anonymous> (debugPanel.js:574)
    at s.<anonymous> (melonjs.min.js:36)
    at s.draw [as _patched] (melonjs.min.js:14)

which is pinpoint into this line of code in the HUD.js file:
 

draw: function (renderer) {
    // draw it baby !
    this.font.draw(
      renderer,
      game.data.score,
      me.game.viewport.width + this.pos.x,
      me.game.viewport.height + this.pos.y
    );
  }

I tried to debug but both me.game.viewport.width and  me.game.viewport.height isn't null, i'm not sure what caused this!
Thanks for your support so far!  

Edited July 18, 2020 by Thuan

[obiot]

based on the callback stack it's more like the image used for the font is undefined and therefore the width & height properties, how did you define the font object, and did you added both the json and image in the preloader asset list ?