Side scroller background

Unity Engine
1

hey
I’m doing a game as a interactive videoclip kind of thing for my band.

I’m a bit stuck with the background and the method to choose since the game has to be finished as the song ends. resulting in either dead or victory :slight_smile: (you come across an end boss)

the set up i though would be most simple is making a plane as the camera child and scroll a texture over it following the movement of the player.

I’m a scripting noob, only thing i can do is try figuring out which part of scripts found on the net do what and copy paste my own thing out of it. so this is what i got so far from wiki with a input.getkey added.

var uvAnimationTileX = 3; //Here you can place the number of columns of your sheet.
                           //The above sheet has 24

var uvAnimationTileY = 1; //Here you can place the number of rows of your sheet.
                          //The above sheet has 1
//var framesPerSecond = 3;
var speed : float = 1;

function Update () {
	
	//Get arrow keys
	if(Input.GetKey (KeyCode.UpArrow))

    var translationUp : float = Input.GetAxis ("Vertical") * speed;
    
        // Calculate index
    //var indexUp : int = Time.time * translationUp;
    // repeat when exhausting all frames
    //indexUp = indexUp % (uvAnimationTileX * uvAnimationTileY);
    
    	//Get arrow keys
	if(Input.GetKey (KeyCode.DownArrow))

    var translationDown : float = Input.GetAxis ("Vertical") * speed;
    // Calculate index
    //var indexDown : int = Time.time * translationDown;
    // repeat when exhausting all frames
    //indexDown = indexDown % (uvAnimationTileX * uvAnimationTileY);
   
   if(Input.GetKey (KeyCode.LeftArrow))

    var translationLeft : float = Input.GetAxis ("Horizontal") * speed;
    
        // Calculate index
    //var indexLeft : int = Time.time * translationLeft;
    // repeat when exhausting all frames
    translationLeft = Time.time * translationLeft % (uvAnimationTileX * uvAnimationTileY);
    
    	//Get arrow keys
	if(Input.GetKey (KeyCode.RightArrow))

    var translationRight : float = Input.GetAxis ("Horizontal") * speed;
    // Calculate index
    //var indexRight : int = Time.time * translationRight;
    // repeat when exhausting all frames
    translationRight = Time.time * translationRight % (uvAnimationTileX * uvAnimationTileY);
   

   
    // Size of every tile
    var size = Vector2 (1.0 / uvAnimationTileX, 1.0 / uvAnimationTileY);
   
    // split into horizontal and vertical index
    var vIndex = translationUp + translationDown % uvAnimationTileY;
    var uIndex = translationLeft + translationRight % uvAnimationTileX;

    // build offset
    // v coordinate is the bottom of the image in opengl so we need to invert.
    var offset = Vector2 (uIndex * size.x, 1.0 + size.y/4 - vIndex * size.y/2);
   
    renderer.material.SetTextureOffset ("_MainTex", offset);
    renderer.material.SetTextureScale ("_MainTex", size);
}

i think the framepersecond var isn’t needed any more? i got the upkey working kind of, only it’s more a shifting of tiles than gradual movement.

i normally do more fps kind of thing so the whole side scrolling thing in its own is kind of new to me, so maybe i going the wrong way about this…?

edit:update
got it more or less working in principal but it looks like shit. the texture tiles in the opposite direction of what i want. and i got to figure out how to stop it when it is at the top or bottom.

2

ok i got it to work more or less, but dunno if it’s what i needed… :frowning:

so lets ask the question more clear, how do i go about making a background for a time limited sidescroller.

maybe don’t give the player the freedom to go back…? a bit like the spaceship shooters.

hmm for some reason the controls don’t work as web player?

so only the code

var uvAnimationTileX = 3; //Here you can place the number of columns of your sheet.
                           //The above sheet has 24

var uvAnimationTileY = 1; //Here you can place the number of rows of your sheet.
                          //The above sheet has 1
//var framesPerSecond = 3;
var speed : float = 1;

function Update () {
	
	//Get arrow keys
	if(Input.GetKey (KeyCode.UpArrow))

    var translationUp : float = Input.GetAxis ("Vertical") * -speed;
    
        // Calculate index
    //var indexUp : int = Time.time * translationUp;
    // repeat when exhausting all frames
    //indexUp = indexUp % (uvAnimationTileX * uvAnimationTileY);
    
    	//Get arrow keys
	if(Input.GetKey (KeyCode.DownArrow))

    var translationDown : float = Input.GetAxis ("Vertical") * -speed;
    // Calculate index
    //var indexDown : int = Time.time * translationDown;
    // repeat when exhausting all frames
    //indexDown = indexDown % (uvAnimationTileX * uvAnimationTileY);
   
   if(Input.GetKey (KeyCode.LeftArrow))

    var translationLeft : float = Input.GetAxis ("Horizontal") * speed;
    
        // Calculate index
    //var indexLeft : int = Time.time * translationLeft;
    // repeat when exhausting all frames
    translationLeft = Time.time * translationLeft % (uvAnimationTileX * uvAnimationTileY);
    
    	//Get arrow keys
	if(Input.GetKey (KeyCode.RightArrow))

    var translationRight : float = Input.GetAxis ("Horizontal") * speed;
    // Calculate index
    //var indexRight : int = Time.time * translationRight;
    // repeat when exhausting all frames
    translationRight = Time.time * translationRight % (uvAnimationTileX * uvAnimationTileY);
   

   
    // Size of every tile
    var size = Vector2 (1.0 / uvAnimationTileX, 2.0 / uvAnimationTileY);
   
    // split into horizontal and vertical index
    var vIndex = translationUp + translationDown % uvAnimationTileY;
    var uIndex = translationLeft + translationRight % uvAnimationTileX;

    // build offset
    // v coordinate is the bottom of the image in opengl so we need to invert.
    var offset = Vector2 (uIndex * size.x, 1.0 + size.y/4 - vIndex * size.y/4);
   
    renderer.material.SetTextureOffset ("_MainTex", offset);
    renderer.material.SetTextureScale ("_MainTex", size);
}
3

so i’ll keep bumping this no use starting a new thread

got i more or less like i wanted, now my problem is it’s not working in a browser.

I made it so that the player can fly freely within the boundaries of the cam. the scrolling on the background plane is a simple autoscroll for Z and for Y it follows the players position. then if the rightarrow button is push i multiply the autoscrollspeed with 2.

code for player

var speed: float;

var minHorizontalPosition : int;
var maxHorizontalPosition : int;

var minVerticalPosition : int;
var maxVerticalPosition : int;

function Update () {
	
	if(Input.GetKey("right")){ 
	transform.Translate(Vector3.forward*Time.deltaTime*speed);
	}
	
	if(Input.GetKey("left")){ 
	transform.Translate(-(Vector3.forward*Time.deltaTime*speed));
	}
	if(Input.GetKey("up")){ 
	transform.Translate(Vector3.up*Time.deltaTime*speed);
	}
		if(Input.GetKey("down")){ 
	transform.Translate(-(Vector3.up*Time.deltaTime*speed));
	}
	var restrictionV : float = transform.position.z;
	restrictionV = Mathf.Clamp(restrictionV, minHorizontalPosition, maxHorizontalPosition);
	var restrictionH : float = transform.position.z;
	restrictionH = Mathf.Clamp(restrictionH, minHorizontalPosition, maxHorizontalPosition);
	

}
function LateUpdate() {
	if(transform.position.y < minVerticalPosition) {
		transform.position.y = minVerticalPosition;
		
		SendMessage("OnBottomReached");
	}
	if(transform.position.y > maxVerticalPosition) {
		transform.position.y = maxVerticalPosition;
		
		SendMessage("OnTopReached");
	}
	if(transform.position.z < minHorizontalPosition) {
		transform.position.z = minHorizontalPosition;
		
		SendMessage("OnRightReached");
	}
		
	if(transform.position.z > maxHorizontalPosition) {
		transform.position.z = maxHorizontalPosition;
		
		SendMessage("OnLeftReached");
	}	
}

code for background

var scrollSpeedVertical: float;
var scrollSpeedHorizontal: float;
var follow: Rigidbody;
var textureOffsetW: float;
var textureOffsetH: float;
var autoScrollSpeed: float;

function Update () {
	
	//var autoScroll = Time.time * autoScrollSpeed;
	
	var left = follow.transform.position.z;
	var up = follow.transform.position.y;
	
	var offset = Time.time * autoScrollSpeed;
	//var offsetU = left * scrollSpeedHorizontal + textureOffsetW;
	var offsetV = up * scrollSpeedVertical + textureOffsetH;
	
	if (Input.GetKey ("right"))
	offset = offset * 2;
	//offset = offsetU;
    
	renderer.material.mainTextureOffset = Vector2 (offset, offsetV);

}

any idea why this doesn’t work in a browser?

thanks…

4

common guy throw in some help here!