Sat, Jun 23, 2012

Source Code Of Moving Car In Opengl Codes and Scripts Downloads Free. Source code of Inno Setup - free installer for Windows programs. This program is open source code of fast Fourier transform in matlab. An off-road portion near the road, and maybe trees that blow up the car), or you could make the camera more interesting (say, it stays behind the car, and looks over its shoulder). Now, for dynamics, I'd treat universe-car interaction using distinct code from car-car interaction, just to keep my sanity intact.

Previously we introduced our outrun-style racing game, but how do weget started building a pseudo-3d racing game ?

Well, we’re going to need to

revise some trigonometry
revise basic 3d projection
build a game loop
load some sprite images
build some road geometry
render the background
render the road
render the car
enable keyboard support to drive the car

Before we do any of that, lets go off and read Lou’s Pseudo 3d Page -its the main source of information (that I could find) online about how to build a pseudo-3d racing game.

Program Car Race Game Opengl Source Codes

NOTE: Lou’s page doesn’t render well in google chrome - so its best viewed using Firefox or IE

Finished reading Lou’s article ? Great! We’re going to build a variation on his ‘Realistic Hills Using3d-Projected Segments’ approach. We will do it gradually, over the course of the next 4 articles, but wewill start off here with v1, building very simple straight road geometry and projecting it onto our HTML5canvas element.

see it in action here

Some Trigonometry

Before we get down to the implementation, lets use some basic trigonometry to remind ourselves how to projecta point in a 3D world onto a 2D screen.

At its most basic, without getting into vectors and matrices, 3D projection uses a law of similar triangles.If we were to label:

h = camera height
d = distance from camera to screen
z = distance from camera to car
y = screen y coordinate

Then we could use the law of similar triangles to calculate

y = h*d/z

as shown in the diagram below:

We could have also drawn a similar diagram from a top-down view instead of a side-on view and derived a similarequation for calculating the screen x coordinate as

x = w*d/z

Where w = half the width of the road (from camera to road edge)

You can see that for both x and y, what we are really doing is scaling by a factor of

d/z

Coordinate Systems

This sounds nice and simple in diagram form, but once you start coding its easy to get a little confused because we havebeen a bit loose in naming our variables and its not clear which represent 3d world coordinates andwhich represent 2d screen coordinates. We’ve also assumed that the camera is at the origin of our world when inreality it will be following our car.

More formally we should be:

translating from world coordinates to camera coordinates
projecting camera coordinates onto a normalized projection plane
scaling the projected coordinates to physical screen (in our case canvas) coordinates

NOTE: in a true 3d system a rotation step would come between steps 1 and 2, but since we’re going to be faking curves we dont need to worry about rotation

Projection

And so we can present our formal projection equations as follows:

The translate equations calculate the point relative to the camera
The project equations are variations of our ‘law of similar triangles’ above
The scale equations take into account the difference between:
- math - where 0,0 is at the center and the y axis goes up and
- computers - where 0,0 is at the top-left and the y axis goes down, as shown below:

NOTE: In a full blown 3d system we would more formally define a Vector and a Matrix classto perform more robust 3d mathematics, and if we were going to do that then we might aswell just use WebGL (or equivalent)… but thats not really the point of this project. Ireally wanted to stick to old-school ‘just-enough’ pseudo-3d to build an outrun-style game.

Some More Trigonometry

One last piece of the puzzle is how to calculate d - the distance from the camera to theprojection plane.

Instead of hard coding a value for d, its more useful to derive it from the desiredvertical field of view. This way we can choose to ‘zoom’ the camera if needed.

Assuming we are projecting onto a normalized projection plane, with coordinatesfrom -1 to +1, we can calculate d as follows:

Program Car Race Game Opengl Source Code

d = 1/tan(fov/2)

Setting up fov as one (of many) variables we will be able to tweak in order to finetune the rendering algorithm.

Javascript Code Structure

I mentioned in the introduction that this code does not exactlyfollow javascript best practices - its a quick and dirty demo with simple global variables andfunctions. However, since I am going to build 4 separate versions (straights, curves, hills and sprites)I will keep some re-usable methods inside common.js within the following modules:

Dom - a few minor DOM helpers.
Util - generic utilities, mostly math helpers.
Game - generic game helpers such as an image loader and the game loop.
Render - canvas rendering helpers.

I will only be detailing methods from common.js if they are relevent to the actual game, ratherthan just simple DOM or math helpers. Hopefully you can tell from the name and context what themethods are supposed to do.

As usual, the source code is the final documentation.

A Simple Game Loop

Before we can render anything, we need a game loop. If you’ve followed any of my previousgame articles (pong, breakout,tetris, snakes orboulderdash) then you’ll have already seenexamples of my favorite fixed time stepgame loop.

I won’t go into much detail here, I’ll simply re-use some of the code from my previousgames to come up with a fixed time step game loop usingrequestAnimationFrame

The idea being that each of my 4 examples can call Game.run(..) and provide their own versions of

update - the game world with a fixed time step.
render - the game world whenever the browser allows.

Again, this is a rehash of ideas from my previous canvas games, so if you need clarification on how thegame loop works go back and read those earlier articles (or post a comment below!).

Images and Sprites

Before our game loop starts, we load 2 separate sprite sheets:

background - 3 parallax layers for sky, hills and trees
sprites - the car sprites (plus trees and billboards to add to the final version)

The spritesheet was generated with a small Rake task using the sprite-factory Ruby Gem.This task generates the unified sprite sheets as well as the x,y,w,h coordinates tobe stored in the BACKGROUND and SPRITES constants.

NOTE: The backgrounds are home-made using Inkscape, while most of the sprites areplaceholder graphics borrowed from the old genesisversion of outrun and used here as teaching examples. If there are any pixel artistsout there who want to provide original art to turn this into a real game please get in touch!

Game Variables

In addition to our backgroun