Best way to cut an image

[Alex1307]

Hello everybody,

 

I'm actually working on a project for children, and I have to make a simple puzzle.

 

I'm new to Phaser and I have spend hours trying to resolve a simple problem.

 

I have an image, as a .jpg, and I need to cut it into parts, and enable dragndrop.

 

 Here is the actual code :

		var nbCol = 2;		var nbLig = 2;				var w = 1200,    	h = 700;        var game = new Phaser.Game(w, h, Phaser.AUTO, '', { preload: preload, create: create });		var img = new Image();		img.src = './tableau.jpg';		        function preload () {			game.load.spritesheet("tableau", img.src, img.width / nbCol, img.height / nbLig);        }		var bloc = [];		        function create () {						var currentID = 0;						for(i=0; i<nbLig; i++) {				for(j=0; j<nbCol; j++) {					bloc.push([i, j, this.game.add.sprite(game.world.randomX, game.world.randomY, "tableau", 0)]);					cBloc = bloc[bloc.length - 1][2];					cBloc.frame = currentID;					cBloc.inputEnabled = true;					cBloc.input.enableDrag();					currentID++;				}				}        }

But the problem, is that for each sprite, the full image is associated, which cause a lot of lag. Does someone has an idea for associate only the good part of the picture to each sprite ?

 

 

Hope you will be able to help me,

 

Thanks a lot for answering.

[Carlos]

Maybe you can create a texture with the dimensions of each piece.

[vohogames]

Hi,

I am also searching to way to do it.

here is the starter link http://phaser.io/examples/v2/sprites/horizontal-crop#gv

 

 

cp code for the link 

var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update : update });function preload() {    game.load.image('trsi', 'assets/pics/trsipic1_lazur.jpg');}var pic1,pic2;var cropRect1, cropRect2;function create() {    pic1 = game.add.image(0, 0, 'trsi');    pic2 = game.add.image(0, pic1.height/2+10, 'trsi');    //pic.anchor.setTo(0.5, 1);    cropRect1 = new Phaser.Rectangle(0, 0, pic1.width , pic1.height/2);    cropRect2 = new Phaser.Rectangle(0, pic2.height/2, pic2.width , pic2.height);     //   console.log(cropRect);    // Here we'll tween the crop rect, from a width of zero to full width, and back again   // var tween = game.add.tween(cropRect).to( { width: pic.width }, 3000, Phaser.Easing.Bounce.Out, false, 0, 1000, true);    pic1.crop(cropRect1);    pic2.crop(cropRect2);  //  tween.start();}function update () {    //pic.updateCrop();}

[XekeDeath]

I used a sprite sheet for my puzzle here: http://xekeland.com/games/MadnessPuzzle

The code is not minified, you can take a look at it in your browsers debug tools. You should also be able to look at the image and the json file for the sprite sheet.