jdotr

Members
  • Content Count

    25
  • Joined

  • Last visited

About jdotr

  • Rank
    Member

Profile Information

  • Location
    San Francisco, CA
  1. I haven't verified this so there is definitely an aspect of "left to the reader" that's not great but I don't have the time to do it right now. Possibly somebody else can help fill in the gaps if necessary... If you look at an animation it's composed of a series of AnimationFrames. Those frames are just a a texture key + frame number (or name) (source). I believe when the animation manager updates the frame for a sprite it will result in .texture just being swapped to whichever texture is referenced by the texture key. When you switch between animations this should result in the same texture being used repeatedly (due to texture cache) and not a new texture being created every time. I believe that means once you've set the texture's filter to LINEAR / Nearest you won't need to do it again. This should be reasonably simple to test in your code by only calling sprite.texture.setFilter the first time you switch to a given animation (and subsequent uses of that animation should still look good). If that proves to be true then you should be able to just preemptively set the texture filter to LINEAR in your scene's create method (or any time after they're loaded). For example: class TestScene extends Phaser.Scene { constructor() { super({key: 'testscene'}) } preload() { // load whatever spritesheet you want to use for your animations this.load.spritesheet( 'animations_ss', 'http://example.com/spritesheet.png', ) } create() { // now that the loading is known to be finished go into the texture manager // for this scene and pull the spritesheet out const animSheet = this.textures.get('animations_ss') // then set the filter style for that texture animSheet.setFilter(Phaser.Textures.FilterMode.LINEAR) } } Again, I'm not positive that this is going to work but there is a reasonable chance it will. Good luck!
  2. jdotr

    Creating swiping mechanism

    If you look at your code you load the plugin as " Phaser3Swipe " (with spaces around it) but you try to load the plugin as "Phaser3Swipe" (no spaces). That means when you try to get the plugin to start it's not able to find it. To fix this you need to make sure you use the same name in preload and create: gameScene.preload = function() { // load the plugin this.load.plugin('Phaser3Swipe', Phaser3Swipe, true); // other scene loading code } gameScene.create = function() { // get the plugin, make sure you use the same name that you gave // it when loading it above: let plugin = this.plugins.get('Phaser3Swipe'); // load the plugin into this scene: plugin.cargar(this); // other scene creation code }
  3. jdotr

    Phaser 3 FAQs

    in the phaser-discord FAQ it's linked in the following line: "The phaser examples page is a rich source of code samples demonstrating various aspects of the Phaser framework." Is there a different way you think it should be referenced? You can suggest it here or make a PR directly to the FAQ!
  4. Somebody filed a ticket on this https://github.com/photonstorm/phaser/issues/3806 and I spoke with photonstorm. Basically "not planning on it right now, would be happy to take a PR." Subsequent commentary will be on the issue instead of here.
  5. jdotr

    Angle to mouse pointer on Phaser 3

    Haha, yea. This is because the trig associated with computing the angle between two points is based on the Unit Circle which starts with 0 degrees to the right: On a related note you might want to look into the v3 port of the weapon-plugin which can help you handle bullet pooling and lifecycle.
  6. jdotr

    Health component

    One thing worth thinking about / changing that would make this less hacky would be to decide if it hooks in via events emitted or getHealth calls. It would be pretty easy to make that configurable. P.S. Thanks @samme, since I haven't stated that explicitly.
  7. jdotr

    Health component

    Our powers combined (or something). I made a fixed/relative UI component that hooks into this Health mix: https://jdotrjs.github.io/demos/health-bar/index.html. The main caveat is that I used my nineslice plugin because I wanted to try it in a different context than I initially wrote it to test flexibility a bit. Anyway, it's definitely work-in-progress quality right now but folks are free to use it. I don't have it in a repo beyond the demos page (source direct link).
  8. Without more of your code it's difficult to track down as @samme is indicating so feel free to upload a zip or point us to a gist if it's longer than is easily readable in a post. One thing I would suggest verifying, though, is that you're actually successfully importing what you think you are. A common failure is that when you try to switch over to es6 imports is (for varying reasons) having the import fail to resolve and ending up with import { Foo } from './some_sample_module' "working" in that your build passes but if you were to add a console.log(Foo) statement you'd see that Foo is actually null which leads directly into: and can be quite annoying to track down. Good luck!
  9. jdotr

    Set canvas Orgin to center

    Starting in 3.11 you'll be able to use a Phaser-provided this.cameras.main.centerOn(0, 0). However, if you are using a currently released version (or are for some reason bound to something <3.11) you can use the following: function centerCameraOn(cam, x, y) { // figure out what the "center" of the camera is based // on its width/height var cx = cam.width / 2; var cy = cam.height / 2; // now update the camera scrollX/Y based on offset from // it's computed center cam.scrollX = -cx + x; cam.scrollY = -cy + y; } And then in your create method you'd call centerCameraOn(this.cameras.main, 0, 0). The working principle here is that the camera's relative position is controlled by changing how it is scrolled from its original location (scrollX / scrollY).
  10. jdotr

    Angle to mouse pointer on Phaser 3

    B3L7 is totally correct, you just need to convert your mouse pointer into your world space. Their example will work: You can also use getWorldPoint as referenced in
  11. jdotr

    Angle to mouse pointer on Phaser 3

    Hey, not sure if you asked this before or after talking about it on the discord server but the answer is basically: Compute the angle between your player and your cursor (Phaser.Math.Angle.Between) apply that rotation to your bullet object do some trig to figure out what your x/y velocity is for a given speed A bit of sample that does this is attached. index.html
  12. jdotr

    Phaser 3 Load Json File 404

    Awesome, I'm glad it worked out :)
  13. jdotr

    Phaser 3 Load Json File 404

    It's not possible to say whether or not this is correct without corresponding webpack config file and your project's directory structure. The way webpack(-dev-server) works is that it reads your config and the packages all the relevant content into a directory (or maps URL paths to file paths in your dev tree). For a host of reasons (deployment size, security, etc) webpack won't package or expose the files that it doesn't know need to be included. It's very possible (likely) that what you're seeing is webpack not knowing that your login.json file needs to be bundled into deployment. A second issue that may crop up with webpack is that it understands JSON natively and will often bundle an imported JSON file as a processed object instead of making it available by HTTP request. In other words if you have import atlasImage from './assets/atlasImage.png' import atlasKey from './assets/atlasKey.json' ... this.load.atlas('loginAtlas', atlasImage, atlasKey) then webpack will interpret that as an instruction that it should make atlasImage.png available via HTTP request process the file atlasKey.json and store the result into the object atlasKey which is obviously not what you want because passing that to load.atlas an object instead of a URL. If I were you I'd probably start without worrying with webpack or use one of the existing boilerplate projects that combines es6, webpack, and other modern JS tools into a configuration that is known to work together, e.g., like https://github.com/nkholski/phaser3-es6-webpack. If just using a prepackaged project to get started doesn't taste good I'd say step back for thinking of this as "my phaser code is bad" and more like "I should work through a webpack tutorial" tl;dr: I don't think your problem is the code based on what you've posted It's not really possible to tell without digging into your webpack config / project structure Honestly don't fight webpack right now unless you want to learn something else at the same time and use https://github.com/nkholski/phaser3-es6-webpack or similar good luck!
  14. jdotr

    Absolute position of sprite

    I don't know if these are the _right_ answers but the two things that come to mind: 1. Manually compute the world position by taking objects in scrollFactor(0) position and adding in .scrollX and .scrollY 2. If you have access to the camera for the scene you want to position things in you can use getWorldPoint. Both approaches should let you move between screen and world positioning.
  15. Phoser3 + Mouse Wheel I may be dumb and this already exists but I took some time this evening to sketch out what it'd take to get mousewheel support in v3. A demo is up that works in updated FF and Chrome. I'll circle back and fix the skeleton to work in IE so I can test there at some point since I forgot it doesn't support modules. 🙄 I'm happy to work with folks / take merges but won't be doing any more until I have a chance to think about how it fits in with the existing input model and see if @photonstorm would accept it upstream or if they've already got stuff going to implement it and what his concerns would be. Anyway, felt worth since most of the approach can be pulled out of phaser and applied in isolation. cheers! Edit: OH! if this doesn't work in your browser add a comment and let me know, mouse wheel events are ... pretty reasonable but it felt like there were maybe still some rough edges in how the events were surfaced.