ol-web

Members
  • Content count

    18
  • Joined

  • Last visited

About ol-web

  • Rank
    Member

Recent Profile Visitors

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

  1. ol-web

    Phaser 3 book

    ...wait, what?
  2. ol-web

    Phaser 3 book

    learning old software is not a very good idea though. it would be like buying a book about jQuery UI instead of React. if phaser 2 has all you need and acceptable performance then i guess that's fine but you're gonna miss out on everything that phaser 3 offers and will offer in the future. especially matter.js integration which is VERY cool.
  3. ol-web

    Phaser 3 book

    Phaser 3 is still pretty new. You need to give it time before the community grows around it and books/courses/tutorials etc. are made.
  4. ol-web

    matterGameObject

    It's very hard to understand what you're saying. An actual code example on codepen would help. If you need to add matter bodies to a container then I don't think it's possible. Containers can only have one body AFAIK. If that's not what you meant then perhaps you're using setBody wrong. The code below worked for me. There's no usage description of it but you can get a guess of what you need to pass there from here: https://github.com/photonstorm/phaser/blob/v3.11.0/src/physics/matter-js/components/SetBody.js this.container.setBody({ type: "circle", x: your_x_position, y: your_y_position });
  5. ol-web

    Making my first game - please help

    you need to set velocityY to 0 as well
  6. ol-web

    Sound spatialization from 2017

    So I stumbled upon this devlog from 2017. It says some details may not be correct but I was just wondering what happened to this feature. Google says this is the only time the word "spatialization" has been used on www.phaser.io I searched through the current documentation and examples and the audio spatialization feature doesn't seem to exist currently in Phaser. It would be pretty neat to have it though. What happened to it? Is it on a to-do list? I've found a basic example of spatialization in WebAudio on MDN in case anyone in interested: https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialization_basics https://mdn.github.io/webaudio-examples/panner-node/
  7. I need to make and destroy transparent rectangles on the fly so this.matter.add.rectangle() seemed like a good option but it doesn't have a destroy method. Is there a different way to remove it from scene or should I use transparent images?
  8. ol-web

    Infinite Matter tiles

    So I wrote something that would allow me to have a tilemap full of matter tiles without killing my CPU before it even has a chance to render a frame. I did a test with a 200x200 tiles tilemap with 8000 colliding matter tiles and it just works. In areas with no colliding tiles the game runs smoothly at 10% cpu usage. Of course the usage spikes and frames drop to unplayable levels when going to areas with like 500 tiles at once but the moment they're off the camera there are once again no collisions and therefore smooth framerate again. Sadly it can have some leaks in some scenarios so in an act of desperation I throttled a worldwide tile cleanup every 10 seconds. The code isn't very good. It's pretty ugly too. And I don't know how performant it is compared to how it could be if it was made differently either. It gets the job done and actually allows for infinite bodies so at least there's that. Here's the question though: Does a feature like this have a chance to be implemented in Phaser in the future? I'd rather use a performant native solution than my own code. JS games need optimization more than any others so it'd be nice to have it in Phaser out of the box. And maybe another question: what's the best way to temporarily disable a matter body? As you can see below in methods enableBodiesOnTiles and disableBodiesOnTiles I just copy matterBody.body to a different variable and then call removeBody(). Is there a better way? disableLeakedTileBodies() { const hasMatterBody = tile => (tile.physics.matterBody && tile.physics.matterBody.body); const worldTiles = this.getTilesWithinWorldXY(0, 0, this.widthInPixels, this.heightInPixels).filter(hasMatterBody); const cameraTiles = this.getTilesWithinWorldXY( this.scene.cameras.main.scrollX, this.scene.cameras.main.scrollY, this.scene.cameras.main.width, this.scene.cameras.main.height ).filter(hasMatterBody); const leakedTiles = worldTiles.length - cameraTiles.length; this.disableBodiesOnTiles(difference(worldTiles,cameraTiles)); return leakedTiles; } enableBodiesOnTiles(tiles) { for (var i = 0; i < tiles.length; i++) { var matterBody = tiles[i].physics.matterBody; if (matterBody && !matterBody.body) matterBody.setBody(matterBody.bodyCopy); } } disableBodiesOnTiles(tiles) { for (var i = 0; i < tiles.length; i++) { var matterBody = tiles[i].physics.matterBody; if (matterBody && matterBody.body) matterBody.removeBody(); } } update() { const tileWidth = this.tileWidth; const tileHeight = this.tileHeight; const paddingX = 2 * tileWidth; const paddingY = 2 * tileHeight; const cameraWidth = this.scene.cameras.main.width; const cameraHeight = this.scene.cameras.main.height; const cameraOffsetX = this.scene.cameras.main.scrollX; const cameraOffsetY = this.scene.cameras.main.scrollY; this.cameraOffsetBeforeUpdateX = this.cameraOffsetBeforeUpdateX || cameraOffsetX; this.cameraOffsetBeforeUpdateY = this.cameraOffsetBeforeUpdateY || cameraOffsetY; const cameraOffsetAfterUpdateX = this.cameraOffsetBeforeUpdateX - cameraOffsetX; const cameraOffsetAfterUpdateY = this.cameraOffsetBeforeUpdateY - cameraOffsetY; const shouldTilesRenderX = Math.abs(cameraOffsetAfterUpdateX) >= tileWidth; const shouldTilesRenderY = Math.abs(cameraOffsetAfterUpdateY) >= tileHeight; if (shouldTilesRenderX || shouldTilesRenderY) { let tilesPassedX = Math.ceil(cameraOffsetAfterUpdateX / tileWidth); let tilesPassedY = Math.ceil(cameraOffsetAfterUpdateY / tileHeight); // throttled leak cleanup every 10 seconds this.disableLeakedTileBodies(); this.cameraOffsetBeforeUpdateX = 0; this.cameraOffsetBeforeUpdateY = 0; if (tilesPassedX > 0) { // CAMERA MOVES TO THE LEFT const newTiles = this.getTilesWithinWorldXY( cameraOffsetX, cameraOffsetY, tilesPassedX * tileWidth + paddingX, cameraHeight ); const oldTiles = this.getTilesWithinWorldXY( cameraOffsetX + cameraWidth, cameraOffsetY - tilesPassedX * tileHeight, tilesPassedX * tileWidth + paddingX, cameraHeight + tilesPassedX * tileHeight ); this.enableBodiesOnTiles(newTiles); this.disableBodiesOnTiles(oldTiles); } else if (tilesPassedX < 0) { // CAMERA MOVES TO THE RIGHT tilesPassedX = Math.abs(tilesPassedX); const newTiles = this.getTilesWithinWorldXY( cameraOffsetX + cameraWidth - tilesPassedX * tileWidth - paddingX, cameraOffsetY, tilesPassedX * tileWidth + paddingX, cameraHeight ); const oldTiles = this.getTilesWithinWorldXY( cameraOffsetX - tilesPassedX * tileWidth - paddingX, cameraOffsetY - tilesPassedX * tileHeight, tilesPassedX * tileWidth + paddingX, cameraHeight + tilesPassedX * tileHeight ); this.enableBodiesOnTiles(newTiles); this.disableBodiesOnTiles(oldTiles); } if (tilesPassedY > 0) { // CAMERA MOVES UP const newTiles = this.getTilesWithinWorldXY( cameraOffsetX, cameraOffsetY, cameraWidth, tilesPassedY * tileHeight + paddingY ); const oldTiles = this.getTilesWithinWorldXY( cameraOffsetX - tilesPassedY * tileWidth, cameraOffsetY + cameraHeight, cameraWidth + tilesPassedY * tileWidth, tilesPassedY * tileHeight + paddingY ); this.enableBodiesOnTiles(newTiles); this.disableBodiesOnTiles(oldTiles); } else if (tilesPassedY < 0) { // CAMERA MOVES DOWN tilesPassedY = Math.abs(tilesPassedY); const newTiles = this.getTilesWithinWorldXY( cameraOffsetX, cameraOffsetY + cameraHeight - tilesPassedY * tileHeight - paddingY, cameraWidth, tilesPassedY * tileHeight + paddingY ); const oldTiles = this.getTilesWithinWorldXY( cameraOffsetX - tilesPassedY * tileWidth, cameraOffsetY - tilesPassedY * tileHeight - paddingY, cameraWidth + tilesPassedY * tileWidth, tilesPassedY * tileHeight + paddingY ); this.enableBodiesOnTiles(newTiles); this.disableBodiesOnTiles(oldTiles); } } }
  9. I've never touched atlases so I can't tell but your example does work on my spritesheets. Maybe you could set the frame to an integer, at least that's how I use it with spritesheets. As for finding stuff in the documentation I usually just search for Phaser.Scene constructor as most of the time the this keyword refers to the scene. And from there I just go to Scene's method add() and that points me to GameObjectFactory and that points me to particles() method. It's just javascript classes everywhere. https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.GameObjectFactory.html#particles__anchor
  10. backgroundLayer = map.createDynamicLayer´╗┐('background', tileset,0,0); PS why are you not using vars? it's a bad practice in javascript, you're polluting the global scope
  11. ol-web

    How to prevent user from zooming in the game?

    But as far as I'm concerned zooming the browser window doesn't affect the canvas's world size. Are you using any plugins? How does your game work? I'd appreciate some screenshots of the problem before and after zoom and with dev tools on the canvas and your camera controlling code; In the meantime maybe you could fix the problem with camera's methods such as scene.cameras.main.setSize(width,height). It would in theory just set the camera's size to a hardcoded number so that the player can't see anything beside it. Not ideal but maybe it's enough for you.
  12. ol-web

    Error on game.destroy()

    I checked it in my game on Phaser 3.11 . No component unmounting, just calling game and scene object from console. If i just call game.destroy(); I'm left with the last game frame frozen on my screen with and I only get mouse errors such as this: Uncaught TypeError: Cannot read property 'queueMouseMove' of null at MouseManager.onMouseMove If I call scene.stop(); on the main and only scene instance the screen goes black, no errors but after calling game.destroy(); after it I get these: Uncaught TypeError: Cannot read property 'update' of null at ArcadePhysics.shutdown (..\node_modules\phaser\src\gameobjects\components\Animation.js:62) at ArcadePhysics.destroy (..\node_modules\phaser\src\gameobjects\components\Animation.js:82) at EventEmitter.emit (..\node_modules\react-dom\cjs\react-dom.development.js:17430) at Systems.destroy (..\node_modules\react-dom\cjs\react-dom.development.js:17430) at SceneManager.destroy (..\node_modules\react-dom\cjs\react-dom.development.js:17430) at Game.runDestroy (..\node_modules\react-dom\cjs\react-dom.development.js:17430) at Game.step (..\node_modules\react-dom\cjs\react-dom.development.js:17430) at TimeStep.step (..\node_modules\react-dom\cjs\react-dom.development.js:17430) at step (..\node_modules\react-dom\cjs\react-dom.development.js:17430) Uncaught TypeError: Cannot read property 'queueMouseMove' of null at MouseManager.onMouseMove (..\node_modules\react-dom\cjs\react-dom.development.js:17430) If I call game.input.mouse.enabled = false; first and then game.destroy(); there are no errors at all. It's just that the last frozen game frame stays there instead of canvas going black. Maybe that's how it's supposed to work, I don't know. After that I can also manually remove the canvas from the DOM and still no errors. Haven't checked if the game would work after mounting the component again though. I don't think game,destroy(); is working properly right now. Maybe we're just doing something wrong but manually disabling mouse input to get rid of errors doesn't look right. Could you link me the other threads? PS File sources are a little weird because it's a Parcel+nwjs combo.
  13. ol-web

    Problem with the Camera in Phaser 3

    had the same problem. 3.11 fixed it and the smooth zoom animation is awesome.
  14. Is it possible for an arcade sprite to collide with a matter sprite?
  15. I stumbled upon this in the examples: link The new lights feature is pretty cool but it "shines" through other tiles whereas an actual light would only shine at the outer tiles. But still, it exists so maybe there's more light related stuff coming up? Raycasting would be a very welcome addition. The example here seems to be popular but it's in Phaser 2 and is... well, complicated. And custom implementations probably aren't as performant as native ones could be. So is raycasting and/or others ever gonna appear in Phaser? It would be amazing to have some kind of RayCaster as a game object where the user can just pass references to tile layers, sprites and other game objects to cast rays on them and use it to generate light or checking whether something exists within the raycaster's "view". Would be helpful not only with graphics but AI as well.