- Home /
elastic scrolling scripting
Hi,
Where should I begin to script a value with elastic scrolling. something similar to the way iOs lets use drag a web page beyond the end and when you release spring back to its proper end ( hopefully that's clear enough description :) )
the goal is to drive a value, not necessarly an actual gui element, so that I can apply it to whatever.
I can make the value come back to its limit using some simple tween scripts but how to actually compute the value when the user drags further away from the boundary, it gets to a point where you can't drag it further, some kind of exponential math is involved, but my brain fried today :), and can't see the solution.
Thanks for your directions,
Jean
found a good starting point: http://insideria.com/2010/09/elastic-scrolling-with-javascr.html
Answer by mtalbott · Dec 28, 2011 at 09:55 PM
This might be more than you're looking for but this has the "spring" at the end plus the "throwing" typical to iOS scrolling. I did not add the exponential fall off on the spring but that would be pretty easy to add. I think it feels fine without it anyway.
Add this to any GameObject and play. hope it helps:
#pragma strict
var spacer : int = 8;
var barHeight : int = 32;
var tiles : Tile[]; // home-made class. see the end of script.
var springSpeed : float = 5.0;
var throwSpeed : float = 8.0;
private var tileSize : int;
private var screenWidth : int = Screen.width;
private var screenHeight : int = Screen.height;
private var slidePosition : Vector3;
private var maxSlidePosition : Vector3;
private var oldMousePosition : Vector3;
private var throwPosition : Vector3;
function Start () {
// in a real senario maybe this is dynamically created from a database. for now, here are some blanks.
tiles = [new Tile(), new Tile(),new Tile(),
new Tile(), new Tile(), new Tile(),
new Tile(), new Tile(), new Tile(),
new Tile(), new Tile(), new Tile(),
new Tile(), new Tile(), new Tile(),
new Tile(), new Tile(), new Tile(),
new Tile(), new Tile(), new Tile(),
new Tile(), new Tile(), new Tile(),
new Tile(), new Tile()];
oldMousePosition = Input.mousePosition;
}
function Update () {
if (!Input.anyKey) {
if (slidePosition.x > 0){
slidePosition = Vector3.Slerp(slidePosition, Vector3(0,0,0), Time.deltaTime * springSpeed);
}
else if (slidePosition.x < maxSlidePosition.x) {
slidePosition = Vector3.Slerp(slidePosition, maxSlidePosition, Time.deltaTime * springSpeed);
}
else {
slidePosition = Vector3.Slerp(slidePosition, throwPosition, Time.deltaTime * springSpeed);
}
oldMousePosition = Input.mousePosition;
}
if (Input.GetButton ("Fire1")) {
slidePosition.x += Input.mousePosition.x - oldMousePosition.x;
throwPosition = Vector3(slidePosition.x+throwSpeed*(Input.mousePosition.x-oldMousePosition.x),0,0);
oldMousePosition = Input.mousePosition;
}
}
function OnGUI () {
screenWidth = Screen.width;
screenHeight = Screen.height;
tileSize = (screenHeight-barHeight-(spacer*4))/3;
var xMax : int = Mathf.CeilToInt(tiles.length/3.0f);
maxSlidePosition.x = -spacer*(xMax+1)-tileSize*(xMax)+screenWidth;
for (var i=0; i<tiles.length; i++){
var position : float = i+1;
var xGridPosition : int = Mathf.CeilToInt(position/3.0f);
var yGridPosition : int = position - (xGridPosition-1)*3;
var rect : Rect = new Rect(spacer*xGridPosition+tileSize*(xGridPosition-1)+slidePosition.x, spacer*yGridPosition+tileSize*(yGridPosition-1), tileSize, tileSize);
var tile : Tile = tiles[i];
GUI.Box(rect, tile.name);
}
GUI.Box(Rect(0, screenHeight-barHeight, screenWidth, barHeight), "Bottom Bar");
}
class Tile {
var name : String = "name";
var texture : Texture2D;
}