Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Phaser 3.11 "Leafy" problem with renderTexture and collision shapes

Vainly

By Vainly,
in 2D

 Share

Recommended Posts

Vainly Newbie

Vainly

Posted
Posted

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

 

Link to comment
Share on other sites
Vainly Newbie

Vainly

Posted
  • Author
Posted
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

Link to comment
Share on other sites
AndreasLoew Newbie

AndreasLoew

Posted
Posted

> 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.

 

 

 

Link to comment
Share on other sites
Vainly Newbie

Vainly

Posted
  • Author
Posted 
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

Link to comment
Share on other sites
AndreasLoew Newbie

AndreasLoew

Posted
Posted

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...