Have any questions?

+44 (20) 3540 6226

hello@appshed.com

iPhone Shutdown Slider & Drag and Drop

5.0/5 rating (1 votes)

Using Game Maker you can easily create "draggable" sprites. Combine this with Overlap events, and Actions, to create very imprssive UI elements.

In this example we show you how to create the iPhone Shutdown Slider using Game Maker. This is what it looks like:

iPhone shutdown slider

Here is another example using an Arrow and Target:

arrow and target

 

Instructions

  1.  Create a new, empty Standard Screen
  2. Open Game Maker
  3. Go to Templates and search for "iPhone Shutdown"
  4. Add the Template to your app.
  5. Play the game. You should see the working iPhone slider. When you drag it to the right, the app will navigate to another screen.

 iPhone shutdown slider GM

How does it Work

  1.  Go to the Game Objects and find the Overlap event.
  2. Edit this object and look at the Action. You will see that is uses the regular "Standard Screen" Action.
  3. Aside: If you want to modify this screen, click-and-Navigate on the Overlap object to open the screen. You will then need to switch back to App Builder to edit the content on the screen.
  4. The Overlap obbject fires when two objects overlap each other ("a" and "b"). In this case it is when the "offButton" and the "endPoint" overlap.

    overlap properties

  5. An important aspect of this code is the positioning of objects. Take careful note of the x,y of the Sprites (background, offButton, endPoint). These have been carefully placed to make the slider as realistic as possible.
  6. Making the offButton 'draggable' is achieved using the Create Event. Look at the Action for this object, and you will see a few lines of JavaScript. 

    Create JavaScript

    1. The first instruction makes the sprite Draggable. Make note of the Sprite name - this must match the actual sprite you are using (e.g. "offButton").
    2. The next instructions (lines 3-9) set up the "drag" event. 
      Line 5 is the important part: the x position of the object (i.e. offButton) is set to the x position of the input (i.e. the mouse or finger on a touch device).
    3. (Aside) The y position is commented out and does not change as you drag. This achieves the "vertical lock" that you would expect from the iPhone slider. For other uses you might want to chnage x and y.
    4. Lines 12-16 handle the event when the mouse/finger is released/lifted. If you did not get to the end, it returns the sprite back to it's starting position. 
      (Aside) If you modify the x starting position of the Sprite, you will also need to modify the value in this code.
  7. The "endPoint" is an invisible Sprite positioned at the right hand side of the screen. It uses an invisible/transparent image, so you can't see it, but it is there, and causes the Overlap event to fire.

    end ppint

    (Aside) You can turn on Game Debugging to view the actual position of this invisible Sprite.

    game debugging

    endPoint

 

Arrow and Target

The Arrow and Target is a simpler version of the Draggable slider. Some of the differences are:

  • Both x and y positions are changed when dragging
  • The exact positions of the items are not that important (for creating the visual effect)
  • There is no background, just the two sprites
  • There is no code to handle dragend. The sprite just stays where you left it.

arrow objects

 

Instructions

  1. Search for a template called "Arrow and Target"
  2. Add the template and inspect the objects. They follow the same rules as detalied above for the iPhone Shutdown.

 

 

 

Share this product

appshed name white text 250

Copyright © 2017 AppShed Limited