Of men & scroll galleries: in-depth tutorial

In my last project I had to build a skin selection menu. I could have gone away by simply using a scrollrect, but who likes cool when you can have awesome?

I didn’t want just a scrollrect. I wanted Icons to change size depending on screen position. And to cover each other when too far away from the currently selected one. All with inertia and snap-to-option movement. Of course, no tap-to-select, whatever’s centered should be selected. In other words I wanted a scrolling gallery of images that looked and felt awesome where I could pick my ninja.

I also wanted a Lamborghini, but you can’t get THAT just by coding it.

Yet.

Let’s begin with some high-level concepts

So what to do? First I started with some math.
I had to figure out how to mathematecally handle all the movements, which functions to encode in unity so that at every frame I had exactly what I needed. Of course using math does not mean using calculus, if you remember this trick of mine.

So, mathematically speaking I wanted a bellshaped curve (AKA Gaussian) of zoom, and some easing for position on x axis.
All that must be controlled with a swipe, which means with a single parameter. What we have is a linear swipe, what we want is an eased movement and zoom.

An example of easing in animation
The upper picture represents a linear movement, the lower one an eased movement

The trick is not to think on what kind of formulas can give the result I need, but to just revert the functions that would do the trick graphically, which means a bell shaped curve for zoom and an s-shaped one for x position.
The mechanics will be very similar to spinning an invisible wheel, with our images are glued on its border and then watching from a small distance. You just increase linearly the rotation angle at its center and then you’ll see exactly the movement we need: big and fast picture in the middle, many others small and slow on the sides. We’ll call the rotation angle of the imaginary wheel our “alpha” angle.

Brace yourselves: code is coming

Let’s review the variables we’ll need. AnimationCurves first.

 public AnimationCurve positionCurve;
 public AnimationCurve zoomCurve;

These will be our “math” functions. Zoomcurve needs a bell-shape with peak in .5f, positioncurve it’s a regular ease-in ease-out.

public RectTransform[] imgset;

Here we’ll store the images to move. Actually their RectTransforms.

And then there’s some “constants”:

public float rotationSensibility = 1f; //how sensible is to swipe input
protected float alphaStep = 1f; //will host the image-to-image distance.
public float swipeFieldWidth = 300f;//Total distance from leftmost position to rightmost one

And finally some internal variables

[SerializeField] protected float alpha; //the parameter around wich all things revolve
protected float lastFrameAlpha; //last frame's alpha value
public CatchSwipe inputSource; //A module to handle input that gives us the net x-axis swipe value
Dictionary<RectTransform, float> alphaoff = new Dictionary<RectTransform, float>();//a dictionary to store all image's offsets

The eagle-eye view

So, our high-level code would be something like this:

    public virtual void Start()
    {
        alphaInitialization();
        refreshImages();
    }

    protected virtual void Update()
    {
        updateAlpha();
        if (Mathf.Abs(lastFrameAlpha - alpha) > 0.001f)
        {
            refreshImages();
        }
        lastFrameAlpha = alpha;
    }

Which basically reads: first, initialize my shit and show it, then update my alpha and if it’s different than last frame, show the update .
It’s a simple behaviour.

Warning: this check will save a lot of cpu but may get some added effects not too smooth with extra slow movements, it’s up to you to decide your tradeoff.

Let’s see what those functions actually do.

 protected virtual void alphaInitialization()
    {
        alpha = 1;

We just start with the leftmost image at center.

        if (imgset.Length > 1)
            alphaStep = 1f / (imgset.Length - 1f);

Here we calculate the alphaStep if it needs to be less than one. We want the images to be equally spaced on the imaginary wheel border, so that we can calculate easily how they move.

        float minAlpha = -(imgset.Length - 1f) * alphaStep / 2f;
        alphaoff.Clear();
        foreach (var item in imgset)
        {
            alphaoff.Add(item, minAlpha);
            minAlpha += alphaStep;
        }

Then we calculate what the offset values are for our images. This will enable us to rule them all with just one ring… err… parameter, the “alpha” rotation value of the imaginary wheel. The middle image uses the base alpha value and the others will shift it with the offset. Simple huh?

        lastFrameAlpha = alpha;
    }

And lastly, we also initialize the lastFrameAlpha value.

protected virtual void updateAlpha()
    {
        alpha = Mathf.Clamp(alpha + inputSource.NetSwipe.x * rotationSensibility, 0, 1 );
    }

Now, this is what one would expect to be the complicated part… but actually it’s the simplest. When the user swipes he’s just spinning the wheel, nothing more. So we increase the alpha by exactly the amount he swipes times the sensibility.

And now let’s see where the magic actually happens!

    protected virtual void refreshImages()
    {
        foreach (var img in imgset)
        {
            float transformedPosition = positionCurve.Evaluate(alpha + alphaoff[img]);

HERE! did you see that? Here I changed the alpha value to a phisical position. Before we only knew how much the wheel would spin (alpha), then we got how exactly it was spinning for the image we’re checking (alpha + alphaoff[img]). The actual transformation would have been some good old math if we didn’t use an AnimationCurve to do it in our place.
Fuck that. I’m lazy and want the UI designer to be able to change how the slider behaves without touching MY code with his filthy fingers.
Our result is still normalized in a 0-1 scale. To get a position in the proper scale we need :

            img.localPosition = Vector3.right * (transformedPosition * swipeFieldWidth - (swipeFieldWidth / 2f));

So, basically, by subtracting half swipeFieldWidth we have the results centered in 0, but then we’ll have that with transformedPosition==0, a position of (- swipeFieldWidth/2,0,0) will be assigned, and with transformedPosition==1,the result will of course be (swipeFieldWidth/2,0,0). The result is that the width of it all it’s exactly swipeFieldWidth.

            img.localScale = Vector3.one * (zoomCurve.Evaluate(transformedPosition));
        }
    }

And this is what gives the “zoom” effect: we just make the scale bigger the closer the image is to the center (which means transformedPosition==.5f )
This too of course will be done with an AnimationCurve so that we can thinker with results without having to change the code.

What we did so far should look something like this:

[note to self: never delete a gif again or you’ll have to go through hundreds of tweets to get it back]

I hope this will be enough for now. I also hope you would like to read how to add the other stuff I mentioned before like inertia and snapping. If so, join my newsletter to know when the next part of this guide is ready! [edit: next part is here]

And yes, of course I know you want to copy-paste this, so here’s all in one place:

    public AnimationCurve positionCurve;
    public AnimationCurve zoomCurve;
    public RectTransform[] imgset;
    public float rotationSensibility = 1f; //how sensible is to swipe input
    protected float alphaStep = 1f; //will host the image-to-image distance.
    public float swipeFieldWidth = 300f;//Total distance from leftmost position to rightmost one
    [SerializeField]    protected float alpha; //the parameter around wich all things revolve
    protected float lastFrameAlpha; //last frame's alpha value
    public CatchSwipe inputSource; //A module to handle input that gives us the net x-axis swipe value
    Dictionary<RectTransform, float> alphaoff = new Dictionary<RectTransform, float>();//a dictionary to store all image's offsets

    public virtual void Start()
    {
        alphaInitialization();
        refreshImages();
    }

    protected virtual void Update()
    {
        updateAlpha();
        if (Mathf.Abs(lastFrameAlpha - alpha) > 0.001f)
        {
            refreshImages();
        }
        lastFrameAlpha = alpha;

    }

 protected virtual void alphaInitialization()
    {
        alpha = 1;

        if (imgset.Length > 1)
            alphaStep = 1f / (imgset.Length - 1f);

        float minAlpha = -(imgset.Length - 1f) * alphaStep / 2f;
        alphaoff.Clear();
        foreach (var item in imgset)
        {
            alphaoff.Add(item, minAlpha);
            minAlpha += alphaStep;
        }

        lastFrameAlpha = alpha;
    }


protected virtual void updateAlpha()
    {
        alpha = Mathf.Clamp(alpha + inputSource.NetSwipe.x * rotationSensibility, 0, 1 );
    }

    protected virtual void refreshImages()
    {
        foreach (var img in imgset)
        {
            float transformedPosition = positionCurve.Evaluate(alpha + alphaoff[img]);

            img.localPosition = Vector3.right * (transformedPosition * swipeFieldWidth - (swipeFieldWidth / 2f));

            img.localScale = Vector3.one * (zoomCurve.Evaluate(transformedPosition));
        }
    }

And here are the position curve:

position-curve

And zoom curve:

zoom-curve

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Catching Swipes – a touch screen tutorial

One of the hurdles of dealing with touch screens is to handle finger tracking and boiling it down to a clean cut movement so that one can process gesture recognition.

Let’s look how to make a component that:

  1. only gets swipes in a specific screen area
  2. can detect multiple touches and store their individual details
  3. measures movement since last frame

Touch interface input – variables needed

For this we’ll need a couple of things in our data:

    public GameObject toCheck;
    Dictionary<int, Vector2> lastTouchPositionByFinger = new Dictionary<int, Vector2>();
    Vector2 lastClickPositionByMouse;
    Vector2 currentMousePos;
    [SerializeField]
    Vector2 netSwipe;
    public Vector2 NetSwipe
    {
        get { return netSwipe; }
    }

First of all we get a GameObject we’ll use to define the area in which the swipes shall be catched, it must be a UI element that can be Raycasted.
The next item will be a dictionary in which to store the current position of every single tracked finger. Also, since on Windows 10 computer touch screens are treated as mouse input we’ll need an extra place for mouse input position. And at last, of course, we have a property which will contain our movement since last frame inside the area.

Notice: there are up to 10 fingers and just one net movement. What we will do will be to have the total movement of the frame in this netSwipe variable, if you need to track the fingers independently, you will need to change this approach.

How to check if touch is over a UI element

So, how do we implement our first requisite? We just ask the event system if a finger is over the image (which of course can be made invisible by setting a 0 in its alpha channel).

    private static List<RaycastResult> tempRaycastResults = new List<RaycastResult>();

    public bool PointIsOverUI(Vector2 position)
    {

        var eventDataCurrentPosition = new PointerEventData(EventSystem.current);

        eventDataCurrentPosition.position = position;

        tempRaycastResults.Clear();

        EventSystem.current.RaycastAll(eventDataCurrentPosition, tempRaycastResults);
        foreach (var item in tempRaycastResults)
        {
            if (item.gameObject.GetInstanceID() == toCheck.GetInstanceID() && item.index == 0)
                return true;
        }
        return false;
    }

We’ll need an extra list for this function, to store all the results of the Raycast. At first we poll the EventSystem for a RaycastAll , then we go through every hit object and only if the object we hit is the one we’re looking to hit and only if there is no other object over it we give true as an answer. Otherwise we’re not hitting the right item and the touch should not be contributing to net swipe.

How to process a touch input in Unity3d

Now we can check if the touch should be counted or not, but that’s not enough. We also need to check for the touch phase in which we are and put tracking in place, let’s start with the Update function’s structure:

 void Update()
    {
        if (Input.touchCount > 0)
        {
            for (int i = 0; i < Input.touchCount; i++)
            {
                var touch = Input.GetTouch(i);
                switch (touch.phase)
                {
                    case TouchPhase.Began:
                        //stuff
                        break;
                    case TouchPhase.Moved:
                        //moar stuff
                        break;
                    case TouchPhase.Ended:
                        //stuff again
                        break;
                    case TouchPhase.Canceled:
                        //last stuff
                        break;
                    default:
                        break;
                }
            }
        }

    }

The first thing to check, of course, is if there are any touches at all. If there aren’t, then we don’t want to waste any resources. Then we cycle through each touch and do stuff appropriately.

Let’s get to the details. Before even starting our check we want to ensure that if no touches are active our netSwipe is reset to zero, so:

void Update()
    {
        netSwipe = Vector2.zero;
        if (Input.touchCount > 0)
        {

Getting to the actual stuff, when the touch begins and ends or gets cancelled we just want to add or remove it from our tracking accordingly, so we have:

                   case TouchPhase.Began:
                         lastTouchPositionByFinger.Add(touch.fingerId, touch.position);
                        break;

and:

                    case TouchPhase.Ended:
                        lastTouchPositionByFinger.Remove(touch.fingerId);
                        break;
                    case TouchPhase.Canceled:
                        lastTouchPositionByFinger.Remove(touch.fingerId);
                        break;

When the finger is moving, instead, is where the fun part happens:

                    case TouchPhase.Moved:
                        if (PointIsOverUI(touch.position))
                        {
                            netSwipe += touch.position - lastTouchPositionByFinger[touch.fingerId];
                            lastTouchPositionByFinger[touch.fingerId] = touch.position;
                        }
                        break;

First we check if the finger is over the area of interest, then we add its movement since last frame to our  netSwipe variable and update the finger’s position in our dictionary and that’s it! You now have also the tracking and net movement over the image.

Dealing with Windows 10

        if (Input.GetMouseButton(0))
        {
            currentMousePos = Input.mousePosition;
            if (PointIsOverUI(currentMousePos))
                netSwipe += (currentMousePos - lastClickPositionByMouse);

            lastClickPositionByMouse = currentMousePos;
        }

As I said before, on Windows 10 laptops touchscreens touches are read as mouse input. In that case we’re going to make an exception ad use a special treatment. The logic is still the same, but without the tracking of a finger touch. Simply put, if the button is down, then we check if it’s over the UI element we’re tracking and if so we use current position versus last frame’s one to contribute to netswipe.

That’s all folks!

Now go out there and do something awesome with that. I’ll post soon enough a tutorial that makes use of this component to control a gallery of sliding images. Join my newsletter to never miss my stuff and hit me up on Twitter for any remarks!

And of course here’s the script in a copypaste-friendly format:

using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;

public class CatchSwipe : MonoBehaviour
{

    public GameObject toCheck;
    Dictionary<int, Vector2> lastTouchPositionByFinger = new Dictionary<int, Vector2>();
    Vector2 lastClickPositionByMouse;
    Vector2 currentMousePos;
    [SerializeField]
    Vector2 netSwipe;
    public Vector2 NetSwipe
    {
        get { return netSwipe; }
    }

    void Update()
    {
        netSwipe = Vector2.zero;
        if (Input.GetMouseButton(0))
        {
            currentMousePos = Input.mousePosition;
            if (PointIsOverUI(currentMousePos))
                netSwipe += (currentMousePos - lastClickPositionByMouse);

            lastClickPositionByMouse = currentMousePos;
        }
        if (Input.touchCount > 0)
        {
            for (int i = 0; i < Input.touchCount; i++)
            {
                var touch = Input.GetTouch(i);
                switch (touch.phase)
                {
                    case TouchPhase.Began:
                        lastTouchPositionByFinger.Add(touch.fingerId, touch.position);
                        break;
                    case TouchPhase.Moved:
                        if (PointIsOverUI(touch.position))
                        {
                            netSwipe += touch.position - lastTouchPositionByFinger[touch.fingerId];
                            lastTouchPositionByFinger[touch.fingerId] = touch.position;
                        }
                        break;
                    case TouchPhase.Ended:
                        lastTouchPositionByFinger.Remove(touch.fingerId);
                        break;
                    case TouchPhase.Canceled:
                        lastTouchPositionByFinger.Remove(touch.fingerId);
                        break;
                    default:
                        break;
                }
            }
        }
    }


    private static List<RaycastResult> tempRaycastResults = new List<RaycastResult>();
    public bool PointIsOverUI(Vector2 position)
    {

        var eventDataCurrentPosition = new PointerEventData(EventSystem.current);

        eventDataCurrentPosition.position = position;

        tempRaycastResults.Clear();

        EventSystem.current.RaycastAll(eventDataCurrentPosition, tempRaycastResults);
        foreach (var item in tempRaycastResults)
        {
            if (item.gameObject.GetInstanceID() == toCheck.GetInstanceID() && item.index == 0)
                return true;
        }
        return false;
    }
}

 

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Unity3d WebGL input mapping for Xbox controller

So, this weekend ludum dare 35 happened and I made my entry using xbox 360 controller as my intended imput source. Only one problem there: no existing input guide spoke of how to map buttons on the Xbox controller for unity3d webGL. And that was my target platform.

So, long story short, here’s what I wasted precious jam time looking for:

xbox controller unity3d webgl input map

xbox_360_controller-button-map

For xbox controller usually you would have the triggers on the back as a 3rd or 5th axis, instead on webGL they are mapped only as standard buttons.

As for the axis: left stick is X and Y axis (as usual), right stick is 3rd and 4th axis.

You can set them like this:

xbox controller unity axis input
xbox controller unity axis input

By the way, there’s a simple way to test these mappings on your own!
You can just use this script:

public class testbuttons : MonoBehaviour
{
    [SerializeField]
    Text t;
    // Update is called once per frame
    void Update()
    {
        t.text = "";
        for (int i = 0; i < 20; i++)
        {
            t.text += "Button " + i + "=" + Input.GetKey("joystick button " + i) + "| ";
        }
    }
}

Make an empty scene, add a UI>Text element and stick this script on it. Then run it and read what turns to true when any button is pressed on your controller.

As easy as pie… unless you are in a game jam frenzy, with severe sleep deprivation and panicking like I was… Want more tutorials like this? Join my newsletter! Want to tell me anything? Hit me up on twitter.

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Validating email in C#

Input sanitation is a must when dealing with web services, but it’s also smart to avoid to waste precious seconds in registration procedures due to a wrong email address. That’s true in web development, that’s true in mobile apps, that’s just true on any digital platform.
So it’s best to validate email in unity3d too before any web service is called.

The variables

First we get the references via unity editor to catch both theInputFieldandButton.

    [SerializeField]
    InputField mail;
    [SerializeField]
    Button sendButton;

Then we create aRegexusing the mail validation pattern from .Net framework (be aware, it’s not perfect, but it’s good enough).

    System.Text.RegularExpressions.Regex mailValidator = new System.Text.RegularExpressions.Regex(@"^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$");

TheRegexclass will provide us with a pattern-matching function that we can easily use to check if the pattern on which is built does or not match any input. The pattern will follow the regex syntax. Which by the way I found out not to be a regular expression language any more due to backreferences.

Validate email

Then, on eachUpdatewe first reset the button’s state, then we make it notinteractableagain only if any of the validation criteria is false. So only if the mail validation check DOES NOT recognize our string as a mail address it should make it notinteractable, but in the converse case it shouldn’t make itinteractablesince another validation criteria may fail independently.

    void Update()
    {
        sendButton.interactable = true;

        //other sanitation for other stuff

        if (!mailValidator.IsMatch(mail.text))
                sendButton.interactable = false;
    }

That’s all folks!

Really? really.
It’s not more than just 15 lines of code but it’s a big deal in reducing friction during your registration process for any service or game. If you like this kind of tutorial or just want to hear from me in the future, join my newsletter.

And here’s everything ready for copy-paste :

    [SerializeField]
    InputField mail;
    [SerializeField]
    Button sendButton;
    System.Text.RegularExpressions.Regex mailValidator= new System.Text.RegularExpressions.Regex(@"^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$");
    void Update()
    {
        sendButton.interactable = true;

        //other sanitation for other stuff

        if (!mailValidator.IsMatch(mail.text))
                sendButton.interactable = false;
    }
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Webservices in unity3d: Post, JSON and wait

Working with webservices in mobile apps is quite a common task,  but what if you are developing in Unity3d and need to send a Post request with JSON data? Well, there’s a quick and painless way of dealing with it, in less than 40 lines of code, complete of “wait…” screen management, from call to loggable answer.

First of all we’ll need a little coroutine and a JSON script you can get here.

The coroutine

It’s actually a very small one:

    IEnumerator afterConditionExecutor<T>(System.Action<T> del, T param, bool cond)
    {
        while (!cond)
        { yield return new WaitForEndOfFrame(); }
        del(param);
    }

This will just wait for our condition to be true, then execute the delegatedelgiving it the parameter it needs. We could just put here our wait screen control code, but you may want to customize it so we’ll handle that later (plus, this coroutine is so generally useful, you may want to put it in a library).

Sending the Post request

Let’s get to the meat of the issue, where the POST request is sent along with all our JSON data:

    public void sendMessage(JSONObject data, string url, bool addCookie, MonoBehaviour reqSource, System.Action<WWW> callBack)
    {
        Dictionary<string, string> headers = null;
        if (addCookie)
        {
            headers = new Dictionary<string, string>();
            headers.Add("Cookie", "SomeHeaderContent");
        }

        byte[] pData = Encoding.ASCII.GetBytes(data.ToString().ToCharArray());

        WWW www = new WWW(url,pData, headers);
        reqSource.StartCoroutine(afterConditionExecutor<T>(delegate (WWW mmm)
        {
            Debug.Log("sendMessage to: " + mmm.url + " returned: " + mmm.text);
            callBack(mmm);
        }, www, www.isDone);
    }

In the first part we prepare the request headers. Those are tipically the same across all webservice requests (eg.: login tokens) so it can be convenient to just generate them there and have a bool to control if they are added or not. Otherwise just add a parameter and pass it along from the source.

After that we encode ourJSONObjectin a byte array, so that is in the right format for theWWWobject constructor to pick up. When this constructor is called the webservice request will be sent as a POST http request, but we cannot just parse the reply right away because it won’t be ready. Even for whole seconds. Since it would be too long of a time to freeze our game/app, this call is conveniently Asynchronous. When is done,WWWclass will tell us by turning true thewww.isDoneflag (see reference docs here).

This is the reason why we start a coroutine on behalf of the message-sending class that will use our coroutine to wait until the proper moment and then call our callBack function.

Since there may be some standard error handling to do (eg: no internet connection) we do this inside a dedicated delegate that is passed as argument to the coroutine. Notice that theWWWargument of the delegate is named differently from the object we are just creating so that it links to the one being passed from the coroutine as an argument, this avoids a compilation error.

Let’s see a usage example:

    public void executeLogin(string username, string password)
    {
        JSONObject loginReqJS = new JSONObject();
        loginReqJS.AddField("username", username);
        loginReqJS.AddField("password", password);

        waitLayer.SetActive(true);
        sendMessage(loginReqJS, "http://your url/request/url", false, this, delegate (WWW www)
        {
            waitLayer.SetActive(false);
            Debug.Log("executeLogin to: " + www.url + " returned: " + www.text);
        });
    }

The first thing we do here is to prepare aJSONObjectwith the appropriate parameters for the situation, then we activate our “wait” UI element and finally call oursendMessagefunction.

Inside the delegate that will handle the server reply we also make our “wait” screen go away (non-standard error handling goes here, eg: wrong password), in this case we just log what’s been returned, but in real-life cases you’d transition from a login to your main menu.

This will produce the following http request:

POST /request/url HTTP/1.1
Cookie: "SomeHeaderContent"

{"username":"username","password":"password"}

And here you go. Hope you’ll find this tutorial useful. For more unity3d tutorials join my newsletter 😉

Here’s everything in a more copy-pastable format:

    IEnumerator afterConditionExecutor<T>(System.Action<T> del, T param, bool cond)
    {
        while (!cond)
        { yield return new WaitForEndOfFrame(); }
        del(param);
    }

    public void executeLogin(string username, string password)
    {
        JSONObject loginReqJS = new JSONObject();
        loginReqJS.AddField("username", username);
        loginReqJS.AddField("password", password);

        waitLayer.SetActive(true);
        sendMessage(loginReqJS, "http://your url/request/url", false, this, delegate (WWW www)
        {
            waitLayer.SetActive(false);
            Debug.Log("executeLogin to: " + www.url + " returned: " + www.text);
        });
    }

    public void sendMessage(JSONObject data, string url, bool addCookie, MonoBehaviour reqSource, System.Action<WWW> callBack)
    {
        Dictionary<string, string> headers = null;
        if (addCookie)
        {
            headers = new Dictionary<string, string>();
            headers.Add("Cookie", "SomeHeaderContent");
        }

        byte[] pData = Encoding.ASCII.GetBytes(data.ToString().ToCharArray());

        WWW www = new WWW(url, pData, headers);
        reqSource.StartCoroutine(afterConditionExecutor<T>(delegate (WWW mmm)
        {
            Debug.Log("sendMessage to: " + mmm.url + " returned: " + mmm.text);
            callBack(mmm);
        }, www, www.isDone);
    }

 

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Server maintenance gold

From:
http://meta.serverfault.com/questions/1986/what-are-the-canonical-answers-weve-discovered-over-the-years

These are the questions we have identified as Canonical:

Capacity Planning

Career

Datacenter Design

Documentation

EMail & Spam

Hardware

Hosting provider/server hardware shopping

Infrastructure Software

Licensing

Networking

Security

SSH

Terminal Server (RDS)

Uptime

Virtualization

Web Servers

Windows (General)

Meta

List of Canonical Topics that do not have a Q/A yet or need improvement:

Career

Datacenter Design

Infrastructure Software

Networking

Web Servers

  • Apache vHost
  • Apache .htaccess/overrides

Enterprise Storage

Create one or more Question that covers “ES” topics… not sure how this should be organized exactly. Merge these answers into that Question(s) (keeping them separate/complete answers).

Server Hardware

In response to Why The Hostility, I wrote this for consideration as a canonical Q/A:

What are the basics of running a Web Server?

my.cnf generation wizard:

https://tools.percona.com/wizard

Database table fragmentation command:

mysqlcheck -u root -p –auto-repair –optimize –all-databases

Ultimate Guide: Stop and Remove All the Spam and Other Junk Traffic in Google Analytics

Ultimate guide: How to stop and remove ALL the spam and other unnecessary traffic in Google Analytics

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Snap effect in scroll area: in-depth tutorial

This tutorial is part of a series on how to construct an awesome-looking scroll gallery, with inertia, snap effect, zoom and other stuff. Now we will add a snap effect to it, or as I call it, a magnetic behaviour. When the scrolling gallery is left somewhere between two images, the behaviour will move the one closest to the center towards the middle by scrolling all the sliding gallery. Easier done than said, actually:

snap to center effect
The snap effect will look like this. Magnetic, isn’t it?

Let’s get on the snap effect parameters!

Let’s start with the parameters we’ll need to add to our script this time:

    [Header("Magnetizaiton Parameters")]
    public bool doMagnetize = true;
    public float magnetizationMaxForceFactor = 0.09f;
    public float magnetizationRangeAlphaStepFraction = 0.5f;
    protected float magneticForce;

The first one is just to be able to disable the whole behaviour in one click. The variable magneticForce, instead, will be used to pass the actual per-frame movement to perform, as caused by the snap behaviour, to our updateAlpha function (that will change accordingly).
As for magnetizationMaxForceFactor it will be a factor that defines the maximum movement that can be done in a single frame. And last but not least we have magnetizationRangeAlphaStepFraction, a variable that represents which range of the intermediate positions between two images should be a valid starting point for our snapping behaviour (0.5 being just everywhere and less will leave some resting areas in the middle of two images).

To the bat-functions!

We won’t need to change the start function, but our Update will need a fix:

    protected virtual void Update()
    {
        updateAlpha();
        updateMagnetization();
        if (Mathf.Abs(lastFrameAlpha - alpha) > 0.001f)
        {
            refreshImages();
        }
        lastFrameAlpha = alpha;
    }

We’ll have to make a call to update the magneticForce parameter we introduced before and it must to be done at every frame.

As for our UpdateAlpha we’ll check for input and use the magneticForce if and only if there is no ongoing action

    protected virtual void updateAlpha()
    {
        alpha = Mathf.Clamp(
                alpha + (Mathf.Abs(inputSource.NetSwipe.x) > 0 ?
                    inputSource.NetSwipe.x * rotationSensibility
                    :
                    magneticForce),
                0,
                1
                );
    }

See? Only when the absolute value of the horizontal swipe is exactly zero we’ll add our magneticForce instead of the input-driven value. And now let’s go for the main dish:

    protected virtual void updateMagnetization()
    {
        if ((Mathf.Abs(inputSource.NetSwipe.x) <= 0.001) && (doMagnetize))
        {
            float rest = alpha % alphaStep;
            if (rest < magnetizationRangeAlphaStepFraction * alphaStep)
            {
                if (rest < rotationSensibility)
                    magneticForce = -rest;
                else
                    magneticForce = -rest * magnetizationMaxForceFactor;

            }
            else if (rest > alphaStep * (1 - magnetizationRangeAlphaStepFraction))
            {
                if (rest < rotationSensibility)
                    magneticForce = rest;
                else
                    magneticForce = (alphaStep - rest) * magnetizationMaxForceFactor;
            }
        }
    }

First we check that there’s no input and that the magnetization flag is set to true, otherwise we’d only be wasting our CPU cycles. Then we get the difference between the current position and the nearest image thanks to the module operator and the alphaStep variable that gives us the distance between images.

Implementing the actual snap effect

Now we can distinguish two cases: either we need to snap to left, or we need to snap to right. But we also could be in the case that magnetizationRangeAlphaStepFraction is small enough to allow for a resting position between images and that shall be checked too. Once we decided this we’ll see if we’re so close that it’s better to just skip to the final destination (by using the whole rest value as our next magneticForce ) or if we should go move of a fraction of it (by multiplying for magnetizationMaxForceFactor ).

Well, now the slider looks way nicer but it still lacks an inertia option and the abilty to select stuff. You’ll have to wait a bit for that, until next part is ready. Join my newsletter, I’ll link it there! [edit: next part is here]

Here’s a copy-paste friendly recap of all the changes we made to the base script in last article

    [Header("Magnetizaiton Parameters")]
    public bool doMagnetize = true;
    public float magnetizationMaxForceFactor = 0.09f;
    public float magnetizationRangeAlphaStepFraction = 0.5f;
    protected float magneticForce;

    protected virtual void Update()
    {
        updateAlpha();
        updateMagnetization();
        if (Mathf.Abs(lastFrameAlpha - alpha) > 0.001f)
        {
            refreshImages();
        }
        lastFrameAlpha = alpha;
    }

    protected virtual void updateAlpha()
    {
        alpha = Mathf.Clamp(
                alpha + (Mathf.Abs(inputSource.NetSwipe.x) > 0 ?
                    inputSource.NetSwipe.x * rotationSensibility
                    :
                    magneticForce),
                0,
                1
                );
    }

    protected virtual void updateMagnetization()
    {
        if ((Mathf.Abs(inputSource.NetSwipe.x) <= 0.001) && (doMagnetize))
        {
            float rest = alpha % alphaStep;
            if (rest < magnetizationRangeAlphaStepFraction * alphaStep)
            {
                if (rest < rotationSensibility)
                    magneticForce = -rest;
                else
                    magneticForce = -rest * magnetizationMaxForceFactor;

            }
            else if (rest > alphaStep * (1 - magnetizationRangeAlphaStepFraction))
            {
                if (rest < rotationSensibility)
                    magneticForce = rest;
                else
                    magneticForce = (alphaStep - rest) * magnetizationMaxForceFactor;
            }
        }
    }

 

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Scroll inertia: in-depth tutorial

This tutorial series on how to build a cool scrollable selection area  in unity is nearing its end, here we’ll mod the previous script to add a scroll inertia effect, so that the scroll doesn’t stop immediately when the user lifts the finger.

In last edit we added a snapping behaviour to our scroll area, and if you have not so many items to scroll that can be enough. But what if there are a lot of them? Let’s be clear, if you need to stash more than 30, I’d advice to use at least a scroll slider bar too, makes easier to navigate and keep track of what-is-where. But already with 15 or so elements it would be nice not to have to scroll through every single one of them with your finger. Let’s have one powerful slide do the job of a dozen weak ones!

Scrolling through an image gallery with inertia on
A couple scrolls can have very different effects with inertia…

Let’s set the parameters

To achieve this we’ll add an inertia “factor” to our movement, pretty much in the same way we added a magnetic force.
So, here’s how:

    [Header("inertia Parameters")]
    public bool useInertia;
    protected float inertia;
    public float inertialDampening = 0.9f; 
    public float inertiaPersistenceFactor = 10f;
  • useInertiawill be used as a control flag to switch the behaviour on and off
  • inertiais the variable where we store the movement due to inertia for the frame
  • inertialDampeningis our attrition factor, we’ll just mutiply this to last frame’s inertia to dampen it
  • inertiaPersistenceFactorinstead gives us control on how much the inertia effect should persist before being set to exactly 0

Changing the functions for scroll inertia

This time we’ll also have to change the Awake function because as of now magnetic behaviour and inertia are quite conflicting, they could produce a jerky or oscillating motion. It’s easy to merge them elegantly but that’s something I won’t do here, sorry 😛

    public virtual void Awake()
    {
        if (useInertia)
            doMagnetize = false;
    }

As for our Update function, that very predictably becomes:

    protected virtual void Update()
    {
        updateAlpha();
        updateInertia();
        updateMagnetization();
        if (Mathf.Abs(lastFrameAlpha - alpha) > 0.001f)
        {
            refreshImages();
        }
        lastFrameAlpha = alpha;
    }

Where updateInertia is:

    protected virtual void updateInertia()
    {
        if (useInertia)
        {
            inertia = Mathf.Abs(inputSource.NetSwipe.x) > 0 ? alpha - lastFrameAlpha : inertialDampening * inertia;
            if (Mathf.Abs(inertia) < rotationSensibility / inertiaPersistenceFactor)
                inertia = 0;
        }
    }

What happens here is: first we check our flag, then we evaluate if there is any input. If there is we update inertia to exactly that frame’s movement, so that we may use it later. If there is none, inertia gets its own value, dampened.

When it’s just too low to care about it, we set it to 0;

Lastly we need to insert the inertia we calculated into our updateAlpha function like this:

    protected virtual void updateAlpha()
    {
        alpha = Mathf.Clamp(
                alpha + (Mathf.Abs(inputSource.NetSwipe.x) > 0 ?
                    inputSource.NetSwipe.x * rotationSensibility
                    :
                    inertia + magneticForce), 
                0,
                1
                );
    }

See where we just sum inertia and magnetic force? there is where you want to intervene if you want to use them both without strange behaviours

And that’s it!

Now you can add inertia to your scrolling behaviour. Isn’t it cool? Last part of this tutorial series will introduce selection, which can be key to using this thing in your UIs without having the player tap on the image/button too. Don’t miss it, join my newsletter and I’ll tell you when it’s out. [edit: next part is here]

Here’s the usual copy-paste friendly version:

    [Header("inertia Parameters")]
    public bool useInertia;
    protected float inertia;
    public float inertialDampening = 0.9f; 
    public float inertiaPersistenceFactor = 10f;

    public virtual void Awake()
    {
        if (useInertia)
            doMagnetize = false;
    }
    protected virtual void Update()
    {
        updateAlpha();
        updateInertia();
        updateMagnetization();
        if (Mathf.Abs(lastFrameAlpha - alpha) > 0.001f)
        {
            refreshImages();
        }
        lastFrameAlpha = alpha;
    }

    protected virtual void updateAlpha()
    {
        alpha = Mathf.Clamp(
                alpha + (Mathf.Abs(inputSource.NetSwipe.x) > 0 ?
                    inputSource.NetSwipe.x * rotationSensibility
                    :
                    inertia + magneticForce), 
                0,
                1
                );
    }
    protected virtual void updateInertia()
    {
        if (useInertia)
        {
            inertia = Mathf.Abs(inputSource.NetSwipe.x) > 0 ? alpha - lastFrameAlpha : inertialDampening * inertia;
            if (Mathf.Abs(inertia) < rotationSensibility / inertiaPersistenceFactor)
                inertia = 0;
        }
    }
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •