• Content count

  • Joined

  • Last visited

  1. NPC Healthbar with DOM element

    @Parasyte Am I still doing it wrong? Please see above
  2. NPC Healthbar with DOM element

    Hi @Parasyte - thanks for this. The health bars align over the NPCs' heads, but still don't stay perfectly over them. They still seem affected by the player's movement. Code: var updateLocation = () => { let canvasW = $("#myCanvas").width(); let canvasH = $("#myCanvas").height(); console.log('Canvas W/H: ', canvasW, canvasH); // [1375.5, 867] let ratioW = globals.settings.aspectratio[][0]; let ratioH = globals.settings.aspectratio[][1]; console.log('Aspect Ratio:', ratioW, ratioH); // [800, 600] let divX = canvasW / ratioW; let divY = canvasH / ratioH; let coords =, this.pos.y); let newCoordsX = coords.x * divX; let newCoordsY = coords.y * divY; $healthBar.css({top: `${newCoordsY}px`, left: `${newCoordsX}px`}); Pictures: If I move the player left, it moves the healthbar opposite. If I move the player right, it moves the healthbar over the NPC's head.
  3. melonjs zooming and panning

    @obiot lol I already tried that exact code. I'm trying to pan the view (camera) across to a certain location of interest, slowly, for beautiful cinematics. To do this, I've tried using viewport.moveTo(x, y); at an interval. The problem is on the initial call of moveTo - it sets the viewport at the location of the player, but the viewport isn't centered on the player, rather it's top left is the location of the player. To fix this I added var x = playerMoveCoords.x - viewport.width/2; var y = playerMoveCoords.y - viewport.height/2; It's still a bit jerky though. Any thoughts? var viewport =; viewport.unfollow(); var playerCoords = $.extend({}, game.state.getPlayer().coordinates()); var playerMoveCoords = $.extend({}, game.state.getPlayer().coordinates()); var newLocX = playerCoords.x += 200; var newLocY = playerCoords.y += 200; var x = playerMoveCoords.x - viewport.width/2; var y = playerMoveCoords.y - viewport.height/2;; var myInt = me.timer.setInterval(function() { if (x < newLocX) { x++; } else { x--; } if (y < newLocY) { y++; } else { y--; } viewport.moveTo(x, y); if (x === newLocX && y === newLocY) { me.timer.clearInterval(myInt); myInt = null; } }, 50);
  4. NPC Healthbar with DOM element

    @obiot perhaps you have some more insight? Please see above
  5. melonjs zooming and panning

    @obiot @Parasyte My viewport.move() and viewport.moveTo() functions aren't working. Correct me if I'm wrong, but after looking at the Melon 2.1.1 me.Viewport code (haven't upgraded yet), it seems if I follow the player:,; // set inside the player entity class the follow function in melon sets to the player, then calls this.updateTarget(), which is called on each frame, which sets this._followH(, this._followV( Therefore it's constantly overwriting any coordinates you set in viewport.moveTo(). Is the idea that I somehow set = null, then move the camera, then reset viewport.follow back on the player? Like:, null); viewport.moveTo(100, 100); // I'll add a timer on this to slowly pan,;
  6. NPC Healthbar with DOM element

    @Parasyte sorry but any more thoughts on this? It's really distracting to my players, but I can't really remove the healthbars because players want them.
  7. NPC Healthbar with DOM element

    @Parasyte Not sure how to "disable" scaling as's scale method takes a string or number, not a boolean. I assume changing to 1.0 "disables" scaling. Also, you can see that the healthbar DOM element "moves" (updates) as I move my player. This makes sense from a logic perspective because the enemy entity's location is changing respective to the player in the viewport, but it shouldn't update the healthbar's location over the minion. Changes shown below to game.js' scaleMethod: wrapper : "screen", renderer :, scale : "auto", // changed to scale : 1.0 scaleMethod : "flex-width", doubleBuffering : true, transparent : true, antiAlias : true This makes my canvas tiny but doesn't fix the DOM elements. Am I misunderstanding what you're saying?
  8. NPC Healthbar with DOM element

    @obiot given the code snippet above of my updateLocation, any thoughts on how to keep the healthbars over the NPCs' heads?
  9. NPC Healthbar with DOM element

    @obiot code snippet provided below of the minion's Entity class. healthbar:function() { ... var updateLocation = () => { var coords =, this.pos.y); $healthBar.css({top: `${coords.y}px`, left: `${coords.x}px`}); if (!this.inViewport) { hideHealthbar(); } else { showHealthbar(); } }; return { ... updateLoc: updateLocation, } }, update: function(delta) { ... this.body.update(delta); if(!me.collision.check(this)) { if (this.nearNPC) this.nearNPC = false; } return (this._super(me.Entity, 'update', [delta]) || this.body.vel.x !== 0 || this.body.vel.y !== 0); }, onCollision : function (response, collidedObject) { if (collidedObject.type === 'npcs') { return false; } if (collidedObject.type === 'PlayerEntity' ) { if (!this.nearNPC) this.nearNPC = true; return false; } if (collidedObject.type === 'AttackObject') { if (this.nearNPC) this.nearNPC = false; return false; } if (collidedObject.type === 'collisionShape') { if (this.nearNPC) this.nearNPC = false; return false; } if (this.nearNPC) this.nearNPC = false; // Make all other objects solid return false; }
  10. NPC Healthbar with DOM element

    @obiot, I am using a frontal 2D map with the art drawn to look like oblique perspective on an orthogonal map... so I can fake the 3D effect. See attached picture.
  11. NPC Healthbar with DOM element

    @obiot any thoughts?
  12. NPC Healthbar with DOM element

    @Parasyte Any thoughts on this? Here is a screen recording of the problem: (note it's extra sluggish due to screen recording and playing at the same time)
  13. HTML 5 canvas with Melon causing high fan speeds

    @Parasyte Sorry just seeing this now! I got no notification from this forum that you had responded. Thank you for the detailed response. I'm still using 2.1.1 because my codebase has grown quite a bit and do not have the time to upgrade to the latest. Two reasons for not upgrading: - I'm not sure how much work would be involved and how many breaking changes there are from 2.1.1 - I haven't looked over the updates yet. Are there major changes that I could benefit from in the areas of performance? Also, I understand DOM manipulations are heavy. I should be utilizing Melon's Canvas API more, but am not familiar enough with it and feel a lot more comfortable with things like overlays and GUI components using the DOM.
  14. NPC Healthbar with DOM element

    I am creating a healthbar for NPCs and minions. I wasn't sure how to do it quickly with Melon (on Melon 2.1.1), so I'm doing it with the DOM. For this, I thought it'd be easy enough to append a healthbar element for each instantiated minion entity, then update the healthbar <div> as the entity moves. The problem is, the healthbar's location is initially set just fine, but as the main player moves, the healthbars tend to follow oddly with the player, moving away from the minion entities. I need the healthbar to stay consistently over the heads of the minion entities. How can I do this? let $healthBar = $(`<div class="healthbar_${}">`); let updateLocation = () => { var coords =, this.pos.y); $healthBar.css({top: `${coords.y}px`, left: `${coords.x}px`}); ...
  15. I'm on an older Melon JS 2.1.1, and a 2013 Macbook pro and am experiencing very high fan speeds whenever I load my HTML5 canvas game with Melon. I'm trying to diagnose the fan speed. I don't drop FPS (they remain at 59/60), but I get sluggishness on my laptop in general (e.g., trying to manipulate CSS or elements in Chrome Dev tools while the game is running). Attached below are pics of a ) the debug output from Melon and b ) top 20 or so CPU hogs from Chrome dev tools memory analysis. Any other suggestions / direction I should look at for this?