textures!

README.md

@@ -16,3 +16,14 @@ npm run build
 ```
 
 For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
+
+## Credits
+
+Textures all from [OpenGameArt](https://opengameart.org/). More specifically:
+
+* https://opengameart.org/content/nature-tileset
+* https://opengameart.org/content/platform-tileset-nature
+* https://opengameart.org/sites/default/files/tileset2.png
+* https://opengameart.org/content/cave-tileset-2
+
+and partially adapted to my needs.

src/Field.vue

@@ -95,26 +95,48 @@ export default {
 }
 .block {
   flex: 0 0 auto;
-  width: 30px;
+  width: 32px;
-  height: 30px;
+  height: 32px;
-  background-color: #6DA956;
+  background-color: #56F;
-  border: 1px solid transparent;
+  background-size: cover;
-}
-.block.air { background-color: #56F; }
-.block.grass { background-color: #56F; height: 28px; border-bottom: 2px solid #0A0; }
-.block.leaves { background-color: #383; }
-.block.wood { background-color: #876; }
-.block.soil { background-color: #543; }
-.block.gravel { background-color: #665; }
-.block.stone { background-color: #555; }
-.block.bedrock { background-color: #333; }
-.block.cave { background-color: #000; }
-.block.player {
-  background-image: url(./assets/dwarf.png);
   background-position: center;
   background-repeat: no-repeat;
 }
-.block:hover {
+.block.air     { background-color: #56F; }
-  border-color: rgba(255,255,255,0.2);
+.block.grass   { background-image: url(./assets/grass01.png); }
-}
+
+.block.tree_top_left     { background-image: url(./assets/tree_top_left.png); }
+.block.tree_top_middle   { background-image: url(./assets/tree_top_middle.png); }
+.block.tree_top_right    { background-image: url(./assets/tree_top_right.png); }
+
+.block.tree_crown_left   { background-image: url(./assets/tree_crown_left.png); }
+.block.tree_crown_middle { background-image: url(./assets/tree_crown_middle.png); }
+.block.tree_crown_right  { background-image: url(./assets/tree_crown_right.png); }
+
+.block.tree_trunk_left   { background-image: url(./assets/tree_trunk_left.png); }
+.block.tree_trunk_middle { background-image: url(./assets/tree_trunk_middle.png); }
+.block.tree_trunk_right  { background-image: url(./assets/tree_trunk_right.png); }
+
+.block.tree_root_left    { background-image: url(./assets/tree_root_left.png); }
+.block.tree_root_middle  { background-image: url(./assets/tree_root_middle.png); }
+.block.tree_root_right   { background-image: url(./assets/tree_root_right.png); }
+
+.block.tree_top_left_mixed     { background-image: url(./assets/tree_top_left_mixed.png); }
+.block.tree_crown_left_mixed   { background-image: url(./assets/tree_crown_left_mixed.png); }
+.block.tree_trunk_left_mixed   { background-image: url(./assets/tree_trunk_left_mixed.png); }
+.block.tree_root_left_mixed    { background-image: url(./assets/tree_root_left_mixed.png); }
+
+.block.tree_top_right_mixed    { background-image: url(./assets/tree_top_right_mixed.png); }
+.block.tree_crown_right_mixed  { background-image: url(./assets/tree_crown_right_mixed.png); }
+.block.tree_trunk_right_mixed  { background-image: url(./assets/tree_trunk_right_mixed.png); }
+.block.tree_root_right_mixed   { background-image: url(./assets/tree_root_right_mixed.png); }
+
+.block.soil    { background-image: url(./assets/soil01.png); }
+.block.soil_gravel { background-image: url(./assets/soil_gravel01.png); }
+.block.stone_gravel { background-color: #444; /* background-image: url(./assets/soil_gravel01.png) */; }
+.block.stone   { background-image: url(./assets/rock.png); }
+.block.bedrock { background-image: url(./assets/bedrock.png); }
+.block.cave    { background-color: #000; }
+.block.player  { background-image: url(./assets/dwarf.png); }
+.block:hover   { filter: brightness(1.4); }
 </style>

src/level/def.js

@@ -1,10 +1,36 @@
 export const type = {
   air: {type: 'air', hp: 0, walkable: true},
-  grass: {type: 'grass', hp: 1, walkable: true},
+  grass: {type: 'grass', hp: 1, walkable: false},
-  leaves: {type: 'leaves', hp: 1, walkable: true},
+
-  wood: {type: 'wood', hp: 5, walkable: true},
+  tree_top_left: {type: 'tree_top_left', hp: 5, walkable: true},
+  tree_top_middle: {type: 'tree_top_middle', hp: 5, walkable: true},
+  tree_top_right: {type: 'tree_top_right', hp: 5, walkable: true},
+
+  tree_crown_left: {type: 'tree_crown_left', hp: 5, walkable: true},
+  tree_crown_middle: {type: 'tree_crown_middle', hp: 5, walkable: true},
+  tree_crown_right: {type: 'tree_crown_right', hp: 5, walkable: true},
+
+  tree_trunk_left: {type: 'tree_trunk_left', hp: 5, walkable: true},
+  tree_trunk_middle: {type: 'tree_trunk_middle', hp: 5, walkable: true},
+  tree_trunk_right: {type: 'tree_trunk_right', hp: 5, walkable: true},
+
+  tree_root_left: {type: 'tree_root_left', hp: 5, walkable: true},
+  tree_root_middle: {type: 'tree_root_middle', hp: 5, walkable: true},
+  tree_root_right: {type: 'tree_root_right', hp: 5, walkable: true},
+
+  tree_top_left_mixed: {type: 'tree_top_left_mixed', hp: 5, walkable: true},
+  tree_crown_left_mixed: {type: 'tree_crown_left_mixed', hp: 5, walkable: true},
+  tree_trunk_left_mixed: {type: 'tree_trunk_left_mixed', hp: 5, walkable: true},
+  tree_root_left_mixed: {type: 'tree_root_left_mixed', hp: 5, walkable: true},
+
+  tree_top_right_mixed: {type: 'tree_top_right_mixed', hp: 5, walkable: true},
+  tree_crown_right_mixed: {type: 'tree_crown_right_mixed', hp: 5, walkable: true},
+  tree_trunk_right_mixed: {type: 'tree_trunk_right_mixed', hp: 5, walkable: true},
+  tree_root_right_mixed: {type: 'tree_root_right_mixed', hp: 5, walkable: true},
+
   soil: {type: 'soil', hp: 2, walkable: false},
-  gravel: {type: 'gravel', hp: 5, walkable: false},
+  soil_gravel: {type: 'soil_gravel', hp: 5, walkable: false},
+  stone_gravel: {type: 'stone_gravel', hp: 5, walkable: false},
   stone: {type: 'stone', hp: 10, walkable: false},
   bedrock: {type: 'bedrock', hp: 25, walkable: false},
   cave: {type: 'cave', hp: 0, walkable: true},
@@ -12,7 +38,7 @@ export const type = {
 }
 
 export const level = {
-  peak: 24,
+  treeTop: 24,
   ground: 28,
   rock: 32,
   underground: 48,
@@ -20,10 +46,10 @@ export const level = {
 }
 
 export const probability = {
-  tree: 0.1,
+  tree: 0.2,
   soil_hole: 0.3,
   soil_gravel: 0.2,
-  rock_gravel: 0.1,
+  stone_gravel: 0.1,
   cave: 0.5,
   fray: 0.4
 }

src/level/first-iteration.js

@@ -17,7 +17,10 @@ export default class BlockGen {
     if (level < L.peak) return this.air()
 
     const r = this.rand(level, column)
-    if (level < L.ground) return this.treeTop(r)
+    if (level < L.ground) {
+      if (level === L.treeTop) return this.treeTop(r)
+      return this.air()
+    }
     if (level < L.rock) return this.ground(r)
     if (level < L.underground) return this.rock(r)
     return this.underground(r, above, before, level - L.underground)
@@ -30,19 +33,19 @@ export default class BlockGen {
 
   // returns mostly air, but sometimes starts a tree
   treeTop (r) {
-    if (r < P.tree) return T.wood
+    if (r < P.tree) return T.tree_top_middle
     return T.air
   }
 
   // returns mostly soil and grass, sometimes gravel and sometimes air
   ground (r) {
-    if (r < P.soil_gravel) return T.gravel
+    if (r < P.soil_gravel) return T.soil_gravel
     return T.soil
   }
 
   // returns mostly stones, sometimes gravel
   rock (r) {
-    return r < P.rock_gravel ? T.gravel : T.stone
+    return r < P.stone_gravel ? T.stone_gravel : T.stone
   }
 
   // return mostly bedrock, sometimes caves, depending on the level

src/level/second-iteration.js

@@ -17,22 +17,46 @@ export default class BlockExt {
   }
 
   trees (r, i, row, previousRow, level) {
-    if (row[i] === T.wood && previousRow[i] === T.air) {
+    const max = row.length - 1
-      if (row[i - 1] === T.air) row[i - 1] = T.leaves
+
-      if (row[i + 1] === T.air) row[i + 1] = T.leaves
+    if (row[i] === T.tree_top_middle) {
-      previousRow[i] = T.leaves
+      if (i) {
-    } else if (previousRow[i] === T.wood) {
+        if (row[i - 1] === T.tree_top_right) row[i - 1] = T.tree_top_left_mixed
-      row[i] = T.wood
+        else row[i - 1] = T.tree_top_left
-      if (row[i - 1] === T.wood) row[i - 1] = T.air
+      }
+      if (i < max) row[i + 1] = T.tree_top_right
+
+    } else if (previousRow[i] === T.tree_top_middle) {
+      row[i] = T.tree_crown_middle
+      if (i) {
+        if (row[i - 1] === T.tree_crown_right) row[i - 1] = T.tree_crown_left_mixed
+        else row[i - 1] = T.tree_crown_left
+      }
+      if (i < max) row[i + 1] = T.tree_crown_right
+    } else if (previousRow[i] === T.tree_crown_middle) {
+      row[i] = T.tree_trunk_middle
+      if (i) {
+        if (row[i - 1] === T.tree_trunk_right) row[i - 1] = T.tree_trunk_left_mixed
+        else row[i - 1] = T.tree_trunk_left
+      }
+      if (i < max) row[i + 1] = T.tree_trunk_right
+    } else if (previousRow[i] === T.tree_trunk_middle) {
+      row[i] = T.tree_root_middle
+      if (i) {
+        if (row[i - 1] === T.tree_root_right) row[i - 1] = T.tree_root_left_mixed
+        else row[i - 1] = T.tree_root_left
+      }
+      if (i < max) row[i + 1] = T.tree_root_right
     }
   }
 
   ground (r, i, row, previousRow) {
+    const tree_parts = [T.tree_root_left, T.tree_root_middle, T.tree_root_right]
     if (previousRow[i] === T.air) {
       if (r < P.soil_hole) row[i] = T.air
       if (row[i] === T.soil) row[i] = T.grass
-    } else if (previousRow[i] === T.wood && row[i - 1] === T.grass) {
+    } else if (tree_parts.indexOf(previousRow[i]) >= 0) {
-      row[i] = T.wood
+      if (row[i] === T.soil) row[i] = T.grass
     }
   }