Top Banner
Sprint - Exciting Insights from Translating an Old Videogame to JavaScript Norbert Kehrer ViennaJS Meetup, March 30, 2016
36

Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Apr 15, 2017

Download

Technology

norbert_kehrer
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Sprint - Exciting Insights

from Translating an Old

Videogame to JavaScript

Norbert Kehrer

ViennaJS Meetup, March 30, 2016

Page 2: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

„Sprint“ is a primitive car-racing game,

but it holds interesting aspects

Atari 1976: Sprint 2

Arcade machine

Very limited hardware

Black-and-white graphics

Many sequels

Page 3: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

This is what Sprint looks like

Page 4: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Fun with Sprint

Make a browser game

Make it 3D

Understand the car AI

Design new levels

Use the methods in other projects

Page 5: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Fun with Sprint

Make a browser game

Make it 3D

Understand the car AI

Design new levels

Use the methods in other projects

Page 6: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

The Sprint arcade machine is based on the

6502 microprocessor

ROM: Program and 12 race tracks

RAM 128 bytes

Screen RAM 32 x 28 6502

Special-purpose video

hardware

Game logic Video hardware

Page 7: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Original 6502 code translated to JavaScript

makes up a browser game

ROM: program

and 12 race tracks

RAM 128 bytes

Screen memory 32 x 28 6502

Special-purpose video

hardware

Game logic Video hardware

JavaScript

program

JS simulator of the

video hardware

Browser game

Page 8: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Fun with Sprint

Make a browser game

Make it 3D

Understand the car AI

Design new levels

Use the methods in other projects

Page 9: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Alternative interpretation of the game state

and screen memory makes it a 3D game

Little

Cubes

3D Objects

Camera

Page 10: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Fun with Sprint

Make a browser game

Make it 3D

Understand the car AI

Design new levels

Use the methods in other projects

Page 11: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Atari‘s patented method from 1976 ...

Page 12: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

... uses direction vectors

Page 13: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Compare the car´s current direction with

the cell´s direction guidance vector...

Page 14: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

... and steer a little bit in that direction

Page 15: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Fun with Sprint

Make a browser game

Make it 3D

Understand the car AI

Design new levels

Use the methods in other projects

Page 16: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Sprint contains twelve tediously

hand-crafted race tracks

Page 17: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Designing new Sprint levels is a lot of work

Design the race track itself

Define all those direction vectors

Test it

Page 18: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Automation is a quite hard robotics problem

Design the race track itself

Define all those direction vectors

Test it

Automatically

by using the

potential field

method

Page 19: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Concepts of the potential field method

Potential field

Vector field

Gradient field

Page 20: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Functions

x

y = f(x)

Page 21: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Scalar fields (potential fields)

1 5

9

13

17

21

25

29

R1

R7

R13

R19

R25

R31

-450

-400

-350

-300

-250

-200

-150

-100

-50

0

z = f(x, y)

Page 22: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Vector fields

x

y z = f (x, y)

Page 23: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

The gradient field indicates the direction of

the steepest slope

Source: „Kurs: Mathematik für Anwender (Osnabrück 2011-2012)“

Page 24: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Robot path planing by finding an adequate

potential field

Source: Diemke: „Pfadplanung mit harmonischen

Potentialfeldern“

Page 25: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Sprint levels are gradient fields of

„Bobsled tracks“

Page 26: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

The lateral and downhill slope definies the

potential field

Page 27: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

The potential field of level 1

1

6

11

16

21

26

31

R1

R6

R11

R16

R21

R26

-1

-0,5

0

0,5

1

Page 28: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Applying the potential field method to Sprint

Obstacles are given (track boundaries)

Calculate a harmonic potential field („bobsled track“)

From that, calculate its gradient field

The result is the vector field for the Sprint level

Page 29: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Level 1 by the Atari Engineers

Page 30: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Level 1, automatically generated

Page 31: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

New level, automatically generated

Page 32: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

The calculation is not fast, but slow

Complex mathematics

BUT: Unbelievably simple algorithm (Gauss 1823 und

Seidel 1874)

64-bit floating-point numbers are not exact enough

BigNumber library needed

Slow also because of iteration (30 seconds per level)

Page 33: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Fun with Sprint

Make a browser game

Make it 3D

Understand the car AI

Design new levels

Use the methods in other projects

Page 34: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

You can use the potential field method

Path planning for robots

Lawn mowers

Vacuum cleaners

Robo soccer

Autonomous cars

Games with moving computer oponents

Car racing

Mario-Kart-like games

Etc.

Page 35: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Summary

Browser Sprint by code translation

3D Sprint by alternative interpretation

Patented vector fields for the car AI

Automatic level generation with the Potential Field Method

Page 36: Sprint - Exciting Insights from Translating a Classic Car Racing Game to JavaScript

Thank you !

http://members.aon.at/nkehrer/