convert a dragged item (mouseX + x) to tactical screen

[Stephdidou]

I'm making a game in AS3 (point & click). I would like to do it for PC and for tablets. But, I've got a problem:

In my Pc version, when I go to the inventory and click on an item, the item will replace my cursor and I can dragg it where I went on the screen.

In my tactical version, when I click on the item, it will get stuck on the left corner of the screen. I suppose that the problem is that is no cursor in a tactical version..

Do you know what do I have to change for the tactical version ? (for exemple, the item stay in the middle off the screen and I have to click where I want it to be, no draging.

Thank you for your help,

Here is my code for my "dragItem" function :

    public function DraggedItem(stageRef:Stage, grabbedItem:Object){

        this.stageRef = stageRef;

        toolbar = Engine.toolbar;

        usableItems = Engine.usableItems;

        inv = Engine.inv;

        puzzle = Engine.puzzle;

        player = Engine.player;

        linesData = Engine.linesData;

        inv.draggingItem = true;

        Mouse.hide();

        itemRef = getDefinitionByName(grabbedItem.displayName.toLowerCase()+"Proper");

        draggedItem = new itemRef;

        stageRef.addChild(draggedItem);

        draggedItem.displayName = grabbedItem.displayName;

        if (grabbedItem.lookTag)

            draggedItem.lookTag = grabbedItem.lookTag;

        draggedItem.x = mouseX + x;

        draggedItem.y = mouseY + y;

        draggedItem.scaleX = itemScale;

        draggedItem.scaleY = itemScale;

        stageRef.addEventListener(MouseEvent.MOUSE_MOVE, dragItem, false, 0, true);

        stageRef.addEventListener(Event.ENTER_FRAME, itemHitTest, false, 0, true);

        draggedItem.addEventListener(MouseEvent.CLICK, itemClick, false, 0, true);

    }

    private function dragItem(e:MouseEvent):void{

        draggedItem.x = mouseX + x;

        draggedItem.y = mouseY + y;

    }

[kglad · Accepted solution]

what's mouseX when that code executes?  ie, mouseX probably's not defined when that code executes.

[Stephdidou]

It's where the mouse is. So, when I click on the item, it knows that the item is at "mouseX" and "mouseY".

Here's a video of the problem : http://ul.to/07tvve6e

Here's the mouse version : http://ul.to/20ntr3i7

[kglad]

when you use a touch tablet, mouseX and mouseY are undefined.  use touchevents or use a mousedown event to define where the last x,y occurred.

[Stephdidou]

I'm pretty new in the "touch" code, sorry.

So instead of

stageRef.addEventListener(MouseEvent.MOUSE_MOVE, dragItem, false, 0, true);

Its : stageRef.addEventListener(TouchEvent.TOUCH_MOVE, dragItem, false, 0, true);

?

And for my dragItem function, what should I put ?

localX = a number;

localY = a number;

?

[kglad]

the touchevent has stageX and stageY properties you can use:

private function dragItem(e:TouchEvent):void{

        draggedItem.x = e.stageX + x;  // ? it's not clear what x and y are in this context and if they are correct.

        draggedItem.y = e.stageY + y;

    }

[Stephdidou]

Nope..Doesn't work.. error.

Do you mind to check the all .as file ? http://ul.to/pi8m8r7z

[Stephdidou]

I'm actually testing with this open source game first (then I will apply the change to my game). Here's the game with the changes I've made for touch screen (and I dont understand why it's not working) : http://ul.to/9pbfpvu9

If someone could check what's wrong, it'll be a huge help.

For the moment when you take the rock, it get stuck at the left corner of the screen. (adobe AIR 3.2)

[kglad]

i don't download and correct files unless i'm hired.

for free help, continue posting to this forum.

[Stephdidou]

Ok. How much would you take in order to correct my files ? (full convert for touchscreens)

[kglad]

send me an email via my website:  www.kglad.com > contact.

[Stephdidou]

Hi again khlad,

Everythings work with the drag item, but there's some things I'd like to change.

With the actual code, you can drag the item on the scene but, if you drop the object somewhere and want to dragg it again it's disappearing.

Is there a way that the item stays on the scene unless the player taps 2 times on the screen ?

[Stephdidou]

I've code this so far : but it's not working. When I double click the item is'nt removing. (but if I change mouse_down by a key of the keyboard, it's working...)

timer=new Timer(500, 1);
stageRef.addEventListener(MouseEvent.MOUSE_DOWN, removeDraggedItem);

private function removeDraggedItem(e:KeyboardEvent){
             if(timer.running==true)
            {
                  if(e.buttonDown)
                {
            stageRef.removeEventListener(MouseEvent.MOUSE_MOVE, dragItem);
            stageRef.removeEventListener(Event.ENTER_FRAME, itemHitTest);
            draggedItem.removeEventListener(MouseEvent.MOUSE_DOWN, itemClick);

            stageRef.removeChild(draggedItem);
            toolbar.useText.text = "";

            if (stageRef.contains(this))
                stageRef.removeChild(this);

            Mouse.show();
            Engine.playerControl = true;
                }
            }

            else   if(e.buttonDown)
            {
                timer.start();
            }
        }

[kglad]

what is the code that works correctly to remove the object when an attempt is made to drag it again?  just have the code execute if the stage detects a double click.

[Stephdidou]

There's none. In fact, for the PC version, you click on the item in your inventory and the item is following your cursor.

If you click on an empty space, the item disappear.

For a touch version it's not as simple as there is not a cursor. So you drag the item with your finger,but if you stop touching the screen (in order to think where to put the item for exemple), and then touch again the screen, the item disappear.

So I'm trying to change that by making a double tap method. The player have to double tap on the screen for making the item disappear.

The original code (for the PC version) is :

public function DraggedItem(stageRef:Stage, grabbedItem:Object){
....
stageRef.addEventListener(MouseEvent.MOUSE_MOVE, dragItem, false, 0, true);
                              stageRef.addEventListener(Event.ENTER_FRAME, itemHitTest, false, 0, true);
                              draggedItem.addEventListener(MouseEvent.MOUSE_DOWN, itemClick, false, 0, true);
}
public function itemClick(e:Event):void{
if (newFriend){
                                        nameofMC = "action_"+draggedName+"_"+newFriend.displayName;
                                        //trace ("Looking for "+nameofMC);
....blabla
.....
.....
}
                              } else {
                                        removeDraggedItem();
}
private function removeDraggedItem():void{
                              stageRef.removeEventListener(MouseEvent.MOUSE_MOVE, dragItem);
                              stageRef.removeEventListener(Event.ENTER_FRAME, itemHitTest);
                              draggedItem.removeEventListener(MouseEvent.MOUSE_DOWN, itemClick);
                              stageRef.removeChild(draggedItem);
                              toolbar.useText.text = "";
                              if (stageRef.contains(this))
                                        stageRef.removeChild(this);
                              Mouse.show();
                              Engine.playerControl = true;
                    }

[kglad]

does removeDraggedItem remove the item when the screen is touched on an empty spot?  if so, remove whatever listener calls it and add a doubleclick listener.

[Stephdidou]

Yes removeDraggedItem remove the item when the screen is touched on an empty spot.

I've added a doubleclick listener at first but it's not working. After a few research on Internet it seems that the doubleclick listener isn't working very often..

http://www.kirupa.com/forum/showthread.php?359326-double-click-on-touch-screen

http://forums.adobe.com/thread/774492

But maybe I've made a mistake. Here's what I did :

I've erased every removeDraggedItem and write :

stageRef.doubleClickEnabled=true; 
stageRef.addEventListener(MouseEvent.DOUBLE_CLICK, removeDraggedItem, false, 0, true);
}
private function removeDraggedItem():void{
                              stageRef.removeEventListener(MouseEvent.MOUSE_MOVE, dragItem);
                              stageRef.removeEventListener(Event.ENTER_FRAME, itemHitTest);
                              draggedItem.removeEventListener(MouseEvent.MOUSE_DOWN, itemClick);
                              stageRef.removeChild(draggedItem);
                              toolbar.useText.text = "";
                              if (stageRef.contains(this))
                                        stageRef.removeChild(this);
                              Mouse.show();
                              Engine.playerControl = true;
                    }

[kglad]

do some testing to see if the doubleclick event is detected.  if not, create your own.  that was sop with as2 so you can find sample as2 code to convert if you don't see how to do it.

[Stephdidou]

Here's what "trace(MouseEvent.DOUBLE_CLICK)" says when I'm double clicking on the scene :

Creating new background: maisonExt

doubleClick

So I suppose it is detected but it doesn't work..is that it ?

If so, you tell me that I have to create a doubleclick event. I read that we must put a timer in order to that. Is is true ?

If yes, is this code correct for the timer ? :

timer=new Timer(500, 1);
stageRef.addEventListener(MouseEvent.MOUSE_DOWN, removeDraggedItem);

private function removeDraggedItem(e:KeyboardEvent){
             if(timer.running==true)
            {
                  if(e.buttonDown)
                {
            stageRef.removeEventListener(MouseEvent.MOUSE_MOVE, dragItem);
            stageRef.removeEventListener(Event.ENTER_FRAME, itemHitTest);
            draggedItem.removeEventListener(MouseEvent.MOUSE_DOWN, itemClick);

            stageRef.removeChild(draggedItem);
            toolbar.useText.text = "";

            if (stageRef.contains(this))
                stageRef.removeChild(this);

            Mouse.show();
            Engine.playerControl = true;
                }
            }

            else   if(e.buttonDown)
            {
                timer.start();
            }
        }

I sense that the (e.buttonDown) command is wrong (as if I put keyboard ==90 it's working).

Do you think I have to exploit this method or find an all other methode ?

[kglad]

how do you detect a trace on a mobile?

[Stephdidou]

I didn't try on the mobile but on the mobile simulator that comes with Adobe Flash pro (and wich can detect a trace).

[kglad]

you need to test on a mobile.  the simulator is not a perfect simulation so you may find something (like doubleclick) works on the simulator but not on a mobile.

(use a textfield to test on the mobile.)

[Stephdidou]

Oh ! I'll test it right away ! thx !

[Stephdidou]

My wife took the cable... I'll try it in a few hours. I'll let you know !

[kglad]

i know how that works.  i have my own android for testing but have to struggle to get the iphone and ipad away from my wife for iOS testing.