diff --git a/graphics/falling-scooters/README.md b/graphics/falling-scooters/README.md new file mode 100755 index 0000000..998fa44 --- /dev/null +++ b/graphics/falling-scooters/README.md @@ -0,0 +1,14 @@ +# Phaser 3 + MatterJS example + +This respository contains the example source code for the [How to create physics shapes for Phaser 3 and Matter JS](https://www.codeandweb.com/physicseditor/tutorials/how-to-create-physics-shapes-for-phaser-3-and-matterjs) tutorial. + +The tutorial explains: + +* How to build a scene with Phaser 3 and MatterJS physics +* How to create simple collision shapes like rectangles and circles +* How to automatically create complex physics shapes + +Screenshot of the example: + +![Phaser 3 Physics Demo with MatterJS](screenshot.png) + diff --git a/graphics/falling-scooters/assets/fruit-shapes.json b/graphics/falling-scooters/assets/fruit-shapes.json new file mode 100755 index 0000000..4a62221 --- /dev/null +++ b/graphics/falling-scooters/assets/fruit-shapes.json @@ -0,0 +1,175 @@ +{ + "banana": { + "type": "fromPhysicsEditor", + "label": "banana", + "isStatic": false, + "density": 0.1, + "restitution": 0.1, + "friction": 0.1, + "frictionAir": 0.01, + "frictionStatic": 0.5, + "collisionFilter": { + "group": 0, + "category": 1, + "mask": 255 + }, + "fixtures": [ + { + "label": "banana-fixture", + "isSensor": false, + "vertices": [ + [ { "x":107, "y":2 }, { "x":95.26110076904297, "y":0.6820602416992188 }, { "x":89, "y":6 }, { "x":94.2380142211914, "y":23.872116088867188 }, { "x":104, "y":22 } ], + [ { "x":4, "y":94 }, { "x":1, "y":105 }, { "x":23.985790252685547, "y":119.92895221710205 }, { "x":50, "y":128 }, { "x":27, "y":94 } ], + [ { "x":27, "y":94 }, { "x":50, "y":128 }, { "x":79, "y":123 }, { "x":102, "y":110 }, { "x":67, "y":83 } ], + [ { "x":67, "y":83 }, { "x":102, "y":110 }, { "x":118.56483459472656, "y":88.44049835205078 }, { "x":126, "y":66 }, { "x":123, "y":40 }, { "x":91, "y":48 } ], + [ { "x":123, "y":40 }, { "x":104, "y":22 }, { "x":94.2380142211914, "y":23.872116088867188 }, { "x":91, "y":48 } ] + ] + } + ] + }, + "cherries": { + "type": "fromPhysicsEditor", + "label": "cherries", + "isStatic": false, + "density": 0.10000000149011612, + "restitution": 0.1, + "friction": 0.10000000149011612, + "frictionAir": 0.009999999776482582, + "frictionStatic": 0.5, + "collisionFilter": { + "group": 0, + "category": 1, + "mask": 255 + }, + "fixtures": [ + { + "label": "cherry-left", + "isSensor": false, + "circle": { + "x": 38.67625899280576, + "y": 100.92661870503598, + "radius": 25.16224146143038 + } + }, + { + "label": "cherry-right", + "isSensor": false, + "circle": { + "x": 97.79568345323742, + "y": 102.95251798561152, + "radius": 25.16224146143038 + } + }, + { + "label": "cherry-stem", + "isSensor": false, + "vertices": [ + [ { "x":7, "y":8 }, { "x":32, "y":35 }, { "x":61, "y":36 }, { "x":85.0877685546875, "y":32.59856414794922 }, { "x":77, "y":19 }, { "x":58, "y":5 } ], + [ { "x":85, "y":13 }, { "x":77, "y":19 }, { "x":85.0877685546875, "y":32.59856414794922 }, { "x":93, "y":22 } ], + [ { "x":85.0877685546875, "y":32.59856414794922 }, { "x":61, "y":36 }, { "x":43, "y":58 }, { "x":41, "y":75 }, { "x":84.16690826416016, "y":53.778419494628906 } ], + [ { "x":90, "y":78 }, { "x":84.16690826416016, "y":53.778419494628906 }, { "x":41, "y":75 } ] + ] + } + ] + }, + "crate": { + "type": "fromPhysicsEditor", + "label": "create", + "isStatic": false, + "density": 0.7999999999999999, + "restitution": 0.1, + "friction": 0.10000000149011612, + "frictionAir": 0.009999999776482582, + "frictionStatic": 0.5, + "collisionFilter": { + "group": 0, + "category": 1, + "mask": 255 + }, + "fixtures": [ + { + "label": "crate-fixture", + "isSensor": false, + "vertices": [ + [ { "x":5, "y":9 }, { "x":5.115452766418457, "y":36.0355224609375 }, { "x":8.980462074279785, "y":36.376556396484375 }, { "x":120.61101531982422, "y":38.309059143066406 }, { "x":124, "y":36 }, { "x":124, "y":9 } ], + [ { "x":8, "y":128 }, { "x":123, "y":128 }, { "x":123, "y":105 }, { "x":120.15630340576172, "y":104.46891593933105 }, { "x":10.79928970336914, "y":103.67317962646484 }, { "x":7.73001766204834, "y":104.92362403869629 } ], + [ { "x":120.15630340576172, "y":104.46891593933105 }, { "x":120.61101531982422, "y":38.309059143066406 }, { "x":8.980462074279785, "y":36.376556396484375 }, { "x":10.79928970336914, "y":103.67317962646484 } ] + ] + } + ] + }, + "orange": { + "type": "fromPhysicsEditor", + "label": "orange", + "isStatic": false, + "density": 0.1, + "restitution": 0.1, + "friction": 0.10000000149011612, + "frictionAir": 0.009999999776482582, + "frictionStatic": 0.5, + "collisionFilter": { + "group": 0, + "category": 1, + "mask": 255 + }, + "fixtures": [ + { + "label": "orange-fixture", + "isSensor": false, + "circle": { + "x": 64.46043165467627, + "y": 67.0388489208633, + "radius": 61.12368896735685 + } + } + ] + }, + "ground": { + "type": "fromPhysicsEditor", + "label": "ground", + "isStatic": true, + "density": 0.10000000149011612, + "restitution": 0, + "friction": 0.10000000149011612, + "frictionAir": 0.009999999776482582, + "frictionStatic": 0.5, + "collisionFilter": { + "group": 0, + "category": 1, + "mask": 255 + }, + "fixtures": [ + { + "label": "", + "isSensor": false, + "vertices": [ + [ { "x":380, "y":524 }, { "x":351, "y":561 }, { "x":444, "y":549 } ], + [ { "x":754, "y":524 }, { "x":725, "y":561 }, { "x":833, "y":557 } ], + [ { "x":159, "y":524 }, { "x":132, "y":530 }, { "x":166, "y":537 } ], + [ { "x":857, "y":511 }, { "x":852, "y":534 }, { "x":942, "y":535 }, { "x":932, "y":517 }, { "x":890, "y":500 } ], + [ { "x":973, "y":533 }, { "x":961, "y":543 }, { "x":1200, "y":626 }, { "x":987, "y":535 } ], + [ { "x":1077, "y":448 }, { "x":1041, "y":513 }, { "x":1200, "y":626 }, { "x":1116, "y":448 } ], + [ { "x":459, "y":526 }, { "x":444, "y":549 }, { "x":610, "y":566 }, { "x":508, "y":524 } ], + [ { "x":1200, "y":340 }, { "x":1110, "y":346 }, { "x":1130, "y":416 }, { "x":1200, "y":626 } ], + [ { "x":626, "y":545 }, { "x":610, "y":566 }, { "x":725, "y":561 }, { "x":675, "y":542 } ], + [ { "x":1102, "y":360 }, { "x":1104, "y":379 }, { "x":1130, "y":416 }, { "x":1110, "y":346 } ], + [ { "x":250, "y":547 }, { "x":240, "y":566 }, { "x":351, "y":561 }, { "x":301, "y":542 } ], + [ { "x":182, "y":537 }, { "x":166, "y":537 }, { "x":201, "y":553 } ], + [ { "x":91, "y":388 }, { "x":77, "y":358 }, { "x":59, "y":340 }, { "x":0, "y":340 }, { "x":0, "y":626 }, { "x":87, "y":423 } ], + [ { "x":852, "y":534 }, { "x":833, "y":557 }, { "x":961, "y":543 }, { "x":942, "y":535 } ], + [ { "x":997, "y":522 }, { "x":987, "y":535 }, { "x":1200, "y":626 }, { "x":1041, "y":513 } ], + [ { "x":104, "y":456 }, { "x":87, "y":423 }, { "x":0, "y":626 }, { "x":106, "y":515 } ], + [ { "x":166, "y":537 }, { "x":132, "y":530 }, { "x":0, "y":626 }, { "x":201, "y":553 } ], + [ { "x":444, "y":549 }, { "x":351, "y":561 }, { "x":610, "y":566 } ], + [ { "x":106, "y":515 }, { "x":0, "y":626 }, { "x":113, "y":522 } ], + [ { "x":113, "y":522 }, { "x":0, "y":626 }, { "x":132, "y":530 } ], + [ { "x":201, "y":553 }, { "x":0, "y":626 }, { "x":240, "y":566 } ], + [ { "x":0, "y":626 }, { "x":1200, "y":626 }, { "x":610, "y":566 }, { "x":351, "y":561 }, { "x":240, "y":566 } ], + [ { "x":610, "y":566 }, { "x":1200, "y":626 }, { "x":833, "y":557 } ], + [ { "x":833, "y":557 }, { "x":1200, "y":626 }, { "x":961, "y":543 } ], + [ { "x":1116, "y":448 }, { "x":1200, "y":626 }, { "x":1130, "y":416 } ] + ] + } + ] + } +} diff --git a/graphics/falling-scooters/assets/fruit-sprites.json b/graphics/falling-scooters/assets/fruit-sprites.json new file mode 100755 index 0000000..d62aad2 --- /dev/null +++ b/graphics/falling-scooters/assets/fruit-sprites.json @@ -0,0 +1,146 @@ +{ + "textures": [ + { + "image": "fruit-sprites.png", + "format": "RGBA8888", + "size": { + "w": 1380, + "h": 1202 + }, + "scale": 1, + "frames": [ + { + "filename": "background", + "rotated": true, + "trimmed": false, + "sourceSize": { + "w": 1200, + "h": 960 + }, + "spriteSourceSize": { + "x": 0, + "y": 0, + "w": 1200, + "h": 960 + }, + "frame": { + "x": 1, + "y": 1, + "w": 1200, + "h": 960 + } + }, + { + "filename": "ground", + "rotated": true, + "trimmed": true, + "sourceSize": { + "w": 1200, + "h": 626 + }, + "spriteSourceSize": { + "x": 0, + "y": 339, + "w": 1200, + "h": 287 + }, + "frame": { + "x": 963, + "y": 1, + "w": 1200, + "h": 287 + } + }, + { + "filename": "banana", + "rotated": false, + "trimmed": true, + "sourceSize": { + "w": 128, + "h": 128 + }, + "spriteSourceSize": { + "x": 0, + "y": 0, + "w": 127, + "h": 128 + }, + "frame": { + "x": 1252, + "y": 1, + "w": 127, + "h": 128 + } + }, + { + "filename": "orange", + "rotated": false, + "trimmed": true, + "sourceSize": { + "w": 128, + "h": 128 + }, + "spriteSourceSize": { + "x": 1, + "y": 5, + "w": 127, + "h": 123 + }, + "frame": { + "x": 1252, + "y": 131, + "w": 127, + "h": 123 + } + }, + { + "filename": "cherries", + "rotated": true, + "trimmed": true, + "sourceSize": { + "w": 128, + "h": 128 + }, + "spriteSourceSize": { + "x": 5, + "y": 3, + "w": 120, + "h": 125 + }, + "frame": { + "x": 1252, + "y": 256, + "w": 120, + "h": 125 + } + }, + { + "filename": "crate", + "rotated": false, + "trimmed": true, + "sourceSize": { + "w": 128, + "h": 128 + }, + "spriteSourceSize": { + "x": 3, + "y": 7, + "w": 123, + "h": 121 + }, + "frame": { + "x": 1252, + "y": 378, + "w": 123, + "h": 121 + } + } + ] + } + ], + "meta": { + "app": "https://www.codeandweb.com/texturepacker", + "version": "3.0", + "smartupdate": "$TexturePacker:SmartUpdate:0d0bce26c10ae31fb56fffa698e98974:1f8e7cbe61cf17088e7b8ba8bd089be7:25f385b2bb08c04649fd253213a50a44$" + } +} diff --git a/graphics/falling-scooters/assets/fruit-sprites.png b/graphics/falling-scooters/assets/fruit-sprites.png new file mode 100755 index 0000000..af1a6a6 Binary files /dev/null and b/graphics/falling-scooters/assets/fruit-sprites.png differ diff --git a/graphics/falling-scooters/assets/scooter-wrong.json b/graphics/falling-scooters/assets/scooter-wrong.json new file mode 100644 index 0000000..a52c59e --- /dev/null +++ b/graphics/falling-scooters/assets/scooter-wrong.json @@ -0,0 +1 @@ +{"scooter-sprite-128x128":[{"shape":[15,10,22,2,24,1]},{"shape":[90,105,98,97,117,96]},{"shape":[117,96,123,108,111,126]},{"shape":[111,126,100,125,92,118]},{"shape":[92,118,42,118,31,110]},{"shape":[31,110,22,125,6,121]},{"shape":[6,121,4,111,18,88]},{"shape":[27,42,25,13,31,8]},{"shape":[31,8,15,10,24,1]},{"shape":[90,105,117,96,111,126]},{"shape":[31,110,6,121,18,88]},{"shape":[31,8,24,1,37,5]},{"shape":[90,105,111,126,92,118]},{"shape":[27,42,31,8,37,5]},{"shape":[43,104,90,105,92,118]},{"shape":[18,88,27,42,37,5]},{"shape":[43,104,92,118,31,110]},{"shape":[18,88,37,5,28,77]},{"shape":[28,77,43,104,31,110]},{"shape":[31,110,18,88,28,77]}]} \ No newline at end of file diff --git a/graphics/falling-scooters/fruit-sprites/background.png b/graphics/falling-scooters/fruit-sprites/background.png new file mode 100755 index 0000000..8ddfcbc Binary files /dev/null and b/graphics/falling-scooters/fruit-sprites/background.png differ diff --git a/graphics/falling-scooters/fruit-sprites/banana.png b/graphics/falling-scooters/fruit-sprites/banana.png new file mode 100644 index 0000000..44c33df Binary files /dev/null and b/graphics/falling-scooters/fruit-sprites/banana.png differ diff --git a/graphics/falling-scooters/fruit-sprites/cherries.png b/graphics/falling-scooters/fruit-sprites/cherries.png new file mode 100644 index 0000000..44c33df Binary files /dev/null and b/graphics/falling-scooters/fruit-sprites/cherries.png differ diff --git a/graphics/falling-scooters/fruit-sprites/crate.png b/graphics/falling-scooters/fruit-sprites/crate.png new file mode 100644 index 0000000..44c33df Binary files /dev/null and b/graphics/falling-scooters/fruit-sprites/crate.png differ diff --git a/graphics/falling-scooters/fruit-sprites/ground.png b/graphics/falling-scooters/fruit-sprites/ground.png new file mode 100755 index 0000000..3db592b Binary files /dev/null and b/graphics/falling-scooters/fruit-sprites/ground.png differ diff --git a/graphics/falling-scooters/fruit-sprites/orange.png b/graphics/falling-scooters/fruit-sprites/orange.png new file mode 100644 index 0000000..44c33df Binary files /dev/null and b/graphics/falling-scooters/fruit-sprites/orange.png differ diff --git a/graphics/falling-scooters/index.html b/graphics/falling-scooters/index.html new file mode 100755 index 0000000..c806965 --- /dev/null +++ b/graphics/falling-scooters/index.html @@ -0,0 +1,39 @@ + + +
+ + + + + + + + + + + diff --git a/graphics/falling-scooters/index.js b/graphics/falling-scooters/index.js new file mode 100755 index 0000000..02b28fd --- /dev/null +++ b/graphics/falling-scooters/index.js @@ -0,0 +1,56 @@ +/* + * This example show how to load complex shapes created with PhysicsEditor (https://www.codeandweb.com/physicseditor) + */ + + +var config = { + type: Phaser.AUTO, + width: 1200, + height: 600, + transparent: true, + backgroundColor: 0xffffff, + parent: 'game', + scene: { + preload: preload, + create: create + }, + physics: { + default: "matter", + matter: { + // debug: true + } + } +}; + + +var game = new Phaser.Game(config); + +function preload() { + // Load sprite sheet generated with TexturePacker + this.load.atlas('sheet', 'assets/fruit-sprites.png', 'assets/fruit-sprites.json'); + + // Load body shapes from JSON file generated using PhysicsEditor + this.load.json('shapes', 'assets/fruit-shapes.json'); + //this.load.json('shapes', 'assets/scooter.json'); + +} + +function create() { + var shapes = this.cache.json.get('shapes'); + + this.matter.world.setBounds(0, 0, game.config.width, game.config.height); + this.add.image(0, 0, 'sheet', 'background').setOrigin(0, 0); + + // sprites are positioned at their center of mass + var ground = this.matter.add.sprite(0, 0, 'sheet', 'ground', {shape: shapes.ground}); + ground.setPosition(0 + ground.centerOfMass.x, 280 + ground.centerOfMass.y); // corrected position: (0,280) + + this.matter.add.sprite(200, 50, 'sheet', 'crate', {shape: shapes.crate}); + this.matter.add.sprite(250, 250, 'sheet', 'banana', {shape: shapes.banana}); + this.matter.add.sprite(360, 50, 'sheet', 'orange', {shape: shapes.orange}); + this.matter.add.sprite(400, 250, 'sheet', 'cherries', {shape: shapes.cherries}); + + this.input.on('pointerdown', function (pointer) { + this.matter.add.sprite(pointer.x, pointer.y, 'sheet', 'banana', {shape: shapes.banana}); + }, this); +} diff --git a/graphics/falling-scooters/phaser.min.js b/graphics/falling-scooters/phaser.min.js new file mode 100755 index 0000000..d9e3049 --- /dev/null +++ b/graphics/falling-scooters/phaser.min.js @@ -0,0 +1 @@ +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("Phaser",[],e):"object"==typeof exports?exports.Phaser=e():t.Phaser=e()}(window,function(){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var s=e[n]={i:n,l:!1,exports:{}};return t[n].call(s.exports,s,s.exports,i),s.l=!0,s.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:n})},i.r=function(t){Object.defineProperty(t,"__esModule",{value:!0})},i.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s=1071)}([function(t,e){function i(t,e,i){var n=i?t[e]:Object.getOwnPropertyDescriptor(t,e);return!i&&n.value&&"object"==typeof n.value&&(n=n.value),!(!n||!function(t){return!!t.get&&"function"==typeof t.get||!!t.set&&"function"==typeof t.set}(n))&&(void 0===n.enumerable&&(n.enumerable=!0),void 0===n.configurable&&(n.configurable=!0),n)}function n(t,e){var i=Object.getOwnPropertyDescriptor(t,e);return!!i&&(i.value&&"object"==typeof i.value&&(i=i.value),!1===i.configurable)}function s(t,e,s,r){for(var a in e)if(e.hasOwnProperty(a)){var h=i(e,a,s);if(!1!==h){if(n((r||t).prototype,a)){if(o.ignoreFinals)continue;throw new Error("cannot override final property '"+a+"', set Class.ignoreFinals = true to skip")}Object.defineProperty(t.prototype,a,h)}else t.prototype[a]=e[a]}}function r(t,e){if(e){Array.isArray(e)||(e=[e]);for(var i=0;i