एक छद्म त्रि-आयामी रेसिंग गेम बनाना

• एक खेल खेलो
• स्रोत कोड देखें

• में सीधा सड़क डेमो
• घटता के साथ डेमो में
• में पहाड़ियों के साथ डेमो
• में समाप्त संस्करण

प्रदर्शन के बारे में

कोड संरचना के बारे में

भाग 1. सीधी सड़कें।

• त्रिकोणमिति दोहराएं
• 3 डी प्रक्षेपण की मूल बातें याद करें
• गेम लूप बनाएं
• स्प्राइट चित्र डाउनलोड करें
• सड़क ज्यामिति का निर्माण
• रेंडर बैकग्राउंड
• रेंडर करें
• रेंडर कार
• मशीन नियंत्रण के लिए कीबोर्ड समर्थन लागू करें

यहां डेमो देखा जा सकता है ।

थोड़ा त्रिकोणमिति

• h = कैमरा ऊंचाई
• d = कैमरा से स्क्रीन की दूरी
• z = कैमरा से कार की दूरी
• y = स्क्रीन y समन्वय

y = h * d / z

x = w * d / z

d / z

सिस्टम संयोजित करें

1. दुनिया से रूपांतरण स्क्रीन निर्देशांक के लिए समन्वय करता है
2. प्रोजेक्टिंग कैमरा एक सामान्यीकृत प्रक्षेपण विमान पर समन्वय करता है
3. भौतिक स्क्रीन के निर्देशांक को अनुमानित निर्देशांक स्केल करना (हमारे मामले में, यह कैनवास है)

नोट: वर्तमान 3 डी-प्रणाली में , रोटेशन चरण 1 और 2 के बीच किया जाता है , लेकिन चूंकि हम घटता का अनुकरण करेंगे, इसलिए हमें रोटेशन की आवश्यकता नहीं है।

प्रक्षेपण

• रूपांतरण समीकरण ( अनुवाद ) बिंदु कक्ष के सापेक्ष गणना की जाती है
• प्रक्षेपण समीकरण ( परियोजना ) ऊपर दिखाए गए "समान त्रिकोण के कानून" के रूपांतर हैं।
• स्केलिंग समीकरणों ( स्केल ) के बीच अंतर को ध्यान में रखना:
  
  • गणित , जहां 0,0 केंद्र में है और y अक्ष ऊपर है, और
  • , 0,0 , y :

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

d = 1 / tan (fov / 2)

जावास्क्रिप्ट कोड संरचना

• Dom कुछ मामूली डोम सहायक कार्यों है।
• Util - सामान्य उपयोगिताओं, मुख्य रूप से सहायक गणितीय कार्य।
• गेम - सामान्य गेमिंग समर्थन फ़ंक्शन, जैसे छवि डाउनलोडर और गेम लूप।
• रेंडर - कैनवास पर सहायक प्रतिपादन कार्य।

हमेशा की तरह, स्रोत कोड अंतिम दस्तावेज में है।

सरल खेल लूप

• update - एक निश्चित समय कदम के साथ खेल की दुनिया को अद्यतन करना।
• render - ब्राउज़र की अनुमति देने पर खेल की दुनिया को अपडेट करना।

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
  });
}

चित्र और स्प्रिट

• पृष्ठभूमि - आकाश, पहाड़ियों और पेड़ों के लिए तीन लंबन परतें
• स्प्राइट्स - मशीन स्प्राइट्स (अंतिम संस्करण में जोड़े जाने वाले पेड़ और बिलबोर्ड)

नोट: मैंने Inkscape का उपयोग करके पृष्ठभूमि बनाई है, और अधिकांश स्प्राइट्स उत्पत्ति के लिए पुराने Outrun संस्करण से लिए गए ग्राफिक्स हैं और प्रशिक्षण उदाहरणों के लिए उपयोग किए जाते हैं।

खेल चर

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)

हम फेरारी का प्रबंधन करते हैं

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; } }
  ],
  ...
}

• गति - वर्तमान गति।
• स्थिति - ट्रैक पर वर्तमान जेड स्थिति। ध्यान दें कि यह एक कैमरा स्थिति है, न कि फेरारी।
• playerX - सड़क पर एक्स पर खिलाड़ी की वर्तमान स्थिति। -1 से +1 तक की सीमा में सामान्यीकृत, ताकि वास्तविक मूल्य पर निर्भर न हो roadWidth।

• positionवर्तमान के आधार पर अद्यतन speed।
• अद्यतन playerXजब आप बाईं या दाईं कुंजी दबाते हैं।
• speedऊपर की कुंजी दबाए जाने पर बढ़ जाती है।
• speedयदि डाउन कुंजी दबाया जाता है तो घट जाती है।
• कम हो जाता है speedअगर ऊपर और नीचे की चाबियाँ दबाया नहीं है।
• speedअगर playerXसड़क के किनारे और घास पर स्थित हो तो कम हो जाता है।

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

}

सड़क की ज्यामिति

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];
}

बैकग्राउंड रेंडरिंग

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);

  ...

सड़क का प्रतिपादन

  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));
}

कार रेंडरिंग

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

d / z

निष्कर्ष

• सामान्य सहायक मॉड्यूल डोम
• Util सामान्य गणित मॉड्यूल
• रेंडर सामान्य कैनवास सहायक मॉड्यूल ...
• ... सहित Render.segment, Render.polygonऔरRender.sprite
• निश्चित पिच खेल चक्र
• छवि डाउनलोडर
• कीबोर्ड हैंडलर
• लंबन पृष्ठभूमि
• कारों, पेड़ों और होर्डिंग के साथ स्प्राइट शीट
• सड़क की अल्पविकसित ज्यामिति
• update()मशीन को नियंत्रित करने की विधि
• render()पृष्ठभूमि, सड़क और खिलाड़ी की कार प्रदान करने की विधि
• <audio>रेसिंग संगीत के साथ HTML5 टैग (छिपा बोनस!)

भाग 2. वक्र।

"सड़क को वक्र करने के लिए, बस वक्र रेखा के केंद्र रेखा की स्थिति को बदल दें ... स्क्रीन के नीचे से शुरू होकर, बाएं या दाएं मार्ग के केंद्र की शिफ्ट की मात्रा धीरे-धीरे बढ़ जाती है । "

• बाएँ मुड़ने वाले वक्रों के लिए ऋणात्मक
• सही मोड़ घटता के लिए सकारात्मक
• चिकनी घटता के लिए कम
• तेज घटता के लिए और अधिक

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);
}

अद्यतन में परिवर्तन () विधि

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

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

वक्र प्रतिपादन

• x द्वारा प्रत्येक खंड के प्रक्षेपण p1 को स्थानांतरित करें
• x + dx द्वारा प्रत्येक सेगमेंट के प्रोजेक्शन पी 2 को शिफ्ट करें
• dx द्वारा अगले खंड के लिए x बढ़ाएँ

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;

  ...
}

लंबन स्क्रॉलिंग पृष्ठभूमि

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);

निष्कर्ष