Merge pull request #66 from SaltieRL/loadout-support

Loadout support

.gitignore

@@ -1,5 +1,6 @@
 # Editor
 .*
+*.iml
 
 # NPM
 node_modules/

docs/package.json

@@ -4,7 +4,7 @@
   "description": "Examples for the web replay viewer",
   "main": "src/index.tsx",
   "scripts": {
-    "start": "npx webpack-dev-server --inline --progress --mode development --port 4000"
+    "start": "npx webpack-dev-server --inline --progress --mode development --port 4000 --debug --output-pathinfo"
   },
   "keywords": [
     "Examples",

docs/src/components/Main.tsx

@@ -21,14 +21,15 @@ class Main extends Component<Props, State> {
   }
 
   componentDidMount() {
-    const REPLAY_ID = "9944A36A11E987D3E286C1B524E68ECC"
+    const REPLAY_ID = "80F9E0AA11E9EDD0CC415BA96B37926C"
 
     loadReplay(REPLAY_ID, true).then(([replayData, replayMetadata]) => {
       this.setState({
         options: {
           replayData,
           replayMetadata,
           clock: FPSClock.convertReplayToClock(replayData),
+          defaultLoadouts: false
         },
       })
     })

docs/webpack.config.js

@@ -51,4 +51,5 @@ module.exports = {
       },
     }),
   ],
+  devtool: "source-map"
 }

package.json

@@ -45,7 +45,9 @@
   "dependencies": {
     "lodash.debounce": "^4.0.8",
     "moment": "^2.24.0",
+    "pngjs": "^3.4.0",
     "react-full-screen": "^0.2.4",
+    "rl-loadout-lib": "^0.3.0",
     "styled-components": "^4.4.1"
   },
   "devDependencies": {

src/builders/GameBuilder.ts

@@ -15,20 +15,18 @@ export interface GameBuilderOptions {
   replayMetadata: ReplayMetadata
   clock: FPSClock
   loadingManager?: LoadingManager
+  defaultLoadouts: boolean
 }
 
 const defaultGameBuilder = async ({
   clock,
   replayData,
   replayMetadata,
   loadingManager,
+  defaultLoadouts
 }: GameBuilderOptions) => {
-  const { names: playerNames, colors } = replayData
-  const players = playerNames.map((name, index) => {
-    const isOrangeTeam = colors[index]
-    return { name, isOrangeTeam }
-  })
-  const sceneManager = await defaultSceneBuilder(players, loadingManager)
+  const players = replayMetadata.players
+  const sceneManager = await defaultSceneBuilder(players, loadingManager, defaultLoadouts)
   defaultAnimationBuilder(replayData, sceneManager.players, sceneManager.ball)
   DataManager.init({ replayData, replayMetadata })
   CameraManager.init()

src/builders/SceneBuilder.ts

@@ -1,16 +1,16 @@
-import { LoadingManager, Scene } from "three"
-
-import GameFieldAssets from "../loaders/scenes/GameFieldAssets"
-import SceneManager from "../managers/SceneManager"
-import { buildBall } from "./ball/buildBall"
-import { buildPlayfield } from "./field/buildPlayfield"
-import { buildCarGroup } from "./player/buildCarGroup"
-import { addLighting } from "./scene/addLighting"
-
-interface Player {
-  name: string
-  isOrangeTeam: boolean
-}
+import { Cache, LoadingManager, Scene } from 'three'
+
+import GameFieldAssets from '../loaders/scenes/GameFieldAssets'
+import SceneManager from '../managers/SceneManager'
+import { buildBall } from './ball/buildBall'
+import { buildPlayfield } from './field/buildPlayfield'
+import { addLighting } from './scene/addLighting'
+import { ExtendedPlayer } from '../models/ReplayMetadata';
+import { loadRlLoadout } from '../loaders/storage/loadRlLoadout';
+import { RocketAssetManager, RocketConfig, TextureFormat } from 'rl-loadout-lib';
+import { buildRocketLoadoutGroup } from './player/buildRocketLoadoutScene';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
 
 /**
  * @description The sole purpose of this function is to initialize and tie together all of the
@@ -19,21 +19,39 @@ interface Player {
  * required game assets.
  */
 const defaultSceneBuilder = async (
-  playerInfo: Player[],
-  loadingManager?: LoadingManager
+  playerInfo: ExtendedPlayer[],
+  loadingManager?: LoadingManager,
+  defaultLoadouts?: boolean
 ): Promise<SceneManager> => {
   const scene = new Scene()
 
+  // Enabled caching used by three's loaders
+  Cache.enabled = true
+
   if (loadingManager) {
     GameFieldAssets.loadingManager = loadingManager
   }
+
+  const gltfLoader = new GLTFLoader()
+  const dracoLoader = new DRACOLoader()
+  dracoLoader.setDecoderPath('/draco/')
+  gltfLoader.setDRACOLoader(dracoLoader)
+
+  const config = new RocketConfig({
+    gltfLoader,
+    loadingManager,
+    textureFormat: TextureFormat.PNG,
+    useCompressedModels: true
+  })
+  const manager = new RocketAssetManager(config)
+  const bodyPromises = playerInfo.map(player => loadRlLoadout(manager, player, defaultLoadouts))
+
   await GameFieldAssets.load()
+  const bodies = await Promise.all(bodyPromises)
 
   addLighting(scene)
   const field = buildPlayfield(scene)
-  const players = playerInfo.map(({ name, isOrangeTeam }) =>
-    buildCarGroup(scene, { playerName: name, isOrangeTeam })
-  )
+  const players = bodies.map(value => buildRocketLoadoutGroup(scene, value))
   const ball = buildBall(scene)
 
   return SceneManager.init({

src/builders/player/buildRocketLoadoutScene.ts

@@ -0,0 +1,19 @@
+import { BodyModel } from 'rl-loadout-lib';
+import { ExtendedPlayer } from '../../models/ReplayMetadata';
+import { getCarName, getGroupName } from '../utils/playerNameGetters';
+import { Group, Scene } from 'three';
+import { generateSprite } from './generateSprite';
+import PlayerManager from '../../managers/models/PlayerManager';
+
+export function buildRocketLoadoutGroup(scene: Scene, {body, player}: { body: BodyModel; player: ExtendedPlayer }) {
+  body.scene.name = getCarName(player.name)
+
+  // Build sprite and camera container (for position)
+  const group = new Group()
+  group.name = getGroupName(player.name)
+  group.add(body.scene)
+  group.add(generateSprite(player.name, player.isOrange))
+
+  scene.add(group)
+  return new PlayerManager(player.name, player.isOrange, group)
+}