我正在尝试创建一个拼图游戏演示,我想知道无需使用遮罩即可创建拼图的其他方法。目前,我的拼图碎片是通过拍摄完整的图像,然后将该图像分解为四个部分(假设拼图为2x2),然后为每个部分存储并应用蒙版。看起来像下面
// 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++;
}
}
然后,我使用辅助方法将遮罩应用于每片
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;
}
我一直在阅读贝塞尔曲线和openGL。这些都不是我很熟悉的,而且非常复杂。我希望帮助您制作拼图游戏,以便举例说明如何完成。
最佳答案
Bezier曲线可能很复杂,但是我们可以通过先使用Catmul-Rom曲线(具有通过控制点的良好特性)定义拼图头,然后“平凡地”将其转换为Bezier曲线来“欺骗”都是普通的Hermite花键)。
所以:让我们这样做。示例图片:
到目前为止,我们已经使用相当简单的规则将其拆分了。在代码排序中(技术上为Processing):
int hx = width/4;
int hy = height/4;
for(int x = hx; x<width; x+=hx) {
line(x,0,x,height);
for(int y = hy; y<height; y+=hy) {
line(0,y,width,y);
}
}
除了有趣的图像之外,它还不是很令人兴奋,所以让我们发明一些拼图连接。首先,我们标记这些削减的中心:
同样不是很令人兴奋:
for(int x = hx/2; x<width; x+=hx) {
for(int y = hy/2; y<height; y+=hy) {
ellipse(x + hx/2,y,5,5);
ellipse(x,y + hy/2,5,5);
}
}
但是,我们可以使它令人兴奋。对于每个中心,我们可以选择向左/向右或向上/向下(取决于边缘)的点,并决定是否使样片向左或向右延伸,然后在“围绕中心”处发明一些点给我们我们的Catmull-Rom曲线:
for(int x = hx/2; x<width; x+=hx) {
for(int y = hy/2; y<height; y+=hy) {
// horizontal
ellipse(x-5, y+hy/2, 2,2);
ellipse(x+5, y+hy/2, 2,2);
boolean up = random(1) < 0.5;
if(up) {
ellipse(x-random(5,10), y+hy/2 - random(10,20), 2,2);
ellipse(x+random(5,10), y+hy/2 - random(10,20), 2,2);
} else {
ellipse(x-random(5,10), y+hy/2 + random(10,20), 2,2);
ellipse(x+random(5,10), y+hy/2 + random(10,20), 2,2);
}
// vertical
ellipse(x+hx/2, y-5, 2,2);
ellipse(x+hx/2, y+5, 2,2);
boolean left = random(1) < 0.5;
if(left) {
ellipse(x+hx/2-random(10,20), y-random(5,10), 2,2);
ellipse(x+hx/2-random(10,20), y+random(5,10), 2,2);
} else {
ellipse(x+hx/2+random(10,20), y-random(5,10), 2,2);
ellipse(x+hx/2+random(10,20), y+random(5,10), 2,2);
}
}
}
我们在这里过度生成,因此我将让您了解如何防止针对最右边和最下面的边缘计算“连接件”坐标(这应该很容易)。
现在,让我们将其转换为坐标网格,因为这看起来非常不错,并且我们应该使用Catmull-Rom获得非常漂亮的拼板连接:
美丽。
for (int x = hx/2; x<width; x+=hx) {
for (int y = hy/2; y<height; y+=hy) {
// horizontal
int xs = x-hx/2,
ym = y+hy/2,
xe = x+hx/2;
float x3, x4, y1, y2,
x1 = x-5,
x2 = x+5;
boolean up = random(1) < 0.5;
x3 = x - random(5, 10);
x4 = x + random(5, 10);
if (up) {
y1 = y+hy/2 - random(10, 20);
y2 = y+hy/2 - random(10, 20);
} else {
y1 = y+hy/2 + random(10, 20);
y2 = y+hy/2 + random(10, 20);
}
curve(xs, ym, x1, ym, x3, y1, x4, y2);
curve(x1, ym, x3, y1, x4, y2, x2, ym);
curve(x3, y1, x4, y2, x2, ym, xe, ym);
// vertical
int ys = y-hy/2,
xm = x+hx/2,
ye = y+hy/2;
y1 = y-5;
y2 = y+5;
float y3, y4;
boolean left = random(1) < 0.5;
y3 = y - random(5, 10);
y4 = y + random(5, 10);
if (left) {
x1 = x+hx/2 - random(10, 20);
x2 = x+hx/2 - random(10, 20);
} else {
x1 = x+hx/2 + random(10, 20);
x2 = x+hx/2 + random(10, 20);
}
curve(xm, ys, xm, y1, x1, y3, x2, y4);
curve(xm, y1, x1, y3, x2, y4, xm, y2);
curve(x1, y3, x2, y4, xm, y2, xm, ye);
}
}
在现在需要进行切割以最终完成这些片段的地方应该是相对明显的,但是如果您正在使用的系统无法执行Catmull-Rom但只能执行Bezier曲线,那么转换就很直向前。之前的代码一直在使用
curve(x1,x2,y1,y2,x3,y3,x4,y4);
但这是一条Catmull-Rom曲线。要获得等效曲线,we can use a Bezier segment of the form:
bezier(
x2, y2,
x2 - (x3-x1)/6, y2 - (y3-y1)/6,
x3 + (x4-x2)/6, y3 + (y4-y2)/6,
x3, y3
)
让我们感到困惑。