I come from a non-GUI and lower level programming environment. I have solid experience in OOP programming and algorithms, but the projects I worked on did not have any impressive user interfaces, hence my post here.
I want to understand how the graphics are updated in a mobile app.
For instance, let's take the basic example of a classic wall clock, with second, minute and hour arms. The Wall Clock app will move the seconds arm each second, likewise the hours arm each 60 mins, and minutes arm every 60 secs, problem I have is that I just cant wrap my head around creating these moving parts in an efficient way.
Am I supposed to save images of all possible combinations of second,minute and hour and just morph the 3 and display the appropriate time each second? Or is it a better idea to have the background image as a non dynamic entity, and have only the "seconds, minutes and hours" arms rotate? If this is the case, when I package my application, I will have to also include 60 + 60 + 12 = 132 images (60 images for seconds, 12 images for hours and 60 images for minutes), is this correct? If it is, this seems awfully inefficient...
Just to kind of give you an idea of what I am having problem understanding, consider another example that requires updating the graphics each time microphone hears varying noise levels: Assume that I want to create an app that measures the sound levels in an environment and it shows the dB measured from the microphone on a volume bar. If there is a song playing near the microphone with varying noise, the sound level indicator will move up and down. I understand how to update the noise values to the command prompt, serial window, or a TextView box, but I don't get how to update this info graphically.
I may be wrong, but think I must have a volume bar image that is just empty(as if the noise is at zero) and in the program, I fill this volume bar according to the dB levels acquired from the microphone, but then how can I fill the volume bar in real time depending on the noise level seen by the microphone?
These questions I have are not just Android specific, I'm sure the same approach to updating a Wall Clock app is also used in Windows application development, so I feel like if I have a good understanding of GUI development irrespective of the environment, I may be able to tackle these silly questions with ease; perhaps you can also direct me to a good book on GUI development in Java or C/C++.
For your clock example: you would not generate images for every position a clock could be in. Your app would be HUGE! You would instead make images for: the face of the clock, the minute hand, the hour hand, and the second hand. You could then take the time and calculate the angle of each hand of the clock from some standard point on the clock (this could be any point you want). You could then rotate each image to that calculated amount. This would make the clock appear to have its hands pointing at the right time.
I don't know very much about audio bars, but it would work in a similar way. Make a formula to calculate where/how large the bar should be. Then draw a bar stretched to what the formula dictates.
GUI and custom drawing can be achieved in many different ways, each have varying efficiency.
How to draw?
For example, if you want to show a cartoon character walking, in most cases you need to store each frame as image and redraw it, probably on every tick or second.
But for wall clock, you don't actually need to
Store so many images for every possibility because you can put single arrow image and rotate it
Store any image at all if you can draw it procedurally by defining its shape
Suppose you have a canvas on easel that you can draw whatever you want on it. You can choose which order you want to draw. For your wall clock example, you can first draw your background (numbers / hours) and start adding minute hand and hour hand on top it. This is called z-order.
Operating system libraries gives you widgets that you can interact with it. Canvas (picture box) is one of them and you can to draw whatever you want that you to build your custom widgets and of course Android has this too.
Android has Views and each view provides an method that you can implement your custom drawing logic:
// Implement this to do your drawing.
// Parameters
// canvas the canvas on which the background will be drawn
protected void onDraw (Canvas canvas){}
A very crude wallclock can be implemented with just using:
canvas.drawLine(float startX, float startY, float stopX, float stopY, Paint paint)
Beyond this, we can basically apply OOP concepts in GUI programming too. For instance, you can define every thing you want to draw as an object that implements a common drawing method. This is widely used on 3D game programming as usualy 3D rendering engine manages every object and asks them to draw themselves if "camera" sees them.
When to draw?
Normally this is up to operating system. It draws elements whenever it is required. However, for game like applications and for custom animations you might need to manage this by yourself.
On most operation systems, you can use seperate threads, a timer, an infinite loop or a notification event to force redraw your screen. You can achieve this redrawing with postInvalidate method on Android.
But not every environment is easy. For example, your application might need to redraw itself 30 times every second and depending the operation system and environment, you might need to acquire locks to display your UI updates correctly and might need to make your thread sleep to achieve desired framerate without keeping CPU busy. (This is used in SDL library.)
Android has an animation class to tackle common tasks.
Thing to remember
Reusing widgets that OS gives you is a good idea. You can implement a dB meter by just using a progressbar.
Related
as part of my project, I need to plot 2D and 3D functions in android using android studio. I know how to plot 2D functions but I'm struggling with 3D functions.
What is the best way to plot 3D functions? What do I need and where do I start?
I'm not looking for code or external libraries that do all the work, I just need to know what I need to learn to be able to do it myself.
Thanks in advance.
I know how to plot 2D functions but I'm struggling with 3D functions.
What is the best way to plot 3D functions? What do I need and where do I start?
I'm not looking for code or external libraries that do all the work, I just need to know what I need to learn to be able to do it myself.
Since you already understand 2D and want to advance to 3D there's a simple and non-optimal method:
Decide on how much z depth you desire:
EG: Currently your limits for x and y in your drawing functions are 1920 and 1080 (or even 4096x4096), if you want to save memory and have things a bit low resolution use a size of 1920x1080x1000 - that's going to use 1000x more memory and has the potential to increase the drawing time of some calls by 1000 times - but that's the cost of 3D.
A more practical limit is matrices of 8192,8192,16384 but be aware that video games at that resolution need 4-6GB graphic cards to work half decently (more being a bit better) - so you'll be chewing up some main memory starting at that size.
It's easy enough to implement a smaller drawing space and simply increase your allocation and limit variables later, not only does that test that future increases will go smoothly but it allows everything to run faster while you're ironing the bugs out.
Add a 3rd dimension to the functions:
EG: Instead of a function that is simply line_draw(x,y) change it to line_draw(x,y,z), use the global variable z_limit (or whatever you decide to name it) to test that z doesn't exceed the limit.
You'll need to decide if objects at the maximum distance are a dot or not visible. While testing having all z's past the limit changed to the limit value (thus making them a visible dot) is useful. For the finished product once it goes past the limit that you are implementing it's best that it isn't visible.
Start by allocating the drawing buffer and implementing a single function first, there's no point (and possibly great frustration) changing everything and hoping it's just going to work - it should but if it doesn't you'll have a lot on your plate if there's a common fault in every function.
Once you have this 3D buffer filled with an image (start with just a few 3D lines, such as a full screen sized "X" and "+") you draw to your 2D screen X,Y by starting at the largest value of Z first (EG: z=1000). Once you finish that layer decrement z and continue, drawing each layer until you reach zero, the objects closest to you.
That's the simplest (and slowest) way to make certain that closest objects obscure the furthest objects.
Now does it look OK? You don't want distant objects the same size (or larger) than the closest objects, you want to make certain that you scale them.
The reason to choose numbers such as 8192 is because after writing your functions in C (or whichever language you choose) you'll want to optimize them with several versions each, written in assembly language, optimized for specific CPUs and GPU architectures. Without specifically optimized versions everything will be extremely slow.
I understand that you don't want to use a library but looking at several should give you an idea of the work involved and how you might implement your own. No need to copy, improve instead.
There are similar questions and answers that might fill in the blanks:
Reddit - "I want to create a 3D engine from scratch. Where do I start?"
Davrous - "Tutorial series: learning how to write a 3D soft engine from scratch in C#, TypeScript or JavaScript"
GameDev.StackExchange - "How to write my own 3-D graphics library for Windows? [closed]"
I currently need some advice about a "simple" issue.
I'm building a game helper, where users may roll dices (6 faced dice, 20 faced dice, etc). Actually, I displaying only the number to the user.
But, to make that much better to use, i want to display THE dice on the screen (on an alert dialog with custom layout for example).
My problem is here, and I don't really know how achieve that. I can't believe that the only way is to create each face of the dice to display it.
For your information, I need theses dices : 6 faced, 8 faced, 12, 20 and special 6 faced. :) That will be a very long task if I have to create all dices :(
The best i can dream, is to have the dice animation, but i guess is a bit too complex for me at this time.
Anyone as some advice about it ?
Best Quality / Highest Effort:
If you want to show a 3-D tumbling die, you probably want to look into the free 3D modeling/rendering/simulation packages. Blender is the first that comes to mind, although there are probably easier free alternatives. They take some time to learn, but you can model a photo-realistic 3D solid and then animate them in real physical simulations.
Going that route, you'd render short (GIF?) animations for each. Then you just have to look up how to display an animated GIF in a dialog (there's plenty of examples available).
Lower Quality / Less Effort
You could just display a single, 2D face of the die being rolled on your dialog, with a number (or pattern of dots) in the center. Depending upon the type of die, the 2D outline of the face could be a square, triangle, pentagon, etc.
The drawing logic for this would be fairly trivial (again, many examples available online). You could even do a crude animation, by having it cycle through several values before stopping on one. Have the cycling rapid at the start and slow at the end, and add a little 'click' sound for each, and you'd have something users would probably like.
Drawing on android itself, is a herculean task. Now my requirement is on to see, how robust I can draw atleast 10million points with different intensity levels.
Some methods I came across:
Android draws with Canvas and Bitmaps
SurfaceView with OpenGL
Using libGDX fastest drawing library
Custom view to refresh & update automatically
What is best method to go about it? If I need to draw 10million or more points maybe on a static image on android, how can I enhance it and not degrade its performance. Every second I need to refresh and draw another 10million points. Is it possible or android is capable of doing such a task?
As your question states 10mil/sec, I understand that you want them realtime, thus opengl is the way to go, leaving you with options 2, 3 and 4.
You would definitely need to batch those calls.
You can think about using point sprites to reduce the amount of data you need to transfer to GPU.
Android as OS is capable of anything your machine can support. Your specific device may have performance issues, or not.
Don't optimize prematurely and try option 3 (libGDX). It would be the easiest to set up and achieve your task. If it won't be performant enough I'd think about rolling my own opengl-based solution.
https://gamedev.stackexchange.com/questions/11095/opengl-es-2-0-point-sprites-size
I'm developing an app for Android (API level 11), that reads some data from a device, one chunk a second. I want to plot the data, x-axis being time in seconds and y-axis being the values. One of the requirements for the program is that I must show the results of one hour of observations on one screen without any scrolling, so I must fit 3600 points on the screen. It doesn't matter that the points overlap.
I don't know how to plot the data fast enough.
I'm using androidplot, and things get really slow in approximately 30 minutes, as androidplot redraws the same points over and over again.
I tried to make some changes to it (as the sources can be freely downloaded), but in vain.
Can I somehow cache the previously drawn image and add only new points to it?
Is there something like WinAPI BitBlt() function in Android?
I created an app for android. I'm using canvas and making more and more "Sprites" from my Sprite class. when i start the app and there is only one sprite the game runs super fast. I made the class to create more sprites every time the timer i set up gets to 25 (so there would be an even space between each sprite). but when each of the sprites appear and it get to the max that i have made (5) it gets slower. So, my question is, How can set a custom framerate/speed to my app. Is it even possible? and if it does can you please write the easiest way? Thanks!
Here's a good article on how to set up a game loop. That will help you control the framerate of your app (make it consistent). Also, note how you doesn't wait a constant amount after drawing. Instead, you wait a constant amount of time between frames.