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);
  });