Loonride

Members
  • Content Count

    29
  • Joined

  • Last visited

1 Follower

About Loonride

  • Rank
    Member

Contact Methods

  • Website URL
    https://loonride.com
  • Twitter
    Loonride

Recent Profile Visitors

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

  1. Could you give a few more details as to how you can make your own custom Pixi downscaling shader? Also, would you happen to know where to find the specs of how default Canvas downscaling is done? Another option might be some sort of step-down downscaling, where I render a scaled down version to a canvas, then load that scaled down version in Pixi. Does that seem viable as well? https://ghinda.net/article/canvas-resize/ Edit: I have tried this method and it seems to fit my needs pretty well. But if you have any resources for what I was asking about above, I would still appreciate it.
  2. I've noticed that when images and text are scaled down a lot on normal canvas, they look a lot better and more sharp than with default Pixi settings. How can I get images to scale down in Pixi in exactly the same way that they are scaled down on HTML5 canvas? Here is the code and results of a downscaling experiment. Note that the png image being tested is 256x256, scaling down to 50x50. I am hoping that I can get both images to look identical by altering my Pixi settings: Canvas code: const canvas = document.getElementById('viewport'); const context = canvas.getContext('2d'); make_base(); function make_base() { base_image = new Image(); base_image.src = 'asset/dude.png'; base_image.onload = function () { context.drawImage(base_image, 0, 0, 50, 50); } } Canvas result: Pixi code: const app = new PIXI.Application({ width: 200, height: 200, backgroundColor: 0xffffff, }); document.body.appendChild(app.view); const sprite = PIXI.Sprite.from('asset/dude.png'); sprite.width = 50; sprite.height = 50; app.stage.addChild(sprite); Pixi result:
  3. What I am going for is a 2d game that has irregular terrain vertices (without using square tiles ), like this: What is the most efficient way to accomplish this? I want the map to be large, and players will move around so that the visible vertices of this terrain will be changing.
  4. I have been working for a while on a game called loons.io (https://loons.io) using Phaser 3. Some people have said the game is very laggy for them, and there are some assumptions about performance that I made previously which probably led to frame rate drops for players. If you can give me advice on any of these questions, that would be very helpful. 1. Are large GameObjects.Graphics bad for performance? If I have a single, huge circle, most of which is not visible on the screen, will that cause any problems? Similarly, if I draw some polygons far from the origin of the GameObjects.Graphics, is that bad? Or should both of these things have a negligible effect? 2. Are tileSprites the best option for a repeating pattern that will not change? This is how I have the grid pattern in my game, then simply shift it by the dimensions of a single tile each time the player moves a certain threshold. 3. Will scaling up the canvas within CSS affect performance? I have a canvas container which I adjust to fit the screen, then I do width: 100% and height: 100% for the canvas. Is scaling up the canvas element different in any way from the options that the Phaser 2 ScaleManager provided? 4. How much does the actual size configuration of the game affect performance? For example, my game is currently at 720x1280. Would I recieve high performance benefits from 540x960, at the cost of quality on screens larger than those dimensions? 5. Does camera zoom affect performance? Obviously it will if more is being drawn as a result of zooming out. But what if you set a zoom of 0.5, then scale the dimensions and everything to 2 for all of your game objects, would it perform the same as zoom of 1 and scale of 1? 6. Ultimately, is Phaser 3 ready for rendering to the same extent that Phaser 2 was, or should I still be using Phaser 2 for things such as the ScaleManager or to avoid frame drops?
  5. What exactly does smoothing delta time mean? I realize that Phaser 3 has a varying timestep. Would you simply calculate dt yourself by doing dt = Date.now() - pastTime; pastTime = Date.now(); each time in your update loop? Also, as long as I'm never comparing client and server timestamps, clock drift should not matter, correct?
  6. I have some questions about my real-time multiplayer game. My game is already on the domain dinoman.io, but I think I need to redo how client prediction works. I sometimes notice that the movements of other players are quite choppy, and sometimes slower than the speed that they are supposed to be. Here is what I am currently doing: I get the dt from the Phaser update loop: update(timestep, dt) When the player presses an arrow key, I move them to a new position by the distance: speed * dt I then send their new position to the server at the end of that update loop The server checks that their speed is legitimate like this: It adds up the distance that they travel for a few seconds, then takes that distance and compares it to the time that passed on the server to see if it closely resembles the speed that the player should have had. However, I have to add some extra allowable distance to make sure that normal players aren't labelled cheaters. I thought this would be the best way to fight cheaters, but I'm wondering if there are better ways. The server sends out the players new position to all other clients The other clients do not move this player to that exact position in their update loop, but rather use their own dt in their update loop and the knowledge that this player should have a certain speed to move this player smoothly. If the predicted player position becomes too far away from the real position, the predicted position moves just far enough so that it is not too far away from the real position. This method seems to work most of the time, but there are times where I still see choppy movements from players, maybe because they are using really low-end devices. I almost never see choppy movements of players in popular IO games, and I am wondering where I went wrong. I mentioned that I sometimes see players moving slower than expected. Shouldn't multiplying speed * dt in their client always fix this problem, regardless of how low-end their device is? I want to say that there are times when it seems I move slower than the speed I have set when I start playing my game, but maybe that is rendering lag or something. How could the dt possibly be wrong? Thanks for the help, I know this is a lot!
  7. Here is how I solve this. I adjust the predicted position of an opponent when it runs into a wall in the same way that I adjust your own players position without going through walls. I am doing collision checking for the opponent predicted positions as well for your own player (but only if in visible area). I always try to keep the predicted position within a certain range of the actual position. If an opponent's predicted position starts getting out of that range, I move it the minimum distance possible to get it back into that range, account for any collision. So the most choppy parts are when an opponent changes directions, but choppy movement is minimized by having this acceptable range of inaccuracy.
  8. Check out my new video about my one week Slither.io project with JavaScript and Phaser!
  9. Part 7 is here, concluding our series: https://loonride.com/learn/phaser/slither-io-part-7 Check out the demo: https://loonride.com/examples/slither-io/slither-io/ Thanks for the support throughout the series! Let me know if you want to see more tutorials like these ones.
  10. Part 6 of my tutorial series on making Slither.io is here! https://loonride.com/learn/phaser/slither-io-part-6 Check out the demo: https://loonride.com/examples/slither-io/part-6/ Enjoy!
  11. Part 5 of our series has arrived: https://loonride.com/learn/phaser/slither-io-part-5 Also check out the demo for this part: https://loonride.com/examples/slither-io/part-5/ In this part you will learn how to add those awesome eyes to your snakes!
  12. The page must have just taken too long to send a response or load. Let me know if it happens again.
  13. Part 4 of making Slither.io with Phaser is here: https://loonride.com/learn/phaser/slither-io-part-4. Check out the demo for this part: https://loonride.com/examples/slither-io/part-4/. In this part you will learn how to recreate the unique collisions seen in Slither.io.
  14. Parts 2 & 3 of my new series, How to make Slither.io with Phaser, are here! Part 2 - Creating your first snake: https://loonride.com/learn/phaser/slither-io-part-2 Part 3 - Extending snakes to be players or bots: https://loonride.com/learn/phaser/slither-io-part-3 Enjoy!