Establishing the Development Workflow (#15)

Squashed Merge that includes these additions and changes * simplify .gitignore * Add common webpack config, placeholder dirs and files * Align approach with RW's TS approach. Fix scripts to use webpack configs * refactor webpack config, create canvas in index * including prod webpack config in updates * Adapt start scene snippet into Class * Capture camera, env into StartScene class * convert from class to component. Export createStartScene * Add landing page markup * Tweak landing page styles and markup * tweak CSS * remove source map from prod builds * remove devtool (sourcemap) option * Tighten up import statements to use tree-shaking Before: 8.91 MiB After: 3.11 MiB * Change to preview v5 of BJS packages
jelster · Feb 12, 2021 · 53c6a03 · 53c6a03
1 parent f05519a
commit 53c6a03
Show file tree

Hide file tree

Showing 13 changed files with 6,284 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+dist/
+# Dependency directories
+node_modules/
diff --git a/assets/textures/distortion.png b/assets/textures/distortion.png
diff --git a/assets/textures/rock.png b/assets/textures/rock.png
diff --git a/assets/textures/rockn.png b/assets/textures/rockn.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "space-truckers",
+  "version": "0.0.1",
+  "description": "A game built in BabylonJS. Companion to book",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "npx webpack serve --config webpack.dev.js",
+    "build": "npx webpack --config webpack.prod.js",
+    "lint": "npx eslint"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jelster/space-truckers.git"
+  },
+  "keywords": [
+    "BabylonJS",
+    "Game"
+  ],
+  "author": "Josh Elster",
+  "license": "BSD-3-Clause",
+  "bugs": {
+    "url": "https://github.com/jelster/space-truckers/issues"
+  },
+  "homepage": "https://github.com/jelster/space-truckers#readme",
+  "dependencies": {},
+  "devDependencies": {
+    "@babylonjs/core": "^5.0.0-alpha.9 <= 5.0.0",
+    "@babylonjs/gui": "^5.0.0-alpha.9 <= 5.0.0",
+    "@babylonjs/inspector": "^5.0.0-alpha.9 <= 5.0.0",
+    "@babylonjs/loaders": "^5.0.0-alpha.9 <= 5.0.0",
+    "@babylonjs/materials": "^5.0.0-alpha.9 <= 5.0.0",
+    "@babylonjs/post-processes": "^5.0.0-alpha.9 <= 5.0.0",
+    "@babylonjs/procedural-textures": "^5.0.0-alpha.9 <= 5.0.0",
+    "@babylonjs/serializers": "^5.0.0-alpha.9 <= 5.0.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "eslint": "^7.18.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^4.5.1",
+    "source-map-loader": "^2.0.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.17.0",
+    "webpack-cli": "^4.4.0",
+    "webpack-dev-server": "^3.11.2",
+    "webpack-merge": "^5.7.3"
+  }
+}
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,93 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>Space-Truckers: The Video Game!</title>
+  <style>
+    * {
+      font-family: sans-serif;
+    }
+    html,
+    body {
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+    }
+
+    canvas {
+      width: 100%;
+      height: 100%;
+      touch-action: none;
+    }
+
+    #pageContainer {      
+      position: relative;       
+      background-color: transparent;
+      margin: 10px;
+      padding: 17px;
+      border: solid white;
+      border-radius: 7px;
+      color: brown;
+      text-align: center;
+
+    }
+
+    #landingPageContainer {     
+      width: 100%;
+      height: 100%;
+    }
+
+    #hero {
+      height: 600px;
+      background: url('space-truckers-landing-logo.jpg') center center transparent no-repeat;
+      background-size: cover;
+      opacity: 0.68;
+    }
+
+    #ctaRow,
+    #footer {
+      margin-top: 10px;
+      padding-bottom:7px;
+    }
+
+    #ctaRow button {
+      font-size: 36pt;
+      padding: 7px 9px;
+      margin: 5px 7px;
+      background: brown;
+      border-radius: 11px;
+      color: white;
+      cursor: pointer;
+    }
+
+    .background-canvas {
+      position: absolute;
+      top: 0;
+      left: auto;
+      z-index: -10;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="pageContainer">
+    <h1>Space-Truckers: The Video Game</h1>
+    <div id="landingPageContainer">
+      <div id="hero">
+      </div>
+      <div id="ctaRow">
+        <button>Launch</button>
+      </div>
+      <div id="footer">
+        Copyright Notice: See <a href="//github.com/jelster/space-truckers/LICENSE">here</a> for license and copyright
+        info.
+      </div>
+    </div>
+  </div>
+
+</body>
+
+</html>
diff --git a/public/space-truckers-landing-logo.jpg b/public/space-truckers-landing-logo.jpg
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,17 @@
+import { Engine } from "@babylonjs/core/Engines/engine";
+import createStartScene from "./startscene";
+const CanvasName = "index-canvas";
+
+let canvas = document.createElement("canvas");
+canvas.id = CanvasName;
+
+canvas.classList.add("background-canvas");
+document.body.appendChild(canvas);
+
+let eng = new Engine(canvas, true, null, true);
+let startScene = createStartScene(eng);
+eng.runRenderLoop(() => {
+    startScene.scene.render();
+});
+
+//canvas.classList.remove("background-canvas");
diff --git a/src/startscene.js b/src/startscene.js
@@ -0,0 +1,193 @@
+import { MeshBuilder } from "@babylonjs/core/Meshes/meshBuilder"
+import { Color3 } from "@babylonjs/core/Maths/math.color"
+import { Vector3 } from "@babylonjs/core/Maths/math.vector"
+import { Texture } from "@babylonjs/core/Materials/Textures/texture"
+import { PointLight } from "@babylonjs/core/Lights/pointLight"
+import { Scene } from "@babylonjs/core/scene"
+import { StandardMaterial } from "@babylonjs/core/Materials/standardMaterial"
+import { TrailMesh } from "@babylonjs/core/Meshes/trailMesh"
+import { Scalar } from "@babylonjs/core/Maths/math.scalar"
+import { GlowLayer } from "@babylonjs/core/Layers/glowLayer"
+import { Animation } from "@babylonjs/core/Animations/animation"
+import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
+import { StarfieldProceduralTexture } from "@babylonjs/procedural-textures/starfield/starfieldProceduralTexture";
+
+// imported for side-effect only
+import "@babylonjs/core/Helpers/sceneHelpers"
+
+import distortTexture from "../assets/textures/distortion.png";
+import rockTextureN from "../assets/textures/rockn.png";
+import rockTexture from "../assets/textures/rock.png";
+
+function createStar(scene) {
+    let starDiam = 16;
+    let star = MeshBuilder.CreateSphere("star", { diameter: starDiam, segments: 128 }, scene);
+    let mat = new StandardMaterial("starMat", scene);
+    star.material = mat;
+    mat.emissiveColor = new Color3(0.37, 0.333, 0.11);
+    mat.diffuseTexture = new Texture(distortTexture, scene);
+    mat.diffuseTexture.level = 1.8;
+    star.rotation = Vector3.Zero();
+
+    return star;
+}
+
+function createPlanet(opts, scene) {
+    let planet = MeshBuilder.CreateSphere(opts.name, { diameter: 1 }, scene);
+    let mat = new StandardMaterial(planet.name + "-mat", scene);
+    mat.diffuseColor = mat.specularColor = mat.emissiveColor = opts.color;
+    mat.specularPower = 0;
+    if (opts.rocky === true) {
+        mat.bumpTexture = new Texture(rockTextureN, scene);
+        mat.diffuseTexture = new Texture(rockTexture, scene);
+    }
+    else {
+        mat.diffuseTexture = new Texture(distortTexture, scene);
+    }
+
+    planet.material = mat;
+    planet.scaling.setAll(opts.scale);
+    planet.position.x = opts.posRadius * Math.sin(opts.posRadians);
+    planet.position.z = opts.posRadius * Math.cos(opts.posRadians);
+    planet.orbitOptions = opts;
+    planet.orbitAnimationOvserver = createAndStartOrbitAnimation(planet, scene);
+
+    return planet;
+}
+
+function setupEnvironment(scene) {
+    let starfieldPT = new StarfieldProceduralTexture("starfieldPT", 512, scene);
+    starfieldPT.coordinatesMode = Texture.FIXED_EQUIRECTANGULAR_MIRRORED_MODE;
+    starfieldPT.darkmatter = 1.5;
+    starfieldPT.distfading = 0.75;
+    let envOptions = {
+        skyboxSize: 512,
+        createGround: false,
+        skyboxTexture: starfieldPT
+    };
+    let light = new PointLight("starLight", Vector3.Zero(), scene);
+    light.intensity = 2;
+    light.diffuse = new Color3(1, 1, 0);
+    light.specular = new Color3(0.98, 1, 0);
+    let env = scene.createDefaultEnvironment(envOptions);
+    return env;
+}
+
+function populatePlanetarySystem(scene) {
+    let planets = [];
+    let hg = {
+        name: "hg",
+        posRadians: Scalar.RandomRange(0, 2 * Math.PI),
+        posRadius: 14,
+        scale: 2,
+        color: new Color3(0.45, 0.33, 0.18),
+        rocky: true
+    };
+    let aphro = {
+        name: "aphro",
+        posRadians: Scalar.RandomRange(0, 2 * Math.PI),
+        posRadius: 35,
+        scale: 3.5,
+        color: new Color3(0.91, 0.89, 0.72),
+        rocky: true
+    };
+    let tellus = {
+        name: "tellus",
+        posRadians: Scalar.RandomRange(0, 2 * Math.PI),
+        posRadius: 65,
+        scale: 3.75,
+        color: new Color3(0.17, 0.63, 0.05),
+        rocky: true
+    };
+    let ares = {
+        name: "ares",
+        posRadians: Scalar.RandomRange(0, 2 * Math.PI),
+        posRadius: 100,
+        scale: 3,
+        color: new Color3(0.55, 0, 0),
+        rocky: true
+    };
+    let zeus = {
+        name: "zeus",
+        posRadians: Scalar.RandomRange(0, 2 * Math.PI),
+        posRadius: 140,
+        scale: 6,
+        color: new Color3(0, 0.3, 1),
+        rocky: false
+    };
+    planets.push(createPlanet(hg, scene));
+    planets.push(createPlanet(aphro, scene));
+    planets.push(createPlanet(tellus, scene));
+    planets.push(createPlanet(ares, scene));
+    planets.push(createPlanet(zeus, scene));
+    return planets;
+}
+
+function createSpinAnimation() {
+    let orbitAnim = new Animation("planetspin", "rotation.y", 30, Animation.ANIMATIONTYPE_FLOAT, Animation.ANIMATIONLOOPMODE_CYCLE);
+    const keyFrames = [];
+    keyFrames.push({
+        frame: 0,
+        value: 0
+    });
+
+    keyFrames.push({
+        frame: 60,
+        value: Scalar.TwoPi
+    });
+
+    orbitAnim.setKeys(keyFrames);
+    return orbitAnim;
+}
+
+function createAndStartOrbitAnimation(planet, scene) {
+    const Gm = 6672.59 * 0.07;
+    const opts = planet.orbitOptions;
+    const rCubed = Math.pow(opts.posRadius, 3);
+    const period = Scalar.TwoPi * Math.sqrt(rCubed / Gm);
+    const v = Math.sqrt(Gm / opts.posRadius);
+    const w = v / period;
+    const circum = Scalar.TwoPi * opts.posRadius;
+    let angPos = opts.posRadians;
+
+    planet.computeWorldMatrix(true);
+    let planetTrail = new TrailMesh(planet.name + "-trail", planet, scene, .1, circum, true);
+    let trailMat = new StandardMaterial(planetTrail.name + "-mat", scene);
+    trailMat.emissiveColor = trailMat.specularColor = trailMat.diffuseColor = opts.color;
+    planetTrail.material = trailMat;
+
+    let preRenderObsv = scene.onBeforeRenderObservable.add(sc => {
+        planet.position.x = opts.posRadius * Math.sin(angPos);
+        planet.position.z = opts.posRadius * Math.cos(angPos);
+        angPos = Scalar.Repeat(angPos + w, Scalar.TwoPi);
+    });
+    return preRenderObsv;
+}
+
+export default function createStartScene(engine) {
+    let that = {};
+    let scene = that.scene = new Scene(engine);
+    let camAlpha = 0,
+        camBeta = 1.26,
+        camDist = 350,
+        camTarget = new Vector3(0, 0, 0);
+    let env = setupEnvironment(scene);
+    let star = that.star = createStar(scene);
+    let planets = that.planets = populatePlanetarySystem(scene);
+    let camera = that.camera = new ArcRotateCamera("camera1", camAlpha, camBeta, camDist, camTarget, scene);
+    camera.attachControl(true);
+
+    let spinAnim = createSpinAnimation();
+    star.animations.push(spinAnim);
+    scene.beginAnimation(star, 0, 60, true);
+
+    let glowLayer = new GlowLayer("glowLayer", scene);
+
+    planets.forEach(p => {
+        glowLayer.addExcludedMesh(p);
+        p.animations.push(spinAnim);
+        scene.beginAnimation(p, 0, 60, true, Scalar.RandomRange(0.1, 3));
+    });
+
+    return that;
+}