When I click a button I want a image to slowly appear from the bottom of the screen

When I click “playbuttonlevelscreen” i want the screen to switch and “playership” move up and appear on the screen.

We’re happy to help, but we’ll need more information first.

Step 1: Provide the SHARE link for the project or lesson activity level (button is on the left of the top menu bar) - It is helpful to see and run the original code. Screenshots of code or code snippets do not always include the lines of code needed to find and isolate the bug.

Step 2: Answer the following questions: The more details you provide will help us understand your problem and speed up the process.

  • What do you intend or expect to happen?
  • What is actually happening?
  • What have you tried?

What to expect
Depending on the nature of the issue, you can expect one or more of the following responses from the community:

  • a request for additional information
  • an indication of whether this is a limitation of the platform or beyond the scope of our curricula
  • a suggestion of possible next steps for locating and/or fixing the bug
  • a discussion of the debugging process including useful strategies and common misconceptions

What I want to happen is when I click the play button, “playership” will slowly appear from the bottom of the screen and stop near the middle.

I have not tried to do anything because I don’t know how to, I have tried setting the position in a timed loop but I don’t have a way to slowly move it up.

Animation in App Lab is not the same (or as easy) as animation in Game Lab because App Lab is event driven, so you can only do animation with the timed loop.

Here is a link to a previous post with more of an explanation (and links at the end with other examples).

In your case, in line 402 of your code, you try to set the position of the spaceship, but there are two problems. One, the “id” needs to be replaced with the id of the element you are wanting to move (the spaceship). Also you are setting it to an absolute position. You will need to think about how to use a variable to change that position for each pass of the timed loop so that position isn’t a static one.

Hopefully that helps a little, but feel free to check back in.

Mike

Mike

So I got it working slightly but the only problem I have is the spaceship is stopping at random points instead of one single pointwhat can I do to make the spaceship stop at only one point?

Screenshot 2024-03-26 4.53.42 PM

I’ve tried a few different things, but I’m not an expert in timed loops in AppLab. I’m guessing that for the length of your timed loop, it moves, but the distance depends on everything else the processor is trying to do at the time. I’ll ping @varrience who has been good at debugging things like this in the past, but if anyone else has any ideas, please jump in.

You did get this far! I’m sure someone will be able to see the next step.

Mike

timedLoops are like intervals but are much more friendly to beginners however they have a fatal flaw if your not labeling them properly, if you use stopTimedLoop, it will be implied to stop all running loops if no label is specified which probably leads to such errors occurring in my example this is what i assume you want

onEvent("playbuttonlevelscreen", "click", function () {
  setScreen("GameScreen");
  var ypos = 450;
  var setY = function (pos) {
    return setProperty("PlayerShip", "y", pos);
  }
  setY(ypos);
  var speed = 5;
  var cutscene = setInterval(function () {
    if (ypos - speed > 225) {
      ypos -= speed;
    } else {
      ypos = 225;
      clearInterval(cutscene)
      // start all game stuff after this!
      timedLoop(17, function() {
        update();
      });
    }
    setY(ypos)
  }, 33)
});

another thing is that for loops directly execute code of which no leeway or delay between them so simply exclude them and use the interval as your loop, all you need to do is make it as fast or slow as you want

Thank you so much, this is perfect. But I was wondering if I made an "event.key == “Space” with a different element, would this work the same way. What I’m trying to do is when I press space on “GameScreen”, “RedLazerLeftSide” will slowly move up the screen, but when it reaches the border it will hide.