If you love vanilla JavaScript but hate the bloat of heavy engines like Phaser or PixiJS, it’s time to meet melonJS .
constructor(x, y) { super(x, y, { width: 32, height: 32 }); // Load sprite this.renderable = new me.Sprite(0, 0, { image: me.loader.getImage("player_sprite") }); this.renderable.addAnimation("idle", [0]); this.renderable.addAnimation("walk", [0, 1, 2, 1], 100); this.renderable.setCurrentAnimation("idle"); }
// Set up physics this.body.setMaxVelocity(5, 15); this.body.setFriction(0.4, 0);
if (Math.abs(this.body.vel.x) > 0.5) { this.renderable.setCurrentAnimation("walk"); } else { this.renderable.setCurrentAnimation("idle"); } }
Don’t forget to preload the image in your src/js/resources.js :
update(dt) { // ... existing movement code ...
Once installed, run:
If you love vanilla JavaScript but hate the bloat of heavy engines like Phaser or PixiJS, it’s time to meet melonJS .
constructor(x, y) { super(x, y, { width: 32, height: 32 }); // Load sprite this.renderable = new me.Sprite(0, 0, { image: me.loader.getImage("player_sprite") }); this.renderable.addAnimation("idle", [0]); this.renderable.addAnimation("walk", [0, 1, 2, 1], 100); this.renderable.setCurrentAnimation("idle"); } melonjs tutorial
// Set up physics this.body.setMaxVelocity(5, 15); this.body.setFriction(0.4, 0); If you love vanilla JavaScript but hate the
if (Math.abs(this.body.vel.x) > 0.5) { this.renderable.setCurrentAnimation("walk"); } else { this.renderable.setCurrentAnimation("idle"); } } y) { super(x
Don’t forget to preload the image in your src/js/resources.js :
update(dt) { // ... existing movement code ...
Once installed, run: