{% extends "layout.html" %} {% block title %}HWP Build helper{% endblock %} {% block head %} {% endblock %} {% block content %}

Drawing and editing of OpenXcoms 4-Tile units can be cumbersome
This little tool helps.

First Step


Second Step

Edit the template. in your favorite image editor.

Third Step

Upload the changed template and split the template in a correct spritesheet


Done

download spritesheet and use it



<p>Sample text here...</p>
{% endblock %} {% block jsfooter %} $("#getimg").select2({dropdownAutoWidth: 'true', placeholder:"Select a Unit"}) function hwppreviewdirection(){ $(".cornerhwp").css("background-color","blue") if (hwpanimmaxy>1){ $("#hwpc"+hwpanimy).css("background-color","red") } } $(".cornerhwp").on("click",function(e){ hwpanimy=Math.min(parseInt($(e.target).prop("id").substr(4,1)),hwpanimmaxy) hwppreviewdirection() }) $("#hwppreview").on("click",function(e){ hwpanimx=Math.abs(1-Math.min(1,hwpanimx)) }) $("#getimg").on("change",function(){ hwpval=$("#getimg").val() hwpanimx=1; hwpanimmaxx=parseInt(hwpval.split("~")[3])/65-1; hwpanimmaxy=parseInt(hwpval.split("~")[4])/57; hwpanimy=Math.min(hwpanimy,hwpanimmaxy) hwppreviewdirection() $("#hwppreviewcontainer").removeClass("hidden") $("#hwppreview").css({"background-image": 'url("static/img/hwp/'+hwpval.split("~")[2]+'.png")',"background-position":"-65px 0px"}) $("#newhwppreview").css({"background-image": 'url("static/img/hwp/'+hwpval.split("~")[2]+'.png")',"background-position":"-65px 0px"}) $("#newhwppreviewcontainer").addClass("hidden") $("#desctxt").text(hwpval.split("~")[5]) $("#hwpbuttondownload").removeClass("disabled") $("#hwpbuttondownload").prop("href","/static/img/hwp/templ_"+hwpval.split("~")[1]+".png") $("#hwpbuttondownload").prop("download","hwptemplate_"+hwpval.split("~")[1]+".png") $("div.hwpbuttonuploadcol a").removeClass("disabled") if ($("#hwpsplit").hasClass("btn-danger")){ $("#hwpsplit").prop('disabled', false).removeClass("btn-danger").removeClass("disabled").addClass("btn-success"); $("#hwpsplit span").addClass("glyphicon-play").removeClass("glyphicon-fire").text(" Split"); } }) setInterval(function () { //console.log(hwpanimx) if (hwpanimx==0){ $("#hwppreview").css({"backgroundPosition" : 0 + "px" + " " + (hwpanimy-1)*-57 + "px "}); $("#newhwppreview").css({"backgroundPosition" : 0 + "px" + " " + (hwpanimy-1)*-57 + "px "}); }else{ $("#hwppreview").css({"backgroundPosition" : hwpanimx*-65 + "px" + " " + (hwpanimy-1)*-57 + "px "}); $("#newhwppreview").css({"backgroundPosition" : hwpanimx*-65 + "px" + " " + (hwpanimy-1)*-57 + "px "}); if (hwpanimx==hwpanimmaxx){ hwpanimx=1 }else{ hwpanimx++ } } }, 100); $('#hwpbuttonupload').bootstrapFileInput(); $(document).ready(function() { if (window.File && window.FileList && window.FileReader) { $("#hwpbuttonupload").on("change",function(event){ var files = event.target.files; //FileList object var output = document.getElementById("importtext"); for (var i = 0; i < files.length; i++) { var file = files[i]; var picReader = new FileReader(); picReader.addEventListener("load", function(event) { var picFile = event.target; $("#hwptemplimage img").attr("src",picFile.result); $("#hwptoggletemplview").removeClass("disabled") $("#hwpsplit").prop('disabled', false).removeClass("btn-danger").removeClass("disabled").addClass("btn-success"); $("#hwpsplit span").addClass("glyphicon-play").removeClass("glyphicon-fire").text(" Split"); filename=file.name; }); picReader.readAsDataURL(file); } }); } else { $("#hwpbuttonupload").addClass("btn-error") } }) $("#hwptoggletemplview").on("click",function(){ $("#hwptemplimage").toggleClass("in") if ($("#hwptemplimage").hasClass("in")){ $("#hwptoggletemplview span").removeClass("glyphicon-eye-open" ).addClass("glyphicon-eye-close" ) $("#hwptoggletemplview span").text(" Hide edited template") }else{ $("#hwptoggletemplview span").removeClass("glyphicon-eye-close" ).addClass("glyphicon-eye-open" ) $("#hwptoggletemplview span").text(" Show edited template") } }) function resetstep3buttons(){ if ($("#hwpresimage").hasClass("in")){ $("#hwpshowres span").removeClass("glyphicon-eye-open" ).addClass("glyphicon-eye-close" ) $("#hwpshowres span").text(" Hide generated spritesheet") }else{ $("#hwpshowres span").removeClass("glyphicon-eye-close" ).addClass("glyphicon-eye-open" ) $("#hwpshowres span").text(" Show generated spritesheet") } if ($("#hwprestext").hasClass("in")){ $("#hwpshowtext span").removeClass("glyphicon-eye-open" ).addClass("glyphicon-eye-close" ) $("#hwpshowtext span").text(" Hide usage") }else{ $("#hwpshowtext span").removeClass("glyphicon-eye-close" ).addClass("glyphicon-eye-open" ) $("#hwpshowtext span").text(" How to use the spritesheet") } } $('#hwpsplit').click(function(e) { $("#hwpsplit").addClass("disabled"); $("#hwpsplit span").removeClass("glyphicon-play").addClass("glyphicon-cog"); $.ajax({ url:'/_hwpbuild', type: "POST", contentType:"application/json", dataType:"json", data: JSON.stringify({ fn: filename, drawrout: parseInt(hwpval.split("~")[0]), fdata: $("#hwptemplimage img").attr("src") }) }).done(function(data) { $("#hwpsplit").removeClass("disabled"); $("#hwpsplit span").removeClass("glyphicon-cog").addClass("glyphicon-play"); $("#hwpresimage img").attr("src",data["resimg"]) $("#newhwppreviewcontainer").removeClass("hidden") $("#newhwppreview").css({"background-image": 'url('+data["aniimg"]+')',"background-position":"-65px 0px"}) $("#hwpbuttondownload").removeClass("disabled") $("#hwpdownload").removeClass('disabled'); $("#hwpshowres").removeClass('disabled'); $("#hwpshowtext").removeClass('disabled'); newtext="" newtext+="\r\nextraSprites:" newtext+="\r\n - type: MYNEWUNIT.PCK" newtext+="\r\n subX: 32" newtext+="\r\n subY: 40" newtext+="\r\n width: "+data["size"][0] newtext+="\r\n height: "+data["size"][1] newtext+="\r\n files:" newtext+="\r\n 0: Resources/mymod/"+"split_"+filename.substring(0, filename.length - 4)+".png" $("#hwprestext pre").html(newtext) }).fail(function(){ $("#hwpsplit").addClass("btn-danger").addClass("disabled").removeClass("btn-success"); $("#hwpsplit span").removeClass("glyphicon-play").addClass("glyphicon-fire").text(" Failed"); $("#hwpresimage").removeClass('in'); $("#hwprestext").removeClass('in'); resetstep3buttons(); $("#hwpdownload").addClass('disabled'); $("#hwpshowres").addClass('disabled'); $("#hwpshowtext").addClass('disabled'); }); }); $("#hwpshowres").on("click",function(){ $("#hwpresimage").toggleClass("in") resetstep3buttons(); }); $("#hwpshowtext").on("click",function(){ $("#hwprestext").toggleClass("in") resetstep3buttons(); }); function dataURItoBlob(dataURI, dataTYPE) { var binary = atob(dataURI.split(',')[1]), array = []; for(var i = 0; i < binary.length; i++) array.push(binary.charCodeAt(i)); return new Blob([new Uint8Array(array)], {type: dataTYPE}); } $('#hwpdownload').click(function(e) { blob = dataURItoBlob($("#hwpresimage img").attr("src"),"image/png;"); saveAs(blob, "split_"+filename.substring(0, filename.length - 4)+".png"); }); {% endblock %} {% block help %} this tool makes 4 tile unit building easy .. more documentation? {% endblock %}