camera following a car

Discuss issues specific the Javascript port of Box2D
Kott
Posts: 23
Joined: Sun Jun 08, 2014 11:24 am

camera following a car

Postby Kott » Thu Jun 26, 2014 5:41 am

I desperately need help with this one!
On a top-down car/racing game how is it possible to make the camera following the car?
(Now the car just keep moving forward until it goes through the game boundaries and disappears). I don't know how to fix this... checked everywhere, this forum, googleing(didn't find anything on javascript though).
Please help if anyone knows an answer or at least knows a link that can help, post it please...

irresistible force
Posts: 1991
Joined: Tue Jun 24, 2008 8:25 pm
Location: Tokyo
Contact:

Re: camera following a car

Postby irresistible force » Thu Jun 26, 2014 8:23 am

Not really a Box2D question, but moving a 'camera' is essentially the same thing as moving the entire world in the opposite direction. Example:

Code: Select all

context.save();
context.translate( -camera.x, -camera.y );
... draw stuff ...
context.restore();

See also:
http://www.html5canvastutorials.com/adv ... -tutorial/
http://jsfiddle.net/hKrrY/

Kott
Posts: 23
Joined: Sun Jun 08, 2014 11:24 am

Re: camera following a car

Postby Kott » Fri Jun 27, 2014 2:02 am

irresistible force thank you for your reply
this link proved to be most useful: http://jsfiddle.net/hKrrY/558/
I understood the javascript process, but i have one quick question:
How does someone connects a body from box2d (e.g. the car) to the camera offsets?

irresistible force
Posts: 1991
Joined: Tue Jun 24, 2008 8:25 pm
Location: Tokyo
Contact:

Re: camera following a car

Postby irresistible force » Fri Jun 27, 2014 5:46 am

You can use GetPosition to get the position of a body.

Kott
Posts: 23
Joined: Sun Jun 08, 2014 11:24 am

Re: camera following a car

Postby Kott » Sat Jun 28, 2014 3:10 am

Ok, i am honestly in need of more help. i have problem getting the position of the car

First of all about .getPosition() . Couldn't find any info about it from 'pure' javascript, also jquery(the only library than i am familiar with until now), doesn't have it. it has .position() and thats where my 1st question arises:
In order for .position() to work you need a selector. how to select a javascript variable? As far as i know a selector can be either an id, or class name or tag name.

The following is what i got so far without errors. Downside is that i don't get the response that i wanted. For now i aim at least to be able to get the initial position:

Code: Select all

function find_Position(type){
      if (type == "car"){
         var pos = test1_Game.car.position();
         alert("Top: " + pos.top + " Left: " + pos.left);    //also tried to put return before alert
      }   
}

where test1_Game is a global object to hold important/global variables, the type is an object from a pre-defined level data array and in the end i have put find_Position(test1_Game.type) into a function that also holds the game interval/loop and also a function that creates the roads walls/boundaries.

irresistible force
Posts: 1991
Joined: Tue Jun 24, 2008 8:25 pm
Location: Tokyo
Contact:

Re: camera following a car

Postby irresistible force » Sat Jun 28, 2014 5:48 am

Sorry, I assumed you were using box2dweb or one of the other variants of Box2D for Javascript. It would help if you mention stuff like that in your question so we have a clue what you are talking about.
Even if you're not using box2dweb, pretty much any port of Box2D should have a GetPosition function to get the position of a body.
If you want to know where a body is, you will need to keep a reference to it when you create it:

Code: Select all

var carBody = world.CreateBody( bodyDef );

// later...
var carPosition = carBody.GetPosition();

Kott
Posts: 23
Joined: Sun Jun 08, 2014 11:24 am

Re: camera following a car

Postby Kott » Mon Aug 25, 2014 2:55 am

I actually managed to do it!
With some help from codinowl of course...
Because my js file is 147 lines (until now at least) i'll try to explain it as good as i can...
(by the way it's a top down game, moving in the y axis)
1st i made two global vars:

Code: Select all

var pos = new Array();//array used in moveCamera
var p = new b2Vec2();//vector is defined which will store the current y-coordinate

then in the page loader event:

Code: Select all

pos[0] = (car.GetWorldCenter().y);//initial position of object is stored

then the actual function:

Code: Select all

function moveCamera(){
      //stuff needed for moveCamera
      var eye = ($("#container").height())/20;//Veiwport height
      var can_height = ($("#game").height())/20;//canvas height
      var car_pos = (car.GetWorldCenter().y);//Initial pos. of car.
      var half_eye = (eye/2);
       
      //move the camera
      var length = pos.length;
      
      var s = ((pos[length-1]-pos[length-2]))*20;//in pixels. finds out the distance moved in one timestep
      if ((half_eye < (can_height - p)) && (p > half_eye)){//checks if object is not in eye/2. Thus can be translated
         cxt.translate(0, -s);//canvas is translated
      }
      //end move camera
}

and lastly it's needed to put this function into the gameloop function. Beware though, there should be a specific order that all the different function should be placed. Meaning, some should be before others, and some after other.
If the order is not correct you'll have to deal with weird bugs.

Code: Select all

window.setInterval(update, 1000/60);

function update(){
   world.Step(1/60, 10, 10);
   world.DrawDebugData();
   world.ClearForces();
   Rendering();
   moveCar();
   //getting new position in each step
      p = (car.GetWorldCenter().y);
      pos.push(p);
   ///////////////////////////////////   
   moveCamera();
}; 


I really hope this post will help someone and save a looooot of frustration.


Return to “Javascript”



Who is online

Users browsing this forum: No registered users and 1 guest