squilibob

Members
  • Content count

    105
  • Joined

  • Last visited

About squilibob

  • Rank
    Advanced Member

Recent Profile Visitors

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

  1. squilibob

    Inverted mask

    You can use .mask.invertAlpha = true
  2. squilibob

    Word wrap in Phaser 3+

    wordWrap is an object var style = = { fontSize: 24, fontFamily: 'Arial', align: "left", wordWrap: { width: 450, useAdvancedWrap: true } }
  3. squilibob

    Using a simple spritesheet animation without key

    I would guess that you need to define which frames to use in your animation this.anims.create({ key: 'stand', frames: this.anims.generateFrameNumbers(this.asset, { start: 0, end: 10, first: 10 }), frameRate: 5, repeat: -1 });
  4. squilibob

    Scene not defined.

    <script type="module" src="js/testmain.js"></script> Is this the name of your file? You said it was main.js not testmain.js?
  5. squilibob

    Mask following player

    You can add all your layers to a container and set the Mask on the container
  6. squilibob

    Rounded Rectangle

    Not that I can find? I thought it would be a simple approach like passing in an array of points to make a polygon but it seems that it's up to the coder to use lineTo and arc to make their own rounded rect? You can make a helper function to do it manually. Starting from the middle of one of the sides you can construct it by either defining each of the corners in order all the way around or making an array that can programmatically do that work for you if you like the functional approach. The below demos the latter but it's computationally more expensive just for the sake of being functional programming: this.rounded = function(x, y, width, height, radius, color) { if (+width < radius * 2 || +height < radius * 2) return this.add.graphics({ fillStyle: { color: color}, x: +x, y: +y}) let options = Array.from({length: 4}, (_, index) => ({ radians: (index * Math.PI / 2 + Math.PI) % (2 * Math.PI), x: +x + (((index + 1) & 2) >> 1) * +width, y: +y + ~~(index > 1) * +height, lx: radius * ~~((index-2) * ((index-2) & 1)), ly: radius * ~~-((index + 1) & 1), ax: radius * (~((index + 1) & 2) + 2), ay: radius * (~~(index < 2) || -1) })) let shape = this.add.graphics({ fillStyle: { color: color}, x: +x, y: +y}) .beginPath() .moveTo(+x, +y + height >> 1) options.forEach((current, index, arr) => { shape .lineTo(current.x + current.lx, current.y + current.ly) .arc(current.x + current.ax, current.y + current.ay, +radius, current.radians, arr[index < arr.length - 1 ? index + 1 : 0].radians) }) return shape .closePath() .fillPath() } let myRect = this.rounded(50, 50, 400, 200, 20, 0xff8000)
  7. squilibob

    Jump animation while the character is jumping

    If you change your walking animation to include a check to see if the sprite is on the floor then it should work this.mario.body.onFloor() && this.mario.play('walk', true);
  8. squilibob

    Help with accessing a containers children

    Did you call .setInteractive() on the sprites or on the container?
  9. squilibob

    Mask following player

    let mask = this.make.graphics({ fillStyle: { color: 0x000000 }, add: false}) .fillCircleShape(new Phaser.Geom.Circle( 100, 100, 100 )
  10. squilibob

    Mask following player

    you should set the mask like so: fondo.setMask(new Phaser.Display.Masks.BitmapMask(this, mask))
  11. squilibob

    Playing GIFs in Phaser 3

    I have investigated converting gifs to spritesheets at runtime and it seems every solution that I've come across involves using imagemagic. If you're not getting the gif from an external source then you should use a spritesheet.
  12. Can a spritesheet be loaded in the scene config or does it need to be in preload? I have a spritesheet that I have set up in my preload function preload: function() { this.load.spritesheet({ key: 'defaultavatars', url: '/img/avatars.png', frameConfig: { frameWidth: 256, frameHeight: 256, endFrame: 49 } }) } Is there a way I can add it in the scene config using the new pack declaration? pack: { files: [ { type: 'image', key: 'defaultavatars', url: 'img/avatars.png', frameConfig: { frameWidth: 256, frameHeight: 256, endFrame: 49 }} ] }
  13. squilibob

    How does setCORS work

    It works fine opening directly. https://cdn.betterttv.net/emote/55b49352120a3d66411fafd6/1x For now I'm just using a CORS proxy but I was under the assumption that the .setCORS() function would allow me to use it in webgl/canvas. I just don't know what to set it to. I've tried: this.load.setCORS('anonymous') this.load.setCORS('Anonymous') this.load.setCORS(true)
  14. squilibob

    How does setCORS work

    I am trying to use an image hosted on a CDN that requires CORS . This works in Phaser 2 by setting game.load.crossOrigin = 'anonymous'; but in Phaser 3 I cannot get this to work. I can set crossOrigin by using .setCORS in my scene config or on the image being loaded itself but I must be using it incorrectly because I still get the (CORS header 'Access-Control-Allow-Origin' missing) error.
  15. squilibob

    Really Basic Setup question

    You most likely just want the phaser.js file and don't need the zip. You can download it from https://github.com/photonstorm/phaser/releases/download/v3.3.0/phaser.js Once you've done that you can just put the phaser.js file in the directory that you are putting your tutorial files.