• Content count

  • Joined

  • Last visited

  1. Best way to handle event

    The structure looks fine. It is a listener you are assigning for when the input event handler gets and event of "gameobjectup" to execute a callback anonymous function you have set up. You could destructure your callback into a named function instead if you'd like to destructure the event itself from the callback. Here is an example of working code for your specific example that makes a named function that can be referenced later, see destroyBox function below: const destroyBox = gameObject => gameObject.emit('clicked', gameObject); this.input.on('gameobjectdown', (pointer, gameObject)=> destroyBox(gameObject)); I understand javascript (especially ES6 stuff) quite extensively. Where I have difficulties is interacting with the new phaser 3 api as the documentation is pretty sparse (the examples are great dont get me wrong, but there is no real handy API reference I've found yet).
  2. rendering objects from tile map

    Having still a little issues when I sat down and tried to access the tilelayer data. Where are you getting these last two arguments from? 'characters', m.gid - charTilesetRaw.firstgid Thanks again.
  3. rendering objects from tile map

    I see you are accessing the gid, which I have access too as well! This is what I thought the linker was, or the binder to the tileset. I'll tinker around with your example and see if I can get anything to load using it. Much appreciated dude thanks!
  4. rendering objects from tile map

    Hello- I've tried my best to follow the phaser 3 guides, but none are trying to do what I need my game to do, so I looked at this guide: https://phaser.io/examples/v2/groups/depth-sort but am having trouble loading objects into my game from an object layer, which this example was loading from a sprite sheet. If I console.log(this.map.objects) I am successfully getting this back in return: [ObjectLayer] Which is definitely good. It means my object layer successfully got imported. If I JSON.stringify(this.map.objects[0], null, '\t') I get the following: "{ "name": "Object Layer 1", "opacity": 1, "properties": [ { "name": "tree", "type": "string", "value": "tree" } ], "propertyTypes": {}, "type": "objectgroup", "visible": true, "objects": [ { "id": 26, "name": "tree", "type": "", "rotation": 0, "visible": true, "x": 367.454545454545, "y": 192, "width": 16, "height": 16, "gid": 1260, "flippedHorizontal": false, "flippedVertical": false, "flippedAntiDiagonal": false }, { "id": 29, "name": "tree", "type": "", "rotation": 0, "visible": true, "x": 368, "y": 208, "width": 16, "height": 16, "gid": 1310, "flippedHorizontal": false, "flippedVertical": false, "flippedAntiDiagonal": false }, { "id": 30, "name": "tree", "type": "", "rotation": 0, "visible": true, "x": 368, "y": 224, "width": 16, "height": 16, "gid": 1360, "flippedHorizontal": false, "flippedVertical": false, "flippedAntiDiagonal": false }, { "id": 31, "name": "tree", "type": "", "rotation": 0, "visible": true, "x": 368, "y": 240, "width": 16, "height": 16, "gid": 1410, "flippedHorizontal": false, "flippedVertical": false, "flippedAntiDiagonal": false }, { "id": 34, "name": "tree", "type": "", "rotation": 0, "visible": true, "x": 400, "y": 256, "width": 16, "height": 16, "gid": 1410, "flippedHorizontal": false, "flippedVertical": false, "flippedAntiDiagonal": false }, { "id": 35, "name": "tree", "type": "", "rotation": 0, "visible": true, "x": 400, "y": 240, "width": 16, "height": 16, "gid": 1360, "flippedHorizontal": false, "flippedVertical": false, "flippedAntiDiagonal": false }, { "id": 36, "name": "tree", "type": "", "rotation": 0, "visible": true, "x": 400, "y": 224, "width": 16, "height": 16, "gid": 1310, "flippedHorizontal": false, "flippedVertical": false, "flippedAntiDiagonal": false }, { "id": 37, "name": "tree", "type": "", "rotation": 0, "visible": true, "x": 400, "y": 208, "width": 16, "height": 16, "gid": 1260, "flippedHorizontal": false, "flippedVertical": false, "flippedAntiDiagonal": false } ] }" How can I actually render this to the screen? I have tried the following: class stage extends Phaser.Scene { preload(){ this.load.tilemapTiledJSON('map', 'assets/map.json'); this.load.image('backgroundtiles', 'assets/backgroundtiles.png'); } create(){ this.map = this.make.tilemap({key: 'map'}); this.tileset = this.map.addTilesetImage('backgroundtiles'); this.layer = this.map.createStaticLayer('Tile Layer 1', this.tileset, 0, 0).setScale(this.scale); this.createtrees(); createtrees(){ this.trees = this.add.group(); this.map.objects[0].objects.forEach(e=>{ this.trees.create(e.x, e.y) }); } } This renders the black squares with the green cross through them because it doesn't know what graphic to load. Is this something in Tiled I need to provide to phaser? Also of some other note, the graphics themselves even though they were rendered with a bad image, were also loaded with incorrect positions. What is going on?
  5. depth sorting of entities from layer from tiled

    What is dynamicTile @Secretmapper ? I've been thinking of ways around this all week but to no avail I'm not sure what I can do other than hardcode the trees themselves as individual sprites.
  6. Hello again- I'm looking for an efficient way to render top down view based upon json data from entities. I have it working, as well as working with multiple layers, but now comes the difficult part. Say I have a call such as: this.map = this.make.tilemap({key: 'map'}); this.tileset = this.map.addTilesetImage('backgroundtiles'); this.layer = this.map.createStaticLayer('Tile Layer 1', this.tileset, 0, 0); this.layer2 = this.map.createStaticLayer('Tile Layer 2', this.tileset, 0, 0); This works, and it works beautifully. It renders the different layers and places them all effectively in the background. Now the problem is that layer2 is a layer of trees, with varying individual tiles composing them (some are 4 tiles high, some are 3 tiles high, etc). The player then runs around the map but the trees are always displaying behind him in render order, which is fine if the player is below (y position is greater than the y position of the respective tree). What I need the engine to do though is to render the tree in front of the player if the players y position is less than the y position of the tree, but I have no idea if it's even possible to get the actual tree y position. Is there any efficient way to render the trees in front of the player if the players y position is less than the respective tree in consideration? What is a good way to approach this problem when I desperately don't want to programmatically create the trees, but use the tree data from the json from Tiled? Is this possible? Thanks again, you guys rock!
  7. Is interpolation/alpha really needed for the renderer? Can't that be conducted in phys() checks where phys is updating the state based upon io sent from server, or evaluating state of current objects of the game (ie client side physics updates)? Based upon your suggestions, review the following please if this makes the most sense: class scene1 extends Phaser.Scene { constructor(){ super({key: "scene1"}); this.lag = 0; this.fps = 60; //physics checks 60 times/frame this.frameduration = 1000/ this.fps; } phys(currentframe) { //phys checks and server IO events update state of entities here } render(){ //rendering stuff here } update(timestamp, elapsed){ this.lag += elapsed; while(this.lag >= this.frameduration){ this.phys(this.frameduration); this.lag -= this.frameduration; } this.render(); } }
  8. Yes I have figured out how to cater the native update loop to accomodate this, but also had to write my own render method: This is what I'm working with to customize for this behavior. I could probably use a code review to make sure my ducks are in line (it seems to work for me, but this heavy math involved). class scene1 extends Phaser.Scene { constructor(){ super({key: "scene1"}); this.lag = 0; this.fps = 60; //physics checks 60 times/s this.frameduration = 1000/ this.fps; } phys(delta) { //phys checks and server IO events update state of entities here } render(delta){ //rendering stuff here } update(timestamp, elapsed){ if (elapsed > 1000) elapsed = this.frameduration; this.lag += elapsed; while(this.lag >= this.frameduration){ this.phys(elapsed); this.lag -= this.frameduration; } this.render(this.lag/this.frameduration); } }
  9. But yes, the problem is that player locations are going to be stored on a server, which is async by default, and the client then needs to get updated from messages sent, thus relying upon update() to interpret those will fail
  10. Will take a look at any examples you provide, and may possibily stalk your posts @Antriel If you have a specific, please link it here in the thread though as it is much appreciated and answers my topic. Cheers
  11. You mean the .on should not be in the update or the .emit? .on i think i understand, but .emit i think should shouldn't it?
  12. It runs on several factors, but monitor refresh rate is one of them, so if a player is using a 144hz monitor, it is going to try to match that, which is drastically different than 60hz. However, your answer about physics systems receiving time delta from the update loop is very helpful. Is there a way to set up a rudimentary physics system in it's own method ie preload(){ } create(){ } update(){ } physics(){ //?? }
  13. Is there any good examples of phaser 3 projects with this in mind anywhere to what is being discussed above? How to seperate game physics updates from game render updates?
  14. The reason for this post is because (as of my understanding) update triggers request animationframe under the hood which is both good and bad. RAF will render stuff as fast as the machine can possibly render it. The issue is if you tie physics in with that update (such as positioning, or player speed, stuff like this) then it will update much faster on faster machines than on slower machines, which is why you don't really want to tie these two things together (otherwise known as framelocking). This is so that while the renderer can be rendering many many many times, the updates to physics can be on a separate loop altogether.
  15. Hello- This might seem basic, but when I look at boilerplate phaser projects i typically see 3 functions (either standalone, or a part of the newer es6 classes): preload(){ } create(){ } update(){ } Most game logic I've worked with does not tie in it's rendering calls with its physics calls such as player positional data, etc. Is there a good standard for seperating these two concerns with phaser? Thanks.