Adding animation to Android application - animation

I'm currently working on a new app, and I want to add customized animations to it (not talking about activity transitions).
To show you exactly what I mean, take a look at this video at 2:30-2:33:
https://www.youtube.com/watch?v=XBMdjX5bbvk&nohtml5=False
You see the chest jumping to the screen and opens smoothly with beautiful animation?
I'd really like to know how can it be added to an Android app, is it a frame animation?
I mean, I can make this animation, in 2D, I just want to know how to add it (I'm using Android Studio) without causing memory overflow.
Thanks!

For you question:
You see the chest jumping to the screen and opens smoothly with
beautiful animation? I'd really like to know how can it be added to an
Android app, is it a frame animation?
I don't think it is a frame animation. I guess this has been implemented using OpenGL. You can find the official tutorial here.
If you want to make simple 2d animations, you can use the AnimationDrawable api provided by android. You basically need frames for the sequence of animations and then you can create the animation using the following code:
// you would need an `ImageView` object as a placeholder for the animation
ImageView mMascotView = findViewById(...);
// prepare the animation object ..
AnimationDrawable mMascotAnimation = new AnimationDrawable();
final int frameTime = 250; // time in milliseconds
// adding the frames to the animation object. You can specify different
// times for each of these in milliseconds
mMascotAnimation.addFrame(getResources().getDrawable(R.drawable.frame1),frameTime);
mMascotAnimation.addFrame(getResources().getDrawable(R.drawable.frame2),frameTime);
mMascotAnimation.addFrame(getResources().getDrawable(R.drawable.frame3),frameTime);
// make it loop infinitely ..
mMascotAnimation.setOneShot(false);
// set the background of the `ImageView` as the `AnimationDrawable`object ..
mMascotView.setBackground(mMascotAnimation);
// start the animation ..
mMascotAnimation.start();
Note: You should not call the AnimationDrawable.start()inside the onCreate() method of the activity. The views are not ready yet. You should use the callback on onWindowFocusChanged() method and start the animation there:
#Override
public void onWindowFocusChanged (boolean hasFocus)
{
//Start animation here
if(hasFocus) {
mMascotAnimation.start();
}
}

Related

JavaFX animations are flickering

I have a window displaying a video stream with a twitter feed as an overlay.
When a new tweet is displayed, the current tweet animates out using a rotate animation and the next tweet is rotated into view. The animations are performed using a RotateTransition.
The app also switches between different cameras to display different streams. To give an indication of when the app switches to the next camera, I have a progressbar that fills using a Timeline object.
This works well, until I resize the window. The rotate animations start to flicker, along with the progressbars as they gradually fill.
As a test, I disabled the video stream, to see what's happening. The 'artifact' doesn't occur then and I can resize as much as I want. If I play the stream and don't resize, everything works well.
The video player is based on VLCJ, but the actual pixels are drawn on a WritableImage in an Imageview.
See the following images that illustrate the problem.
At the bottom right you can see 2 different progress bars (a ProgresBar and a ProgressIndicator).
A part of the flickering result is still visible below the second image. It somehow stays visible, probably because the area doesn't get redrawn.
Any idea what makes the flickering happen? Is there anything I can do to fix or avoid this?
I tried some VM options in IntelliJ: -Dsun.java2d.d3d=true -Dprism.forceGPU=true to somehow enable hardware acceleration, but that doesn't seem to help.
Disabling the progressbar fill animation doesn't help either.
I had a similar problem with some arcs and shapes that would flicker when its attributes / sizes were changed.
The solution to my problem was to make sure that the methods used to change the shapes were called from inside the JavaFX thread.
Platform.runLater(() -> {
arc.setStartAngle(30);
arc.setLength(45);
}

Loading new level OpenGL

I am working on a small 2d game engine for android-ndk using opengl.
I am facing difficulty on how to change levels, eg. from menu to game screen.
Because the texture ids are not working when loading new textures for game screen using glGenTextures, glGenTextures keeps returning duplicate ids.
// class to bind ndk with java
Renderer.java
void onSurfaceChanged(gl, width, height){
nativeSurfaceChanged();
}
void onDrawFrame(){
nativeDrawFrame();
}
// c++ code
Game.cpp
Screen *screen;
void SetScreen(Screen *scrn){
screen = scrn;
// load textures and create openGL objects (mesh and textures)
screen->Initialize();
}
void Update(){
screen->Update();
screen->Render();
}
NDKActivity.cpp
Game *game;
void nativeSurfaceChanged(){
// initlizes stuff like audio engine, rendering engine
game->Initialize();
// set current screen to main menu
game->SetScreen(new MainMenu());
}
void nativeDrawFrame(){
game->Update();
}
MainMenu.cpp
void Update(){
// if some button is clicked
game->SetScreen(new GameScreen());
}
Now when menu is initialized, everything works fine. But on loading GameScreen textue ids get all mixed up
I basically ported it from windows app where I was using GLUT for creating OpenGL context and there it was working fine.
And please let me know if more info is needed
glGenTextures keeps returning duplicate ids
That should not happen, unless you're deleting the texture with that ID somewhere (else) or end up in a different GL context.
I am facing difficulty on how to change levels, eg. from menu to game screen.
It's as easy as drawing something different. Have two functions draw_menu and draw_level; maybe a draw_loadingscreen and while you're in the loading screen or menu you can replace all the stuff the level uses.
Or you could use a modern streaming approach, where you don't discriminate between menu, loading screen and level and instead upon drawing each frame collect the resources required to draw it, load what's not yet loaded into the GL context and then draw.
Deleting GL resources can be mostly offloaded into a background garbage collection routine. I.e. every frame for every resource of your game you increment a counter; in the frame setup, when you actually are about to draw it you reset the counter to zero. Once the counter hits a certain threshold you delete it. If when loading resources into GL you hit an out-of-memory condition you can work yourself through the resources with the highest counter value downward, deleting them from the GL context.
so as it turns out I was listening for change screen method in OnTouch() method which apparently runs on different thread than opengl and thus every thing was falling apart. So I had to add a callback which would change screen in onDrawFrame and it fixed the issue.
thanks for helping :)

Basic, Frame by Frame Sprite animation using Animator class

I have a simple sprite sheet that I'm using in a Unity project:
It has frames for walking and standing in each of four directions. I've cut the image up using Unity's Sprite Editor and made a separate Animation object for each series, all of which fit neatly into a single animation controller:
I've added the animation controller to an Animator component on a GameObject in my scene. This is where I start running into trouble. I can't for the life of me figure out how to change between the animations in my code.
You are not supposed to create the connections between your animations in a script. What you do is you create the connections in the Animator and set up variables for if you are standing or walking and in which direction you are going. Then you just edit these variables in a script and the Animator takes care of chosing the right animation.
This video shows it in action: Example
(you see the connections and in the bottom left the variables he set up)
Quick google of "mechanim 2d tutorial" gives you: Tutorial
edit:
Too long for a comment :)
Basically what i would do is create 2 variables, one bool named "Standing" and one Integer named "Direction". Then you make one connection from AnyState to every other state you have(Rightclick on AnyState to make the transitions). Maybe order them in a circle around AnyState.
After this, click on the connections and in the Inspector set the conditions by chosing "Standing", then add one more and set it to "Direction" "Equals" and the number for the direction.
Then in your script somewhere in your Update function you might have something like:
private readonly int UP = 0;
...
if(speed.magnitude > 0.0f)
Animator.SetBool("Standing", false);
else
Animator.SetBool("Standing", true);
if( Condition for walking up? )
Animator.SetInteger("Direction", UP);
if( Condition for walking down? )
Animator.SetInteger("Direction", DOWN);
...
this might not work directly, but you get the idea. You might want to use a switch for the direction depending on how you set it up.
Why even use code? Just hook it all up in the Animator using parameters and just change the parameters as needed.
The Animator.CrossFade function will achieve the desired results:
C#:
Animator animator = this.GetComponent<Animator>();
animator.CrossFade("WizzyWalkDown", 0);
It may seem a little excessive, or counter-intuitive, but remember that the AnimationController class was built to make transitions between animations easy. It can still very much be used for simpler animation types like this, though!

Unity 3d show specific frame of animation

I'm trying new unity 3d options for 2d games. I'm trying to create background that changes depending on actions i made. So if i press button one i get sprite one as background and if two i get sprite two. Since I have 32 options, I figure out the best way would be to have an Animator, that changes frame depending on button click. So i created animator and animation. But the problem is I can't set time to where to stop animation to show selected frame.
I'm trying like that:
Animator ani=background.GetComponent<Animator>();
ani.animation["field_back_anim"].time=0.5f;
ani.speed=0;
But it fails at second line with that error:
MissingComponentException: There is no 'Animation' attached to the "background" game object, but a script is trying to access it.
You probably need to add a Animation to the game object "background". Or your script needs to check if the component is attached before using it.
However if I do no code the animation just plays trough all 16 frames. So i gues there is animation after all.
On the background GameObject I have 2 components first is sprite renderer and second is animator. When I open animator in Animator view i see there green rectangle saying Any state and yellow one with "field_back_anim". I don't get what i'm doing wrong.
I will also except any other solution that does the following.
Thanks!
The animator component is used to control transition between many animation clips. If you're going to playing an animation clip on a gameobject, an animation component is proper, not the animator. Remove the animator and add an animation component to your background gameobject in the inspector. If you set animation property to field_back_anim, your gameobject will animate well. Manipulation codes should be changed like below.
Animation ani = background.GetComponent<Animation>();
ani["field_back_anim"].time = 0.5f;
ani["field_back_anim"].speed = 0;

iOS runLoop and openGL

I'm building an iOS application that uses openGL and I have the following problem:
I'have a certain object that I want to show on my glView. If I just draw it once in the view it works just fine. But if I add my drawView function to the runLoop it calls the function perfectly but it doesn't draw anything and I'm just left with a blank white screen.
Here is all relevant code.
redraw is a flag that indicates the draw function when to draw the scene again.
I expect the following code to rotate my object each time it's drawn:
static double theta = 0;
theta += 0.03;
glRotatef(theta, 1, 1, 0);
The rotation works if I don't add the draw function to the runLoop but draw it manually.
Thanks.
The chances are that there is an error in your OpenGL code somewhere.
If everything works in some scenarios it might be context related. Try putting glError calls after and before every OpenGL call. This way you will know where the problematic function is.
You will need to ensure that you set the context to be the correct context for the currently active view.
problem solved!
I just had to add
[self setCurrent];
to the glView class in the drawView function.

Resources