MadDogMayCry Posted September 25, 2020 Share Posted September 25, 2020 Hi.I did litle tool for me, to edit shapes for Spine 2d just in Phaser 3. It’s shuld works for other game objects like pics and soone (with litle changes of code). Online preview is here. https://playcode.io/679069/ A coordinates saving in clipboard buffer after each changing. See ////////////// comments to understands how to apply changes. Enjoy <!DOCTYPE html> <html> <head> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.min.js"></script> <script src="https://labs.phaser.io/plugins/3.8/SpinePlugin.js"></script> </head> <body> <script> var config = { type: Phaser.WEBGL, parent: 'phaser-example', width: 1024, height: 768, backgroundColor: '#000000', plugins: { scene: [ { key: 'SpinePlugin', plugin: window.SpinePlugin, mapping:'spine' } ] } }; var game = new Phaser.Game(config); var SceneMain = new Phaser.Scene('SceneMain'); SceneMain.preload = function() { this.load.setPath('https://labs.phaser.io/assets/spine/3.8/owl/'); this.load.spine('owl', 'owl-pro.json', 'owl-pro.atlas', true); } SceneMain.create = function() { owl = this.add.spine(400, 500, "owl", "idle", true); owl.scale=0.3; owl.timeScale=3.5; //////////////////////////////// //////////////////////////////// //////////////////////////////// //////////////////////////////// //After editing just press ctrl+v to past coordinates in var cor = ... var cor = [193,621,223,711,150,754,153,804,200,784,263,677,333,607,347,657,373,664,437,614,370,507,373,374,430,357,337,297,353,164,413,87,477,24,560,21,560,81,640,101,683,71,780,11,890,51,903,111,940,187,943,251,910,321,877,374,897,431,887,484,830,551,833,607,853,657,907,664,973,601,1067,571,1110,511,1027,377,1007,397,927,434,910,404,943,347,1017,327,1040,361,1057,367,1033,304,953,301,947,234,1003,181,1097,177,1130,234,1063,337,1087,387,1107,457,1163,444,1197,377,1160,311,1223,161,1290,137,1293,224,1263,301,1267,371,1250,414,1283,437,1303,471,1273,524,1203,494,1157,531,1153,587,1097,624,1080,637,1027,647,993,671,1007,694,1117,711,1123,754,1093,797,1057,817,950,774,943,731,927,707,890,707,840,707,753,724,753,761,673,801,627,804,560,791,513,737,510,714,437,797,337,824,280,851,203,907]; shape = new Phaser.Geom.Polygon(cor); //And uncomment this line //owl.setInteractive(shape, Phaser.Geom.Polygon.Contains); owl.setInteractive(); owl.shape=[]; owl.graphics=false; owl.on('pointerdown', function(pointer){ //передаем функции обьект для которого требуется нарисовать полигон drawShape(SceneMain,this,{ x:pointer.x-(this.x-this.displayOriginX*this.scale), y:pointer.y-(this.y-this.displayOriginY*this.scale) }); console.log(owl.shape); }); this.input.enableDebug(owl, 0xff00ff); } function drawShape(scene,obj,pos){ if(obj.shape.length>0){ obj.graphics.clear(); } obj.shape.push(Math.floor(pos.x/obj.scale),Math.floor(pos.y/obj.scale)); var polygon = new Phaser.Geom.Polygon(obj.shape); obj.graphics = scene.add.graphics(); obj.graphics.lineStyle(5, 0xff00ff); obj.graphics.beginPath(); obj.graphics.moveTo(polygon.points[0].x, polygon.points[0].y); for (var i = 1; i < polygon.points.length; i++){ obj.graphics.lineTo(polygon.points[i].x, polygon.points[i].y); } obj.graphics.closePath(); obj.graphics.strokePath(); obj.graphics.setScale(obj.scale); obj.graphics.x=obj.x-obj.displayOriginX*obj.scale; obj.graphics.y=obj.y-obj.displayOriginY*obj.scale; var copy = JSON.stringify(obj.shape); navigator.clipboard.writeText(copy); } game.scene.add("SceneMain", SceneMain); game.scene.start("SceneMain"); </script> </body> </html> Link to comment Share on other sites More sharing options...
Recommended Posts