x


Fighting Game Camera

I have an idea on how to make a 2d fighting game camera, but no idea how to implement it. I basically want the camera to focus on 2 Fighters and zoom in/out to make sure they're both on screen. Id imagine I would have to find the middle between these objects and then move the camera from there but I'm stumped on how to do so. Any help is greatly appreciated.

more ▼

asked Jun 04 '11 at 07:47 PM

Xatoku gravatar image

Xatoku
149 74 82 88

(comments are locked)
10|3000 characters needed characters left

1 answer: sort oldest

Supposing you will be using X and Y axis, I think you must define continuously the left and right limits (xL and xR) of your scene based on each fighter's position - let a margin of 1 or 2 meters behind each fighter, for instance - then alter the Z coordinate of the camera in order to get the borders at these points. Since the camera's view angle and the players plane form a triangle, the scene width will be proportional to the distance of the camera to the plane. You can set manually this distance at design time - let's call it zCam, and wScene the initial width of the scene. During the fight, you can set the distance of the camera to zCam*(xR-xL)/wScene, and the camera's X coordinate to the center of the scene, (xR+xL)/2.
Hope this algorithm works for you!

SCRIPTS ADDED: Create a new project; create the two fighters (simple capsules, for instance), name them Fighter1 and Fighter2 and set their Z and Y coordinates to 0. Add the script below to each one, and modify the Fighter2 command keys in the Inspector to "," and ".", for instance.

private var step:float = 5;
var leftKey = "z";
var rightKey = "x";

function Update(){

    if (Input.GetKey(leftKey)) 
       transform.position.x -= step*Time.deltaTime;
    if (Input.GetKey(rightKey)) 
       transform.position.x += step*Time.deltaTime;
}

Add the script below to the Main Camera:

var margin:float = 1.5; // space between screen border and nearest fighter

private var z0:float = 0; // coord z of the fighters plane
private var zCam:float; // camera distance to the fighters plane
private var wScene:float; // scene width
private var f1:Transform; // fighter1 transform
private var f2:Transform; // fighter2 transform
private var xL:float; // left screen X coordinate
private var xR:float; // right screen X coordinate

function calcScreen(p1:Transform, p2:Transform){
    // Calculates the xL and xR screen coordinates 
    if (p1.position.x<p2.position.x){
       xL = p1.position.x-margin;
       xR = p2.position.x+margin;
    } else {
       xL = p2.position.x-margin;
       xR = p1.position.x+margin;
    }
}

function Start(){
    // find references to the fighters
    f1 = GameObject.Find("Fighter1").transform;    
    f2 = GameObject.Find("Fighter2").transform;
    // initializes scene size and camera distance
    calcScreen(f1,f2);
    wScene = xR-xL;
    zCam = transform.position.z-z0;
}

function Update(){

    calcScreen(f1,f2);
    var width:float = xR-xL;
    if (width>wScene){ // if fighters too far adjust camera distance
       transform.position.z = zCam*width/wScene+z0;
    }
    // centers the camera
    transform.position.x = (xR+xL)/2;
}

This script follows the fighters. If they fit in the scene, the camera just centers itself. It they get too far, the camera zooms out in order to catch the entire scene.

more ▼

answered Jun 04 '11 at 11:09 PM

aldonaletto gravatar image

aldonaletto
42.5k 16 43 202

Alright I'll probably need a js example to fully understand but basically I find how far each fighter is from the border, subtract the 2 numbers, and multiply the sum by the camera's Z co-ordinate at all times and then move the camera based on the distance each fighter is from the border when added & divided by 2, giving me the midpoint between each character which the camera then follows? Like I said, I think I understand it but I'm not sure how to translate it to javascript.

Jun 05 '11 at 12:41 AM Xatoku

I'll try to create something more specific. I'll be back soon on this.

Jun 05 '11 at 12:47 AM aldonaletto

I created a simple project in order to test the algorithm, and attached the scripts to my previous answer. Hope they can be a good start for your game.

Jun 05 '11 at 02:43 AM aldonaletto
(comments are locked)
10|3000 characters needed characters left
Your answer
toggle preview:

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Topics:

x3127
x1071
x823
x183
x26

asked: Jun 04 '11 at 07:47 PM

Seen: 1961 times

Last Updated: Jun 05 '11 at 02:43 AM