Vainly

Phaser 3.11 "Leafy" problem with renderTexture and collision shapes

Recommended Posts

Hello,

The answers to my questions may seem evident, please consider I'm a complete beginner to HTML and JS Phaser coding.

I am having two problems with my code. The first is that renderTexture doesn't seem to work. I am trying to make a trail of my player, like the "trail" example on labs.phaser.io. I actually copied the code needed, but it does not work. Here is the line causing the problem:

rt = this.make.renderTexture({ x: 0, y: 0, width: 800, height: 800 }).setOrigin(0, 0);

in the create function.

And here is what the console says:

Uncaught TypeError: this.make.renderTexture is not a function
    at Scene.create ((index):301)
    at SceneManager.create (phaser.js:51412)
    at SceneManager.loadComplete (phaser.js:51329)
    at LoaderPlugin.emit (phaser.js:2622)
    at LoaderPlugin.processComplete (phaser.js:111210)
    at LoaderPlugin.removeFromQueue (phaser.js:111190)
    at LoaderPlugin.processUpdate (phaser.js:111171)
    at Image.data.onload (phaser.js:8947)

_____________

The second issue affects the collision boxes of my obstacles. Those are static sprites, and the physics are "MatterJS".

I have defined the shape of the hitboxes in PhysicsEditor, and have done exactly like in their tutorial to link the JSON to the sprites, but it doesn't work: the collision is not only triggered when the player enters the parts in the shape, but also in the rest of the rectangle that should not be considered. Furthermore, all physical properties I've set in the editor don't work.

Then, I tried to do all of it without physicsEditor: I added required setters to do the work. While the physical properties are now correct, the hitboxes are still the whole rectangles instead of the chosen parts. Here is the code:

//example
var ob12 = this.matter.add.sprite(800-211, -6353, 'ob12').setStatic(true).setSensor(true).setFriction(0,0,0).setInteractive(new Phaser.Geom.Polygon([
					[ { "x":132, "y":291 }, { "x":337, "y":498 }, { "x":423, "y":2 } ],
					[ { "x":50, "y":789 }, { "x":239, "y":979 }, { "x":337, "y":498 } ],
					[ { "x":0, "y":1220 }, { "x":423, "y":1639 }, { "x":239, "y":979 } ],
					[ { "x":239, "y":979 }, { "x":423, "y":1639 }, { "x":337, "y":498 } ],
					[ { "x":337, "y":498 }, { "x":423, "y":1639 }, { "x":423, "y":2 } ]
				]), Phaser.Geom.Polygon.Contains);

Thank you,

Vainly

 

Share this post


Link to post
Share on other sites
Quote
3 hours ago, AndreasLoew said:

can't help you with the first issue - but for the collision issue please take a look at our tutorial here: https://www.codeandweb.com/physicseditor/tutorials/how-to-create-physics-shapes-for-phaser-3-and-matterjs

 

 

Thank you for the answer. I've solved the first issue by using another way to get the trail. However, for the second one, I've done everything like in the tutorial, however, the properties did not apply, so that I think it did not load correctly. Here is the code:

preload () {
        this.load.image('bg', 'assets/bg.jpg');
        this.load.image('arrowLeft', 'assets/physics/arrowLeft.png','assets/physics/physicshapes.json');
        this.load.image('arrowStraight', 'assets/physics/arrowStraight.png','assets/physics/physicshapes.json');
        this.load.image('arrowRight', 'assets/physics/arrowRight.png','assets/physics/physicshapes.json');
        this.load.image('ob1', 'assets/physics/1.png','assets/physics/physicshapes.json');
        this.load.image('ob2', 'assets/physics/2.png','assets/physics/physicshapes.json');
        this.load.image('ob3', 'assets/physics/3.png','assets/physics/physicshapes.json');
        this.load.image('ob4', 'assets/physics/4.png','assets/physics/physicshapes.json');
        this.load.image('ob5', 'assets/physics/5.png','assets/physics/physicshapes.json');
        this.load.image('ob6', 'assets/physics/6.png','assets/physics/physicshapes.json');
        this.load.image('ob7', 'assets/physics/7.png','assets/physics/physicshapes.json');
        this.load.image('ob8', 'assets/physics/8.png','assets/physics/physicshapes.json');
        this.load.image('ob9', 'assets/physics/9.png','assets/physics/physicshapes.json');
        this.load.image('ob10a', 'assets/physics/10a.png','assets/physics/physicshapes.json');
        this.load.image('ob10b', 'assets/physics/10b.png','assets/physics/physicshapes.json');
        this.load.image('ob11', 'assets/physics/11.png','assets/physics/physicshapes.json');
        this.load.image('ob12', 'assets/physics/12.png','assets/physics/physicshapes.json');
        this.load.image('obs2', 'assets/physics/obs2.png');
        this.load.image('trail', 'assets/particles/trail.png');
    
        this.load.audio('civitron', 'assets/audio/Vainly.mp3');
        this.load.audio('death', 'assets/audio/death.mp3');
        this.load.json('shapes', 'assets/physics/physicshapes.json');
    }

create () {
        //...
        var shapes = this.cache.json.get('shapes');
        //...
        //one of the concerned sprites
        var ob1 = this.matter.add.sprite(800-83, -939, 'ob1');
        //...
}

and here is the generated JSON (physicshapes):

{
	"1": {
		"type": "fromPhysicsEditor",
		"label": "v1",
		"isStatic": true,
		"density": 0,
		"restitution": 0,
		"friction": 0,
		"frictionAir": 0,
		"frictionStatic": 0,
		"collisionFilter": {
			"group": -1,
			"category": 1,
			"mask": 255
		},
		"fixtures": [
			{
				"label": "v1Fixture",
				"isSensor": true,
				"vertices": [
					[ { "x":6, "y":169 }, { "x":169, "y":331 }, { "x":169, "y":5 } ]
				]
			}
		]
	},
	"2": {
		"type": "fromPhysicsEditor",
		"label": "v2",
		"isStatic": true,
		"density": 0,
		"restitution": 0,
		"friction": 0,
		"frictionAir": 0,
		"frictionStatic": 0,
		"collisionFilter": {
			"group": -1,
			"category": 1,
			"mask": 255
		},
		"fixtures": [
			{
				"label": "v2Fixture",
				"isSensor": true,
				"vertices": [
					[ { "x":10, "y":422 }, { "x":305, "y":716 }, { "x":282, "y":147 } ],
					[ { "x":224, "y":87 }, { "x":282, "y":147 }, { "x":305, "y":5 } ],
					[ { "x":282, "y":147 }, { "x":305, "y":716 }, { "x":305, "y":5 } ]
				]
			}
		]
	},
	"3": {
		"type": "fromPhysicsEditor",
		"label": "v3",
		"isStatic": true,
		"density": 0,
		"restitution": 0,
		"friction": 0,
		"frictionAir": 0,
		"frictionStatic": 0,
		"collisionFilter": {
			"group": -1,
			"category": 1,
			"mask": 255
		},
		"fixtures": [
			{
				"label": "v3Fixture",
				"isSensor": true,
				"vertices": [
					[ { "x":261, "y":265 }, { "x":0, "y":3 }, { "x":0, "y":525 } ]
				]
			}
		]
	},
	"4": {
		"type": "fromPhysicsEditor",
		"label": "v4",
		"isStatic": true,
		"density": 0,
		"restitution": 0,
		"friction": 0,
		"frictionAir": 0,
		"frictionStatic": 0,
		"collisionFilter": {
			"group": -1,
			"category": 1,
			"mask": 255
		},
		"fixtures": [
			{
				"label": "v4Fixture",
				"isSensor": true,
				"vertices": [
					[ { "x":7, "y":157 }, { "x":161, "y":312 }, { "x":161, "y":5 } ]
				]
			}
		]
	},
	"5": {
		"type": "fromPhysicsEditor",
		"label": "v5",
		"isStatic": true,
		"density": 0,
		"restitution": 0,
		"friction": 0,
		"frictionAir": 0,
		"frictionStatic": 0,
		"collisionFilter": {
			"group": -1,
			"category": 1,
			"mask": 255
		},
		"fixtures": [
			{
				"label": "v5Fixture",
				"isSensor": true,
				"vertices": [
					[ { "x":154, "y":157 }, { "x":0, "y":5 }, { "x":0, "y":312 } ]
				]
			}
		]
	},
	"6": {
		"type": "fromPhysicsEditor",
		"label": "v6",
		"isStatic": true,
		"density": 0,
		"restitution": 0,
		"friction": 0,
		"frictionAir": 0,
		"frictionStatic": 0,
		"collisionFilter": {
			"group": -1,
			"category": 1,
			"mask": 255
		},
		"fixtures": [
			{
				"label": "v6Fixture",
				"isSensor": true,
				"vertices": [
					[ { "x":243, "y":474 }, { "x":479, "y":236 }, { "x":244, "y":1 }, { "x":241, "y":1 }, { "x":6, "y":236 } ]
				]
			}
		]
	},
	"7": {
		"type": "fromPhysicsEditor",
		"label": "v7",
		"isStatic": true,
		"density": 0,
		"restitution": 0,
		"friction": 0,
		"frictionAir": 0,
		"frictionStatic": 0,
		"collisionFilter": {
			"group": -1,
			"category": 1,
			"mask": 255
		},
		"fixtures": [
			{
				"label": "v7Fixture",
				"isSensor": true,
				"vertices": [
					[ { "x":347, "y":1307 }, { "x":500, "y":1459 }, { "x":458, "y":1193 } ],
					[ { "x":2, "y":498 }, { "x":291, "y":792 }, { "x":500, "y":1 } ],
					[ { "x":175, "y":907 }, { "x":458, "y":1193 }, { "x":291, "y":792 } ],
					[ { "x":291, "y":792 }, { "x":458, "y":1193 }, { "x":500, "y":1 } ],
					[ { "x":458, "y":1193 }, { "x":500, "y":1459 }, { "x":500, "y":1 } ]
				]
			}
		]
	},
	"8": {
		"type": "fromPhysicsEditor",
		"label": "v8",
		"isStatic": true,
		"density": 0,
		"restitution": 0,
		"friction": 0,
		"frictionAir": 0,
		"frictionStatic": 0,
		"collisionFilter": {
			"group": -1,
			"category": 1,
			"mask": 255
		},
		"fixtures": [
			{
				"label": "v8Fixture",
				"isSensor": true,
				"vertices": [
					[ { "x":213, "y":217 }, { "x":0, "y":2 }, { "x":46, "y":386 } ],
					[ { "x":152, "y":497 }, { "x":46, "y":386 }, { "x":0, "y":649 } ],
					[ { "x":46, "y":386 }, { "x":0, "y":2 }, { "x":0, "y":649 } ]
				]
			}
		]
	},
	"9": {
		"type": "fromPhysicsEditor",
		"label": "v9",
		"isStatic": true,
		"density": 0,
		"restitution": 0,
		"friction": 0,
		"frictionAir": 0,
		"frictionStatic": 0,
		"collisionFilter": {
			"group": -1,
			"category": 1,
			"mask": 255
		},
		"fixtures": [
			{
				"label": "v9Fixture",
				"isSensor": true,
				"vertices": [
					[ { "x":294, "y":297 }, { "x":1, "y":2 }, { "x":0, "y":8 }, { "x":4, "y":586 } ],
					[ { "x":293, "y":875 }, { "x":4, "y":586 }, { "x":0, "y":1169 } ],
					[ { "x":0, "y":1169 }, { "x":4, "y":586 }, { "x":0, "y":8 } ]
				]
			}
		]
	},
	"10a": {
		"type": "fromPhysicsEditor",
		"label": "v10a",
		"isStatic": true,
		"density": 0,
		"restitution": 0,
		"friction": 0,
		"frictionAir": 0,
		"frictionStatic": 0,
		"collisionFilter": {
			"group": -1,
			"category": 1,
			"mask": 255
		},
		"fixtures": [
			{
				"label": "v10aFixture",
				"isSensor": true,
				"vertices": [
					[ { "x":292, "y":292 }, { "x":0, "y":0 }, { "x":0, "y":583 } ]
				]
			}
		]
	},
	"10b": {
		"type": "fromPhysicsEditor",
		"label": "v10b",
		"isStatic": true,
		"density": 0,
		"restitution": 0,
		"friction": 0,
		"frictionAir": 0,
		"frictionStatic": 0,
		"collisionFilter": {
			"group": -1,
			"category": 1,
			"mask": 255
		},
		"fixtures": [
			{
				"label": "v10bFixture",
				"isSensor": true,
				"vertices": [
					[ { "x":222, "y":223 }, { "x":0, "y":0 }, { "x":0, "y":443 } ]
				]
			}
		]
	},
	"11": {
		"type": "fromPhysicsEditor",
		"label": "v11",
		"isStatic": true,
		"density": 0,
		"restitution": 0,
		"friction": 0,
		"frictionAir": 0,
		"frictionStatic": 0,
		"collisionFilter": {
			"group": -1,
			"category": 1,
			"mask": 255
		},
		"fixtures": [
			{
				"label": "v11Fixture",
				"isSensor": true,
				"vertices": [
					[ { "x":0, "y":288 }, { "x":286, "y":572 }, { "x":286, "y":1 } ]
				]
			}
		]
	},
	"12": {
		"type": "fromPhysicsEditor",
		"label": "v12",
		"isStatic": true,
		"density": 0,
		"restitution": 0,
		"friction": 0,
		"frictionAir": 0,
		"frictionStatic": 0,
		"collisionFilter": {
			"group": -1,
			"category": 1,
			"mask": 255
		},
		"fixtures": [
			{
				"label": "v12Fixture",
				"isSensor": true,
				"vertices": [
					[ { "x":132, "y":291 }, { "x":337, "y":498 }, { "x":423, "y":2 } ],
					[ { "x":50, "y":789 }, { "x":239, "y":979 }, { "x":337, "y":498 } ],
					[ { "x":0, "y":1220 }, { "x":423, "y":1639 }, { "x":239, "y":979 } ],
					[ { "x":239, "y":979 }, { "x":423, "y":1639 }, { "x":337, "y":498 } ],
					[ { "x":337, "y":498 }, { "x":423, "y":1639 }, { "x":423, "y":2 } ]
				]
			}
		]
	},
	"arrowLeft": {
		"type": "fromPhysicsEditor",
		"label": "arrowLeft",
		"isStatic": false,
		"density": 0,
		"restitution": 0,
		"friction": 0,
		"frictionAir": 0,
		"frictionStatic": 0,
		"collisionFilter": {
			"group": 0,
			"category": 1,
			"mask": 255
		},
		"fixtures": [
			{
				"label": "arrowLeftFixture",
				"isSensor": true,
				"vertices": [
					[ { "x":1, "y":1 }, { "x":32, "y":88 }, { "x":63, "y":89 }, { "x":89, "y":61 }, { "x":88, "y":33 } ]
				]
			}
		]
	},
	"arrowRight": {
		"type": "fromPhysicsEditor",
		"label": "arrowRight",
		"isStatic": false,
		"density": 0,
		"restitution": 0,
		"friction": 0,
		"frictionAir": 0,
		"frictionStatic": 0,
		"collisionFilter": {
			"group": 0,
			"category": 1,
			"mask": 255
		},
		"fixtures": [
			{
				"label": "arrowRightFixture",
				"isSensor": true,
				"vertices": [
					[ { "x":91, "y":2 }, { "x":5, "y":34 }, { "x":5, "y":60 }, { "x":32, "y":87 }, { "x":58, "y":88 } ]
				]
			}
		]
	},
	"arrowStraight": {
		"type": "fromPhysicsEditor",
		"label": "arrowStraight",
		"isStatic": false,
		"density": 0,
		"restitution": 0,
		"friction": 0,
		"frictionAir": 0,
		"frictionStatic": 0,
		"collisionFilter": {
			"group": 0,
			"category": 1,
			"mask": 255
		},
		"fixtures": [
			{
				"label": "arrowStraightFixture",
				"isSensor": true,
				"vertices": [
					[ { "x":39, "y":1 }, { "x":1, "y":83 }, { "x":23, "y":85 }, { "x":78, "y":86 } ],
					[ { "x":19, "y":101 }, { "x":23, "y":85 }, { "x":1, "y":83 } ],
					[ { "x":60, "y":99 }, { "x":78, "y":86 }, { "x":54, "y":86 } ],
					[ { "x":39, "y":88 }, { "x":54, "y":86 }, { "x":23, "y":85 } ]
				]
			}
		]
	}
}

Yours sincerely,

Vainly

Share this post


Link to post
Share on other sites

However, for the second one, I've done everything like in the tutorial,

Hm.... really? 

Ok... there are several things that you have to fix...

1. Using 

this.load.json('shapes', 'assets/physics/physicshapes.json');

is enough to load the physics data. Adding 'assets/physics/physicshapes.json' to each image does not make sense nor work.

 

2. Try to give the physics shapes the same names as your sprites. Not "1" - use "ob1" instead.

3. Use a sprite sheet to speed up loading instead of loading many sprites manually. This also makes handling sprite much easier.

3. Use this to create a sprite with an attached physics shape:

this.matter.add.sprite(200, 50, 'sheet', 'crate', {shape: shapes.crate});

'crate' is the name of the sprite - in this case inside a sprite sheet

'shapes.crate' references the physics object.

 

 

 

Share this post


Link to post
Share on other sites
preload () {
        this.load.multiatlas('sprites', 'assets/json/sprites.json', 'assets/physics');
        this.load.image('bg', 'assets/bg.jpg');
        /*this.load.image('arrowLeft', 'assets/physics/arrowLeft.png');
        this.load.image('arrowStraight', 'assets/physics/arrowStraight.png');
        this.load.image('arrowRight', 'assets/physics/arrowRight.png');
        this.load.image('ob1', 'assets/physics/ob1.png');
        this.load.image('ob2', 'assets/physics/ob2.png');
        this.load.image('ob3', 'assets/physics/ob3.png');
        this.load.image('ob4', 'assets/physics/ob4.png');
        this.load.image('ob5', 'assets/physics/ob5.png');
        this.load.image('ob6', 'assets/physics/ob6.png');
        this.load.image('ob7', 'assets/physics/ob7.png');
        this.load.image('ob8', 'assets/physics/ob8.png');
        this.load.image('ob9', 'assets/physics/ob9.png');
        this.load.image('ob10a', 'assets/physics/ob10a.png');
        this.load.image('ob10b', 'assets/physics/ob10b.png');
        this.load.image('ob11', 'assets/physics/ob11.png');
        this.load.image('ob12', 'assets/physics/ob12.png');
        this.load.image('obs2', 'assets/physics/obs2.png');*/
        this.load.image('trail', 'assets/particles/trail.png');
    
        this.load.audio('civitron', 'assets/audio/Vainly.mp3');
        this.load.audio('death', 'assets/audio/death.mp3');
        this.load.json('shapes', 'assets/json/physic-shapes.json');
    }

 create () {
        iter = 0;
        gameOver = false;
        var shapes = this.cache.json.get('shapes');
        let music = this.sound.add('civitron');
        music.play();
        this.cameras.main.setBounds(0, -1000000000000000000000, game.config.width, 1000000000000000000000);
        this.matter.world.setBounds(0, -1000000000000000000000, game.config.width, 1000000000000000000000,1,true,true,false,false);
    
        bg = this.add.tileSprite(400,400,800,800,'bg').setScrollFactor(0);
        this.matter.add.sprite(800-83, -939,'sprites','ob1',{shape: shapes.ob1});
}

I have now a sprite sheet. However, I get this error:

Uncaught SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at JSONFile.onProcess (phaser.js:8811)
    at LoaderPlugin.<anonymous> (phaser.js:111122)
    at Set.each (phaser.js:10534)
    at LoaderPlugin.finishedLoading (phaser.js:111120)
    at LoaderPlugin.nextFile (phaser.js:111090)
    at AudioFile.onLoad (phaser.js:3563)

Is there some way to fix that?

Thanks,

Vainly

Share this post


Link to post
Share on other sites

Hi,

I've fixed some of the stuff including the outdated version of phaser you used.
I've also created new PhysicsEditor and TexturePacker project files.

The game seems to be fine now. The sprite collision shapes are currently displayed as convex hulls not as concave sprites - but this is a display bug as far as I know.

Best

Andreas

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.