Jump to content



Recommended Posts

Hello everyone,

I am new here in phaser and javascript.

I come from openfl (if you don't know what that is then take a look at www.openfl.org and have fun).

I am on a jigsaw puzzle game quest.


but for all quests there are always issues; and I have two issues for which I cannot find an answer even with this artefact called google.


my first issue is:

I have successfully made my first phaser game ( this jigsaw puzzle ) work on mozilla Firefox and Google. but on Internet explorer, it doesn't work at all!


and my second is:

I need to resize the images that the game will use. the images will have many different sizes, sometimes bigger and sometimes smaller than the desired image size,

Nevertheless those images need to be resized to the desired size.


ok, first hear me out:


I have made some researches about how to make a jigsaw puzzle here.

and I find out some nice tips:


var bitmap = game.make.bitmap();

var graphics = bitmap.context;


//then drawing the jigsaw piece to your heart content




//then comes the best part, clipping the image to be drawn




//finally having our image





this is what I have found out to be working.


Thus I created a class making pieces, jigsaw pieces

and have a puzzle working fine on Firefox and Google chrome.


for my resizing problem,


the main problem is that img cannot be a Phaser.Sprite nor a Phaser.Image

for more infos check https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage


I thought about some possible answers for the resizing problem.

the answer lies in resizing the image in pure javascript.

without showing it.


but for Internet Explorer one:

I have no idea


Any help will be great



Link to comment
Share on other sites

For Internet Explorer: what does "not work" mean? The game, as a whole, doesn't load? What does the developer console for IE say? Any errors?


As for resizing images, that depends on what you're resizing them for. Do you need copies of the images to display for higher DPI devices, like iPhones?


Anyway, you probably want a BitmapData. You can call methods on it like a HTML canvas and then use it as a texture for a Phaser.Sprite.

Link to comment
Share on other sites

For IE, I have found, the answer I had made a mistake in my codes, I want the player to have enough freedom to move the piece he could joint together anywhere in the canvas.

so I put an update to move assembled pieces around. And I forgot I had already enable drag for each jigsaw pieces thus making the game freeze and lag and all.


as I said, I come from openfl(a Haxe library),

and I was hoping of having something similar to it.


in openfl it would have been the job of a  combo of sprite(well any displayObject would do but I love Sprites) and bitmapData;


//fetching the imageData

var bmp:openfl.display.BitmapData = openfl.Assets.getBitmapData("directory to the image asset");


//here I am resizing using the combo of sprite and bitmap


//"drawing" the bitmapData into a sprite 

var sp:openfl.display.Sprite = new openl.display.Sprite();

sp.graphics.beginBitmapFill(bmp,new openfl.geom.Matrix());



//redefining the bitmapData to the desired size

bmp = new openfl.display.BitmapData(500,500);


//redawing the bitmapData for my final use

bmp.draw(sp,new openfl.geom.Matrix(500/sp.width,0,0,500/sp.height));


with this code is haxe, I have redefined a new bitmapData which I can use to Fill the sprite graphics anytime.

and even if I draw irregular shapes using the graphics property of a sprite object.


that is in haxe.


but I saw the graphics class in phaser which I used before to make the jigsaw irregular shapes, but I was blocked at the "BitmapFill" stage.


thus I made some research about jigsaw puzzle in phaser and I saw these posts:

http://www.html5gamedevs.com/topic/9838-jigsaw-game/ a guy struggling like me,

and I saw this one http://www.html5gamedevs.com/topic/6635-jigsaw-puzzle-draw-an-irregular-shape-and-fill-it-with-image/ which really helped me out big time


the last one sends to http://stackoverflow.com/questions/18379818/canvas-image-masking-overlapping where I found answers for making jigsaw puzzle with phaser, giving birth to code like the snippet I showed earlier.


therefore bringing me to these questions:

- how to save the data of an image

- resize/modify it

- and lastly create a new image from the resized imageData (without ever showing it on the canvas, I mean without it being drawn on the canvas)

in Javascript

Link to comment
Share on other sites


  • Recently Browsing   0 members

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