Growler

Members
  • Content count

    40
  • 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

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

    registerPointerEvent not emitting in 5.1

    @obiot @Parasyte any thoughts here?
  3. 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?
  4. @Parasyte Thanks for this! Any issue in using a spawn point object that load NPCs to that location (plus any other meta data I'd like to add via that spawn point)?
  5. @obiot @Parasyte I find Tiled incredibly convenient for entity placement, in addition to tilemapping obviously. My game requirements are to load NPCs at different quests. I'm aware you can easily add new Entities via code like this: me.game.world.addChild(new MySprite()); But I'd rather define all the objects directly in Tiled, then render them with an option. Renderable offers the ability to setOpacity, but it doesn't seem to affect the visibility of the sprite. Moreover, I'd rather just have it not be there, but have its space saved on the map ready to load it. How can I best accomplish this? Perhaps I can create a spawn point object class and assign it an NPC ID? game.FriendlyNPC = game.NPCEntity.extend({ init: function(x, y, settings) { this._super(game.NPCEntity, "init", [x, y, settings]); //... this.setOpacity(0.0); } }); -------------- Ended up using Spawn Entity location to spawn the NPC there let spawnEntity = me.game.world.getChildByProp('spawnID', 1)[0]; var obj = { poolID : 'FriendlyNPC', x : spawnEntity.pos.x, y : spawnEntity.pos.y, data : { width: 16, height : 16, framewidth : 16, frameheight : 16 } }; var newEntity = me.pool.pull(obj.poolID, obj.x, obj.y, obj.data); newEntity.z = 44; me.game.world.addChild(newEntity);
  6. @obiot I realized they weren't added. I ran Grunt which usually grabs all the assets but this time it didn't grab the PNGs. Weird.
  7. @obiot @Parasyte When I created my own TMX maps, somehow they'd auto generate the tileset data within the TMX map: <?xml version="1.0" encoding="UTF-8"?> <map version="1.0" tiledversion="1.1.3" orientation="orthogonal" renderorder="left-down" width="40" height="20" tilewidth="16" tileheight="16" infinite="0" backgroundcolor="#dbfbf4" nextobjectid="8"> <tileset firstgid="1" name="sample_tiles" tilewidth="16" tileheight="16" tilecount="100" columns="10"> <image source="../img/map/sample_tiles.png" width="160" height="160"/> </tileset> <layer name="Ground" width="40" height="20"> <data encoding="base64"> I have a mapper working on the map, and they're using a newer Tiled. It seems to generate references to external .tsx files to get the tileset images: <?xml version="1.0" encoding="UTF-8"?> <map version="1.0" tiledversion="2017.10.11" orientation="orthogonal" renderorder="right-down" width="110" height="116" tilewidth="32" tileheight="32" infinite="0" nextobjectid="3"> <tileset firstgid="1" source="g.tsx"/> <tileset firstgid="343" source="untitled.tsx"/> <tileset firstgid="2940" source="s.tsx"/> <layer name="water" width="110" height="116"> <data encoding="csv"> Here's an example reference of g.tsx file: <tileset firstgid="1" source="g.tsx"/> <?xml version="1.0" encoding="UTF-8"?> <tileset name="ground" tilewidth="32" tileheight="32" tilecount="342" columns="19"> <image source="spain_ground_tiles3.png" width="608" height="576"/> </tileset> From the docs, http://docs.mapeditor.org/en/stable/reference/tmx-map-format/ , this seems fine: "source: If this tileset is stored in an external TSX (Tile Set XML) file, this attribute refers to that file. That TSX file has the same structure as the <tileset> element described here. (There is the firstgid attribute missing and this source attribute is also not there. These two attributes are kept in the TMX map, since they are map specific.)" I'm able to open the map in Tiled no problem, but Melon gives me error "melonJS: 'spain_ground_tiles3.png' file for tileset 'ground' not found!" Why is this? Please see attached image:
  8. @Parasyte RE: "Under this axiom, it doesn't make sense to have a large rectangle with a smaller inner rectangle, because only the larger rectangle "matters" when performing collision detection." I actually got this idea from you guys. In the old forum, on 2/16/16, post title "[melonjs:10815] Proximity detection for multiple entity instances causing issues" , I asked about wonky collision and the response is shown in the attached image, but Aaron and melonJS basically said: "even more simple ! Just add a second body shape to your entity, a bigger one that define the region used of "interacting"". And "Another technique you can use too is to create an instance of me.Rect for your player & npcs. Set the size of them as you want, and position them so the center of the rect is in the center of the player. As the player translates, translate the rect with it (this is why I want to support more scene graph stuff with melon), then check if the rect intersects with the rect of an NPC. That way you're not hard coding distances as much. You're using a separate bounding box instead." RE: "Thirdly, the scenario that you are testing is artificial..." I haven't set explicit coordinates, I simply return False if response.indexShapeA === 1; (aka the outer bounding box) and True if response.indexShapeA === 0; (aka the inner bounding box). This allows the outer bounding box of the player and the NPC to pass through each other (this is what I want as the outer box simply detects proximity). RE: Collision — No Collision — Collision thing Oops that was dumb. Console.logging the ID of the NPCs shows that the NPC I'm currently colliding with is ALWAYS colliding, and other NPCs are not colliding on the screen. My bad.
  9. @Parasyte @obiot Using the latest version of MelonJS, I'm using an outer bounding box for interaction range with NPCs, and an inner bounding box for collision. When the player's outer bounding box overlaps an NPC, it repeats "Collision" and "No Collision" in succession even if I haven't move the player's outer bounding box away from the NPC. Shouldn't !me.collision.check(this) return true only if there's no collision? In the image below, the blue square is the player, the green square is the NPC. Why is this happening? Console.log: NO COLLISION COLLISION COLLISION NO COLLISION COLLISION game.PlayerEntity = me.Entity.extend({ ... }): two bounding boxes for Player entity: // indexShapeA: 0 - Set collision shape and anchor it to bottom half of Player this.body.removeShape(this.body.getShape(0)); this.body.addShape(new me.Rect(0, 0, settings.width * 2, settings.height)); this.anchorPoint.set(0, 0); // indexShapeA: 1 - Interaction bubble: set the larger outside bounding box for the player this.body.addShape(new me.Rect(0, 0, settings.width * 4, settings.height * 2)); this.anchorPoint.set(0.5, 0.5); game.NPCEntity = me.Entity.extend({ ... }): update: function (dt) { // handle collisions against other shapes if (!me.collision.check(this)) { console.log('NO COLLISION'); } // return true if we moved return (this._super(me.Entity, "update", [dt]) || this.body.vel.x !== 0 || this.body.vel.y !== 0); }, /** * Collision handler * @param {[type]} response [description] * @param {[type]} other [description] * @return {[type]} [description] */ onCollision : function (response, other) { console.log('COLLISION'); // Make the object solid return true; }
  10. @obiot @Parasyte any thoughts on this?
  11. Growler

    Hybrid GFX test - scaling tilemap

    @obiot @Parasyte any thoughts on this?
  12. I borrowed the code from http://melonjs.github.io/melonJS/examples/platformer/#debug to create my own game. I'm on Melon5.1. From that tutorial, the Tiled map is 35x35px tiles, and the resolution is 800x600 (see here: https://github.com/melonjs/melonJS/blob/master/examples/platformer/js/game.js). The GUI elements (sound, joystick, etc) this.opacity change work fine. onOver : function (/* event */) { this.setOpacity(1.0); }, My needs are for 16x16px tilesize, and heard 1280x640 is a good resolution for this. If I adjust to this, however, here are the issues: - Debug panel: click events no longer work. - GUI_Object element opacity: this.opacity doesn't change even though the hover event is firing. When I move the character, all of a sudden the opacity onOut (this.setOpacity(0.5)) fires. But only once. It's as if the hover event to setOpacity is called but doesn't update the opacity under I move the character (I guess which calls animation redraw?). And what's more weird: when I have debug panel open, hover works every time on the GUI buttons. See images below. - GUI_Object hover events: for my custom GUI element, which I've scaled to .5, .5: hover events are no longer registering. It registers when I refresh the game page, works a couple times, then stops. Why is this? Seems quite buggy. Note: resolution at 640x320, I am able to click the debug toolbar buttons. But at another multiple of 16 resolution, 1280x640, I cannot. if (!me.video.init(640, 320, {wrapper : "screen", scale : "auto", scaleMethod : "fit", renderer : me.video.AUTO, subPixel : false })) { alert("Your browser does not support HTML5 canvas."); return; } -------------------- Second question: me.GUI_Object doesn't accept width/height parameters. While you can set the framewidth and frameheight in settings, how can I scale the object down on screen? GUI_Object extends sprite which extends renderable, so I should be able to do this.scale(.5, .5), right? If I do this, it scales but looks very pixelated even on the down scale.
  13. Growler

    Hybrid GFX test - scaling tilemap

    Using MelonJS 5.1, my game's pixel artist wants to test "Hybrid GFX" approach and see how the tilemap will scale at 16x16 tilemaps compared with GUI (GUI Object) items. Basically, we want to scale up 16x16 pixel art 3x, but not scale the GUI overlays. Video settings are: {wrapper : "screen", scale : 1.0, scaleMethod : "fit", renderer : me.video.AUTO, subPixel : false } - Resolution is: 1280x640 (1x zoom) How can I independently scale up pixel map art and leave GUI elements as is? Essentially: My resolution options are: let screenRes = { // Pixels rendered at 64x64 (3x size) '16': [320, 160], // Pixels rendered at 32x32 (2x size) '16': [640, 320], // Pixels rendered at true form, 16x16 (1x size) '16': [1280, 640], }; We want to test 3x zoom (320x160) on 16x16 pixels, but leave the GUI watch in pure resolution. In the me.GUI_Object for the watch, if I set this.scale(1, 1); Then you can see the result (first image). If I scale it back down by .33, then it looks horribly pixelated.
  14. Growler

    Git clone Melon example

    I'd like to use one of your example projects as a starting ground instead of following the tutorial. I.e., the projects listed here: https://melonjs.github.io/melonJS/ In particular, I'd like the Platformer there: http://melonjs.github.io/melonJS/examples/platformer/ (Git Repo: https://github.com/melonjs/melonJS/tree/master/examples/platformer) Can you at least make this Platformer git cloneable?
  15. Growler

    HTML 5 canvas with Melon causing high fan speeds

    @Parasyte Also RE: "The high fan speeds can happen with large canvases and high refresh rate. It's because your CPU is doing all of the work to render and draw the scene. WebGL helps a lot in this area because the GPU starts doing most of the drawing work" - i plan on having full screen canvas. Using 5.x melon, how do I ensure the high refresh rate work is offloaded to the GPU instead of CPU? My game should be played in Firefox and Chrome, both GPU accelerated browsers by default... is this offloading to the GPU then automatic? Like I said my game will have many layers and I care a lot about performance. Im usually able to maintain high FPS like i said, but cpu speeds up and is sluggish from cpu side (speaking from my experience previously on 2.1)