i am trying to implement an animated butterfly which should fly around the screen by clicking a button .How can i implement it efficiently.If i need multiple butterflies(may be 100+) whether it effect device performance?.How can i achieve fly effect on wings.
Is it possible to implement with many parts of a butterfly image put
together and bring this fly effect.
Can i use renderScript
Please provide a sample code.i tried scaled animation but it is not as expected .any help appreciable.
You can achieve a quite good performance with showing a simple gif in your layout. Just create a gif out of the images you have (use some gif maker for that - there are a ton of other options, just search for it). For showing the gif in your application you can use a custom library, like android-gif-drawable. Implementation is similar to an ImageView:
<pl.droidsonroids.gif.GifImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="#drawable/your_butterfly_anim"
/>
It's a possibility for simple animations.
Edit:
int distance = 100; //the distance to move in pixels
int duration = 500; //the duration of the animation in ms
double direction = Math.random() * 2 * Math.PI;
int translationX = Math.cos(direction) * distance;
int translationY = Math.sin(direction) * distance;
yourImageView.animate().translationX(translationX).translationY(translationY).setDuration(duration).start();
This should give you some first ideas of how you can get it flying randomly.
Related
I'm creating an app that works like a level for speeds.
If you go fast, my image will go up, and if you go slow, it will go down (Not to the top, the faster the upper and the slower the lower).
Currently, on every onLocationChange I calculate the recommended speed and get the actual value. Then I put move the image like that:
imageView.setY((float) speedvalue);
I have two problems:
setY is in pixels, so it doesn't fit to every screen.
Image moves instantly, I would like it to move like an animation.
How can I solve them?
You can animate the movement of a View like this:
TranslateAnimation animation = new TranslateAnimation(startXCoordinate, finishXCoordinate, startYCoordinate, finishYCoordinate);
animation.setDuration(1000);
view.startAnimation(animation);
Secondly, convert pixels to dps using this code and it will move the same amount on different screens:
int distanceToMove = (int) TypedValue.applyDimension(1, howManyDPsToMove, context.getResources().getDisplayMetrics());
I am developing a game in libgdx where I need to zoom in and zoom out a popup for clearing every stage in the game. Could you please guide me how to do zoom effects in libgdx.
Just a note I am doing this for android device.
Kindly assist.
You can zoom using the property of same name of OrtographicCamera.
camera.zoom = 1; //Normal zoom (default)
camera.zoom = 2; //Zoomed in
camera.zoom = 0.5F; //Zoomed out
If you mean "zooming" a particular image, then just make it bigger and smaller.
To make your sprite larger or smaller use sprite.setScale, where 1 is the default size, 2 is 2 time bigger, 0.5 half.. you understand.
But if you want to make like a screen transition better use camera zoom, as described in the post above.
i want to do a 2D game with backgrounds and sprites (views) moving on the screen.
I want to make a game with a scrolling ground. I mean the user must see a horizon in the top part of the screen filling the 30% of the screen size. The ground must be scrolling and must be the 70% of the screen size. For example, if i put a car on the ground, the car must be driving into a scrolling road and the sky (horizon) must be seen on the screen, in the top of the road, filling the 30% of the screen.
I am searching in google about scrolling games but i can't find the way to achieve this kind of scrolling ground game with horizon.
Any ideas and approaches will be grated, i'm just making a research about how to do this.
Thanks
This kind of effect can be done in various ways, here is one very basic example I can come up with.
First create a background image for your horizon - a blue sky with a sun would be good. Now create some detail images for the background, such as clouds and birds. These can move accross the background image from left to right (and/or vice-versa). In your rendering code you would render the "background" image first, and then the "detail" images. Make sure that your background image covers around 35% of the screen, so that when you render the 70% ground layer there is some overlap - preventing a hole where the two layers meet.
Next create a textured image for the ground. For this I would use a static image that has the correct type of texture for what you are trying to represent (such as dirt). It may also be good to add some basic detail to the top of this image (such as mountains, trees, etc).
This should be rendered after the background layer.
Once you have this layout in place, the next step would be to simulate the depth of your world. For this you would need to create objects (2D images) that would be placed in your "world". Some examples would be trees, rocks, houses, etc.
To define your world you would need to store 2 coordinates for each object - a position on the x-axis as well as a depth value on the z-axis (you could also use a y-axis component to include height, but I will omit that for this example).
You will also need to track your player's position on the same x and z axis. These values will change in realtime as the player moves into the screen - z will change based on speed, and x will change based on steering (for example).
Also define a view distance - the number of units away from the player at which objects will be visible.
Now once you have your world set up this way, the rendering is what will give the illusion of moving into the screen. First render your player object at the bottom of the ground layer. Next, for each world object, calculate it's distance to the player - if it's distance is within the view distance you defined then it should be rendered, otherwise it can be ignored.
Once you find an object that should be rendered, you need to scale it based on it's distance from the player. The formula for this scaling would be something like:
distance_from_player_z = object.z - player.z
scale = ( view_distance - distance_from_player_z ) / view_distance
This will result in a float value between 0.0 and 1.0, which can be used to scale your object's size. Using this, the larger the distance from the player, the smaller the object becomes.
Next you need to calculate the position on the x-axis and y-axis to render your object. This can be achieved with the simple 3D projection formulas:
distance_from_player_x = object.x - player.x
x_render = player.x + ( distance_from_player_x / distance_from_player_z )
y_render = ( distance_from_player_z / view_distance ) * ( height_of_background_img );
This calculates the distance of the object relative to the player on the x-axis only. It then takes this value and "projects" it, based on the distance it is away from the player on the z-axis. The result is that the farther away the object on the z-axis, the closer it is to the player on the x-axis. The y-axis part uses the distance away from the player to place the object "higher" on the background image.
So with all this information, here is a (very basic) example in code (for a single object):
// define the render size of background (resolution specific)
public final static float RENDER_SIZE_Y = 720.0f * 0.7f; // 70% of 720p
// define your view distance (in world units)
public final static float VIEW_DISTANCE = 10.0f;
// calculate the distance between the object and the player (x + z axis)
float distanceX = object.x - player.x;
float distanceZ = object.z - player.z;
// check if object is visible - i.e. within view distance and in front of player
if ( distanceZ > 0 && distanceZ <= VIEW_DISTANCE ) {
// object is in view, render it
float scale = ( VIEW_DISTANCE - distanceZ ) / VIEW_DISTANCE;
float renderSize = ( object.size * scale );
// calculate the projected x,y values to render at
float renderX = player.x + ( distanceX / distanceZ );
float renderY = ( distanceZ / VIEW_DISTANCE ) * RENDER_SIZE_Y;
// now render the object scaled to "renderSize" at (renderX, renderY)
}
Note that if distance is smaller than or equal to zero, it means that the object is behind the player, and also not visible. This is important as distanceZ==0 will cause an error, so be sure to exclude it. You may also need to tweak the renderX value, depending on resolution, but I will leave that up to you.
While this is not at all a complete implementation, it should get you going in the right direction.
I hope this makes sense to you, and if not, feel free to ask :)
Well, you can use libgdx (http://libgdx.badlogicgames.com/).
The superjumper example will put you in the right way :) (https://github.com/libgdx/libgdx/tree/master/demos/superjumper)
Goal
I'd like to implement a countdown timer that just scrolls numbers (not graphics) from left to right.
Effect
The effect would look like the number zooms in from the left, slows down towards the middle, and then zooms off to the right.
Notes
Since I'm already using a TimerTask to execute code every second, I could use that to trigger the next number to scroll across the horizontally-scrolling textview.
Could this just be implemented as a textview inside a scrollview ? Looking for a code sample to start off with....
Using Animations would be the simplest solution. You can create your own or try and combine multiple TranslateAnimations and ScaleAnimations.
This would mean putting each number into its own TextView instead of using a scroll view.
Then you could control the acceleration to the middle with an Interpolator. Interpolators are how Android handles easing. You would probably want the AccelerateDecelerateInterpolator for the speeding up / slowing down effect.
You can use an AnimationSet to apply multiple animations to the same View. Figuring out how to put together a good AnimationSet will be the most challenging part of the project. Make sure to pay attention to the "fill" property. In fact after playing around a little, I think a custom animation is simpler than using the ready made ones.
You can fork my GitHub project that implements a very simple version of this. April 17 and before I used multiple pre made Animations. If you look at the most recent version, you'll see the custom animation.
The timing for each Animation takes care of itself after you set the duration for one Animation. A Handler calls the next number after the previous one finishes. I think this is a little neater than having to call a function every X seconds to update everything.
The outline of functionality:
An Activity (CountDownActivity.java) over sees everything.
The Activitiy's layout XML has a button that is used to start the count down.
Once the countdown starts, the button disappears. It reappears when the count down is done.
The Activity contains a Handler (MotionHandler.java). The Handler controls the movement and timing of the numbers.
The Handler uses a AnimationSet to move the numbers
The AnimationSet is a passed in dependency
This is for flexibility. Simply pass in a different AnimationSet to change how the numbers move
The AnimationSet is made of four Animations a custom Animation (see below)
The AnimationSet uses a shared AccelerateDecelerateInterpolator, which seems to work decently. There are other options, including writing your own.
The Handler uses a delayed message to start the next number
The Handler notifies the Activity when the count down is done using a custom listener (MotionHandler >> CountdownListener)
Rotating the device will restart the count down.
Note - previously I was using four ready made Animations in one AnimationSet, I've edited to include just one custom Animation... You can tweak its algorithm to your liking.
This custom animation uses a Cycloid to make the numbers appear larger and smaller.
/**
* A custom animation to move and scale the numbers.
*
*/
public class NumberAnimation extends Animation
{
final public static float MINIMUM = 3;
private int mHorizontal;
private int mScaling;
public NumberAnimation(int horizontalMovement, int scaling)
{
mHorizontal = horizontalMovement;
mScaling = scaling;
}
#Override
protected void applyTransformation(float interpolatedTime, Transformation t)
{
// Cycloid repeats every 2pi - scale interpolatedTime to that
double time = 2 * Math.PI * interpolatedTime;
// Cycloid function
float currentScale = (float) (mScaling * (1 - Math.cos(time))) + MINIMUM;
Matrix matrix = t.getMatrix();
matrix.preScale(currentScale, currentScale);
matrix.postTranslate(mHorizontal * interpolatedTime, 0);
}
}
Easing will help you control the speed.
I asked this question once before, but didn't get any good feedback, so I'm posting it again to try to get more help
Ok, I'm making an app with this kind of of disk in it: http://dl.dropbox.com/u/8051037/disk_full.png
I have the two rings as separate images, but I need to figure out a way to position them like they are in the image, first off. I'm not great at figuring out layouts, so I don't really know where to start with that.
Also, I need each section defined by the black lines to be a different imagebutton. I've been everywhere looking for an answer to this, but no one's been able to help me so far.
Thanks for any help, been stuck on this problem for a few MONTHS now!
EDIT: To help make my problem a bit more clear, I'll fully explain what I'm doing. I'm making a launcher modification to make it kinda look like Tony Stark's phone from Iron Man 2, like this: http://perceptionnyc.com/sites/default/files/D_01_PDA_flat_01.jpg.
(Original question: How make one image into multiple buttons and some other stuff)
Your best best would be to create the image as a single view, override onTouchEvent() method, and call .getX() and .getY() on the event. Then you can determine where was clicked with some simple math.
This will result in a much better solution than trying to create multiple overlapping views and non-rectangular buttons.
edit:
Given (x, y) you can calculate where the click was using the Pythagorean theorem to get the length of the hypotenuse (for which circle was clicked) and get the angle using tan-1(opp/adj) (for which pie slice was clicked).
FYI, the (x,y) noted in the picture would actually be the respective difference from the center of the image, NOT the values of getX() and getY() directly.
Here is an example of similar code being used for a circular color picker in ADW.Launcher.
Do what Jake said. Try starting out something like this:
class Disk extends ImageView {
public Disk(Context context, AttributeSet attrs) {
super(context, attrs);
}
public boolean onTouchEvent (MotionEvent event) {
double x = event.getX() - getWidth() / 2.0;
double y = - ( event.getY() - getHeight() / 2.0);
// Compare this to the radii that mark the rings
double distFromOrig = Math.sqrt( x*x + y*y );
// Compare this to the angles of your slices (in radians)
double angle = Math.atan2(y, x);
return true;
}
}
Then put it in a view like this:
<view class="package.name.goes.here.Disk"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="#drawable/disk_full">
</view>
The downside is that there's no immediate visual feedback on which section the user selected.
Try using an image map, I think you can make two circles with different radii and depending on the order, one (the inner) will be on top of the other.
working JSfiddle example http://jsfiddle.net/mazlix/wksZq/
I just read your older post, in this case I recommend what the above user posted about using .getX() .getY(), you can just make one image with all the animations you want or two with the smaller inner circle image having transparency, to set them both exactly where you want (on top of eachother) just make sure you use position:absolute