Merge pull request #154 from ReneeIbeji/Preview-Image-Changes

Issue #153 Added attributes for sheet definitions to customise preview image more

scripts/generate_html.js

@@ -9,9 +9,23 @@ function generateListHTML(json) {
 
   var requiredSexes = [];
   var previewRow = 10;
+  var previewColumn = 0;
+  var previewXOffset = 0;
+  var previewYOffset = 0;
+
   if (definition.preview_row !== undefined) {
     previewRow = definition.preview_row
   }
+  if (definition.preview_column !== undefined){
+    previewColumn = definition.preview_column;
+  }
+  if (definition.preview_x_offset !== undefined){
+    previewXOffset = definition.preview_x_offset;
+  }
+  if (definition.preview_y_offset !== undefined){
+    previewYOffset = definition.preview_y_offset;
+  }
+
   if (definition.layer_1.male !== undefined) {
     requiredSexes.push("male");
   }
@@ -55,7 +69,7 @@ function generateListHTML(json) {
         if (layerDefinition !== undefined) {
           if (sexIdx === 0) {
             const zPos = definition[`layer_${jdx}`].zPos;
-            dataFiles += "data-preview_row=" + previewRow + " data-layer_" + jdx + "_zpos=" + zPos + " ";
+            dataFiles += "data-preview_row=" + previewRow + " data-preview_column=" + previewColumn + " data-preview_x_offset=" + previewXOffset + " data-preview_y_offset=" + previewYOffset +  " data-layer_" + jdx + "_zpos=" + zPos + " ";
             const custom_animation = layerDefinition.custom_animation;
             if (custom_animation !== undefined) {
               dataFiles += `data-layer_${jdx}_custom_animation=` + custom_animation + " "

sheet_definitions/backpack.json

@@ -1,6 +1,7 @@
 {
   "name": "Backpack",
   "type_name": "backpack",
+  "preview_row": 7,
   "layer_1": {
     "zPos": 110,
     "male":     "backpack/backpack/male/",

sheet_definitions/tool_rod.json

@@ -1,6 +1,10 @@
 {
   "name" : "Rod",
   "type_name" : "weapon",
+  "preview_row" : 0,
+  "preview_column" : 0,
+  "preview_x_offset" : 304,
+  "preview_y_offset" : 24,
   "layer_1": {
     "zPos": 9,
     "custom_animation": "tool_rod",

sheet_definitions/weapon_polearm_cane.json

@@ -1,6 +1,8 @@
 {
   "name": "Cane",
   "type_name": "weapon",
+  "preview_row": 9,
+  "preview_column": 0,
   "layer_1": {
     "zPos": 140,
     "male": "weapon/polearm/cane/male/",

sheet_definitions/weapon_polearm_dragonspear.json

@@ -1,6 +1,10 @@
 {
   "name": "Dragon spear",
   "type_name": "weapon",
+  "preview_row": 0,
+  "preview_column": 0,
+  "preview_x_offset": 9,
+  "preview_y_offset": 48,
   "layer_1": {
     "zPos": 140,
     "custom_animation": "walk_128",

sheet_definitions/weapon_polearm_halberd.json

@@ -1,7 +1,8 @@
 {
   "name": "Halberd",
   "type_name": "weapon",
-  "preview_row": 17,
+  "preview_row": 8,
+  "preview_column": 0,
   "layer_1": {
     "zPos": 8,
     "male": "weapon/polearm/halberd/behind/",

sheet_definitions/weapon_polearm_longspear.json

@@ -1,6 +1,10 @@
 {
   "name": "Long spear",
   "type_name": "weapon",
+  "preview_row": 0,
+  "preview_column": 0,
+  "preview_x_offset": 13,
+  "preview_y_offset": 170,
   "layer_1": {
     "zPos": 140,
     "custom_animation": "walk_128",

sheet_definitions/weapon_polearm_scythe.json

@@ -1,6 +1,10 @@
 {
   "name": "Scythe",
   "type_name": "weapon",
+  "preview_row": 0,
+  "preview_column": 0,
+  "preview_x_offset": 11,
+  "preview_y_offset": 716,
   "layer_1": {
     "zPos": 140,
     "male": "weapon/polearm/scythe/",

sheet_definitions/weapon_polearm_spear.json

@@ -1,6 +1,8 @@
 {
   "name": "Spear",
   "type_name": "weapon",
+  "preview_row": 11,
+  "preview_column": 0,
   "layer_1": {
     "zPos": 140,
     "male": "weapon/polearm/spear/foreground/",

sheet_definitions/weapon_polearm_trident.json

@@ -1,6 +1,10 @@
 {
   "name": "Trident",
   "type_name": "weapon",
+  "preview_row": 0,
+  "preview_column": 0,
+  "preview_x_offset": 9,
+  "preview_y_offset": 38,
   "layer_1": {
     "zPos": 140,
     "custom_animation": "walk_128",

sources/chargen.js

@@ -647,16 +647,18 @@ $(document).ready(function() {
         var prevctx = prev.getContext("2d");
         var img = null;
         const previewRow = parseInt($(this).data("preview_row"));
+        const previewColumn = parseInt($(this).data("preview_column"));
+        const previewXOffset = parseInt($(this).data("preview_x_offset"));
+        const previewYOffset = parseInt($(this).data("preview_y_offset"));
         var callback = function(layers,prevctx) {
           for(index = 0; index < layers.length; index++){
             if(!images[layers[index].link]){
               return;
             }
           }
-
           try {
             layers.forEach((layer) =>{
-              prevctx.drawImage(images[layer.link], 0, previewRow * universalFrameSize, universalFrameSize, universalFrameSize, 0, 0, universalFrameSize, universalFrameSize);
+              prevctx.drawImage(images[layer.link], previewColumn * universalFrameSize + previewXOffset, previewRow * universalFrameSize + previewYOffset, universalFrameSize, universalFrameSize, 0, 0, universalFrameSize, universalFrameSize);
             });
           } catch (err) {
             console.log(err);
@@ -665,27 +667,32 @@ $(document).ready(function() {
 
         layers = []
         const previewToDraw = {};
-        previewToDraw.link = $(this).data(`layer_1_${getBodyTypeName()}`);
-        previewToDraw.zPos = $(this).data(`layer_1_zpos`);
-        layers.push(previewToDraw);
-
-        for(jdx =2; jdx < 10; jdx++){
-          if($(this).data(`layer_${jdx}_${getBodyTypeName()}`)){
-            const previewToDraw = {};
-            previewToDraw.link = $(this).data(`layer_${jdx}_${getBodyTypeName()}`);
-            previewToDraw.zPos = $(this).data(`layer_${jdx}_zpos`);
-
-            layers.push(previewToDraw);
-          } else {
-            break;
-          }
-        }    
+        const animation =  $(this).data(`layer_1_custom_animation`);
+
+        if($(this).data(`layer_1_${getBodyTypeName()}`) === undefined){
+          previewToDraw.link = $(this).data(`layer_1_${getBodyTypeName()}`);
+          previewToDraw.zPos = $(this).data(`layer_1_zpos`);
+          layers.push(previewToDraw);
+        } else{
+          for(jdx = 1; jdx < 10; jdx++){
+            if($(this).data(`layer_${jdx}_${getBodyTypeName()}`)){
+              if(animation === $(this).data(`layer_${jdx}_custom_animation`)){
+                const previewToDraw = {};
+                previewToDraw.link = $(this).data(`layer_${jdx}_${getBodyTypeName()}`);
+                previewToDraw.zPos = $(this).data(`layer_${jdx}_zpos`);
+                layers.push(previewToDraw);
+              }
+
+            } else {
+              break;
+            }
+          }    
+        }
 
         layers.sort(function(lhs, rhs) {
           return parseInt(lhs.zPos) - parseInt(rhs.zPos);
         });
-
-
+
         layers.forEach((layer) =>{
           img = getImage2(layer.link, callback, layers, prevctx);
         });