lgibson02

Members
  • Content Count

    10
  • Joined

  • Last visited

About lgibson02

  • Rank
    Member
  • Birthday 09/17/2002

Recent Profile Visitors

293 profile views
  1. Frame Extruder Hello, this is a tool I have created to be used as an alternative to the tile-extruder by @mikewesthad. It works in the same way as his tool except it has a gui so it doesn't need to be called from a command line and there is no dependency on nodejs. For those who don't know, the tool is used for getting around the edge bleeding issues sometimes found when using spritesheets or tilemaps in Phaser 3. For example: Extrusion of a single tileset: Using the default settings. Frame size 16x16 and no margin or spacing. I posted about this tool briefly on the discord a few days ago but I figured I may as well post about it here on the forum as well so it can be found easier by people in the future. The program runs on Microsoft .NET 2.0 which is obviously only designed to run on Windows systems. However for using this program on other operating systems, my testing on a Debian system suggests Mono is able to run it quite nicely apart from a couple of minor control size issues. Here is a screenshot of the program running to show you what it looks like normally... Usage: Usage is very simple, before selecting an image to use as a "frame sheet" (which is just my term to describe both tilesets and spritesheets), set the extrusion options to what you need them to be. Select the frame sheet by dragging an image file into the drag area or select manually. A table of available extrusion options and their function: Use In Code: Because of the extrusion, the margin and spacing will need to be adjusted for everything to look right. If you had no margin and spacing before, margin will be 1px and spacing will be 2px. // for tilesets... const tileset = map.addTilesetImage("tileset", "tileset", 16, 16, 1, 2); // for a extruded 16x16 tileset // for spritesheets... this.load.spritesheet("enemy", "enemy.png", {frameWidth: 16, frameHeight: 16, margin: 1, spacing: 2}); // 16x16 extruded spritesheet Downloads: Source: https://github.com/lgibson02/FrameExtruder Binaries: https://github.com/lgibson02/FrameExtruder/releases
  2. lgibson02

    When to use Bitmap Text & Text?

    Bitmap text will also not size like normal text, it will become blocky or illegible if you try to use a size different from it's original. You might also have trouble displaying text that contains characters which are not in your image. Here for example the text has actually been set to "5¬5" but since ¬ is not in this font it is just missed out. I believe you can get around this by setting a fallback font to use for unknown characters but these won't fit with the style of the rest of the text. If you know exactly what you're using the text for perhaps we could give you better guidance.
  3. lgibson02

    MatterJS Body Size

    Hello, I've recently started to switch to using matterjs for physics rather than the built in arcade physics for my game as I have determined the latter is unsuitable for what I'm doing. However I'm having a hard time understanding how setting the size for a sprite body is supposed to work. I'll try to show what I mean. I have a player sprite, the dimensions for it's frame is 24x32. So without doing anything other than adding it as a matter sprite, this (the screenshot below) is the default body boundary as shown by matter's debug graphic, it's a rectangle which is the same size as the sprite (24x32). Now obviously I don't want it to be like this, I want the body to be just a bit smaller than the sprite. Now when I was in arcade physics I would do something like this: /* where this.collisionBounds is Phaser.Geom.Rectangle(5, 3, 12, 29) for Player class */ var b = this.collisionBounds; this.body.setSize(b.width, b.height); this.body.setOffset(b.x, b.y); For this I get this screenshot, which is perfect when I'm using arcade physics. However when I try to do the equivalant in matterjs, things get a bit weird for me. I use the following code: var x = this.x; var y = this.y; this.physics = this.level.matter.add.gameObject(this, {}); var b = this.collisionBounds; // this.collisionBounds is still Phaser.Geom.Rectangle(5, 3, 12, 29) (same as before) var spriteBody = Matter.Bodies.rectangle(b.x, b.y, b.width, b.height); // i know i should have a chamfer but I'm just leaving that out for now to make things easier to see this.physics.setExistingBody(spriteBody); this.physics.setFixedRotation(); this.physics.setPosition(x, y); and now i get this. This is the first point where I'm confused, I really can't figure out what is happening here. The body has shrunk slightly (by 1px?) and seems to have moved upwards realtive to the sprite. Now what's really strange is if I change the fifth line in the previous block of code to this: var spriteBody = Matter.Bodies.rectangle(0, 0, b.width, b.height) So that the x and y offset for the body is always (0, 0) it appears to have no effect at all: wuttt???? Now perhaps if we ignore our problems, they might just go away. Let's continue on to the next step anyway, add some sensors: this.physics = this.level.matter.add.gameObject(this, {}); var b = this.collisionBounds; var spriteBody = Matter.Bodies.rectangle(0, 0, b.width, b.height); var sensors = { bottom: Matter.Bodies.rectangle(0, (b.height * 0.5) + b.y, b.width * 0.5, 2, { isSensor: true}), left: Matter.Bodies.rectangle((-b.width * 0.5) - 1, (b.height * 0.1) + b.y, 2, b.height * 0.5, { isSensor: true }), right: Matter.Bodies.rectangle((b.width * 0.5) + 1, (b.height * 0.1) + b.y, 2, b.height * 0.5, { isSensor: true }), }; const compoundBody = Matter.Body.create({ parts: [spriteBody, sensors.bottom, sensors.left, sensors.right], friction: 0 }); this.physics.setExistingBody(compoundBody); this.physics.setFixedRotation(); this.physics.setPosition(x, y); Okay same thing as before, but now we have sensors. Another thing I'm confused about is why the sensors are centered about the center of the sprite but the main body isn't? This just makes no sense to me. So now I try changing this: var spriteBody = Matter.Bodies.rectangle(0, 0, b.width, b.height) back to: var spriteBody = Matter.Bodies.rectangle(b.x, b.y, b.width, b.height) now it actually has an effect (albeit an undesired one): Why is the main body now offset now we have added sensors. Why would this make a difference? I'm so confused. I feel like I've gone down a very long rabbit hole of misunderstanding. Can someone just please tell me how to get what I could easily get before in arcade physics and apply it to matterjs? Thanks very much.
  4. This is what I had eventually ended up doing but I thought there might be a 'proper' way to do it that I had missed. I guess not. Anyway thanks for the help.
  5. I've tried it out and it while it does change the width and height. It doesn't seem to change the displayWidth and displayHeight which I think is what matters. But I'm unable to change these without the sprite being stretched.
  6. I guess I should read the documentation better, I figured it might have been intended. So if this is the case, how can I also change the sprite size. So far my attempts to do this have just ended up stretching the sprite which is not what I want. Thank you, I do my best.
  7. Hello, I've recently started upgrading a game I'm making from Phaser 2 over to Phaser 3. While doing so, I've stumbled into a problem with using the .setCrop method for cropping sprites. The game is supposed to be a mario maker clone of sorts, so your supposed to be able to create and edit levels. In the level editor which is shown below in a screenshot you have a hotbar to contain different items you may place, each item is just a sprite of course. Sprites which are bigger than 16x16, such as the player sprite which is 24x32 must be cropped down to 16x16 so that they do not show outside of the hotbar slot. When I was writing the game in Phaser 2 this was easily achieved by doing something like this in the case of the player sprite: rect = new Phaser.Rectangle(4, 2, 16, 16); playerIcon.crop(rect); What this would do was display only a 16x16 part of the sprite and it would change the sprite size to 16x16 as well. This worked perfectly and would give me what is shown in the screenshot you see above. When changing to Phaser 3 I did something like this: playerIcon.setCrop(4, 2, 16, 16) However what I found was, while this does make it so that only a 16x16 part of the sprite is displayed, the sprite size still remains at 24x32. So all it's really doing is blanking out any pixel which is not in the specified area. This ends up causing problems with the appeared position of the sprite as shown here: Here is a crude diagram I made in microsoft paint: Believe it or not, I did actually spend a lot of time on that one. Since I would not like to show my game at this time but I would like to demonstrate my problem better I have made two (what should be) equivalent demos. One uses Phaser 2, the other uses Phaser 3. They should be exactly the same but as I've explained the playerIcon at the top left corner ends up in the wrong position. You can have a look at both demos for yourself here: Phaser 2 Demo Phaser 3 Demo I realise this may seem like a very small problem but I can't for the life of me figure this one out. Any help is appreciated, thank you very much.
  8. Yes that worked, thank you very much.
  9. lgibson02

    Phaser 3 and PixiJS

    It would appear so have a look at this: https://phaser.io/labs/phaser3-development-log-09
  10. Hi, I was working on a project when I discovered that the boundaries of a sprite obtained with sprite.getBounds() seem to stop updating if sprite.visible is set to false. I know Phaser is meant to stop rendering sprites when a sprite is invisible but surely it should still update things like this. Is this intentional behavior or is it a bug? Here's some code and a webpage if you don't understand what I mean: var game = new Phaser.Game(512, 512, Phaser.AUTO, "", {preload: preload, create: create, update: update, render: render}); var test; var key; function preload() { game.load.image("test"); } function create() { test = game.add.sprite(0, 0, "test"); key = game.input.keyboard.addKey(Phaser.Keyboard.V); key.onDown.add(toggleVisibility, this); } function update() { test.x = game.input.mousePointer.x; test.y = game.input.mousePointer.y; } function toggleVisibility() { test.visible = !test.visible; } function render() { var b = test.getBounds(); game.debug.text("Bounds = x:" + b.x + " y:" + b.y + " w:" + b.width + " h:" + b.height, 0, 16); game.debug.text("Position = x:" + test.x + " y:" + test.y, 0, 32); } A link to this code working is here, it's on a home server so it may go down. Web server is now offline since problem is solved. Press V key to toggle visiblity of sprite. Notice when invisible sprite bounds stop updating but position still follows mouse.