Play / Pause Sprite Movement

The purpose of this tutorial is to demonstrate how to start and stop the movement of a sprite while changing the button label from Play to Pause and back depending on the movement state of the sprite.

PlayPauseComponents

This tutorial is basically a stripped down version of the AI MoleMash tutorial. The screen arrangement is very simple. If you haven’t done that tutorial yet, I recommend you do it first since it will help you understand what causes the sprite (Mole) to move from one location to another when its time is enabled. You can then make a copy and just remove all the pieces that aren’t needed or just build this one from scratch.

Pull out the following from the Palette to the Viewer

  • Button, rename it to PlayPauseButton
  • Canvas, rename it to MyCanvas
  • ImageSprite, rename it to Sprite
  • Clock, rename it to SpriteTimer

Set the following properties for each component

  • Button text to Play
  • Canvas Width and Height to 300px each, or whatever size you feel like. Just make it large enough so there is room for movement
  • Uncheck visible for ImageSprite and set the picture. You can use the same mole or any other.
  • Set the Clock interval to 2000, or whatever starting interval you would like

Pull out the following blocks in the Blocks Editor

  • when Screen1.Initialize
    • set SpriteTimer.TimerEnabled to, set it to false
    • set Sprite.Visible to, set it to true
  • to procedure arg, rename it to MoveSprite
    • set Sprite.X to
      • plug in a * block and place call random fraction in left socket
      • place a – block in right socket
      • place MyCanvas.Width in left socket of – block
      • place Sprite.Width in right socket of – block
    • set Sprite.Y to
      • plug in a * block and place call random fraction in left socket
      • place a – block in right socket
      • place MyCanvas.Height in left socket of – block
      • place Sprite.Height in right socket of – block
  • when SpriteTimer.Timer
    • plug in call MoveSprite
  • when PlayPauseButton.Click
    • plug in ifelse test
      • plug in an  = block in test
      • plug PlayPauseButton.Text in left socket of = block
      • plug text text in right socket of = block and rename it to Pause
      • plug set SpriteTimer.TimerEnabled to in then-do, set it to false
      • plug set PlayPauseButton.Text below the previous in then-do and set it’s text value to text Play
      • plug set SpriteTimer.TimerEnabled to in else-do, set it to true
      • plug call MoveSprite below the previous in else-do
      • plug set PlayPauseButton.Text to below call MoveSprite in else-do and set it’s value to text Pause
PlayPauseBlocks

Ok, lets put it all together. When the app starts, the screen will initialize and first disable the timer, than set the sprite to visible. The reason I set this order is because the timer will fire as soon as the app starts and the sprite will jump. We want the sprite to remain where it is when it appears on screen. Next we declare a variable MoveSprite, which uses a random fraction calculation to pick a random coordinate based on the difference between the Canvas Width/Height less the Sprite Width/Height, for the X and Y-axis respectively. X-axis is width, Y-axis is height. We use the SpriteTimer.Timer to call this procedure and it will continue calling it, at the interval you specified for the timer, for ever, or until the app closes or you change the conditions in your app. Finally it all comes together in the click event of the Play/Pause button. We use an ifelse to test and see what the button label currently says and execute instructions based on that. When you click the button, if at the time you clicked it, the button label text is Pause, the function receives a true and calls the blocks in then-do. You just pushed Pause, so the timer is disabled and the button label is changed to Play. You push the button again, but this time you pushed the Play button, so the test sends a false back, else-do blocks are called and the timer is enabled. The MoveSprite procedure is called and finally we change the button label to Pause.

Try it on your device and see how it works.

You may also like...