Crear un juego de carreras pseudo-tridimensional

• Jugar un juego
• Ver código fuente

• en la demostración de ruta directa
• en la demo con curvas
• en la demo con las colinas
• en la versión terminada

Sobre el rendimiento

Sobre la estructura del código

Parte 1. Carreteras rectas.

• Repetir trigonometría
• Recordemos los conceptos básicos de la proyección en 3D.
• Crea un bucle de juego
• Descargar imágenes de sprites
• Construir geometría de carreteras
• Renderizar fondo
• Renderiza el camino
• Render car
• Implementar soporte de teclado para control de máquina

La demostración se puede ver aquí .

Un poco de trigonometría

• h = altura de la cámara
• d = distancia de la cámara a la pantalla
• z = distancia de la cámara al automóvil
• y = pantalla y coordenada

y = h * d / z

x = w * d / z

d / z

Sistemas coordinados

1. conversión de coordenadas mundiales a coordenadas de pantalla
2. proyectar coordenadas de la cámara en un plano de proyección normalizado
3. escalar las coordenadas proyectadas a las coordenadas de la pantalla física (en nuestro caso, esto es lienzo)

Nota: en el presente sistema 3D , la etapa de rotación se realiza entre las etapas 1 y 2 , pero como simularemos las curvas, no necesitamos una rotación.

Proyección

• El punto de conversión de ecuaciones ( traslación ) se calcula en relación con la cámara
• Las ecuaciones de proyección ( proyecto ) son variaciones de la "ley de triángulos similares" que se muestra arriba.
• Las ecuaciones de escala ( escala ) tienen en cuenta la diferencia entre:
  
  • matemática , donde 0,0 está en el centro y el eje y está arriba, y
  • , 0,0 , y :

: 3d- Vector Matrix 3d-, , WebGL ( )… . Outrun.

d = 1 / tan (fov / 2)

Estructura del código Javascript

• Dom es algunas funciones secundarias de ayuda DOM.
• Util : utilidades generales, principalmente funciones matemáticas auxiliares.
• Juego : funciones generales de soporte de juegos, como el descargador de imágenes y el bucle del juego.
• Renderizado : funciones de representación auxiliares en el lienzo.

Como de costumbre, el código fuente está en la documentación final.

Bucle de juego simple

• update - Actualización del mundo del juego con un paso de tiempo fijo.
• render - Actualización del mundo del juego cuando el navegador lo permite.

run: function(options) {

  Game.loadImages(options.images, function(images) {

    var update = options.update,    // method to update game logic is provided by caller
        render = options.render,    // method to render the game is provided by caller
        step   = options.step,      // fixed frame step (1/fps) is specified by caller
        now    = null,
        last   = Util.timestamp(),
        dt     = 0,
        gdt    = 0;

    function frame() {
      now = Util.timestamp();
      dt  = Math.min(1, (now - last) / 1000); // using requestAnimationFrame have to be able to handle large delta's caused when it 'hibernates' in a background or non-visible tab
      gdt = gdt + dt;
      while (gdt > step) {
        gdt = gdt - step;
        update(step);
      }
      render();
      last = now;
      requestAnimationFrame(frame);
    }
    frame(); // lets get this party started
  });
}

Imágenes y sprites

• Fondo : tres capas de paralaje para cielo, colinas y árboles
• sprites : sprites de máquina (además de árboles y vallas publicitarias que se agregarán a la versión final)

Nota: Creé los fondos usando Inkscape, y la mayoría de los sprites son gráficos tomados de la versión anterior de Outrun para Genesis y utilizados como ejemplos de entrenamiento.

Variables del juego

var fps           = 60;                      // how many 'update' frames per second
var step          = 1/fps;                   // how long is each frame (in seconds)
var width         = 1024;                    // logical canvas width
var height        = 768;                     // logical canvas height
var segments      = [];                      // array of road segments
var canvas        = Dom.get('canvas');       // our canvas...
var ctx           = canvas.getContext('2d'); // ...and its drawing context
var background    = null;                    // our background image (loaded below)
var sprites       = null;                    // our spritesheet (loaded below)
var resolution    = null;                    // scaling factor to provide resolution independence (computed)
var roadWidth     = 2000;                    // actually half the roads width, easier math if the road spans from -roadWidth to +roadWidth
var segmentLength = 200;                     // length of a single segment
var rumbleLength  = 3;                       // number of segments per red/white rumble strip
var trackLength   = null;                    // z length of entire track (computed)
var lanes         = 3;                       // number of lanes
var fieldOfView   = 100;                     // angle (degrees) for field of view
var cameraHeight  = 1000;                    // z height of camera
var cameraDepth   = null;                    // z distance camera is from screen (computed)
var drawDistance  = 300;                     // number of segments to draw
var playerX       = 0;                       // player x offset from center of road (-1 to 1 to stay independent of roadWidth)
var playerZ       = null;                    // player relative z distance from camera (computed)
var fogDensity    = 5;                       // exponential fog density
var position      = 0;                       // current camera Z position (add playerZ to get player's absolute Z position)
var speed         = 0;                       // current speed
var maxSpeed      = segmentLength/step;      // top speed (ensure we can't move more than 1 segment in a single frame to make collision detection easier)
var accel         =  maxSpeed/5;             // acceleration rate - tuned until it 'felt' right
var breaking      = -maxSpeed;               // deceleration rate when braking
var decel         = -maxSpeed/5;             // 'natural' deceleration rate when neither accelerating, nor braking
var offRoadDecel  = -maxSpeed/2;             // off road deceleration is somewhere in between
var offRoadLimit  =  maxSpeed/4;             // limit when off road deceleration no longer applies (e.g. you can always go at least this speed even when off road)

Gestionamos Ferrari

Game.run({
  ...
  keys: [
    { keys: [KEY.LEFT,  KEY.A], mode: 'down', action: function() { keyLeft   = true;  } },
    { keys: [KEY.RIGHT, KEY.D], mode: 'down', action: function() { keyRight  = true;  } },
    { keys: [KEY.UP,    KEY.W], mode: 'down', action: function() { keyFaster = true;  } },
    { keys: [KEY.DOWN,  KEY.S], mode: 'down', action: function() { keySlower = true;  } },
    { keys: [KEY.LEFT,  KEY.A], mode: 'up',   action: function() { keyLeft   = false; } },
    { keys: [KEY.RIGHT, KEY.D], mode: 'up',   action: function() { keyRight  = false; } },
    { keys: [KEY.UP,    KEY.W], mode: 'up',   action: function() { keyFaster = false; } },
    { keys: [KEY.DOWN,  KEY.S], mode: 'up',   action: function() { keySlower = false; } }
  ],
  ...
}

• velocidad - velocidad actual.
• position : la posición Z actual en la pista. Tenga en cuenta que esta es una posición de cámara, no un Ferrari.
• playerX : la posición actual del jugador en X en el camino. Normalizado en el rango de -1 a +1, para no depender del valor real roadWidth.

• actualizaciones positionbasadas en la actual speed.
• se actualiza playerXcuando presiona la tecla izquierda o derecha.
• aumenta speedsi se presiona la tecla arriba.
• disminuye speedsi se presiona la tecla hacia abajo.
• se reduce speedsi no se presionan las teclas arriba y abajo.
• se reduce speedsi se playerXencuentra fuera del borde de la carretera y en el césped.

function update(dt) {

  position = Util.increase(position, dt * speed, trackLength);

  var dx = dt * 2 * (speed/maxSpeed); // at top speed, should be able to cross from left to right (-1 to 1) in 1 second

  if (keyLeft)
    playerX = playerX - dx;
  else if (keyRight)
    playerX = playerX + dx;

  if (keyFaster)
    speed = Util.accelerate(speed, accel, dt);
  else if (keySlower)
    speed = Util.accelerate(speed, breaking, dt);
  else
    speed = Util.accelerate(speed, decel, dt);

  if (((playerX < -1) || (playerX > 1)) && (speed > offRoadLimit))
    speed = Util.accelerate(speed, offRoadDecel, dt);

  playerX = Util.limit(playerX, -2, 2);     // dont ever let player go too far out of bounds
  speed   = Util.limit(speed, 0, maxSpeed); // or exceed maxSpeed

}

Geometría del camino

function resetRoad() {
  segments = [];
  for(var n = 0 ; n < 500 ; n++) { // arbitrary road length
    segments.push({
       index: n,
       p1: { world: { z:  n   *segmentLength }, camera: {}, screen: {} },
       p2: { world: { z: (n+1)*segmentLength }, camera: {}, screen: {} },
       color: Math.floor(n/rumbleLength)%2 ? COLORS.DARK : COLORS.LIGHT
    });
  }

  trackLength = segments.length * segmentLength;
}

function findSegment(z) {
  return segments[Math.floor(z/segmentLength) % segments.length];
}

Representación de fondo

function render() {

  ctx.clearRect(0, 0, width, height);

  Render.background(ctx, background, width, height, BACKGROUND.SKY);
  Render.background(ctx, background, width, height, BACKGROUND.HILLS);
  Render.background(ctx, background, width, height, BACKGROUND.TREES);

  ...

Renderizado de carreteras

  var baseSegment = findSegment(position);
  var maxy        = height;
  var n, segment;
  for(n = 0 ; n < drawDistance ; n++) {

    segment = segments[(baseSegment.index + n) % segments.length];

    Util.project(segment.p1, (playerX * roadWidth), cameraHeight, position, cameraDepth, width, height, roadWidth);
    Util.project(segment.p2, (playerX * roadWidth), cameraHeight, position, cameraDepth, width, height, roadWidth);

    if ((segment.p1.camera.z <= cameraDepth) || // behind us
        (segment.p2.screen.y >= maxy))          // clip by (already rendered) segment
      continue;

    Render.segment(ctx, width, lanes,
                   segment.p1.screen.x,
                   segment.p1.screen.y,
                   segment.p1.screen.w,
                   segment.p2.screen.x,
                   segment.p2.screen.y,
                   segment.p2.screen.w,
                   segment.color);

    maxy = segment.p2.screen.y;
  }

project: function(p, cameraX, cameraY, cameraZ, cameraDepth, width, height, roadWidth) {
  p.camera.x     = (p.world.x || 0) - cameraX;
  p.camera.y     = (p.world.y || 0) - cameraY;
  p.camera.z     = (p.world.z || 0) - cameraZ;
  p.screen.scale = cameraDepth/p.camera.z;
  p.screen.x     = Math.round((width/2)  + (p.screen.scale * p.camera.x  * width/2));
  p.screen.y     = Math.round((height/2) - (p.screen.scale * p.camera.y  * height/2));
  p.screen.w     = Math.round(             (p.screen.scale * roadWidth   * width/2));
}

Renderizado de autos

  Render.player(ctx, width, height, resolution, roadWidth, sprites, speed/maxSpeed,
                cameraDepth/playerZ,
                width/2,
                height);

d / z

Conclusión

• módulo auxiliar genérico dom
• Util módulo de matemáticas general
• Renderizar módulo auxiliar de lienzo general ...
• ... incluyendo Render.segment, Render.polygonyRender.sprite
• ciclo de juego de lanzamiento fijo
• descargador de imágenes
• controlador de teclado
• fondo de paralaje
• hoja de sprites con autos, árboles y vallas publicitarias
• geometría rudimentaria de la carretera
• método update()para controlar la máquina
• Método render()para representar el fondo, la carretera y el auto del jugador
• Etiqueta HTML5 <audio>con música de carreras (¡bonificación oculta!)

Parte 2. Curvas.

"Para curvar la carretera, simplemente cambie la posición de la línea central de la forma de la curva ... comenzando desde la parte inferior de la pantalla, la cantidad de desplazamiento del centro de la carretera hacia la izquierda o hacia la derecha aumenta gradualmente" .

• negativo para curvas de giro a la izquierda
• positivo para curvas que giran a la derecha
• menos para curvas suaves
• más para curvas cerradas

var ROAD = {
  LENGTH: { NONE: 0, SHORT:  25, MEDIUM:  50, LONG:  100 }, // num segments
  CURVE:  { NONE: 0, EASY:    2, MEDIUM:   4, HARD:    6 }
};

easeIn:    function(a,b,percent) { return a + (b-a)*Math.pow(percent,2);                           },
easeOut:   function(a,b,percent) { return a + (b-a)*(1-Math.pow(1-percent,2));                     },
easeInOut: function(a,b,percent) { return a + (b-a)*((-Math.cos(percent*Math.PI)/2) + 0.5);        },

function addSegment(curve) {
  var n = segments.length;
  segments.push({
     index: n,
        p1: { world: { z:  n   *segmentLength }, camera: {}, screen: {} },
        p2: { world: { z: (n+1)*segmentLength }, camera: {}, screen: {} },
     curve: curve,
     color: Math.floor(n/rumbleLength)%2 ? COLORS.DARK : COLORS.LIGHT
  });
}

function addRoad(enter, hold, leave, curve) {
  var n;
  for(n = 0 ; n < enter ; n++)
    addSegment(Util.easeIn(0, curve, n/enter));
  for(n = 0 ; n < hold  ; n++)
    addSegment(curve);
  for(n = 0 ; n < leave ; n++)
    addSegment(Util.easeInOut(curve, 0, n/leave));
}

function addSCurves() {
  addRoad(ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM,  -ROAD.CURVE.EASY);
  addRoad(ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM,   ROAD.CURVE.MEDIUM);
  addRoad(ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM,   ROAD.CURVE.EASY);
  addRoad(ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM,  -ROAD.CURVE.EASY);
  addRoad(ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM, ROAD.LENGTH.MEDIUM,  -ROAD.CURVE.MEDIUM);
}

Cambios en el método update ()

var centrifugal = 0.3;   // centrifugal force multiplier when going around curves

playerX = playerX - (dx * speedPercent * playerSegment.curve * centrifugal);

Representación de curvas

• desplazar la proyección p1 de cada segmento por x
• desplazar la proyección p2 de cada segmento por x + dx
• aumentar x para el siguiente segmento en dx

var baseSegment = findSegment(position);
var basePercent = Util.percentRemaining(position, segmentLength);
var dx = - (baseSegment.curve * basePercent);
var x  = 0;
for(n = 0 ; n < drawDistance ; n++) {

  ...

  Util.project(segment.p1, (playerX * roadWidth) - x,      cameraHeight, position - (segment.looped ? trackLength : 0), cameraDepth, width, height, roadWidth);
  Util.project(segment.p2, (playerX * roadWidth) - x - dx, cameraHeight, position - (segment.looped ? trackLength : 0), cameraDepth, width, height, roadWidth);

  x  = x + dx;
  dx = dx + segment.curve;

  ...
}

Fondo de desplazamiento de paralaje

var skySpeed    = 0.001; // background sky layer scroll speed when going around curve (or up hill)
var hillSpeed   = 0.002; // background hill layer scroll speed when going around curve (or up hill)
var treeSpeed   = 0.003; // background tree layer scroll speed when going around curve (or up hill)
var skyOffset   = 0;     // current sky scroll offset
var hillOffset  = 0;     // current hill scroll offset
var treeOffset  = 0;     // current tree scroll offset

skyOffset  = Util.increase(skyOffset,  skySpeed  * playerSegment.curve * speedPercent, 1);
hillOffset = Util.increase(hillOffset, hillSpeed * playerSegment.curve * speedPercent, 1);
treeOffset = Util.increase(treeOffset, treeSpeed * playerSegment.curve * speedPercent, 1);

Render.background(ctx, background, width, height, BACKGROUND.SKY,   skyOffset);
Render.background(ctx, background, width, height, BACKGROUND.HILLS, hillOffset);
Render.background(ctx, background, width, height, BACKGROUND.TREES, treeOffset);

Conclusión