• Content Count

  • 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. wordWrap is an object var style = = { fontSize: 24, fontFamily: 'Arial', align: "left", wordWrap: { width: 450, useAdvancedWrap: true } }
  3. 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. <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. You can add all your layers to a container and set the Mask on the container
  6. 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. 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. Did you call .setInteractive() on the sprites or on the container?
  9. let mask = this.make.graphics({ fillStyle: { color: 0x000000 }, add: false}) .fillCircleShape(new Phaser.Geom.Circle( 100, 100, 100 )
  10. you should set the mask like so: fondo.setMask(new Phaser.Display.Masks.BitmapMask(this, mask))
  11. 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. 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. 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. 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.