Can render map

Limenius · Dec 2, 2017 · 2048e20 · 2048e20
1 parent 1179ed8
commit 2048e20
Show file tree

Hide file tree

Showing 7 changed files with 105 additions and 8 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,5 @@
+{
+  "presets": ["env"],
+  "plugins": ["transform-object-rest-spread"]
+}
+
diff --git a/assets/tile.png b/assets/tile.png
diff --git a/assets/wall.png b/assets/wall.png
diff --git a/index.html b/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <div id="game"></div>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -15,7 +15,10 @@
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.0.3",
     "babel-loader": "^7.1.2",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
+    "babel-preset-env": "^1.6.1",
     "clean-webpack-plugin": "^0.1.17",
+    "copy-webpack-plugin": "^4.2.3",
     "eslint": "^4.12.1",
     "eslint-config-react-app": "^2.0.1",
     "eslint-plugin-flowtype": "^2.39.1",

diff --git a/src/index.js b/src/index.js
@@ -1,11 +1,84 @@
+import * as PIXI from "pixi.js";
 const map = `
-******************
-*................*
-*................*
-*................*
-*................*
-*................*
-******************
+********************
+*..................*
+*..................*
+*..................*
+*..................*
+*..................*
+********************
 `;
 
+function initScene() {
+  const renderer = PIXI.autoDetectRenderer(1000, 1000, null, {
+    noWebGl: true,
+    antialias: false
+  });
+  document.getElementById("game").appendChild(renderer.view);
+  return {
+    map: map,
+    sprites: {},
+    textures: {},
+    renderer,
+    stage: new PIXI.Container()
+  };
+}
+
+function loadGraphics() {
+  return new Promise((resolve, reject) => {
+    PIXI.loader
+      .add("tile", "./img/tile.png")
+      .add("wall", "./img/wall.png")
+      .load((loader, resources) => {
+        resolve({ loader, resources });
+      });
+  });
+}
+
+function start() {
+  const scene = initScene();
+  Promise.all([loadGraphics()]).then(([{ loader, resources }]) => {
+    onLoadResources(loader, resources, scene);
+  });
+}
+
+function onLoadResources(loader, resources, scene) {
+  const terrain = ['tile', 'wall'];
+  const textures = terrain.reduce((acc, name) => {
+    acc[name] = new PIXI.Texture(resources[name].texture, new PIXI.Rectangle(0, 0, 50, 50))
+    return acc
+  }, {});
+  render({
+    ...scene,
+    textures
+  });
+}
+
+function render(scene) {
+  const rows = scene.map.split("\n").filter(row => row !== '');
+  rows.map((row, idx) => {
+    console.log(row.split(""));
+    row.split("").map((tileChar, column) => {
+      let tile;
+      switch (tileChar) {
+        case ".":
+          tile = new PIXI.Sprite(scene.textures.tile);
+          break;
+        case "*":
+          tile = new PIXI.Sprite(scene.textures.wall);
+          break;
+        default:
+          throw `Unrecognized tile char ${tileChar}`;
+      }
+      tile.position.x = column * 50;
+      tile.position.y = idx * 50;
+      scene.stage.addChild(tile);
+    });
+  });
+  scene.renderer.render(scene.stage);
+  var result = "abc".repeat(2);
+}
+
 console.log(map);
+
+start();
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,20 +1,26 @@
 const path = require("path");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 var config = {
   entry: "./src/index.js",
   output: {
     filename: "bundle.js",
     path: path.resolve(__dirname, "./public")
   },
+  devtool: "cheap-module-eval-source-map",
   devServer: {
     contentBase: "./dist"
   },
   plugins: [
+    new CopyWebpackPlugin([
+      { from: 'assets/', to: 'img/' },
+    ]),
     new CleanWebpackPlugin(["public"]),
     new HtmlWebpackPlugin({
-      title: "Scavenger"
+      title: "Scavenger",
+      template: "index.html"
     })
   ],
   module: {