I have created a Tetris game on android and I don't think the animation is as good as it could be. When blocks are moving fast (100ms between the ticks), it's a pretty obvious flicker in the animation, as if there's a very short moment where you can see traces of the previous position of the moving block.
Here is the animation loop, implemented in a separate thread as an extension of SurfaceView:
public void run()
{
while(running)
{
if(surfaceHolder.getSurface().isValid())
{
sleep(1);
canvas = surfaceHolder.lockCanvas();
canvas.drawColor(Color.BLACK); //reset canvas
int width = canvas.getWidth();
int squareSpaceW = (width/4)*3;
int squareSize = squareSpaceW/10;
squareSpaceW = squareSize*10;
int squareSpaceH = squareSpaceW*2;
//Draw lines on the play field
canvas.drawLine(squareSpaceW, 0, squareSpaceW, squareSpaceH, whitePaint);
canvas.drawLine(0, squareSpaceH, squareSpaceW, squareSpaceH, whitePaint);
//draw next piece
int nxtPieceSize = board.getNextPiece().getBlocks().size() -1;
while(nxtPieceSize >= 0)
{
rectPaint.setColor(Color.parseColor(board.getNextPiece().getBlocks().get(nxtPieceSize).getColor()));
int x = board.getNextPiece().getCoordList().get(nxtPieceSize).getX();
int y = board.getNextPiece().getCoordList().get(nxtPieceSize).getY();
nxtPieceSize--;
rect.set(x*(squareSize/2) + (squareSpaceW/17)*16, y*(squareSize/2) + (squareSize/2), x*(squareSize/2) + (squareSize/2) + (squareSpaceW/17)*16, y*(squareSize/2)+ (squareSize/2) + (squareSize/2));
canvas.drawRect(rect, rectPaint);
}
//draw text
canvas.drawText("Score: " + Integer.toString(board.getScore()), width - (width/8), (width/8) + (squareSize), whitePaint);
canvas.drawText("Level: " + Integer.toString(board.getLevel()), width - (width/8), (width/8) + (squareSize*2), whitePaint);
//draw the blocks
for(int x = 0; x < board.getWidth(); x++)
{
for(int y = 0; y < board.getHeight(); y++)
{
tempBlock = board.getBlock(x, y);
if(tempBlock != null)
{
rectPaint.setColor(Color.parseColor(tempBlock.getColor()));
rect.set(x*squareSize, y*squareSize, x*squareSize + squareSize, y*squareSize+ squareSize);
canvas.drawRect(rect, rectPaint);
}
}
}
//draw pause icon
rect.set(squareSize/2,squareSize/2, (squareSize/4)*3, squareSize + squareSize/2);
canvas.drawRect(rect, whitePaint);
rect.set(squareSize ,squareSize/2, squareSize + squareSize/4, squareSize + squareSize/2);
canvas.drawRect(rect, whitePaint);
surfaceHolder.unlockCanvasAndPost(canvas);
}
}
}
Hope I have given the information you need. Sorry if the code is a bit messy...
Related
I am drawing WaveForm of the sounds inside of Canvas based on Soundbitrate but canvas covering full-screen width of the device but I want to draw canvas width as per the inside content of canvas.
Does anyone have any idea how to scale the size of canvas after the draw?
Here is the draw() method inside my canvas.
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvasWidth = canvas.getWidth();
if (mSoundFile == null)
return;
if (mHeightsAtThisZoomLevel == null)
computeIntsForThisZoomLevel();
// Draw waveform
int measuredWidth = getMeasuredWidth();
int measuredHeight = getMeasuredHeight();
int start = mOffset;
int width = mHeightsAtThisZoomLevel.length - start;
int ctr = measuredHeight / 2;
if (width > measuredWidth)
width = measuredWidth;
// Draw grid
double onePixelInSecs = pixelsToSeconds(1);
boolean onlyEveryFiveSecs = (onePixelInSecs > 1.0 / 50.0);
double fractionalSecs = mOffset * onePixelInSecs;
int integerSecs = (int) fractionalSecs;
int i = 0;
while (i <width) {
i++;
fractionalSecs += onePixelInSecs;
int integerSecsNew = (int) fractionalSecs;
if (integerSecsNew != integerSecs) {
integerSecs = integerSecsNew;
if (!onlyEveryFiveSecs || 0 == (integerSecs % 5)) {
canvas.drawLine(i, 0, i, measuredHeight, mGridPaint);
}
}
}
i=0;
while (i < width-1) {
i++;
Paint paint;
if (i + start >= mSelectionStart &&
i + start < mSelectionEnd) {
paint = mSelectedLinePaint;
} else {
drawWaveformLine(canvas, i, 0, measuredHeight,
mUnselectedBkgndLinePaint);
paint = mUnselectedLinePaint;
}
drawWaveformLine(
canvas, i,
ctr - mHeightsAtThisZoomLevel[start + i],
ctr + 1 + mHeightsAtThisZoomLevel[start + i],
paint);
if (i + start == mPlaybackPos) {
canvas.drawLine(i /*+ (canvas.getWidth() / 2)*/, 0, i/* + (canvas.getWidth() / 2)*/, measuredHeight, mPlaybackLinePaint);
}
}
}```
I want to animate multiple paths in sequence, for example, I have
Path[] line and Path[] circle
so when I do for example
line[0].moveTo(x, y);
graphPath[j].lineTo(x, y);
I want to animate this part first and when
finish I want to add circle in same x,y postion
circle[0].addCircle(x, y, 10, Path.Direction.CW);
what I have done so far inside onDraw()
#Override
protected void onDraw(Canvas canvas) {
for (int j = 0; j < 2; j++) {
if (dataPoints2[j] != null) {
float x = leftPadding;
float y = height * getDataPoint(0, j) + topPadding;
graphPath[j].moveTo(x, y);
circlePath[j].addCircle(x, y, 10, Path.Direction.CW);
for (int i = 1; i < dataPoints2[j].size(); i++) {
x = width * (((float) i ) / dataPoints2[j].size()) + leftPadding;
y = height * getDataPoint(i, j) + topPadding;
graphPath[j].lineTo(x, y);
circlePath[j].addCircle(x, y, 10, Path.Direction.CW);
}
}
}
PathMeasure measure = new PathMeasure(graphPath[0], false);
length = measure.getLength();
ObjectAnimator animator = ObjectAnimator.ofFloat(Chart.this, "phase", 1.0f, 0.0f);
animator.setDuration(8000);
animator.start();
for (int j = 0; j < graphPath.length; j++) {
canvas.drawPath(graphPath[j], linePaint[j]);
canvas.drawPath(circlePath[j], circlePaint[j]);
}
}
public void setPhase(float phase){
linePaint[0].setPathEffect(createPathEffect(length, phase, 0.0f));
invalidate();
}
private static PathEffect createPathEffect(float pathLength, float phase, float offset)
{
return new DashPathEffect(new float[] { pathLength, pathLength },
Math.max(phase * pathLength, offset));
}
this will draw the circle then animate the line connecting the circle points
what I need is to animate the line and draw circle when the line reaches every x,y points
I am creating a game sort of based on the Game of Life and Death. The goal of the project is when the cells turn white they will reproduce with other nearby cells, and when they are black they will die randomly. This part of the game I want to implement and have it run based on the state of the cells (life or death).
Currently, when the cells are white and the mouse is pressed the cell will turn white and stay white until the mouse is unclicked and clicked again. When they are black they will be erased if the mouse is over them. Unfortunately, that also removes the array value from the matrix I use to keep track of the current cells. How can I use matrixes without getting an Array Index out of bounds error? I've tried adding a second if statement to search for nearby cells, but it searches even if the cells aren't drawn. I including the entire code here as I do not want to exclude any parts. For reference, I am using Processing 3 for Java.
int value = 0;
int cols, rows;
int scl = 20;
boolean[][] matrix = new boolean[scl+1][scl+1];
boolean life;
boolean death;
void setup() {
frameRate(25);
size(400, 400);
int w = 400;
int h = 400;
cols = w / scl;
rows = h / scl;
}
void draw() {
background(255);
for (int x = 0; x < cols; x++) {
for (int y = 0; y < rows; y++) {
int xpos = x*scl;
int ypos = y*scl;
//cell border color
stroke(55);
if ((mouseX >= xpos && mouseX <= xpos+scl) &&
(mouseY >= ypos && mouseY <= ypos+scl)) {
if (mousePressed == true) {
//println("Clicked at: " + xpos + " and " + ypos);
if (!matrix[xpos/scl][ypos/scl]) {
matrix[xpos/scl][ypos/scl] = true;
if (life){
matrix[xpos/scl][ypos/scl] = true;
println("Living at " + xpos + " and " + ypos);
}
if (death){
matrix[xpos/scl][ypos/scl] = false;
println("Dying at " + xpos + " and " + ypos);
}
} else {
matrix[xpos/scl][ypos/scl] = false;
}
//fill(100);
fill(value);
}
//println("Mouse at: " + xpos + " and " + ypos);
} else {
fill(50);
}
if (matrix[x][y]) {
fill(value);
}
rect(xpos, ypos, scl, scl);
}
}
}
void mousePressed() {
if (value == 0) {
life = true;
death = false;
value = 245;
} else {
life = false;
death = true;
value = 0;
}
}
Basically, what I need to do is take a 2d array of bitflags and produce a list of 2d rectangles to fill the entire area with the minimum number of total shapes required to perfectly fill the space. I am doing this to convert a 2d top-down monochrome of a map into 2d rectangle shapes which perfectly represent the passed in image which will be used to generate a platform in a 3d world. I need to minimize the total number of shapes used, because each shape will represent a separate object, and flooding it with 1 unit sized squares for each pixel would be highly inefficient for that engine.
So far I have read in the image, processed it, and filled a two dimensional array of booleans which tells me if the pixel should be filled or unfilled, but I am unsure of the most efficient approach of continuing.
Here is what I have so far, as reference, if you aren't following:
public static void main(String[] args) {
File file = new File(args[0]);
BufferedImage bi = null;
try {
bi = ImageIO.read(file);
} catch (IOException ex) {
Logger.global.log(Level.SEVERE, null, ex);
}
if (bi != null) {
int[] rgb = bi.getRGB(0, 0, bi.getWidth(), bi.getHeight(), new int[bi.getWidth() * bi.getHeight()], 0, bi.getWidth());
Origin origin = new Origin(bi.getWidth() / 2, bi.getHeight() / 2);
boolean[][] flags = new boolean[bi.getWidth()][bi.getHeight()];
for (int y = 0; y < bi.getHeight(); y++) {
for (int x = 0; x < bi.getWidth(); x++) {
int index = y * bi.getWidth() + x;
int color = rgb[index];
int type = color == Color.WHITE.getRGB() ? 1 : (color == Color.RED.getRGB() ? 2 : 0);
if (type == 2) {
origin = new Origin(x, y);
}
flags[x][y] = type != 1;
}
}
List<Rectangle> list = new ArrayList();
//Fill list with rectangles
}
}
White represents no land. Black or Red represents land. The check for the red pixel marks the origin position of map, which was just for convenience and the rectangles will be offset by the origin position if it is found.
Edit: The processing script does not need to be fast, the produced list of rectangles will be dumped and that will be what will be imported and used later, so the processing of the image does not need to be particularly optimized, it doesn't make a difference.
I also just realized that expecting a 'perfect' solution is expecting too much, since this would qualify as a 'knapsack problem' of the multidimensionally constrained variety, if I am expecting exactly the fewest number of rectangles, so simply an algorithm that produces a minimal number of rectangles will suffice.
Here is a reference image for completion:
Edit 2: It doesn't look like this is such an easy thing to answer given no feedback yet, but I have started making progress, but I am sure I am missing something that would vastly reduce the number of rectangles. Here is the updated progress:
static int mapWidth;
static int mapHeight;
public static void main(String[] args) {
File file = new File(args[0]);
BufferedImage bi = null;
System.out.println("Reading image...");
try {
bi = ImageIO.read(file);
} catch (IOException ex) {
Logger.global.log(Level.SEVERE, null, ex);
}
if (bi != null) {
System.out.println("Complete!");
System.out.println("Interpreting image...");
mapWidth = bi.getWidth();
mapHeight = bi.getHeight();;
int[] rgb = bi.getRGB(0, 0, mapWidth, mapHeight, new int[mapWidth * mapHeight], 0, mapWidth);
Origin origin = new Origin(mapWidth / 2, mapHeight / 2);
boolean[][] flags = new boolean[mapWidth][mapHeight];
for (int y = 0; y < mapHeight; y++) {
for (int x = 0; x < mapWidth; x++) {
int index = y * mapWidth + x;
int color = rgb[index];
int type = color == Color.WHITE.getRGB() ? 1 : (color == Color.RED.getRGB() ? 2 : 0);
if (type == 2) {
origin = new Origin(x, y);
}
flags[x][y] = type != 1;
}
}
System.out.println("Complete!");
System.out.println("Processing...");
//Get Rectangles to fill space...
List<Rectangle> rectangles = getRectangles(flags, origin);
System.out.println("Complete!");
float rectangleCount = rectangles.size();
float totalCount = mapHeight * mapWidth;
System.out.println("Total units: " + (int)totalCount);
System.out.println("Total rectangles: " + (int)rectangleCount);
System.out.println("Rectangle reduction factor: " + ((1 - rectangleCount / totalCount) * 100.0) + "%");
System.out.println("Dumping data...");
try {
file = new File(file.getParentFile(), file.getName() + "_Rectangle_Data.txt");
if(file.exists()){
file.delete();
}
file.createNewFile();
BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(new FileOutputStream(file)));
for(Rectangle rect: rectangles){
bw.write(rect.x + "," + rect.y + "," + rect.width + ","+ rect.height + "\n");
}
bw.flush();
bw.close();
} catch (Exception ex) {
Logger.global.log(Level.SEVERE, null, ex);
}
System.out.println("Complete!");
}else{
System.out.println("Error!");
}
}
public static void clearRange(boolean[][] flags, int xOff, int yOff, int width, int height) {
for (int y = yOff; y < yOff + height; y++) {
for (int x = xOff; x < xOff + width; x++) {
flags[x][y] = false;
}
}
}
public static boolean checkIfFilled(boolean[][] flags, int xOff, int yOff, int width, int height) {
for (int y = yOff; y < yOff + height; y++) {
for (int x = xOff; x < xOff + width; x++) {
if (!flags[x][y]) {
return false;
}
}
}
return true;
}
public static List<Rectangle> getRectangles(boolean[][] flags, Origin origin) {
List<Rectangle> rectangles = new ArrayList();
for (int y = 0; y < mapHeight; y++) {
for (int x = 0; x < mapWidth; x++) {
if (flags[x][y]) {
int maxWidth = 1;
int maxHeight = 1;
Loop:
//The search size limited to 400x400 so it will complete some time this century.
for (int w = Math.min(400, mapWidth - x); w > 1; w--) {
for (int h = Math.min(400, mapHeight - y); h > 1; h--) {
if (w * h > maxWidth * maxHeight) {
if (checkIfFilled(flags, x, y, w, h)) {
maxWidth = w;
maxHeight = h;
break Loop;
}
}
}
}
//Search also in the opposite direction
Loop:
for (int h = Math.min(400, mapHeight - y); h > 1; h--) {
for (int w = Math.min(400, mapWidth - x); w > 1; w--) {
if (w * h > maxWidth * maxHeight) {
if (checkIfFilled(flags, x, y, w, h)) {
maxWidth = w;
maxHeight = h;
break Loop;
}
}
}
}
rectangles.add(new Rectangle(x - origin.x, y - origin.y, maxWidth, maxHeight));
clearRange(flags, x, y, maxWidth, maxHeight);
}
}
}
return rectangles;
}
My current code's search for larger rectangles is limited to 400x400 to speed up testing, and outputs 17,979 rectangles, which is a 99.9058% total reduction of rectangles if I treated each pixel as a 1x1 square(19,095,720 pixels). So far so good.
I am creating a maze game in libGDX. The background texture is very similar to this one: http://www.wpclipart.com/recreation/games/maze/maze_square_medium.png
My moving character is on the maze, and I would like to do collision detection between the character and black walls by checking the colour of my maze texture, without creating rectangles and figuring out all the coordinates of the maze walls, if that is possible. I have researched a lot, but since I am quite new to libGDX and even java, I haven't really found anything that made a lot of sense to me for my case. If anyone has an answer for me on how I could do this or can refer me to a page that explains this well, it would be very greatly appreciated!
EDIT:
This is my code right now:
private static final int COLS = 4;
private static final int ROWS = 4;
Sprite sprChar, sprMaze;
SpriteBatch batch;
Texture Sprite;
TextureRegion[] frames;
TextureRegion CurrentFrame;
float fTime = 0f, fSpeed = 4;
Animation animation;
Texture txtMaze;
Pixmap pixmap;
int nX, nY, nPix, nR, nG, nB, nA;
Color color;
#Override
public void create() {
batch = new SpriteBatch();
Sprite = new Texture(Gdx.files.internal("snowwhite.png"));
sprChar = new Sprite(Sprite);
sprChar.setPosition(300, 200);
TextureRegion[][] tmp = TextureRegion.split(Sprite, Sprite.getWidth() / COLS, Sprite.getHeight(
frames = new TextureRegion[COLS * ROWS];
int index = 0;
for (int i = 0; i < ROWS; i++) {
for (int j = 0; j < COLS; j++) {
frames[index++] = tmp[i][j];
}
}
animation = new Animation(1f, frames);
sprChar.setPosition(10, 10);
pixmap = new Pixmap(Gdx.files.internal("Maze2.png"));
color = new Color();
}
#Override
public void render() {
if (fTime < 4) {
fTime += Gdx.graphics.getDeltaTime();
} else {
fTime = 0;
}
nX = Math.round(sprChar.getX());
nY = Math.round(sprChar.getY());
nPix = pixmap.getPixel(nX, nY);
Color.rgba8888ToColor(color, nPix);
nR = (int) (color.r * 255f);
nG = (int) (color.g * 255f);
nB = (int) (color.b * 255f);
nA = (int) (color.a * 255f);
if (nR == 0 && nG == 0 && nB == 0) {
System.out.println("is hit");
}
txtMaze = new Texture(pixmap);
sprMaze = new Sprite(txtMaze);
CurrentFrame = animation.getKeyFrame(0);
if (Gdx.input.isKeyPressed(Input.Keys.LEFT)) {
sprChar.setX(sprChar.getX() - fSpeed);
CurrentFrame = animation.getKeyFrame(4 + fTime);
}
if (Gdx.input.isKeyPressed(Input.Keys.RIGHT)) {
sprChar.setX(sprChar.getX() + fSpeed);
CurrentFrame = animation.getKeyFrame(8 + fTime);
}
if (Gdx.input.isKeyPressed(Input.Keys.UP)) {
sprChar.setY(sprChar.getY() + fSpeed);
CurrentFrame = animation.getKeyFrame(12 + fTime);
}
if (Gdx.input.isKeyPressed(Input.Keys.DOWN)) {
sprChar.setY(sprChar.getY() - fSpeed);
CurrentFrame = animation.getKeyFrame(0 + fTime);
}
batch.begin();
Gdx.gl.glClearColor(1, 1, 1, 1);
Gdx.gl.glClear(GL20.GL_COLOR_BUFFER_BIT);
batch.draw(sprMaze, sprMaze.getX(), sprMaze.getY(), sprMaze.getWidth() / 2,
sprMaze.getHeight() / 2, sprMaze.getWidth(),
sprMaze.getHeight(), sprMaze.getScaleX(),
sprMaze.getScaleY(), sprMaze.getRotation());
batch.draw(CurrentFrame, sprChar.getX(), sprChar.getY(), 20, 20);
batch.end();
}
public static void updatePosition(Sprite spr, float fX, float fY) {
spr.setPosition(fX, fY);
}
I just want it to output "is hit" if it passes a black wall, but I don't believe I am getting correct responses. Also, if I try to resize the maze sprite, it seems to me that it still checks for pixels on the maze at the original size.
P.S. Please excuse my bad code, I am VERY new. So any help would be very greatly appreciated, as I am on a time crunch!! Thank you