Vainly

Members
  • Content Count

    5
  • Joined

  • Last visited

  1. Collision works fine now. Thank you! For the display bug, is this a problem with Phaser or is it something I can fix? Vainly
  2. 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
  3. 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
  4. 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