Sign in to follow this  
Thuan

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

Share this post


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.

 

 

 

Share this post


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

Share this post


Link to post
Share on other sites

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 ?

Share this post


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...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.