• Content count

  • Joined

  • Last visited

1 Follower

About Jerorx

  • Rank
    Advanced Member

Contact Methods

  • Website URL
  • Twitter

Profile Information

  • Location

Recent Profile Visitors

1,076 profile views
  1. Well actually, this I haven't found out yet. Images land in the texture manager, so that's where events could come from that we could listen to, but I haven't succeeded yet to track down which event emitter would be relevant. Maybe @rich can chime in at some point.
  2. Pathfinding in itself, using a library, is relatively easy. But I had requests about how to actually set up the whole pipeline: starting from a tileset, specifying obstacles and costs, computing a path, and then actually moving the character along the path. This tutorial aims to explain all of that. Let me know if something is not clear or should be discussed in a bit more depth. Click here for the tutorial Click here for the demo Click here for the code
  3. I have written a tutorial on how to load tilemaps on the fly in Phaser 3. The tutorial focuses on a specific application of this, which is loading "chunks" of a big tilemap depending on the player position, in order to avoid loading the entire map. This is useful if you have a big open world in your game. Click here for the tutorial Click here for the code Click here for the demo
  4. Jerorx

    Capturing very large stage as image

    Works perfectly, thanks!
  5. Jerorx

    Capturing very large stage as image

    I'm sorry but I don't get it! You mean I should use a different root container than what I am using now (or do you denote something else by "root")? Could you elaborate? I really don't see what I could do regarding the root container. At the moment I'm already changing the scale parameters of the root container (e.g. stage.scale.x = 0.1, stage.scale.y = 0.1), and visually it works, but is not reflected in the extraction. Thanks for your great help so far!
  6. Jerorx

    Capturing very large stage as image

    Wonderful, now it works! Thanks! While I am at it, I now have a question. The image extraction ignores the scale parameter of the stage (or the resolution parameter of the renderer). Even if I display the chunks at 0.01 scale, the generated pictures will be full size (e.g. the width for a batch of 15 chunks will be 14400 instead of the intended 144). Is there a way to make the extraction take the scale into account?
  7. I'm trying to capture the map of my game as a png image. The map is composed of 32x32 tiles, has a width of 1500 tiles and a height of 1140 tiles (48000x36480 pixels in total). I don't actually display it in full, but by "chunks". Each chunk has a dimension of 30x20 tiles, and consists in a PIXI.Container object storing one sprite for each tile of the chunk (in multiple layers). There are 2850 chunks in total. The map is quite big, and displaying all chunks simultaneously makes the browser crash. In any case, capturing the whole map at once wouldn't be possible I think because its dimensions would exceed WebGl MAX_TEXTURE_SIZE parameter. So my goal instead is to display batches of a few hundred chunks, one batch at a time, and capture them in pictures. I don't mind having my world map split in multiple pictures, on the contrary. So the process consists in the following steps (slightly simplified): for(var i = 0; i < last_batch; i++){ removeAll(); // removes currently displayed chunks, if any displayBatch(i); // displays 200 chunks of interest captureScene(); // captures the scene as an image } Here is my captureScene() method: captureScene(){ Engine.renderer.extract.canvas(Engine.stage).toBlob(function(b){ var a = document.createElement('a'); document.body.append(a); = 'map.png'; a.href = URL.createObjectURL(b);; a.remove(); }, 'image/png'); }; It works, except that (in both the latest Chrome and Firefox quantum), after a few batches it eventually crashes ("WebGl has lost context") so that I never manage to capture everything. Even with batches of 25 chunks instead of 200, it eventually crashes. I was wondering if any of you might have ideas to improve this process, or an altogether different solution, based on your experience and knowledge of Pixi. Maybe there is a more efficient way to capture the scene? Alternatively, any tips that could help me diagnose better why it is crashing are also welcome. In case you are wondering, here are the steps I perform when removing a chunk: chunk.destroy({ children: true, texture: false, baseTexture: false }); Engine.stage.removeChild(chunk); I destroy the objects but preserve the textures son they can be reused for subsequent batches. Again, let me know if you see any improvements on this front (in terms of memory management for example). I'm interested in any comments!
  8. Sorry for the delay in replying! If I understand what you ask correctly, then you need to stop the ongoing tween before starting another one. I kept it simple for the tutorial, but you could easily add this by storing the tween somewhere, e.g. player.tween = game.add.tween(player) and then at the beginning of movePlayer(), do: if(player.tween) player.tween.stop()
  9. Jerorx

    PhaserQuest - Roleplay Mod

    From the screenshot it seems to be very nice work, I had completely missed it so far, so when you mentioned it in your issue in Phaser Quest's code I didn't know what you were talking about at the time! However I was only able to check the screenshot, because on my laptop the game doesn't load, regardless of the browser I use; it remains stuck on "creating world ... ". Didn't check on mobile. In any case, I'll feature it in the "related work" section of the Phaser Quest page! PS: It's Jerome, not Jeremy.
  10. Jerorx

    Ensemble, a collaborative multiplayer game project

    Yes good point. I have in mind for future projects to use node-webkit, where UDP-based communication becomes possible, but while we remain in the browser (as is the case with Ensemble), this is indeed not possible. I'll update the post.
  11. Hi, I'd like to present Ensemble, an experiment in crowd design, where players, developers and artists can collaborate to collectively design a browser-based multiplayer online game. This is a very experimental project to see what can emerge from pushing the collaborative aspect of a project to the max. This project is collaborative in the sense that it is the community, and the community only, who decides how the game should evolve. Copied from the page of the game, here is a short description of the three main channels for this process: Suggesting and voting for features. Anyone can make suggestions about a feature to add to the game (with a simple embedded form, without the need to login or anything, no friction). A list of the suggested features (located below the game canvas) allows to vote for or against each of them. On a regular basis, one of the top-ranked features of the moment is selected and implemented. Making Pull Requests. Developers can choose to bypass this process, and directly implement themselves the changes they would like to see in the game. These changes can be submitted through Github pull requests. Pull requests are accepted unconditionally, provided they don’t contain anything inappropriate and work properly. Submitting art. A form is provided to enable artists to send me artwork that they would like to see added to the game, such as sprites or animations. For these as well, submissions are accepted unconditionally. For a more detailed description, as well as links to both the source code and the game itself, I refer you to the main page of the project. At the moment, the "game" consists in moving colored dots around, and dropping white blocks that serve as obstacles. This is still very basic, as only a handful of features have been suggested and implemented yet. You are free to jump in and attempt to shape the evolution of the game! In any case, this could be a valuable learning experience for those: - Interested in learning more about Phaser by experimenting and contributing to an existing project - Interested in learning how to make a multiplayer online game with Node.js and (This is why I posted it here and not in the "games showcase" or "Phaser" sections : the game itself is only one part of a bigger experience ; and although the client is made using Phaser, the project involves other technologies of possible interest to a wider audience.) Feedback if welcome of course. Below, a screenshot of what the game looks like at the moment.
  12. Hi, So I have a loop that checks the position of a moving sprite every 100ms. At each iteration, it computes how many milliseconds elapsed since last check (it's normally 100 but it varies a bit), computes the euclidean distance between the current position and the previous one, and compares it to the maximum distance that the sprite could have traveled given its speed and the elpased time. See below: function myFunction(){ // nevermind variables showing up out of nowhere, assume everything global or sth, not the point var currentData = { x: sprite.position.x, y: sprtie.position.y, stamp: }; var deltaT = (currentData.stamp - lastData.stamp); var euclideanDistance = Math.floor(Math.sqrt(Math.pow(lastData.x - currentData.x, 2) + Math.pow(lastData.y - currentData.y, 2))); var maxDistance = Math.ceil(shipSpeed * (deltaT / 1000)); if(euclideanDistance > maxDistance) console.log('alert!'); lastData = currentData; // it's actually cloned, but that's not the point } The velocity of the sprite is set in the update loop using: game.physics.arcade.velocityFromAngle(angle, shipSpeed, Game.playerSprite.body.velocity); (based on the key pressed, the angle is computed, and from the angle, the velocity). My understanding of velocity in Phaser is that it should remain the same and that it's adjusted for the frame rate, therefore the distance traveled per millisecond should remain the same. This is actually the case most of the time in normal conditions. But when I run this in my laggy Firefox, very often do I get values for `euclideanDistance` that exceed the `maxDistance`, sometimes by as much as 5. Even though I ceil() the maxdistance and floor() the euclideanDistance, to avoid mismatches of 1 or 2 pixels. For concrete values, the value of shipSpeed is 250. In 100ms it is supposed to travel a distance of 25, yet I regularly get 29 for example. (Btw my function doesn't often ticks at 100ms, the deltaTime is often as low as 83 ms or as high as 105ms, but that's plainly explainable by lag I guess.) Therefore it seems that the lag and variations in FPS affect the distance traveled, but not systematically. It's a bit puzzling. Or is it something else? Am I computing my variables wrong? Am I missing misunderstanding something about the physics? Any idea about an explanation and, possibly, a fix, to enforce that the distance traveled is always the same, down to the pixel, no matter what?
  13. Jerorx

    Game list of phaser games

    I'm adding Phaser Quest to the list, a top-down real-time multiplayer adventure made with Phaser and Explore the map, find better equipment, fight monsters and defeat the final boss, alone or with friends! It was for me a practice project, and is a reproduction of Mozilla's Browserquest. If you click on the link, you'll find further details, including a link to the game, a link to the source code and a listing of the libraries I used. For more screenshots, I think Rich has done an amazing jobs at taking a few that capture the game experience, you can see them in his post about Phaser Quest. Thanks a ton by the way!
  14. Jerorx

    Phaser Quest

    @samme It wasn't, but I just added it now because it's a nice idea @NicoA Yes, it's a strange behavior of the input plugin. To be honest I didn't put a lot of effort into the mobile aspect, because I considered it only at the end, and I should have thought more about it since the beginning (because it's not only a matter of scaling and a few lines of Phaser code, ideally the whole game interface has to adapt depending on the device size). It's a good lesson actually. Because of this I didn't really investigate this strange behavior yet. I may do it in the near future!
  15. Jerorx

    Phaser Quest

    I remade it with Phaser indeed. For Browserquest, they did it from scratch.