Image (object) change position by value

How-to
1

Hello, i want to make a game simmilar to flappy bird and my cuestion is how to change image position (up and down ) by some values (for example i want to use buttons or slider values for experiments ). What should i do?

2

I’m assuming you want to click on the image to move up, for example. You’ll need attach a callback to the image that does something like this:

void stop_btn_event(lv_obj_t * obj, lv_event_t event) {
  if (event == LV_CLICKED) {
    int duration = 250; //animation duration in ms
    lv_coord_t start = lv_obj_get_y(obj); //start is the current location
    lv_coord_t end = start + 20; //or whatever you want to move up/down by
    lv_anim_t a;
    lv_anim_init(&a);
    lv_anim_set_exec_cb(&a, (lv_anim_exec_xcb_t) lv_obj_set_y); 
    lv_anim_set_var(&a, obj); 
    lv_anim_set_time(&a, duration);
    lv_anim_set_values(&a, start, end);
    lv_anim_start(&a);
  }
}

If you want a nice smooth up/down action (where you click to go up and it “falls” back down), look at paths for animations (esp. ease in/out) and playback options.

Lots of other options to investigate, like what you click on

3

You can use lv_obj_set_x/y to change the object’s position. Look up some flappy bird examples online; the game logic should generally apply to LVGL as well.

4

Thank you very much :slightly_smiling_face:

6

I have one morequestion , how can i limit the scope beyond which object during animation can’t go ( for example i have container 300x200 and by click of button my object during animation go on 20 px during every click , and comes moment when object is out of my container , how can i forbid go uper than container scope )

7

The simplest solution is probably to keep track of the object’s coordinates yourself and stop the movement if it’s going outside of the container.

8

Is there a possibility(simple solution) to put a set of several images ( for example to animate bird fly ?)

9

You can use an animation with a custom exec_cb function. Inside that function you would apply an image based on the current animation value. For instance, if you had 10 frames, you could set the animation to loop from 0 to 9 and then repeat.

1 Like
10

I am sorry, but i have one more question , when i set align of object ( ex. lv_obj_align(BirdImg, NULL, LV_ALIGN_CENTER, 0, 30); ) - when i set 30 to y - object go on 30 px dow , but not up(why??_) . According to coordinate axes if object is on 0 and you move it up, cordinates are positive and under 0 coordinates are negative ))) , so can i set it according normal coordinate axes in lvgl ?) , or some how to reverse as it should be ?))))))

11

Vlad, Programming coordinates work a little differently (if I may put it that way), https://docs.lvgl.io/latest/en/html/overview/object.html#moving-together read the documentation
in programming, pixels go from left to right and from top to bottom

2 Likes