playMaker

Author Topic: Mouse Drag the Camera [SOLVED]  (Read 24539 times)

Blitzy

  • Playmaker Newbie
  • *
  • Posts: 4
    • View Profile
    • YETi CGI
Mouse Drag the Camera [SOLVED]
« on: May 24, 2011, 03:35:07 PM »
I'm having a tough time wrapping my head around how to implement a dragable/scrollable camera with Playmaker.
I found a great script (written below) on the Unity forums that does almost exactly what I want, but I still want to know how i could achieve this with FSMs.
The idea is that you can click-drag to scroll the camera to get a view of something from overhead (game-board, architecture overview, RTS, etc.)

I'm not a programmer by trade so I'm finding the concept of scrolling the camera via a dragging motion difficult.
Anyone got any ideas on how to achieve this with Playmaker?

Code: [Select]
var groundPoint: Vector3;
var groundNormal: Vector3;

private var groundPlane: Plane;
private var dragging: boolean;
private var mouseDownPos: Vector3;
private var dragVector: Vector3;

function Start() {
groundPlane = Plane(groundNormal, groundPoint);
}


function Update () {
var hitDist: float;
var hit: RaycastHit;


if (Input.GetMouseButton(0)) {
ray = Camera.main.ScreenPointToRay(Input.mousePosition);

if (dragging) {
groundPlane.Raycast(ray, hitDist);
var currClickPos = ray.GetPoint(hitDist);
Camera.main.transform.position += mouseDownPos - currClickPos;
} else if (Input.GetMouseButtonDown(0)) {
dragging = true;
groundPlane.Raycast(ray, hitDist);
mouseDownPos = ray.GetPoint(hitDist);
}
} else {
dragging = false;
}
}
« Last Edit: November 30, 2011, 02:11:26 PM by alexchouls »

jeanfabre

  • Administrator
  • Hero Member
  • *****
  • Posts: 14832
  • Official Playmaker Support
    • View Profile
Re: Mouse Drag the Camera
« Reply #1 on: May 24, 2011, 11:17:42 PM »
Hi Blitzy,

 There are two ways to go about such feature with playmaker.

1: You create a custom action based on this code you have.
2: You create a full fsm with more generic actions and create events, states representing the same algorithm as the one in the code example you gave.

The first option might be quicker to implement but defeats somehow the purpose of actions ( this is my opinion, not a rule or a playmaker statement). Actions are very generic and can be used for many applications ( you can see the sheer numbers provided with playmaker). If you start building custom actions doing something too specific ( think not reusable in a different context) , then it's either because it's very complex and compliments very well with playmaker fsm paradigm, or it's needs more thinking and you need to cut down the problems and define what playmaker is missing that prevents you from doing this with the available actions. It's not that black and white in reality, but you get the picture.

Are you acquainted with Playmaker already or are you starting from scratch?

Bye,

 Jean

Blitzy

  • Playmaker Newbie
  • *
  • Posts: 4
    • View Profile
    • YETi CGI
Re: Mouse Drag the Camera
« Reply #2 on: May 25, 2011, 01:53:30 PM »
I'm fairly acquainted with Playmaker, I've done numerous of my own tests from scratch so I've got a good handle of the concepts of visual state machines.

jeanfabre

  • Administrator
  • Hero Member
  • *****
  • Posts: 14832
  • Official Playmaker Support
    • View Profile
Re: Mouse Drag the Camera
« Reply #3 on: May 26, 2011, 02:02:35 AM »
Hi,

ok, I have cracked the case :) but I fail to be able to provide a useful attachment, prefabs throw me errors, doing screenshots will take forever, so I'll have to make a screencast. Bear with me, I'll do it today or tonigth.

 I am planning on putting this on the tutorial section of the wiki anyway, cause it's a good topic. but might wait for the next release to be available to take advantages of the new stuff Alex has been putting together.

 Bye,

 Jean

jeanfabre

  • Administrator
  • Hero Member
  • *****
  • Posts: 14832
  • Official Playmaker Support
    • View Profile
Re: Mouse Drag the Camera
« Reply #4 on: May 26, 2011, 11:56:18 PM »
Hi,

 ok,

 Here is a package with a prefab for moving the camera when dragging the mouse in 3d.

 WARNING: there is an issue with prefabs. you'll likely get an error with the get position action. I just don't understand this error. so here are the step to make it work.

 So Alex, if you read this. I know you are very very busy with 1.2 so don't worry too much right now about this as I have a fix, but if I could get to the bottom of this issue, that would be great, hopefully, this is something trivial.

1: import the package attached to this post
2: drag the prefab in the hierarchy view
3: delete the prefab itself from the project view ( this will keep the scene hierarchy intact, so you won't loose what's in the scene)
4: then that works...

Don't forget to add a cube or some elements in the scene to witness the camera movement as you drag.

Explanations about how it works ( I'll make a tutorial on the wiki section when I have time).

I have build a special custom action for the drag that is independent enough to be reusable. This also allow for some playmaker fsm goodness.
http://hutonggames.com/playmakerforum/index.php?topic=272.msg1087#msg1087

I have also built a vector3 operator custom action to allow for vector additions and subscraction. This was needed for the algorithm.
http://hutonggames.com/playmakerforum/index.php?topic=271.0

 So one fsm  ( drag ) is responsible for checking if mouse is down and if so dispatch a drag event and start the drag. During the drag I check for mouse up and exit the drag state if so. while dragging, I record the world position of the mouse in the plane defined in the drag action and also record the drag vector. The drag vector is what will be used to move the camera.

The second fsm ( position ) listen for the drag events and when starting record the start position for reference and then poll the drag vector value from the drag fsm and substracts it to the start position.

If you are curious and tests the performances, make sure you close the playmaker editor AND the inspector if showing the fsms. With editor and inspector, I drop from 1200 fps to 500 when dragging... when editor and inspector closed, almost not difference!!!! so be aware of this.

 I have in purpose separated each features as much as possible. for example, the drag action doesn't need to on a camera gameObject. The position fsm can control any objects too. The mouse position is not the only way to control the drag action , you simply inject a screen position, so it's kind of ready for touchscreen and you would only modify the way you get the screen position that is used by the drag action. All this can be perceived as more complex than it needs to, but in the long run, this gives more flexibility and things are more reusable.

 If you have any questions or issues, don't hesitate. Bear with me for a more descriptive tutorial on this. This is a good case for intermediate level, so this will go in the tutorial section of the wiki.


 Bye,

 Jean

@_rgkd

  • Playmaker Newbie
  • *
  • Posts: 7
    • View Profile
    • @_rgkd on Twitter
Re: Mouse Drag the Camera
« Reply #5 on: June 01, 2011, 01:20:26 AM »
Hey Jean,

Good work on the script and the explanation for how it works. The more I read and see how others set up their FSM's seems to help. I just wanted to chime in and ask about the frame rate drop during testing if you leave the inspector and the playMaker editor open, any idea why this happens? Is it something to be concerned about if we experience it elsewhere?

Any information from the creators of playMaker would be great as well.

jeanfabre

  • Administrator
  • Hero Member
  • *****
  • Posts: 14832
  • Official Playmaker Support
    • View Profile
Re: Mouse Drag the Camera
« Reply #6 on: June 01, 2011, 02:31:04 AM »
Hi,

framerate drop happens because a lot is going on live within the inspector and editor for various reason, live tracing of flow, live update of data. all this takes time. Now I am not saying it can not be improved :) But generally, make sure you test on proper published version and devices. This is true for everything, not just playmaker.

 Bye,

 Jean

Blitzy

  • Playmaker Newbie
  • *
  • Posts: 4
    • View Profile
    • YETi CGI
Re: Mouse Drag the Camera
« Reply #7 on: June 01, 2011, 11:14:14 AM »
This is excellent Jean, thanks for such a detailed and helpful response.
Out of curiosity, could the same basic structure of these state machines be used for Touch Events as well?

I attempted to "hack" it and replaced all the mouse events with touch events, storing the x and y variables where appropriate but I think touch may function fundamentally different compared to mouse, so i may be wrong.
« Last Edit: June 01, 2011, 11:17:34 AM by Blitzy »

jeanfabre

  • Administrator
  • Hero Member
  • *****
  • Posts: 14832
  • Official Playmaker Support
    • View Profile
Re: Mouse Drag the Camera
« Reply #8 on: June 02, 2011, 02:43:58 AM »
Hi,

 Touch and mouse events are different yes ( the screen reference is different for example), what you need is separate the system that will watch user inputs and the feature that it controls. in theory, you should be able to build the feature without using the mouse or touch and simply pilot it by hand ( that is changing the dragging value by hand). Then you can verify that the feature is working. Then you build a system that watch mouse events. You then also build a touch event watcher that will in essence output the same values as the mouse watcher. You will then build a fsm in the middle that accepts inputs both from your mouse watcher and from your touch watcher. It then forward to the feature. This middle fsm can also tweak the input to format it exactly how the features requires it.

 It might seems a bit convoluted, and many different technics exists to solve such problems. But generally, dividing is the key. Each features should work independently of its controler. A clear example would be cut scenes. The same objects/character/machinery would need to be controled by script during a cut scene. If you plan ahead this kind of needs, you then clearly see that separating controls and behaviors somehow is needed.

Bye,

 Jean


Blitzy

  • Playmaker Newbie
  • *
  • Posts: 4
    • View Profile
    • YETi CGI
Re: Mouse Drag the Camera
« Reply #9 on: June 03, 2011, 02:05:56 PM »
Just wanted to chime in and say that i was successful in getting touch scrolling to work on an Android tablet using Jean's FSMs as a base.
I attached my "Touch Input" FSM that talks to Jean's original FSM for camera drag.
As Jean alluded to in the above post, having a separate FSM for touch input and mouse input is really awesome. I can have both functionality in the same build, one for PCs and one for touch devices. It's great.

Just wanna say thanks again Jean, i really am in impressed with the level of help you guys are. Makes me love my purchase of playmaker so much more.

jeanfabre

  • Administrator
  • Hero Member
  • *****
  • Posts: 14832
  • Official Playmaker Support
    • View Profile
Re: Mouse Drag the Camera
« Reply #10 on: June 06, 2011, 02:17:32 AM »
Hi,

 Thanks for sharing back, I am glad my advices where useful :)

 bye,

 Jean

lolonoa

  • Playmaker Newbie
  • *
  • Posts: 18
    • View Profile
Re: Mouse Drag the Camera [solved]
« Reply #11 on: September 02, 2011, 05:13:25 AM »
This is really nice, it is what I am looking for, I have been thinking how to do the mouse dragging, rotating and scaling in Playmaker for three days, I am still fresh new to Playmaker, and it is really difficult for an artist to figure out how to make scrips stuff, my head is going to exploding, anyway, this is really helpfull, although I can't totally understand the complicated settings in Playmaker, indeed, it is really a good thing to be here, I feel like the Spring is coming. Guys, you are great!!!

However, I still have a little problem on the mouse dragging thing. Before I add this drag to my object, I added a js script to rotate the object, it works like this, when I click and drag the left button, it will rotate, just like what u do in Unity, when I added this drag thing, I changed it to right click to move, but things happened here, when I rotate the object, it will move to a far place, and when I drag and move the object, it can go far and go close to the camera, but when I rotate again, it will go back to the far place again, so it looks like the rotation and the drag-move thing do not have any connection, which is uncomfortable. So what I what is when I press the left button the camera will rotate around the object, and right click to plane move, and wheel roll to scale the object, it is pretty much like the mouse control in Unity, just without the ALT button, so how could I do it in Playmaker, thanks masters.

lolonoa

  • Playmaker Newbie
  • *
  • Posts: 18
    • View Profile
Re: Mouse Drag the Camera [solved]
« Reply #12 on: September 02, 2011, 05:15:25 AM »
and I will post the rotation script here to share it with u, thanks.


var target : Transform;
var distance = 10.0;

var xSpeed = 250.0;
var ySpeed = 120.0;

var yMinLimit = -20;
var yMaxLimit = 80;

private var x = 0.0;
private var y = 0.0;

@AddComponentMenu("Camera-Control/Mouse Orbit")
partial class MouseOrbit { }

function Start () {
    var angles = transform.eulerAngles;
    x = angles.y;
    y = angles.x;

    // Make the rigid body not change rotation
    if (rigidbody)
        rigidbody.freezeRotation = true;
}

function LateUpdate () {
    if (target && Input.GetMouseButton(0)) {
        x += Input.GetAxis("Mouse X") * xSpeed * 0.02;
        y -= Input.GetAxis("Mouse Y") * ySpeed * 0.02;

        y = ClampAngle(y, yMinLimit, yMaxLimit);

        var rotation = Quaternion.Euler(y, x, 0);
        var position = rotation * Vector3(0.0, 0.0, -distance) + target.position;

        transform.rotation = rotation;
        transform.position = position;
    }
}

static function ClampAngle (angle : float, min : float, max : float) {
    if (angle < -360)
        angle += 360;
    if (angle > 360)
        angle -= 360;
    return Mathf.Clamp (angle, min, max);
}

jeanfabre

  • Administrator
  • Hero Member
  • *****
  • Posts: 14832
  • Official Playmaker Support
    • View Profile
Re: Mouse Drag the Camera [solved]
« Reply #13 on: November 30, 2011, 12:20:58 AM »
Hi,

 I have updated the prefab for 1.2 and also modified it to show how clamp can be done to constraint the drag on an axis.

 you can find the thread ( and the prefab) there:
http://hutonggames.com/playmakerforum/index.php?topic=873.msg3587#msg3587

Bye,

 Jean