I'm working on a live wallpaper that incorporates some water ripple effects on touching the screen but I'm a little stuck.
Would it be better to create multiple images and loop through them to create a ripple animation or would it be better to distort the bitmap a bit before I place it on the canvas?
This is a video of a very nice ripple effect done through OpenGL.
I don't have any experience yet with OpenGL and was wondering if it is still possible to create a 2D water effect on the live wallpaper?
I wanted to implemented a realistic ripple effect in Android too, so will share my experience:
As a reference implementation i took Sergey's Chikuyonok JavaScript port of Neil Wallis Java algo. Here's a playground where you can experiment with original JS code: http://jsfiddle.net/esteewhy/5Ht3b/6/
At first, i've ported JS code to Java only to realize that there's no way to squeeze more than 1 fps on my Huawei U8100 hardware. (There're several similar attempts on the net with the only conclusion: they're ridiculously slow).
BTW, this SO answer was quite useful to get basic understanding of how to code an interactive graphics in Android: https://stackoverflow.com/a/4946893/35438. I've borrowed fps counter from there.
Then i decided to try Android NDK to reimplement original algo in pure C (my first encounter with it in 10+ yrs!). Despite NDK's docs being somewhat confusing (especially as to requirements and prerequisites), it all worked like a charm, so i was able to achieve up to 30 fps -- it might not be too impressive, but still, a radical improvement over Java code.
Finally, i've put all my work online: https://github.com/esteewhy/whater , so feel free to play with that. It contains:
Interactive bouncing ball code mentioned above (just for the reference).
Water ripples Java port (slow like hell!)
Water ripples C implementation (needs NDK to compile and JDK to create .h file).
(The project is not "clean", i.e.: all binaries are there, so can try to run it "as is" even without NDK.)
You can find an example of a touch ripple effect here:
https://github.com/MasDennis/RajawaliExamples
It utilizes the rajawali OpenGL ES framework/library. You can download the rajawali examples app from the market to see how it looks. Browse through the "src" folder and you will see the TouchRippleEffect activity and renderer. Hope that helps.
I'm no expert in this, but I believe the typical way to do water effects in OpenGL is with a fragment shader. With a static image as a texture, your shader can vary the texture coordinates used for sampling that image, to distort it in arbitrary ways.
Calculate the pixel's direction and distance from the center of the circle, and adjust the texture coordinate toward or away from the circle's center based on a sinusoidal function of the distance, and you should get a nice ripple effect.
Judging by the description of that YouTube video you linked, it sounds like that's done by using a grid of triangles and adjusting the texture coordinates only at the vertices. That should work too, but it won't look as good unless you use a rather fine grid. Doing it per-pixel with a fragment shader is the ideal, but I don't know whether that would cause performance problems on a phone's GPU.
Related
I want to make a "2d game" using graphics from the ressources for the characters.
Now I'm asking myself what is the best solution.
I was searching a lot in the net finding the two different options.
A) Creating a custom view, adding it to the layout showing a AnimationDrawable or
B) Using the SurfaceView directly painting on it
Whereas a) is usually called slow and unperformant for games I tried to find a solution for b).
But so far all tutorials are only made with one image moving around on the surfaceView or animating geometric shapes (which isn't really what I had in mind).
Finding tutorials for "how to draw AnimationDrawable on SurfaceView" are very rare.
So I thought I might load all animation frames of my character into an array drawing each call the right one on the SurfaceView. But that sounds like a lot of overhead to me. Should I abandon the SurfaceView?
Has anyone a good idea what would be the best way to animate - lets say 10 characters + "background" on my screen?
You have (at least) three options:
Draw on SurfaceView surface with a Canvas. This will use software rendering and be relatively slow.
Instead of a SurfaceView, draw on a custom View with a Canvas. This will be hardware accelerated, with some limitations.
Draw on SurfaceView surface with OpenGL ES. This will be hardware accelerated, but you have to figure out how GLES works.
You should also consider (4) use an open-source 2D game engine and don't worry about what it's actually doing.
If you want an example, Android Breakout is a simple but complete 2D game written for GLES and GLSurfaceView. A more evolved set of EGL/GLES helpers can be found in Grafika, which uses GLSurfaceView, SurfaceView, and TextureView to accomplish various things. It also demonstrates the use of the hardware scaler to improve efficiency on larger displays.
Long description of the Android graphics architecture is available here.
Okay, I'm not sure this is the best option but I found a tutorial for using "Sprite Sheets".
http://www.edu4java.com/en/androidgame/androidgame4.html
So far this seems to be a good solution. OpenGL seemed a bit too much to me but perhaps I'm not good at Shader Language etc.
So if anyone finds a better solution, please let me know.
So I'm doing a 3D game for kids for Android and iOS in Unity, but i'm new in game developing and it's been really difficult to plan the assets.
We need to create 2D animations (paper like characters) and the characters have to be really detailed with great animations.
We have been thinking of several options:
We could create frame by frame animations but our designer says there has to be at least 24 images per second (because of 24 fps per second) with this the app will be very big.
Other option is to create 2D models in Blender and animate them there, but it's a lot of work and could take a lot of time.
The last option is to have the pieces of the model an animate it throughout code but it's a lot of work and I believe the quality of the animations would be low.
What's the better way to create 2D animations in Unity?.
Thank you!
Have you explored the 2D sprite engines that are available in Unity? Whoever said "Unity isn't really an engine designed to work with 2D stuff" is talking guff. I have just started working on a hobby 2D game and am using a Unity plugin called Orthello (see WyrmTale website for info). It handles sprite sheets, animations, collision detection and more without you having to write loads of code to do this. The learning curve is a bit steep and the examples on their website aren't the best but I found replicating the sample solutions that come with the download the best way to get something working.
There's also a similar tool called Sprite Manager 2 but you have to pay for that (I think). Check out the asset store for more information.
I would be really interested to hear if Orthello is what you're looking for and how you find working with it - please let me know via http://markp3rry.wordpress.com if you can.
Just because the app runs at 24fps doesn't mean you can't just display the animations for more than one frame of the main loop. It might not be smooth, but then again looking at the sprite sheets of games like super street fighter it doesn't look like they're at anywhere close to 24fps (the sprite sheet for Dhalism in SF3 Alpha is a 210kb .gif file on my computer, and there's less than 252 frames of animation on it. Likewise, the total storage space take up by every character sprite in Dustforce takes up a mere 7mb, though those sprites are just 192x192, maybe too low-res for you. They do look like paper though). I doubt that anything involving blender would take longer than hand animating -- Blender does key frames for you.
I am looking at making a simple game. Without giving out the entire story, I need to draw two pieces of fruit (with arms and legs), who do different movements. They can do a few different actions (less than 5) and they also react to each others actions.
I'd like it to look simple. Very 2D, kids sort of graphics. Maybe shaded, but nice bright happy colours.
Let's say an action is to 'throw ball'. I'd like to see a semi smooth arm action. Smooth if possible.
So, I found a tutorial, which used sprites, and a PNG with 3 different states of a person walking. So, very basic. And I was able to make it walk across the screen, leading each part of the PNG for each state, and iterating through that over and over again, while moving the image.
I got pretty happy with my progress, and would like to base my game on that sort of model - but ... is using sprites, and loading areas of the PNG to make the image move correct? My PNG would be large if I want maybe 20 images just to throw the ball.
But if that's the right way to go, then great! It seems you can go with OpenGL and all that, but that's for 3D graphics right? Using sprites, and a few PNG with images would be OK for perforamnce and all that?
OpenGL is a valid choice for 2D or 3D, you shouldn't have any performance issues.
It will work fine for your game, and would likely be much smoother than trying to use android animations, which are not hardware accelerated on Android 2.x.
This is a big issue for me I'm trying to figure out for a long time already.
I'm working on an application that should include a 2D vector indoor map in it.
The map will be drawn out from an .svg file that will specify all the data of the lines, curved lines (path) and rectangles that should be drawn.
My main requirement from the map are
Support touch events to detect where exactly the finger is touching.
Great image quality especially when considering the drawings of curved and diagonal lines (anti-aliasing)
Optional but very nice to have - Built in ability to zoom, pan and rotate.
So far I tried AndEngine and Android's canvas.
With AndEngine I had troubles with implementing anti-aliasing for rendering smooth diagonal lines or drawing curved lines, and as far as I understand, this is not an easy thing to implement in AndEngine.
Though I have to mention that AndEngine's ability to zoom in and pan with the camera instead of modifying the objects on the screen was really nice to have.
I also had some little experience with the built in Android's Canvas, mainly with viewing simple bitmaps, but I'm not sure if it supports all of these things, and especially if it would provide smooth results.
Last but no least, there's the option of just plain OpenGLES 1 or 2, that as far as I understand, with enough work should be able to support all the features I require. However it seems like something that would be hard to implement. And I've never programmed in OpenGL or anything like it, but I'm willing very much to learn.
To sum it all up, I need a platform that would provide me with the ability to do the 3 things I mentioned before, but also very important - To allow me to implement this feature as fast as possible.
Any kind of answer or suggestion would be very much welcomed as I'm very eager to solve this problem!
Thanks!
I'm working with my friend on our first Android game. Basic idea is that every frame of the game the whole surface is redrawn (1 large bitmap) in 2 steps:
Background with some static image (PNG) wipes out previous frame
Then it is sprinkled all over with large number of particles which produces effect of soapy bubbles where there's a pool of about 20 bitmaps which randomly gets picked to produce illusion that all bubbles (between 200 - 300) are all different. Bubbles positions updated on each frame (~50ms) producing effect of moving bubbles.
The math engine is in C (JNI) and currently all drawing is done using android.graphics package very similar (since that was the example I was using) to Lunar Lander.
It works but animation is somewhat jerky and I can feel by temperature of my phone that it is very busy. Will we benefit from switching to OpenGL? And as a bonus question: what would be a good way to optimize the drawing mechanism (Lunar Lander like) we have now?
Now I've started to work with OpenGL ES, I would also use it for 2D graphics. This way is the most flexible and it's extremely fast (look at this example code. It's about 2D rendering, and there you can see the power of OpenGL.
It's not the easiest thing to start with, but there are some good tutorials out there - for example, this is a very good one.
Don't redraw the entire screen each time. That's what causes your low framerate. Use the invalidate method to mark the areas that have changed each frame.