General
Introduction To Dashcode: Creating iPhone Animation And Interactivity
May 21, 2009
0

Dashcode is another tool that comes with Apple iPhone SDK.  It allows you to create simple applications.  You can read an introduction to Apple’s Dashcode here.  In this tutorial, we will demonstrate interactivity and animation.  Familiarity with JavaScript and CSS is assumed.

Our example will be a framework for a space-invader type game.  There will be a space-ship on the bottom of the screen, which user can move by touching the screen.

Create a new project, use Custom template.   Refer to the previous tutorial if you’re not sure about how to create a new project.

Creating Local Deploy Folder

Before we can import an image to be used as the player ship. To do this, you first should Share your project – so that the deployment folder will be created by Dashcode.   Select the Share icon.

dashcodeshareicon

The view panel will ask where to save/deploy.

dashcodedeployscreen

Select Save To Disk… in a location that you want (preferably not the Desktop).

Importing Images

Now goto  Files view (use the View button of the toolbar) to see what files are in the project.

dashcodetoolbarfiles

Above, you see my project.  In the Images folder, there’s an extra file, named player.png, which I had imported.

You can add files into the project by right-clicking on the folder (Images) and selecting Add File… For this tutorial, go ahead and add an image to be used as the player space-ship.  Mine is named player.png, which you see on the files list above.

Adding Images Into the Stage

This is very simple.  Just click the filename on the Files list and drag it into the application view (in case the view is not visible, click the content element on the hierearchy view (see the content element below Untitled in the picture below).

gameship1

There, I dragged my shapechip to the bottom of the view.

Adding Images Into the Stage The Other Way

There’s another way to add images into the stage.  You can simply drag it from the Finder onto the view, and that file will be automatically added into your project.

 

addtexture

Above, I added another image to be used as a background by dragging it from the Desktop.  The file is automatically added into the Files list.

Sizing and Layering Images

To size the image, select it on the view, and use the blue handles on the corners. You might find that the background is covering the ship.  To fix that, while the background is selected, select Arrange->Send Backward.

dashcodesendbackward

You might also find that the layout keeps changing when you move the images around.  To fix that, we need absolute positioning.  Open Inspector window (Window->Show Inspector), select the fourth tab (the one with ruler icon), and make sure that Layout is set to Absolute.

dashcodeabsolutelayout

 

Select the player ship image and open up the Attributes panel within the Inspector window (the Attributes is on the first tab), then change the ID to playerShip.  By naming it with something meaningful, it will be easier to target the image when we start coding later.

playership

 

Select the background image also, and set its ID to background.

Introducing Touch Events

In order to move the ship, we need to detect touches on the iPhone screen.  There are several new events that are unique to iPhone apps.  I won’t be discussing them here but you can see a list of events by opening the Events tab (the last tab with the blue-box icon in the Inspector window).

dashcodeeventslist

ontouchmove is an event that will be fired whenever user moves the finger across the screen. ontouchstart is an event that will be called when user starts touching the screen.  We will be using ontouchmove handler to move the playerShip.  The ontouchstart also neds to be handled because otherwise, the default hander will be called (which causes the screen to zoom).

Handling Events

Now comes the most interesting part of this tutorial: animation.  We will make the playerShip move, following the user’s touch. Here we have a bit of a dilemma: do we handle ontouchmove in the playerShip or in the background.  The answer depends on what you want.  If you want the user to always click the ship and drag it, then the playerShip should be the one handling ontouchmove. In this example, I want the player to be able to click anywhere on the play area, so I am handling the ontouchmove in the background and in the playerShip as well.

So, select the background image on the view, then double click ontouchmove on the event list and enter onTouchMoveHandler as the function name for our handler.

dashcodebackgroundbehavior

Double-click ontouchstart and enter onTouchStartHandler as the function name for our handler.  Dashcode automatically created those two functions for you in the main.js; and Dashcode also nicely opens that file for you, below the view.

dashcodehandlercode

If for some reason, the file is not automatically opened, you can open it from the Files list panel (see the screenshot on the Importing Images above if you don’t remember where the Files panel is).

Moving The Ship

To move the ship, we need to get the current touch position and set the player ship to the same position.  Here’s the code:

function onTouchMoveHandler(event)
{
  document.getElementById('playerShip').style.left=
    event.changedTouches[0].pageX+"px";
  event.preventDefault();    
}

Run the app and you should see the player ship moving when you touch and drag on the screen (if using the iPhone Simulator, then clicking and dragging the mouse is simulating touch movements).

Read more about touches events at Apple’s website:
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/chapter_7_section_6.html

You may find some strange behavior, such as a popup appearing when your touches slides below the background.  To prevent that default iPhone event handler, we need to add the preventDefault() into onTouchStartHandler.

 

function onTouchStartHandler(event)
{
  event.preventDefault();  
}

That’s it for now.

PS: If the ship doesn’t move, the first thing to check is main.css.  Make sure that the playerShip is set to use absolute positioning, not relative positioning, and remove all margins.  It should look like below:

 

#playerShip
{
 width: 64px;
 height: 64px;
 position: absolute;
 right: auto;
 bottom: auto;
 top: 281px;
 left: 131px;
}

 

Download project (made using Dashcode 2.0.1).

Continue to the next part.