Cerin

Tutorial sprite not moving

Recommended Posts

Hi, I'm new to MelonJS and I'm trying to work through the platformer tutorial at https://melonjs.github.io/tutorial-platformer/

I've gotten as far as rendering the basic level and getting the sprite to show. However, it's stuck in it's "walking" animation, yet stays in place and doesn't respond to any keyboard events.

Also, the level tile doesn't stretch to cover the entire screen. Attached is a screenshot.

I've triple checked, and I've coped over all the code samples from the tutorial exactly as described. What am I doing wrong? How do I fix these two problems?

Screenshot from 2020-07-25 13-56-02.png

Share this post


Link to post
Share on other sites

Hi, 

for the level not stretching or taking the entire screen, check the params you passed to the me.video.init() method, the `scaleMethod` is the one to specify with something like `flex` to match the desired effect (at least that's the one used in the tutorial, but there are other you can check as well, for Platformer I personally use `flex-width`)

for the movement, maybe you can post here the code of your entity if you are sure you properly follow the tutorial, but else I would say to check again part 3 and make sure that you added the call to `this.body.update(dt);`

good luck ! :)

Share this post


Link to post
Share on other sites
11 hours ago, obiot said:

Hi, 

for the level not stretching or taking the entire screen, check the params you passed to the me.video.init() method, the `scaleMethod` is the one to specify with something like `flex` to match the desired effect (at least that's the one used in the tutorial, but there are other you can check as well, for Platformer I personally use `flex-width`)

for the movement, maybe you can post here the code of your entity if you are sure you properly follow the tutorial, but else I would say to check again part 3 and make sure that you added the call to `this.body.update(dt);`

good luck ! :)

I'm using what's in the tutorial, which is:

Quote

if (!me.video.init(640, 480, {wrapper : "screen", scale : "auto", scaleMethod : "flex-width"})) 

If I change it to "flex", that removes all scaling entirely, and just renders a small 640x480 image.

My entity code is also pretty much straight from the tutorial. My entities.js:

 

Quote

 

/**
 * Player Entity
 */
game.PlayerEntity = me.Entity.extend({

    /**
     * constructor
     */
    init:function (x, y, settings) {
        // call the constructor
        this._super(me.Entity, 'init', [x, y , settings]);

        // max walking & jumping speed
        this.body.setMaxVelocity(3, 15);
        this.body.setFriction(0.4, 0);

        // set the display to follow our position on both axis
        me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH, 0.4);

        // ensure the player is updated even when outside of the viewport
        this.alwaysUpdate = true;

        // define a basic walking animation (using all frames)
        this.renderable.addAnimation("walk",  [0, 1, 2, 3, 4, 5, 6, 7]);

        // define a standing animation (using the first frame)
        this.renderable.addAnimation("stand",  [0]);

        // set the standing animation as default
        this.renderable.setCurrentAnimation("stand");

    },

    /**
     * update the entity
     */
    update : function (dt) {

        if (me.input.isKeyPressed('left')) {

            // flip the sprite on horizontal axis
            this.renderable.flipX(true);
            // update the default force
            this.body.force.x = -this.body.maxVel.x;
            // change to the walking animation
            if (!this.renderable.isCurrentAnimation("walk")) {
              this.renderable.setCurrentAnimation("walk");
            }
        } else if (me.input.isKeyPressed('right')) {

            // unflip the sprite
            this.renderable.flipX(false);
            // update the entity velocity
            this.body.force.x = this.body.maxVel.x;
            // change to the walking animation
            if (!this.renderable.isCurrentAnimation("walk")) {
              this.renderable.setCurrentAnimation("walk");
            }
        } else {
            this.body.force.x = 0;
            // change to the standing animation
            this.renderable.setCurrentAnimation("stand");
        }

        if (me.input.isKeyPressed('jump')) {
            if (!this.body.jumping && !this.body.falling)
            {
              // set current vel to the maximum defined value
              // gravity will then do the rest
              this.body.force.y = -this.body.maxVel.y
            }
        } else {
            this.body.force.y = 0;
        }

        // apply physics to the body (this moves the entity)
        this.body.update(dt);

        // handle collisions against other shapes
        me.collision.check(this);

        // return true if we moved or if the renderable was updated
        return (this._super(me.Entity, 'update', [dt]) || this.body.vel.x !== 0 || this.body.vel.y !== 0);
    },

   /**
     * colision handler
     * (called when colliding with other objects)
     */
    onCollision : function (response, other) {
        // Make all other objects solid
        return true;
    }
});

 


 

 

Edited by Cerin

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...

  • Recently Browsing   0 members

    No registered users viewing this page.