Processing for Android in Eclipse: How to handle different screen sizes and pixel densities?

edited January 2015 in Android Mode

Hi,

I am developing a game for Android using Processing in Eclipse. I am wondering what my approach should be for creating a universal game that will run on all screen resolutions and sizes.

For this, I need to know:

  • What kind of parameters are the methods ellipse(), rect(), image() etc. methods designed to accept? Do they treat the numbers given as the number of pixels or maybe as the number of dots per inch or other units of pixel density?

  • Images are loaded from the assets folder. What if I want to adjust the image to the screen density of the device? Is there a way to put the image in the /res/drawable and then respective screen densities' folders? If yes, how do I reference the images in the loadImage() method? (This method seems to automatically consider the /assets folder to be the parent folder for all images, therefore making it impossible to access images in the /res/drawable folder) Additionally, if I put the images in their respective screen densities subfolders of the res/drawable/ folder, will the app automatically refer to the correct folders based on the devices' respective screen pixel densities?

Thanks in advance for your help!

On a side note, gif images with transparent parts do not appear transparent. If I replace them with png images, their transparent parts appear correctly transparent. Why's that? I would prefer to use gif images as they use less space in memory than png images.

Answers

  • Okay the parameters are in pixels. So what do you mean by density? How concentrated the pixels are? That I don't know. I think if you want it to run universally, you should make everything all your measurements to be derived from the screen width and height. See first make this:

    size(displayWidth,displayHeight);

    Then an example of a rectangle

    int rectangleX= width/2;

  • For the gif and png situation, I believe that png are more compact and versatile which is why you can view it correctly, but takes more space. So now it's a debate of size. I would go with png though.

  • Answer ✓

    @witt221== as for gif/png i don't know:: i always use png 24 as for the other question (density & so on) it is not so simple to explain::

    1) first thing is the physical size of your display, in inches; 2) second thing is the pixel size, which varies according to density, which means that your display can be (physically) little and yet (width or height) contains a big lot of pixels (720….1200 or more, width & height) 3) third thing is the dp or dip which is the density independent pixel and is something abstract, i mean is (arbitrary) defined by android as 1dp when density is 160; sp is the same but for font size. 4) Android has decided to "categorize" the difference displays low, medium, high, extra-high, extra-extra-high, and extra-extra-extra-high density; this explains the 160 and 1 (because it is considered as medium density); 5) So = when you draw (or put some picture in a view) something (rect, ellipse, circle…) on android you have to think the "size" relative to density; practically you have to "scale" according to the density; when as for an example you draw a circle on a high density display , let's say 320 you have to scale knowing that 160== 1, so using *2 factor. 6) that s why (as you can see working with eclipse) in the res folder there are subfolders (low, medium….) where you have to put your drawable according to the display:: so for pictures you have to put in these folders the different versions according to density and scale factor. 7) android has methods for getting the density and other metrics values for your device:: the main one is for density:

    getResources().getDisplayMetrics().density;

    that you can use in your code before you draw something, using the result to fix the size as relative to it. 8) back to your question: if you want to draw a circle or a rect in he middle of your display= int x = thisview.getWidth/2; int y = thisview.getHeight/2;///no problem! but the radius size has to be scaled according to density: 100 px on low density (120) is not == to 100 on XXdpi (320, 640…):: it seems to be little! - Of course you can use (in the xml) dp (independent pixels density) knowing that 1dp is a "virtual" unit for medium density display...

  • Thanks for your replies!

    I decided to define one percent of screen width and then one percent of screen height. So, for instance, the entire screen width equals 100*percentX. Then, in the ellipse(), rect(), line() etc. methods, I specify the sizes using multiples of the previously defined single percents of screen width and height, for instance:

    ellipse(5 * percentX, 5*percentY, 20 * percentX, 50 * percentY);

    This way, whatever the screen dimension and resolution, given objects will be drawn at exactly the same place and with exactly the same size.

  • yes, i think you can do so; yet, as for pictures i think that it is necessary to create pictures according to screen resolution....

Sign In or Register to comment.