Jump to content

MelonJS key binding not working


Recommended Posts

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 () {}
  }));
 

Link to post
Share on other sites
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.

 

 

 

Link to post
Share on other sites
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 by Thuan
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...