How to create puzzle pieces without using a mask?

Question

I'm trying to create a puzzle game, and I would like to learn about alternative ways to create puzzles without using a mask. I currently have puzzle pieces, taking the full image, breaking this image into four parts (say, a 2x2 puzzle), and then saving and applying a mask to each part. It looks as follows

// create standard puzzle pieces arryPieceEndPos = new int[mCols][mRows]; arryPieceImg = new Bitmap[mCols * mRows]; arryIsPieceLocked = new boolean[mCols * mRows]; int pos = 0; for (int c = 0; c < mCols; c++) { for (int r = 0; r < mRows; r++) { arryPieceImg[pos] = Bitmap.createBitmap(mBitmap, c * mPieceWidth, r * mPieceHeight, mPieceWidth, mPieceHeight); arryIsPieceLocked[pos] = false; arryPieceEndPos[c][r] = pos; pos++; } } 

Then I use a helper method to apply a mask to each part

 private Bitmap maskMethod(Bitmap bmpOriginal, Bitmap bmpMask) { // adjust mask bitmap if size is not the size of the puzzle piece if (bmpMask.getHeight() != mPieceHeight || bmpMask.getWidth() != mPieceWidth) { Log.e("TEST", "Resize Error :: H (mask): " + bmpMask.getHeight() + " // W (mask): " + bmpMask.getWidth()); Log.d("TEST", "Resize Error :: H (norm): " + mPieceHeight + " // W (norm): " + mPieceWidth); } Canvas canvas = new Canvas(); Bitmap combine = Bitmap.createBitmap(bmpOriginal.getWidth(), bmpOriginal.getHeight(), Bitmap.Config.ARGB_8888); canvas.setBitmap(combine); Paint paint = new Paint(); paint.setFilterBitmap(false); canvas.drawBitmap(bmpOriginal, 0, 0, paint); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN)); canvas.drawBitmap(bmpMask, 0, 0, paint); paint.setXfermode(null); return combine; } 

I saw this post> http://java.dzone.com/news/connect-pictures-android for connecting parts together, however this does not apply to generating parts programmatically without masks. Can someone provide some code examples on how to do this? The only key I have is that I have to use Path, however I'm still not sure how to do this. Thanks in advance!

Answer 1

A jigsaw puzzle piece is a pretty complicated look to create, but I can help you figure out how to use the path. Here is the link to the developer's site: http://developer.android.com/reference/android/graphics/Path.html

Take a look at this link. I have done a small thing for you to get started. The only thing you need to find out is to cut out a small circle from a path that I don't know about. I think you need to look at cropping so that your path goes in a circle (you can also crop to create a circle outside a piece, I just did not crop before).

 private Bitmap getPuzzleBitmap(Bitmap bitmap) { Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(), Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(output); final int color = 0xff424242; final Paint paint = new Paint(); final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight()); calculatePuzzlePath(bitmap.getWidth(), bitmap.getHeight()); paint.setAntiAlias(true); canvas.drawARGB(0, 0, 0, 0); paint.setColor(color); canvas.drawPath(puzzlePath, paint); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN)); canvas.drawBitmap(bitmap, rect, rect, paint); return output; } private void calculatePuzzlePath(int width, int height) { float radius = (height / 2) - 5; float smallRadius = radius / 3; radius -= smallRadius * 2; float centerX = width/2; float centerY = height/2; puzzlePath = new Path(); // Bottom right puzzlePath.moveTo(centerX + radius, centerY + radius); // Top right puzzlePath.lineTo(centerX + radius, centerY - radius); // Center top puzzlePath.lineTo(centerX, centerY - radius); // Add outside circle to center top puzzlePath.addCircle(centerX, centerY - radius - ((radius / 3) / 2), radius / 3, Path.Direction.CCW); // Top left puzzlePath.lineTo(centerX - radius, centerY - radius); // Bottom left puzzlePath.lineTo(centerX - radius, centerY + radius); //Bottom right puzzlePath.lineTo(centerX + radius, centerY + radius); } 

I hope this is enough to start with this.

Good luck