Joystick

[AS3.0]

Hi im doing an as3 version of my game so it can be on android for air 3.2 and im wondering how can i make some sort of joystickstyle button, a movieclip that can be dragged around, but is constrained to how far it can be dragged, and when released itl go back to its main point. Thanks

[angelhdz]

var defX:Number;
var defY:Number;

joystick.addEventListener(MouseEvent.MOUSE_DOWN, joydrag);
function joydrag(e:MouseEvent):void
{
defX = e.currentTarget.x;
defY = e.currentTarget.y;
e.currentTarget.startDrag();
}

joystick.addEventListener(MouseEvent.MOUSE_MOVE, moveJoy);
function moveJoy(e:MouseEvent):void
{
if(e.currentTarget.hitTestObject(LEFT_BUTTON))
{
STOP(); // STOP is a function that limits the joystick from moving further
}
}
joystick.addEventListener(MouseEvent.MOUSE_UP, stopdrag);
function stopdrag(e:MouseEvent):void
{
e.currentTarget.stopDrag();
//this resets the joystick to its default position
e.currentTarget.x = defX;
e.currentTarget.y = defY;
}

Something like that :P

[fruitbeard]

Hi,

Alloy, you also seem to be swapping to AS3 , maybe you should show some of what you have achieved with this project so far.

But anyway, this is more along the lines of what you might require.
Assuming that most joysticks move in a circular type way, this will get you started.

i will attach a file too,

import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

var isDragging:Boolean = false;
var span:int = 50;

var joyStickReturn1:Tween;
var joyStickReturn2:Tween;

var theBase:jBase = new jBase();
var joyStick:jStick = new jStick();

with(theBase)
{
    x = joyStick.x = 200;
    y = joyStick.y = 200;
}
addChild(theBase);

with (joyStick)
{
    x = theBase.x + 50;
    y = theBase.y + 50;
    var origX:Number = x;
    var origY:Number = y;
    addEventListener(MouseEvent.MOUSE_DOWN, enableJoyStick);
    addEventListener(MouseEvent.MOUSE_UP, disableJoyStick);
    // *** Uncomment below to enable drag out; comment out POINT2 ALSO if do so;
    //addEventListener(MouseEvent.MOUSE_OUT, disableJoyStick);// POINT1
}
addChild(joyStick);

function enableJoyStick(e:MouseEvent)
{
    isDragging = true;
    e.currentTarget.addEventListener(Event.ENTER_FRAME, dragStick);
    // *** Comment out below to prevent stage drag release;// Uncomment point1 IF DO SO;
    stage.addEventListener(MouseEvent.MOUSE_UP, disableJoyStick);// POINT 2
}

function dragStick(e:Event)
{
    if (isDragging == true)
    {
        var angle:Number = Math.atan2(mouseY - origY,mouseX - origX);
        var distance:Number = Math.sqrt(Math.pow(mouseX - origX,2) + Math.pow(mouseY - origY,2));
        if (Math.ceil(distance) >= span)
        {
            joyStick.x = origX + (Math.cos(angle) * span);
            joyStick.y = origY + (Math.sin(angle) * span);
        }
        else
        {
            joyStick.x = mouseX;
            joyStick.y = mouseY;
        }
    }
}

function disableJoyStick(e:MouseEvent):void
{
    isDragging = false;
    doTweens();
}

function doTweens(e:Event = null):void
{
    joyStick.removeEventListener(Event.ENTER_FRAME, dragStick);
    joyStickReturn1 = new Tween(joyStick,"x",null,joyStick.x,origX,1,false);
    joyStickReturn2 = new Tween(joyStick,"y",null,joyStick.y,origY,1,false);
} 

File:

[fruitbeard]

Hi,

Slight update for you, with so called joystick arm attached, do with it as you will Alloy (or can).

import flash.display.Sprite;
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;

import fl.transitions.Tween;
import fl.transitions.TweenEvent;
import fl.transitions.easing.*;

import flash.filters.*;

var isDragging:Boolean = false;
var dragSpan:int;
var origX:int;
var origY:int;

var joyStickReturn1:Tween;
var joyStickReturn2:Tween;

var theBase:jBase = new jBase();
var joyStick:jStick = new jStick();

var dropShadow:DropShadowFilter = new DropShadowFilter(2,45,0x000000,1,4,4,1,3);

with (theBase)
{
    x = 100;
    y = 100;
}
addChild(theBase);

with (joyStick)
{
    x = theBase.x + 50;
    y = theBase.y + 50;
    origX = x;
    origY = y;
    addEventListener(MouseEvent.MOUSE_DOWN, enableJoyStick);
    addEventListener(MouseEvent.MOUSE_UP, disableJoyStick);
    // *** Uncomment below to enable drag out; COMMENT OUT POINT2 IF DO SO;
    // POINT 1
    //addEventListener(MouseEvent.MOUSE_OUT, disableJoyStick);
    filters = [dropShadow];
}
addChild(joyStick);

function enableJoyStick(e:MouseEvent)
{
    isDragging = true;
    e.currentTarget.addEventListener(Event.ENTER_FRAME, dragStick);
    // *** Comment out below to prevent stage drag release;// UNCOMMENT POINT 1 IF DO SO;
    // POINT 2
    stage.addEventListener(MouseEvent.MOUSE_UP, disableJoyStick);
}

function dragStick(e:Event)
{
    dragSpan = theBase.width / 2;
    if (isDragging == true)
    {
        var angle:Number = Math.atan2(mouseY - origY,mouseX - origX);
        var distance:Number = Math.sqrt(Math.pow(mouseX - origX,2) + Math.pow(mouseY - origY,2));
        if (Math.ceil(distance) >= dragSpan)
        {
            joyStick.x = origX + (Math.cos(angle) * dragSpan);
            joyStick.y = origY + (Math.sin(angle) * dragSpan);
        }
        else
        {
            joyStick.x = mouseX;
            joyStick.y = mouseY;
        }
        graphics.clear();
        graphics.lineStyle(25, 0x000000, 1);
        graphics.moveTo(origX,origY);
        graphics.lineTo(joyStick.x, joyStick.y);
    }
}

function disableJoyStick(e:MouseEvent):void
{
    isDragging = false;
    graphics.clear();
    doTweens();
}

function doTweens(e:Event = null):void
{
    joyStick.removeEventListener(Event.ENTER_FRAME, dragStick);
    joyStickReturn1 = new Tween(joyStick,"x",null,joyStick.x,origX,1,false);
    joyStickReturn2 = new Tween(joyStick,"y",null,joyStick.y,origY,1,false);
} 

[AS3.0]

Thanks thatl do great for my android/ios version of my rpg

[AS3.0]

Here is what I have achieved The first image will be pc/mac version and the on screen button image is my android version/ios version,
its basically an 8bit mmorpg, with quests to do stats to train, people to fight, magic spells, archers, 8bit swords, bosses, massive maps

http://i.imgur.com/jSan4ot.png
http://i.imgur.com/PBCSByQ.png

http://i.imgur.com/QVF9MYI.png
http://i.imgur.com/54oGdyZ.png
http://i.imgur.com/D8v74Ep.png

which the servers and databases will be run on raspberry pis, set up as servers, this is an image to show you what raspberry pis are,
http://i.imgur.com/7XUOYCc.png