Growler

Members
  • Content count

    17
  • Joined

  • Last visited

  1. melonjs zooming and panning

    @Parasyte oh my! How did you get those beautifully animated windmills? Are those just animated sprites (like any other sprite) placed on tiled?
  2. NPC Healthbar with DOM element

    @Parasyte thanks so much!
  3. NPC Healthbar with DOM element

    @Parasyte Am I still doing it wrong? Please see above
  4. 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[game.data.ratio][0]; let ratioH = globals.settings.aspectratio[game.data.ratio][1]; console.log('Aspect Ratio:', ratioW, ratioH); // [800, 600] let divX = canvasW / ratioW; let divY = canvasH / ratioH; let coords = me.game.viewport.worldToLocal(this.pos.x, 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.
  5. 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 = me.game.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);
  6. NPC Healthbar with DOM element

    @obiot perhaps you have some more insight? Please see above
  7. 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: me.game.viewport.follow(this.pos, me.game.viewport.AXIS.BOTH); // set inside the player entity class the follow function in melon sets this.target to the player, then calls this.updateTarget(), which is called on each frame, which sets this._followH(this.target), this._followV(this.target). Therefore it's constantly overwriting any coordinates you set in viewport.moveTo(). Is the idea that I somehow set this.target = null, then move the camera, then reset viewport.follow back on the player? Like: me.game.viewport.follow(null, null); viewport.moveTo(100, 100); // I'll add a timer on this to slowly pan me.game.viewport.follow(player.pos, me.game.viewport.AXIS.BOTH);
  8. 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.
  9. NPC Healthbar with DOM element

    @Parasyte Not sure how to "disable" scaling as me.video'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 : me.video.CANVAS, 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?
  10. 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?
  11. NPC Healthbar with DOM element

    @obiot code snippet provided below of the minion's Entity class. healthbar:function() { ... var updateLocation = () => { var coords = me.game.viewport.worldToLocal(this.pos.x, 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; }
  12. 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.
  13. NPC Healthbar with DOM element

    @obiot any thoughts?
  14. 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)
  15. 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.