Growler

Members
  • Content count

    52
  • Joined

  • Last visited

1 Follower

About Growler

  • Rank
    Advanced Member

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. Growler

    Music overlays

    @Parasyte @obiot
  2. Growler

    Music overlays

    I'm creating an adventure game that will have a couple different play packs / versions / worlds using MelonJS 5.1. Each pack will have the same baseline overworld music loop, but I'd like to layer on other tracks at the same time. The idea being to add a bit of flare distinction to separate play packs while saving costs on reproducing the same baseline track with subtle differences. The MelonJS Audio API seems basic: https://melonjs.github.io/melonJS/docs/me.audio.html Is it possible to be a bit technical with overlaying tracks/fade in/fade out? --------- If not possible through MelonJS engine, do you have other recommendations via Chrome API / web browser APIs to achieve this?
  3. @Parasyte @obiot any thoughts here?
  4. @Parasyte @obiot On Melon 5.1, I want to let the player travel/warp around the same map. They click on a place they want to go, and it loads the player to that location. And really, for any NPC entity, I'd want it to be persistent because I alter property values on the entity and don't want them reset. Except as you can see from the video below, it fades to white twice, but also me.game.world.children's length grows by one. It's hard to tell what is being added to me.game.world.children array and why. The PlayerEntity isPersistent flag is true, yet it seems to load the player entity again anyway. PlayerEntity instance: this.isPersistent = true console.log('PLAYER RENDERABLE: ', this.renderable); me.LevelEntity instance: Utilities.Main.setSubwayContent((args) => { game.data.spawnX = args.x; game.data.spawnY = args.y; this.goTo(); }); ... onFadeComplete: function() { game.data.playerEntity.pos.x = game.data.spawnX; game.data.playerEntity.pos.y = game.data.spawnY; } ////////////////////////////////////////////////////////////////////////////// If I use levelDirector instead and set the pos on the entity when the new level loads, it goes haywire (see 2nd video). me.LevelEntity instance: Utilities.Main.setSubwayContent((args) => { game.data.spawnX = args.x; game.data.spawnY = args.y; this.goTo(); }); ... onFadeComplete: function() { me.levelDirector.loadLevel(this.gotolevel); } game.PlayerEntity = me.Entity.extend({ init: function(x, y, settings) { // call the constructor this._super(me.Entity, 'init', [x, y, settings]); if (game.data.spawnX && game.data.spawnY) { this.pos.x = game.data.spawnX; this.pos.y = game.data.spawnY; } Question: what's a safe, easy way to respawn the player elsewhere in the map?
  5. Growler

    Minimap for melon v5.1.0

    @Parasyte @obiot any thoughts here?
  6. Growler

    Minimap for melon v5.1.0

    @Parasyte @obiot Ah got it. Is there a way to pixelate / lower the integrity of the minimap render to basic 8 bit colors? I just want to show basic shapes.
  7. Growler

    Minimap for melon v5.1.0

    @Parasyte @obiot 1) Yes. The goal is to call it a single time. I simply need to create a replica of the full Tiled map at smaller scale. 2) Not sure what you mean here. Should I go with Pre-render? If so, how can I do this? RE: "the second parameter is a rect that define the area of the map to draw (and we therefore pass the viewport to it), so the issue here above is that you specificy the rect size accordingly to your canvas/viewport size, where it should the size of the minimap canvas." The minimap canvas should take up the full width of the screen when they click it, so that's why I pass the size of the viewport. See below: the canvas within <div id="screen"> is the game canvas, while the canvas within <div class="full-map"> is the minimap.
  8. Growler

    Minimap for melon v5.1.0

    @Parasyte Secondly, the other question I have is: I put a console.log in the melon source at drawTileLayer : function (renderer, layer, rect) { and noticed it's always redrawing the tile layers. This makes sense for a TMX tile which has an animation (I have a tileset with an animated water tile). But why redraw all the other static tiles?
  9. Growler

    Minimap for melon v5.1.0

    @Parasyte cool, I did that: let gameW = $('.game-wrapper').width(); let gameH = $('.game-wrapper').height(); let rect = new me.Rect(0, 0, gameW, gameH); // Get all layers of my TMX map and draw them like a boss map.getLayers().forEach(function(layer) { layer.draw(renderer, rect); }); If I print out layer, I see it's drawing each of my layers in Tiled correctly. I set the rectangle width/height to full screen size. See below, however, to show comparison between full map in Tiled vs what's being printed in game. It's only part (top left) of the map:
  10. Growler

    registerPointerEvent not emitting in 5.1

    @Parasyte yeah I actually just discovered that property and it works great!
  11. Growler

    registerPointerEvent not emitting in 5.1

    @obiot @Parasyte I figured out what it was. I had a GUI DOM element that acts as container for all overlay GUI elements set to width = 100%, height = 100%; and its z-index was overlaying the canvas. So the canvas API wasn't registering events. This is tricky as I wanted an overlaying DOM container to contain all GUI elements.
  12. Growler

    Minimap for melon v5.1.0

    I created a minimap for my game a while back (2014, melon 1.1) by redrawing a copy of the tilemap at smaller scale into a new canvas element. The suggestion back then from @Parasyte was to loop through map layers and draw them at scale: var scale = 0.25; var map = me.game.currentLevel; var canvas = me.video.createCanvas(map.width * scale, map.height * scale); var ctx = me.CanvasRenderer.getContext2d(); var renderer = { globalAlpha ; function () { return ctx.globalAlpha; }. setGlobalAlpha : function (a) { ctx.globalAlpha = a; }. drawImage : function () { ctx.drawImage.apply(ctx, arguments); } }; ctx.scale(scale, scale); map.getLayers().forEach(function (layer) { layer.draw(renderer, map); }); In Melon 5.1.0, I've changed map = me.game.currentLevel to map = me.levelDirector.getCurrentLevel(); I'm getting error Cannot read property 'x' of undefined at Math.max(rect.pos.x - (layer.maxTileSize.width - layer.tilewidth), 0),: /** * draw the tile map * @ignore */ drawTileLayer : function (renderer, layer, rect) { // get top-left and bottom-right tile position var start = this.pixelToTileCoords( ---> Here: Math.max(rect.pos.x - (layer.maxTileSize.width - layer.tilewidth), 0), Math.max(rect.pos.y - (layer.maxTileSize.height - layer.tileheight), 0), me.pool.pull("me.Vector2d") ).floorSelf(); Has the way we render a smaller replica of the full tmx map changed since then? Looking at the source, it looks like me.TMXLayer's draw() function takes a renderer and rect. But I'm passing in a renderer and map, where map is a Class instance of the TMX map, not a rect. Has this changed, and should I be passing in a rect, if so, which rect? /** * draw a tileset layer * @ignore */ draw : function (renderer, rect) {
  13. Growler

    registerPointerEvent not emitting in 5.1

    @Parasyte The drag-and-drop doesn't work (like you mentioned). Yes I followed the multi-touch example already and looked at the source, tried to mirror it, and still no response.
  14. Growler

    registerPointerEvent not emitting in 5.1

    @obiot @Parasyte any thoughts here?
  15. I have three pointer events I'd like to register within game.playerEntity: me.input.registerPointerEvent('pointerdown', me.game.viewport, this.pointerdown.bind(this)); me.input.registerPointerEvent('pointerup', me.game.viewport, this.pointerup.bind(this)); me.input.registerPointerEvent('pointermove', me.game.viewport, this.pointermove.bind(this)); I do this within the init: game.PlayerEntity = me.Entity.extend({ init: function(x, y, settings) { // call the constructor this._super(me.Entity, 'init', [x, y, settings]); ... // me.input registrations here: I thought somehow the binding wasn't working, so I passed in an anon function and it's still not firing: me.input.registerPointerEvent("pointermove", me.game.viewport, function(event) { console.log('Test'); }); How do I get pointer events to work in Melon 5.1?