In a feeble attempt to learn some Android development am I stuck at graphics. My aim here is pretty simple:
Take n small images and build a random image, larger than the screen with possibility to scroll around.
Have an animated object move around on it
I have looked at the SDK examples, Lunar Lander especially but there are a few things I utterly fail to wrap my head around. I've got a birds view plan (which in my head seems reasonably sane):
How do I merge the tiles into one large image?
The background is static so I figure I should do like this:
Make a 2d array with refs to the tiles
Make a large Drawable and draw the tiles on it
At init draw this big image as the background
At each onDraw redraw the background of the previous spot of the moving object, and the moving object at its new location
The problem is the hands on things. I load the small images with "Bitmap img1 = BitmapFactory.decodeResource (res, R.drawable.img1)", but then what? Should I make a canvas and draw the images on it with "canvas.drawBitmap (img1, x, y, null);"? If so how to get a Drawable/Bitmap from that?
I'm totally lost here, and would really appreciate some hands on help (I would of course be grateful for general hints as well, but I'm primarily trying to understand the Graphics objects). To make you, dear reader, see my level of confusion will I add my last desperate try:
Drawable drawable;
Canvas canvas = new Canvas ();
Bitmap img1 = BitmapFactory.decodeResource (res, R.drawable.img1); // 50 x 100 px image
Bitmap img2 = BitmapFactory.decodeResource (res, R.drawable.img2); // 50 x 100 px image
canvas.drawBitmap (img1, 0, 0, null);
canvas.drawBitmap (img2, 50, 0, null);
drawable.draw (canvas); // obviously wrong as draw == null
this.setBackground (drawable);
Thanks in advance
I finally figured it out, what I need for the basic problem of tiling a bunch of Bitmaps together was a BitmapDrawable:
Bitmap myImage = Bitmap.createBitmap(450, 300, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(myImage);
Bitmap img1 = BitmapFactory.decodeResource (res, R.drawable.img1); // 50 x 100 px image
Bitmap img2 = BitmapFactory.decodeResource (res, R.drawable.img2); // 50 x 100 px image
canvas.drawBitmap (img1, 0, 0, null);
canvas.drawBitmap (img2, 50, 0, null);
this.setBackgroundDrawable(new BitmapDrawable(myImage));
I obviously had it backwards with the relationship between Canvas and Bitmap, I thought Canvas was a blank screen on which to paint on. Apparently (if I got it right this time) it's connected to a Bitmap, and if having that one it's possible to use it.
I still wouldn't know how to get it in the onDraw(Canvas) function though, but this solves the problem I had.
Related
My question is: a bitmap had to be square or is possible delete the invisible parts around the colored image? I have a bitmap in a SurfaceView with an hand in the center and i want calculate the bounds of this hand deleting the invisible around it, cause i have problems with the onClick Method. Without calculate every X and Y, is possible know the bounds of the hand with a Method or other things? Thanks in advance.
The best thing you could do would be to take the picture of the hand and crop it down to the size of the hand.
This way, you'll have a smaller file and won't have to implement some kind of code work around.
About your first question: any bitmap that retains some level of transparency has to have an alpha channel so in your case a hand has an alpha channel thus you cannot just delete those alpha pixels, because if you do the transparent part will remain black. You will have to use either ARGB_4444 format or ARGB_8888 format to retain this alpha channel. As far as getting the bitmaps bounds, use a Rect or some bounding shape maybe an oval, to accurately know if your finger is touching it, you can't just know exactly if your touch is within the bounds of this hand because this hand image, at certain portions contain different widths, and heights, however you can test if your touch is touching your hand exactly by using pixel perfect collision. Here is how it works:
class drawingView extends View {
Rect rect = new Rect();
Bitmap bitmap = yourHand;
#Override
public void onDraw(Canvas canvas) {
canvas.drawBitmap(bitmap, x, y, null);
rect.set(x, y, bitmap.getWidth(), bitmap.getHeight());
invalidate();
}
public void onClick() {
if(rect.contains(event.getX(), event.getY(), && bitmap.getPixel(event.getX() - rect.left, event.getY() - rect.top) != Color.TRANSPARENT) {
// you know you exactly touched the hand even out of the transparent region
}
}
I started you off I'm sure you will understand what's going on here.
Hope this helps :)
The idea is to use a png file with the right transparency in place, which means the part around the hand should have the transparency .
Now for retaining the transparency of the image when using the BitmapFactory,make sure that your image is pulled in as ARGB_8888
I'm not very skilled in android application developing, and I'm working on a test app. I detected the face and the eyes, now I'm going to draw something like acne or scar on the face (e.g below the eyes on the cheek) based on the coordinates of the eyes. Later, I'm going to put eye-glass or hat on the appropriate locations.
I know the coordinates of the left and the right eye (leftEyePosx... [and so on] in the code). For example 136x168 [left] and 216x168 [right] (mirrored in picture). Now, I'm calculating the scale: glass bitmap should be scaled around 80 pixels (216-136) or bigger for the width, and 80 pixels multiplied with the original image's aspect ratio for the height (e.g. 80 * 0.7). I have the bitmap with the code:
glassBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.glass_01);
Now, how can I re-scale the eye-glass and use the method canvas.drawBitmap() and use eye coordinates and draw the glass on the face? Or should I use another way?
Thanks in advance, and sorry for my bad English :)
First you scale the bitmaps:
Bitmap scaledBitmap = Bitmap.createScaledBitmap(originalBitmap, targetWidth, targetHeight, false);
Then you draw one bitmap on top of the other, at xPos and yPos:
Canvas canvas = new Canvas(baseBitmap);
Paint paint = new Paint(Paint.FILTER_BITMAP_FLAG);
canvas.drawBitmap(overlayBitmap, xPos, yPos, paint);
xPos and yPos are the upper left corner of the overlay bitmap. For example, if the base image eye is supposed to show in the middle of the overlay bitmap, you have to adjust for this by deducting half the width and height to find the desired xPos and yPos.
I'm trying to change the transparency of an image over time, and I'm doing this with the method drawImage() from java.awt.Graphics. I know there's a lot of different answers online about how to do this, but I can't find a one that is simple enough for me to understand and implement.
Let's just say I have a BufferedImage image, and I want to draw this image with a 50% opacity. How would I initialize image and what would I do to adjust the alpha level of the image when I draw it. It would be great if I could use the method drawImage() and do something with that to change the transparency of the image, but it's probably not that simple.
Never tried it, but I think the basic code would be:
AlphaComposite ac = AlphaComposite.getInstance(AlphaComposite.SRC_OVER, alpha);
g2d.setComposite(ac);
g2d.drawImage(...);
Using image filter.
float[] scales = { 1f, 1f, 1f, 0.1f };
float[] offsets = new float[4];
RescaleOp rop = new RescaleOp(scales, offsets, null);
g2d.drawImage(buffimg, rop, 0, 0);
4th element in scales array is transparency, this value goes between 0 - 1
Answer by camickr will make the entire component apply the alpha including all inner components. But that will be much faster.
Warning: Use Image Filters with Care
ref: http://www.informit.com/articles/article.aspx?p=1013851&seqNum=2
I have an android project to process images, I have two images, I want to overlay one over another (blending). To combine these two images, it’s a bit simple, using drawing on canvas:
I used this code:
public static Bitmap overlay(Bitmap bottomImg, Bitmap topImg) {
Bitmap bmOverlay = Bitmap.createBitmap(bottomImg.getWidth(),bottomImg.getHeight(),bottomImg.getConfig());
Canvas canvas = new Canvas(bmOverlay);
canvas.drawBitmap(bottomImg, new Matrix(), null);
canvas.drawBitmap(topImg, 0, 0, null);
return bmOverlay;
}
It works well, but It doesn’t manipulate the transparency of overlaed image. Actually I want the top image to be transparent, in order to see how it matches the bottom one. It’s something to access alpha channel or to do it manually, Can someone help me to do this task.
You can try :
topImg.eraseColor(Color.TRANSPARENT);
This will set all the pixels to transparent.
I'm trying to make an android game using sprites, (or very pixelated characters, backgrounds etc.). I draw them on the canvas like so...
matrix.preScale(xrat,yrat);
canvas.drawBitmap(img, matrix, null);
Where img is the Bitmap and the xrat and yrat are the scales.
My problem is that when I test, the Bitmap is blurry or anti-aliased, is there a way to prevent this? The rigid-blocky art style of the game will be ruined if the blocks are blurry.
Any (ANY) help appreciated!
Create a new Paint to use when drawing the bitmaps with the settings:
Paint drawPaint = new Paint();
drawPaint.setAntiAlias(false);
drawPaint.setFilterBitmap(false);
Filtering I believe is on by default and will attempt to smooth out bitmaps when drawn scaled up.