How to Slide a Sprite around based on touch/drag input in Cocos2D for Android

background

This post is written in response to a question on Part 1 of the Building your first slider puzzle game in Cocos2D for Android. How do you slide/drag a large image sprite around the screen based on touch/drag input ? Lets find out!

(For those interested in perusing formal documentation, I remember starting our my Cocos2D learning by installing the python version for desktops and going through the samples, documentation and tutorials found here.)

Steps

  1. Lets follow the basic steps in the previous tutorial. Create a new project, and add a GameLayer to it .
  2. Instead of adding labels .. we will keep the scene label free . Your Gamelayer.java file should look like this . (your package name can be different)
    package com.example.slideimage;
    import org.cocos2d.layers.CCLayer;
    import org.cocos2d.layers.CCScene;
    import org.cocos2d.nodes.CCDirector;
    import org.cocos2d.nodes.CCSprite;
    import org.cocos2d.types.CGPoint;
    import org.cocos2d.types.CGSize;
    import android.view.MotionEvent;
    
    public class GameLayer extends CCLayer {
    private static final int BACKGROUND_SPRITE_TAG = 21;
    
    private static CGSize screenSize;
    float positionholder = 0.0f ; // We use this variable to keep track of the last known position of our sprite
    
    public GameLayer () {
    super();
    this.setIsTouchEnabled(true);
    
    //Add Background Sprite Image
    screenSize = CCDirector.sharedDirector().winSize();
    CCSprite background = CCSprite.sprite("background.jpg");
    background.setScale(screenSize.width / background.getContentSize().width);
    background.setPosition(CGPoint.ccp(screenSize.width/2, screenSize.height/2));
    addChild(background,-5,BACKGROUND_SPRITE_TAG);
    }
    public static CCScene scene()
    {
    CCScene scene = CCScene.node();
    CCLayer layer = new GameLayer();
    scene.addChild(layer);
    return scene;
    }
    
    }
    

    In the default constructor (GameLayer()), we have enabled touch input processing in Cocos2D using the this.setIsTouchEnabled(true); line. This means we can now use Cocos2D functions to detect when a touch began, when it ends and when touch movement has occurred. We also have added a constant BACKGROUND_SPRITE_TAG to use in referencing our background image. Finally we have another field variable positionholder that keeps track of the last known position of our background image sprite.

  3. Next, we override the cocos2D ccTouchesBegan method in order to detect when a touch event begins.
    @Override
    public boolean ccTouchesBegan (MotionEvent event)
    {
    CGPoint location = CCDirector.sharedDirector().convertToGL(CGPoint.ccp(event.getX(), event.getY()));
    
    //we set the field variable to the value at the beginning of the touch instance
    
    positionholder = location.x ;
    
    return true ;
    }
    

    The variable location stores the point coordinates on the screen where the touch event began.

  4. Next we override the Cocos2D ccTouchesMoved method in order to detect a move/drag event . We then use the information obtained to calculate the new position to set our image.
    @Override
    public boolean ccTouchesMoved (MotionEvent event)
    {
    // Get the position our touch has just moved to.
    CGPoint location = CCDirector.sharedDirector().convertToGL(CGPoint.ccp(event.getX(), event.getY()));
    
    //Use the tag to get a reference to the Background image
    CCSprite background = (CCSprite)getChildByTag(BACKGROUND_SPRITE_TAG ) ;
    
    //Set its position to the current position plus the distance moved. We get the distance moved by c
    //calculating the difference between the last known position and position it has moved to
    background.setPosition(CGPoint.ccp(background.getPosition().x + (location.x - positionholder), background.getPosition().y));
    
    //We set the current move position as the last known position of our image.
    positionholder = location.x ;
    
    return true;
    }
  5. You may run the application and test it out now.

Whats Next ?

The example above only supports sliding across the X axis . The sprites Y axis position is maintained. For extra credit you can modify the code above (hint: also track and update the y position) to support both horizontal and vertical dragging.

Gimme that Code!

Was the process too tough ? You can  Download the entire eclipse project here . Import it using the steps in the previous post on Setting up Cocos2D for Android in Eclipse.

Feel free to drop comments if this worked for you (or not) .

About Vykthur

Mobile and Web App Developer and Researcher. Passionate about learning, teaching, and recently - writing.
This entry was posted in Android Tutorials, Cocos2d, Cocos2D for android, Developer Tips, Education, Programming, Tutorials and tagged , , , , , . Bookmark the permalink.
  • Matt

    Cheer V, great work. Annoyingly, you make it look so easy! 🙂

    M.

    • Vykthur

      Im glad it was of value!! My experience with Cocos2D for android has been very interesting! Kudos to the guys who maintain the project on Git. Highly recommended!

  • Turk

    I dont know if it helps but..About that moving sprite animation i made it work.I looked this sliding sprite code and also SpritesAnimate class in SpritesTests ..I tried to use your way of sliding sprite for main and adding static CCscene scene() method in GameLayer it helped..That is the animated sprite of Dancing Grossini;http://www.mediafire.com/download/7zsjh91qfx7dd2k/ZIPZIP.rar

    • Vykthur

      Great Job Turk!
      Glad to see you are making progress with Cocos2D for android!
      Thanks for sharing your code too!

      P.S … would be great if you can create a github account (github.com) (if you dont have one already) and share your code there. Its easier for others to review, edit , improve and download. Github is free too 🙂 .

      Regards,
      V.

  • Jayson Pinzon

    sir can you make portrait in view of this game ?

  • Jayson Pinzon

    HI V, in android xml layout we can declare the width and height of a textview. Can you give me a hint in doing this in declaring CCBitmapFontAtlas ?