jdotr

Members
  • Content Count

    26
  • Joined

  • Last visited

About jdotr

  • Rank
    Member

Profile Information

  • Location
    San Francisco, CA
  1. jdotr

    is Phaser 3 not for newbie?

    You don't have to split those scenes into different files but often the choice is made to do so because it's a good habit. As your games get larger keeping things in one file leads to very a confusing place where it's difficult to find the code you're looking for. Having them live in different files means that you can collect logically related code together and easy to locate when you need. To your specific questions: > What editor can help me easy detect wrong/error line code? My current ideal setup for phaser development is: yarn, webpack, eslint, Typescript, VS Code. Getting all of that running is probably not worth the effort until you have started to get familiar with Phaser. This video covers a pretty solid basic setup https://www.youtube.com/watch?v=wDOym-mXxO4 > Have more tutorials for newbie? Many questions I need learn. Example how to make multi scenes, etc @digitsensitive has a great list of tutorials above. In addition I'd say you should make sure to get hooked into the community so that you have a place to ask questions. The phaser community entails: this forum as well as the newsletter, slack, and discord. I find the real-time chat (discord + slack) to be particularly useful and suggest folks join one of those. Additionally we've got a couple of FAQs on maintained by the discord community which specifically addresses the early stages of learning Phaser and a super helpful/broad one maintained by Samme. > Should I remove Phaser 3 and back Phaser 2 for easy learn? Nah, Phaser3 is the future, isn't harder to learn than v2, and has a good community to support it. Anyway, welcome to the party 😀
  2. 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!
  3. 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 }
  4. 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!
  5. 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.
  6. 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.
  7. 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.
  8. 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).
  9. 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!
  10. 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).
  11. 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
  12. 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
  13. jdotr

    Phaser 3 Load Json File 404

    Awesome, I'm glad it worked out :)
  14. 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!
  15. 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.